@charset "utf-8";

/* =========================================================
   RADIO-SENDEPLAN – SCHWARZ / HELLGRAU / DUNKELROT
   ========================================================= */

:root {
    --black: #050505;
    --black2: #0d0d0d;
    --black3: #151515;
    --gray: #d6d6d6;
    --gray-light: #eeeeee;
    --gray-dark: #8e8e8e;
    --red-dark: #4a0008;
    --red: #70000d;
    --red-light: #a00012;
    --red-border: #b30018;
    --white: #ffffff;
}

/* Grundseite */
html,
body {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100%;
    background: #050505 !important;
    color: var(--gray) !important;
    font-family: Arial, Helvetica, sans-serif;
}

/* Hauptbereiche */
#page,
#wrapper,
#container,
#content,
#main,
.content,
.main,
.page,
.page-content,
.content-wrapper,
.main-content {
    background: linear-gradient(180deg, #151515 0%, #070707 100%) !important;
    color: var(--gray) !important;
}

/* Überschriften */
h1, h2, h3, h4, h5, h6,
.title,
.heading {
    color: var(--gray-light) !important;
}

/* Links */
a,
a:visited {
    color: var(--gray-light) !important;
    text-decoration: none;
}

a:hover,
a:focus {
    color: #ffffff !important;
    text-decoration: underline;
}

/* =========================================================
   NAVIGATION
   ========================================================= */

nav,
#navigation,
.navbar,
.menu,
ul.menu {
    background: #080808 !important;
    border: 1px solid var(--red) !important;
}

nav a,
#navigation a,
.navbar a,
.menu a {
    background: #0d0d0d !important;
    color: var(--gray-light) !important;
    border-right: 1px solid #390007 !important;
    font-weight: bold;
}

nav a:hover,
#navigation a:hover,
.navbar a:hover,
.menu a:hover {
    background: var(--red-dark) !important;
    color: #ffffff !important;
}

/* =========================================================
   BUTTONS
   ========================================================= */

button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.button,
.btn {
    background: linear-gradient(180deg, #76000d, #3d0006) !important;
    color: var(--gray-light) !important;
    border: 1px solid var(--red-border) !important;
    border-radius: 5px;
    padding: 9px 17px;
    font-weight: bold;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
.button:hover,
.btn:hover {
    background: #900010 !important;
    color: #ffffff !important;
}

/* =========================================================
   SENDEPLAN / TABELLEN
   ========================================================= */

table,
.table,
.table-striped,
.table-bordered,
.table-hover {
    width: 100%;
    border-collapse: collapse;
    background: #090909 !important;
    color: var(--gray) !important;
    border: 1px solid #4b0008 !important;
}

thead,
tfoot,
th {
    background: linear-gradient(180deg, #3b0006, #190002) !important;
    color: var(--gray-light) !important;
    font-weight: bold;
}

th {
    padding: 12px 10px;
    border-bottom: 2px solid var(--red) !important;
}

td {
    background: #0c0c0c !important;
    color: var(--gray) !important;
    padding: 10px;
    border-bottom: 1px solid #2c2c2c !important;
}

tr:nth-child(even) td {
    background: #141414 !important;
}

tr:hover td {
    background: #280003 !important;
    color: #ffffff !important;
}

/* =========================================================
   ON AIR – DUNKELROT
   ========================================================= */

#onair,
#onair_box,
#onair_status,
.onair,
.on-air,
.onair-box,
.onair-status,
.onair-button,
.onair a,
.on-air a,
a.onair,
button.onair {
    background: linear-gradient(180deg, #8b0010, #480006) !important;
    background-color: var(--red-dark) !important;
    color: #ffffff !important;
    border: 2px solid #a80016 !important;
    border-radius: 6px !important;
    font-weight: bold !important;
    box-shadow: 0 0 8px rgba(120,0,15,.5) !important;
}

/* Aktuelle Sendung */
tr.onair td,
tr.on-air td,
.onair-row,
.on-air-row {
    background: #280003 !important;
    color: #ffffff !important;
    border-top: 1px solid var(--red) !important;
    border-bottom: 1px solid var(--red) !important;
}

/* =========================================================
   FORMULARE
   ========================================================= */

input,
select,
textarea {
    background: #101010 !important;
    color: var(--gray-light) !important;
    border: 1px solid #555555 !important;
    border-radius: 4px;
    padding: 8px;
}

input::placeholder,
textarea::placeholder {
    color: #777777 !important;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--red-light) !important;
    box-shadow: 0 0 6px rgba(160,0,18,.4);
}

/* =========================================================
   WEISSE BEREICHE ENTFERNEN
   ========================================================= */

.bg-white,
.white,
.background-white,
.bg-light,
.table-light,
.alert,
.card,
.card-body,
.card-header,
.well,
.panel,
.panel-body,
.panel-heading {
    background: #151515 !important;
    color: var(--gray) !important;
}

/* =========================================================
   FOOTER
   ========================================================= */

footer,
#footer {
    background: linear-gradient(180deg, #171717, #060606) !important;
    color: var(--gray) !important;
    border-top: 2px solid var(--red-dark) !important;
    padding: 20px;
}

footer a,
#footer a {
    color: var(--gray-light) !important;
}

/* Radio-Sendeplan */
#onair_body {
    background: #050505 !important;
    color: var(--gray) !important;
}

#onair_body a {
    color: var(--gray-light) !important;
}

#onair_grussboxbutton a {
    background: #250003 !important;
    color: var(--gray-light) !important;
    border: 1px solid var(--red) !important;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {
    body {
        font-size: 14px;
    }

    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    th,
    td {
        padding: 8px;
    }

    nav a,
    #navigation a,
    .menu a {
        display: block;
        border-bottom: 1px solid #390007 !important;
    }
}