::-webkit-scrollbar {
width: 10px;
height: 10px; }

::-webkit-scrollbar-thumb {
background-color: #1791BA;
-webkit-box-shadow: inset 1px 1px 0 black,inset 0 -1px 0 black;
    border-radius: 10px;
 }
 
 html, body {
    margin: 0;
    padding: 0;
}

	body {
		padding-bottom: 60px; /* Anpassen an die Höhe deines Bottom-DIVs */
		font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
		font-size: 1rem;
		line-height: 1.6;
		background: url(gfx/clouds.jpg) no-repeat center center fixed ;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover; max-height:100%;
		display: flow-root;
	}
	h1 { font-size: clamp(1.75rem, 5vw, 2.5rem); }
	h2 { font-size: clamp(1.35rem, 3.5vw, 2rem); }
	
	.header-container {
		display: flex; /* <-- Das muss wieder AKTIV sein! */
    justify-content: space-between; /* Links, Mitte & Rechts an die Ränder verteilen */
    align-items: center; /* Vertikal mittig in den 40px Höhe ausrichten */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    z-index: 1001;
	}
	.ecke_lu {
		width: 40px;
		height: 40px;
		background: url('../gfx/ecke_lu.png');
		float: left;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.ecke_lo {
		width: 40px;
		height: 40px;
		background: url('../gfx/ecke_lo.png');
		/*float: left;*/
		box-sizing: border-box;
		display: flex;
		align-items: center;
		margin: 0;
		justify-content: center;
	}
	.ecke_ru {
		width: 40px;
		height: 40px;
		background: url('../gfx/ecke_ru.png');
		float: left;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.ecke_ro {
		width: 40px;
		height: 40px;
		background: url('../gfx/ecke_ro.png');
		float: left;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.block_u {
		height: 40px;
		text-align: center;
		color: white;
		text-shadow: 1px 1px 2px black, 0 0 1em black, 0 0 0.5em black;
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: solid 2px black;
		float: left;
		background: linear-gradient(rgb(32 33 36 / 0.5));
		padding-left:5px;
		padding-right: 5px;
	}
	.block_u_menu {
		height: 40px;
		text-align: center;
		color: white;
		text-shadow: 1px 1px 2px black, 0 0 1em black, 0 0 0.5em black;
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: solid 2px black;
		border-left: solid 2px black;
		float: left;
		background: linear-gradient(rgb(32 33 36 / 0.5));
		padding-left:5px;
		padding-right: 5px;
	}	
	.block_o {
	flex: 1;
    height: 40px;           /* Feste Höhe */
    box-sizing: border-box; /* Verhindert, dass Padding die Höhe verändert */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-shadow: 1px 1px 2px black, 0 0 1em black, 0 0 0.5em black;
    border-top: solid 2px black;
    background: linear-gradient(rgb(32 33 36 / 0.5));
    padding-left: 5px;
    padding-right: 15px;
    margin: 0;              /* Verhindert ungewollten Zeilenabstand */
}
	.block_m {
	flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-shadow: 1px 1px 2px black, 0 0 1em black, 0 0 0.5em black;
    background: linear-gradient(rgb(32 33 36 / 0.5));
    margin: 0;              /* Verhindert ungewollten Zeilenabstand */
}

.block_r {
    text-align: center;
    color: white;
    text-shadow: 1px 1px 2px black, 0 0 1em black, 0 0 0.5em black;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: solid 2px black;
    /* float: left; ENTFERNT */
    background: linear-gradient(rgb(32 33 36 / 0.5));
    padding-left: 15px;
    padding-right: 15px;
}
.block_l {
    text-align: center;
    color: white;
    text-shadow: 1px 1px 2px black, 0 0 1em black, 0 0 0.5em black;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: solid 2px black;
    /* float: left; ENTFERNT */
    background: linear-gradient(rgb(32 33 36 / 0.5));
    padding-left: 15px;
    padding-right: 15px;
}
.block_zeile {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;             /* Dehnt sich über die gesamte Breite des Inhalts von block_l aus */
    box-sizing: border-box;
}
	.top_mitte {
		text-align: center;
		margin: 0 auto;
		margin-top: 0px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 2; /* Oder feste Breite, z. B. width: 300px; */
	}
	.top_links {
		text-align: center;
		margin-top: 0px;
		margin-left: 0px;
		display: flex;
		align-items: center;
		flex: 1;
		/*justify-content: center;*/
	}
	.top_rechts {
    text-align: right;
    margin-top: 0px;
    margin-right: 0px;
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Schiebt die Kinder-Elemente ganz nach rechts */
    flex: 1;
}
	#geld_detail {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Richtet Überschrift & Tabelle rechtsbündig aus */
}
	
	.bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    display: flex;
    justify-content: space-between; /* Verteilt Links, Mitte und Rechts gleichmäßig */
    align-items: flex-end;         /* Richtet alle Elemente am unteren Rand aus */
    pointer-events: none;          /* Macht transparente Bereiche klickbar für das Hintergrundvideo */
    z-index: 1000;
}

/* WICHTIG: Damit Klicks auf deine Buttons/Inhalte in der Leiste funktionieren */
.bottom-bar > * {
    pointer-events: auto;          /* Aktiviert Klicks für die tatsächlichen Inhalte wieder */
}

/* Platzhalter für ein zukünftiges zentriertes Element */
.bottom-mitte {
    margin: 0 auto;                /* Zentriert das Element exakt in der Mitte */
}
	.menu {
		position: fixed;       /* Fixiert das Menü relativ zum Bildschirm */
		left: 0;               /* Ganz an den linken Rand kleben */
		top: 50%;              /* Schiebt den oberen Rand auf 50% der Bildschirmhöhe */
		transform: translateY(-50%); /* Zieht das Menü um die Hälfte seiner eigenen Höhe hoch (perfekte Zentrierung) */
		width: 200pt;
    
		z-index: 1000;         /* Stellt sicher, dass das Menü über anderen Elementen schwebt */
	}
	/* Standardmäßig auf großen Bildschirmen das Hamburger-Icon verstecken */
.hamburger-btn {
    display: none;
    font-size: 20px;
}

/* Hauptbereich für große Bildschirme (Desktop) */
.content-wrapper {
    display: flow-root; /* Verhindert Margin Collapse und erzwingt saubere Abstände */
    margin-left: calc(200pt + 15px);
    margin-right: 15px;
    padding-top: 55px; /* 40px Header + 15px Abstand */
    margin-bottom: 15px;
    box-sizing: border-box;
}

/* REGELN FÜR MOBILGERÄTE (Bildschirmbreite bis 768px) */
@media (max-width: 768px) {
    .panel-titel {
        display: none;
    }

    /* Hamburger-Icon im Header anzeigen */
    .hamburger-btn {
        display: inline-block;
    }

    /* Das Menü auf dem Handy anpassen */
    .menu {
        display: none;
        position: fixed;
        left: 0px;                 /* Dein gewünschter Abstand von links */
        top: 60px;                  /* Direkt unter dem Header platzieren */
        transform: none !important; /* WICHTIG: Die Zentrierung von 50% aufheben! */
        
        width: calc(100% - 60px);   /* Nutzt die Breite abzüglich des linken Abstands */
        max-height: calc(100vh - 80px); /* Verhindert Abschneiden nach unten */
        overflow-y: auto;           /* Macht das Menü scrollbar, falls es zu lang wird */
        z-index: 1000;
    }

    /* Wenn das Menü aufgerufen wird, einblenden */
    .menu.aktiv {
        display: block;
    }
	.content-wrapper {
        /* Mobil ist das Menü eingeklappt, daher nur 15px Rand links */
        margin-left: 15px; 
        margin-right: 15px;
        padding-top: 55px;
    }
	.card-wide {
        grid-column: span 1;
    }
	.chart-table-container {
        flex-direction: column !important;
    }

    .table-wrapper,
    .chart-wrapper {
        width: 100% !important;
        flex: 1 1 auto !important;
    }

    /* Tabellenzellen mobil etwas kompakter */
    .table-wrapper th, 
    .table-wrapper td {
        padding: 4px 6px !important;
        font-size: 0.9rem;
    }
}

.news a {
    color: #1791ba !important;
	font-size:12pt;
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: all 0.2s ease-in-out;
    /*white-space: nowrap;*/      /* Zwingt den Text, in einer einzigen Zeile zu bleiben */
}

/* Links im Menü (Standard-Zustand) */
.menu a {
    color: #ffffff !important;
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: all 0.2s ease-in-out;
    white-space: nowrap;      /* Zwingt den Text, in einer einzigen Zeile zu bleiben */
}

/* Optional: Icon und Text perfekt vertikal auf einer Höhe ausrichten */
.menu a i {
    display: inline-block;
    margin-right: 8px;        /* Feiner Abstand zwischen Icon und Text */
    vertical-align: middle;   /* Bündig mit der Schrift ausrichten */
}

/* Hover-Zustand: Schwarz mit Text-Schatten */
.menu a:hover {
    color: #02B311 !important;
    text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.8), 
                 0px 2px 4px rgba(0, 0, 0, 0.5);
}

.menu a:hover,
.menu a:active,
.menu a:focus,
.menu li.active > a,
.menu a.active {
    color: #02B311 !important;
    text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.8), 
                 0px 2px 4px rgba(0, 0, 0, 0.5) !important;
}

/* Stellt sicher, dass auch Icons in aktiven Links schwarz bleiben */
.menu li.active > a i,
.menu a.active i {
    color: #000000 !important;
}

.menu li > a.has-submenu {
    display: flex !important;
    align-items: center;
    width: 100%;
}
/* Pfeil im Normalzustand */
.menu li > a.has-submenu::after {
    content: '❯';
    font-size: 12px;
    font-weight: bold;
    display: inline-block;
    transition: transform 0.2s ease;
    flex-shrink: 0;
    margin-left: auto;
}

/* WICHTIG: Prüft jetzt, ob das übergeordnete LI die Klasse .open hat */
.menu li.open > a.has-submenu::after {
    transform: rotate(90deg); /* Dreht den Pfeil nach unten */
}

/* Animation definieren (leichtes Wackeln nach links und rechts) */
@keyframes icon-wackle {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(-12deg); }
    50% { transform: rotate(12deg); }
    75% { transform: rotate(-6deg); }
    100% { transform: rotate(0deg); }
}

/* Icon-Standard-Abstand */
.menu a i {
    margin-right: 8px;
    display: inline-block; /* Wichtig, damit transform/rotate funktioniert */
}

/* Bei Hover auf den Link wackelt das enthaltene Icon */
.menu a:hover i {
    animation: icon-wackle 0.4s ease-in-out;
}
/* Untermenüs standardmäßig ausblenden */
.menu ul ul {
    display: none;
    padding-left: 20px; /* Leicht einrücken für eine schöne Hierarchie */
    list-style: none;
}

/* Wenn das Untermenü geöffnet ist (geklickt wurde), anzeigen */
.menu li.open > ul {
    display: block;
}
/* Zeilenabstand für alle Haupt-Links im Menü */
.menu ul li a {
    display: inline-flex;
    align-items: center;
    padding: 10px 0;
    line-height: 1.5;
    color: #ffffff !important;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    white-space: nowrap !important;
}
.menu ul li {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Schiebt den Link nach links, Button nach rechts */
    width: 100%;
}
.menu ul li.has-submenu {
    flex-wrap: wrap; /* Erlaubt dem <ul> eine neue Zeile einzunehmen */
}
.menu ul li.has-submenu > ul {
    width: 100%; /* Untermenü nutzt die volle Breite unter dem Hauptpunkt */
}

/* Optional: Etwas kompakterer Abstand für die Untermenü-Punkte */
.menu ul ul li a {
    padding: 6px 0;          /* Etwas weniger Abstand im Untermenü, damit es übersichtlich bleibt */
}
.menu a,
.menu ul li a,
.menu ul ul li a {
    white-space: nowrap !important; /* Zwingt den Text in genau eine Zeile */
}

/* 2. Untermenü flexibel breit machen, damit der lange Text Platz hat */
.menu ul ul {
    width: auto !important;         /* Verhindert, dass das Untermenü zu schmal eingezwängt wird */
    min-width: 100%;                /* Mindestens so breit wie der Hauptmenüpunkt */
}

/* 3. Icons in Untermenüs auf einer Linie halten (falls vorhanden) */
.menu ul ul li a i {
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
}
.menu li > a.has-submenu .btn,
.menu li > a.has-submenu .badge {
    margin-left: auto;
    margin-right: 15px;
    flex-shrink: 0;
}

	.td_geld_detail {
		text-align:right;
	}
	
	/* Das Grid-System */
.card-grid {
    display: grid;
    /* Erstellt Spalten, die mindestens 280px breit sind, aber flexibel anwachsen */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    row-gap: 15px;    /* Abstand unter jeder Zeile */
    column-gap: 15px; /* Abstand zwischen den Spalten */
    width: 100%;
}

/* Falls eine Box breiter sein soll als andere (z.B. über 2 Spalten): */
.card-wide {
    grid-column: span 2;
}

/* Der Style für die einzelnen Karten/Boxen (Transparent) */
.card {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
	color: white !important;
	margin-bottom: 15px;
}

/* Optional: Hübsches Styling für Überschriften in den Karten */
.card h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.1rem;
    color: white !important;
}
.card a {
    display: inline-flex;
    align-items: center;
    color: #ffffff !important;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    white-space: nowrap !important;
}
.card a:hover,
.card a:active,
.card a:focus {
    color: #000000 !important;
    text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.8), 
                 0px 2px 4px rgba(0, 0, 0, 0.5) !important;
}
/* Standard: Stern ist ausgegraut und dezent */
.star-icon {
    cursor: pointer;
    color: #ccc; /* Ausgegraut */
    font-size: 1.2rem;
    transition: color 0.2s, transform 0.2s;
}

.star-icon:hover {
    color: #f59e0b; /* Gelb beim Drüberfahren */
    transform: scale(1.2);
}

/* Aktuell gespeicherte Startseite: Stern leuchtet dauerhaft gelb */
.star-icon.is-startpage {
    color: #f59e0b;
    text-shadow: 0 0 6px rgba(245, 158, 11, 0.6);
}
.video-selection-container {
    display: flex;
    flex-direction: row;      /* Karten nebeneinander */
    flex-wrap: wrap;          /* Sauberer Umbruch am Bildschirmlauf */
    gap: 12px;                /* Abstand zwischen den Karten */
    padding: 15px;
    width: 100%;
    box-sizing: border-box;
}

/* Die einzelne Video-Karte */
.video-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 130px;             /* Feste Kartenbreite */
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 8px;
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: all 0.25s ease-in-out;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.video-card:hover {
    transform: translateY(-4px);
    background: rgba(0, 0, 0, 0.75);
    border-color: rgba(255, 255, 255, 0.6);
}

/* Hervorhebung für das AKTIV ausgewählte Video */
.video-card.active {
    border-color: #22c55e;    /* Grüner Rahmen */
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.6);
    background: rgba(34, 197, 94, 0.15);
}

/* Miniatur-Vorschaufeld */
.video-preview {
    width: 100%;
    height: 72px;
    border-radius: 5px;
    overflow: hidden;
    background: #000;
}

.video-preview video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;     /* Verhindert ungewollte Video-Interaktionen */
}

/* Videotitel unter dem Vorschaubild */
.video-card span {
    color: #ffffff;
    font-size: 12px;
    margin-top: 6px;
    text-align: center;
    font-weight: 500;
    word-break: break-word;
}

/* Breite für Button, Inputs und Radio-Gruppe auf 100% erzwingen */
.full-width-btn, 
.full-width-input {
    width: 100% !important;
    display: block;
    box-sizing: border-box;
}

/* Radio-Gruppe über volle Breite ausrichten */
.full-width-group {
    display: flex !important;
    width: 100% !important;
}

.full-width-group .btn {
    flex: 1; /* Teilt die 4 Buttons A, B, C, D gleichmäßig über die Zeile auf */
}

/* Abstände zwischen den Zeilen */
.form-row {
    margin-bottom: 10px;
    width: 100%;
}

/* --- Flüssige Einklapp-Animation --- */
.collapsible-area {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease-in-out, opacity 0.35s ease-in-out;
    opacity: 0;
    width: 100%;
}

/* Klasse, die per JavaScript hinzugefügt wird */
.collapsible-area.open {
    max-height: 300px; /* Groß genug wählen, damit der Inhalt Platz hat */
    opacity: 1;
}

.collapsible-content {
    padding-top: 5px;
    padding-bottom: 5px;
}
.custom-radio-group .btn.active {
    background-color: #198754 !important;
    color: #ffffff !important;
    border-color: #198754 !important;
}

/* Äußerer 2px schwarzer Rahmen für die Tabelle */
.block_m table {
    border: 2px solid #000000;
    border-collapse: separate; 
    border-spacing: 0;         
    width: 100%;
    border-radius: 8px;
    overflow: hidden; /* Stellt sicher, dass border-radius an den Ecken greift */
}

/* Ungerade Zeilen (Heller) -> direkt auf td anwenden */
.block_m table tr:nth-child(odd) td {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Gerade Zeilen (Dunkler) -> direkt auf td anwenden */
.block_m table tr:nth-child(even) td {
    background-color: rgba(0, 0, 0, 0.2) !important;
}

/* Hover-Effekt auf die Zellen anwenden */
.block_m table tr:hover td {
    background-color: rgba(255, 255, 255, 0.12) !important;
}

/* Zeilenhöhe & vertikale Ausrichtung */
.block_m table td {
    padding: 5px 8px;
    vertical-align: middle;
}

th {
    background-color: rgba(255, 255, 255, 0.12);
    font-weight: bold;
    padding: 5px 8px;
}

/* Container & Allgemein */
.chart-table-container {
    display: flex;
    flex-direction: row;
    gap: 20px;
    width: 100%;
    align-items: flex-start;
    box-sizing: border-box;
}

.table-wrapper {
    flex: 0 0 auto;
    max-width: 100%;
    overflow-x: auto; /* Verhindert, dass die Tabelle das Layout aufbricht */
}

/* Tabelle kompakt halten */
.table-wrapper table {
    width: 100%;
    border-collapse: collapse;
	margin-top: 15px;
}

.table-wrapper th, 
.table-wrapper td {
    white-space: nowrap; /* Zeilenumbrüche in Zahlen verhindern */
    padding: 6px 8px;    /* Etwas weniger Padding für mobile Geräte */
}

.chart-wrapper {
    flex: 1 1 0px;
    min-width: 0;
    width: 100%;
}

/* ApexCharts Elemente zwingen sichtbar zu bleiben */
.apexcharts-canvas,
.apexcharts-svg {
    width: 100% !important;
}

.media-card-block.ungesehen .block_o {
    border-bottom: 2px solid #ff4d4d !important;
}
.media-card-block.gesehen .block_o {
    border-bottom: 2px solid #00cd00 !important;
}

.media-cover {
    width: 80px;
    height: 110px;
    object-fit: cover;
    border-radius: 3px;
    flex-shrink: 0;
}
.media-info {
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
}
.media-title {
    font-weight: bold;
    font-size: 0.95rem;
    color: #ffffff;
    text-decoration: none;
}
.media-meta {
    font-size: 0.8rem;
    color: #cccccc;
}
/* Container für das Poster-Bild */
.media-poster-wrapper {
    position: relative !important;
    width: 100%;
    display: block;
    background: #000;
    overflow: hidden;
}

.media-poster-img {
    width: 100%;
    height: auto;
    display: block;
}

/* Badge für die Minutenanzeige oben/unten auf dem Cover */
.media-badge-duration {
    position: absolute !important;
    bottom: 6px !important;
    right: 6px !important;
    z-index: 10 !important; /* Verhindert, dass das Bild das Badge überdeckt */
    
    background: rgba(0, 0, 0, 0.85) !important;
    color: #ffffff !important;
    font-size: 0.7rem !important;
    font-weight: bold !important;
    line-height: 1 !important;
    
    padding: 3px 6px !important;
    border-radius: 4px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6) !important;
    
    pointer-events: none; /* Verhindert Klick-Blockaden */
    white-space: nowrap !important;
}



	#myVideo {
		position: fixed;
		right: 0;
		bottom: 0;
		min-width: 100%;
		min-height: 100%;
		z-index: -1
	}
	
	/* Animation zum Ausblenden */
.fade-out-animation {
    animation: fadeOutDown 0.4s ease-out forwards;
}

/* Animation zum Einblenden (optional für das Öffnen) */
.fade-in-animation {
    animation: fadeInUp 0.4s ease-out forwards;
}

/* Keyframes für das Ausblenden */
@keyframes fadeOutDown {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(20px);
    }
}

/* Keyframes für das Einblenden */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#kontoGesamt {
    /* WICHTIG: Damit Schatten und Übergänge auf Inline-Elementen sauber wirken */
    display: inline-block; 
    transition: all 0.4s ease-in-out !important;
    /* Optional: Ein winziges Padding, damit der Schatten nicht am Rand abgeschnitten wird */
    padding: 0 2px; 
}

/* Grüner Schatten bei Plus - Extrem stark definiert */
.glow-positive {
    text-shadow: 0 0 8px rgba(34, 197, 94, 0.9), 
                 0 0 15px rgba(34, 197, 94, 0.7) !important;
    color: #22c55e !important; /* Text wird auch kurz grün */
}

/* Roter Schatten bei Minus - Extrem stark definiert */
.glow-negative {
    text-shadow: 0 0 8px rgba(239, 68, 68, 0.9), 
                 0 0 15px rgba(239, 68, 68, 0.7) !important;
    color: #ef4444 !important; /* Text wird auch kurz rot */
}

.coin-row td {
    background-color: red !important;
}