body {
    font-family: Tahoma, 'Lucida Grande', Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: #d400ff;
    margin: 0 auto;
    background: url("images/background.gif") repeat center center fixed;
    background-size: cover;

}

a {
    color: #ed6ff7;
    text-decoration: none;
}

a:active,
a:focus,
a:hover {
    text-decoration: none;
    color: hsl(300, 54%, 97%);
}

#header-links .link {
    float: center;
    text-align: center;
    margin: 0 3px 0 3px;
    padding: 8px;
    color: #138bd8;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    letter-spacing: 0.7px;
    background: transparent;
}

#header-links .link:active,
#header-links .link:focus,
#header-links .link:hover {
    color: #fff;
}

/* Bootstrap 3-friendly centering */
#main-nav .navbar-collapse {
    text-align: center;
}

#main-nav .nav > li > a:hover,
#main-nav .nav > li > a:focus {
    color: rgb(195, 0, 255) !important;
}

#main-nav .navbar-nav {
    float: none;            /* float raus, damit zentrierbar */
    display: inline-block;  /* shrink-to-fit zum Zentrieren */
    vertical-align: top;
}

#main-nav .navbar-nav > li {
    float: none;
    display: inline-block;
}

/* Content nicht unter die fixe Navi schieben */
#header {
    margin-top: 50px; /* ggf. an tatsächliche Nav-Höhe anpassen */
}



#main-nav {
    margin: 0;
    padding: 0;
    border: 0;
    -webkit-border-radius: 8px 8px 0 0;
    -moz-border-radius: 8px 8px 0 0;
    border-radius: 8px 8px 0 0;
    background: transparent !important;
    min-height: 41px;
	background: rgba(0, 0, 0, 0.6) !important; /* Schwarz mit 60% Deckkraft */
    min-height: 60px; /* Höhe nach Wunsch anpassen */
    border: none;
}

#main-nav .nav:not(.secondary) > li {
    border-right: none;
    background: transparent;
}



#main-nav .nav > li > a {
    color: #ffffff;
    font-weight: bold;
    line-height: 21px;
    padding: 10px;
    background: transparent;
	padding-top: 15px;   /* Abstand oben */
    padding-bottom: 25px;/* Abstand unten */
    line-height: 20px;   /* Text bleibt mittig */
    font-size: 15px;     /* größere Schrift */
    padding: 20px 15px;  /* mehr Abstand oben/unten, links/rechts */
}

#main-nav .nav > li > a:focus,
#main-nav .nav > li > a:hover {
    background: rgba(0, 0, 0, 0.25);
}

#main-nav .nav > .active > a,
#main-nav .nav > .active > a:focus,
#main-nav .nav > .active > a:hover,
#main-nav .nav > li.open > a,
#main-nav .nav > li.open > a:focus,
#main-nav .nav > li.open > a:hover {
    background: rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.25);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.25);
}

#main-nav .nav:not(.secondary) > li:first-child > a {
    -webkit-border-radius: 8px 0 0 0;
    -moz-border-radius: 8px 0 0 0;
    border-radius: 8px 0 0 0;
}

#main-nav .nav:not(.primary) > li:last-child > a {
    -webkit-border-radius: 0 7px 0 0;
    -moz-border-radius: 0 7px 0 0;
    border-radius: 0 7px 0 0;
}

#main-nav .nav.primary {
    margin-left: -15px;
}

#main-nav .navbar-brand {
    color: #f00000;
    background: transparent;
}

#main-nav .navbar-brand:focus,
#main-nav .navbar-brand:hover {
    color: #d5d5d5;
}

#main-nav .navbar-toggle {
    border-color: rgba(47, 72, 121, 0.6);
    background: transparent;
}

#main-nav .navbar-toggle:focus,
#main-nav .navbar-toggle:hover {
    background-color: rgba(47, 72, 121, 0.35);
}

#main-nav .navbar-toggle .icon-bar {
    background-color: #2f4879;
}

#main-nav .navbar-toggle:focus .icon-bar,
#main-nav .navbar-toggle:hover .icon-bar {
    background-color: #111a2b;
}

#header .logo img {
    margin-top: 50px; /* zusätzlich zum Header-Abstand */
}

#header .navbar-collapse {
    border-color: rgba(45, 74, 127, 0.4);
    background: transparent;
}


@media (max-width:767px) {
    .channelbox  {display: none !important; }   /* Bewerbung ausblenden */
    #streamstatus box panel {display: none !important;}
    #panel-body {        /* Panel mit der ID "bewerbung" */
        display: none !important;
    }
    .openside.box.panel.panel-default:has(.panel-heading:contains("R-M-E")) {
        display: none !important;
    }

    #main-nav .navbar-toggle .icon-bar {
        background-color: #ff0000; /* Rot nur mobil */
    }

    #main-nav .navbar-brand {
        display: none !important;
    }

    #main-nav .navbar-toggle:focus .icon-bar,
    #main-nav .navbar-toggle:hover .icon-bar {
        background-color: #00ff00; /* Grün beim Tippen/Hover nur mobil */
    }

    #main-nav .nav > li > a {
        font-size: 14px;     /* kleinere Schrift */
        padding: 10px 12px;  /* weniger Abstand */
    }
    

    #header-links,
    #header .logo {
        float: inherit !important;
    }

    #header .logo img {
        margin: 0 auto;
    }

    #header-links .link img {
        width: 40px;
        height: 40px;
    }

    #main-nav .nav:not(.secondary) > li {
        border-right: none;
    }

    #main-nav .nav:not(.primary) > li:last-child > a,
    #main-nav .nav:not(.secondary) > li:first-child > a {
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
    }
    .openside::after {
        height: 25px; /* statt z. B. 40px */
        background-size: contain; /* passt sich kleiner an */
    }

    .openside::after,
    .box::after,
    .opentable::after {
        height: 85px !important;
        background-size: contain !important;
        margin-top: 6px !important;
        display: block !important;
        content: "" !important;
    }

    #main-nav .nav .open .dropdown-menu > li > a {
        color: #fdfdfd;
        background: rgba(0, 0, 0, 0.6);
    }

    #main-nav .nav .open .dropdown-menu > li > a:focus,
    #main-nav .nav .open .dropdown-menu > li > a:hover {
        color: #c5c5c5;
        background: rgba(0, 0, 0, 0.7);
    }

    #main-nav .nav .open .dropdown-menu > .active > a {
        color: #1585D4;
        background: rgba(0, 0, 0, 0.7);
    }

    #main-nav .nav .open .dropdown-menu > .active > a:focus,
    #main-nav .nav .open .dropdown-menu > .active > a:hover {
        color: #15579c;
        background: rgba(0, 0, 0, 0.75);
    }
}

#main-box {
    background: transparent !important;
    padding: 10px 5px;
    border-left: none;
    border-right: none;
}

#main-footer {
    position: relative;
    text-align: center;
    background: url("images/footer.png") no-repeat center bottom;
    background-size: auto; /* oder 100% auto */
    min-height: 400px; /* Höhe anpassen! */
    padding-top: 20px; /* etwas Platz oben */
    margin-bottom: 40px; /* Platz NACH dem Footer */
    clear: both;         /* beendet alle Floats */
    display: block;
}

/* Footer-Bild */
#main-footer .footer-image {
    width: 100%;
    display: block;
    margin: 0 auto;
}


#main-footer .footer {
    background: transparent !important;
    /*border-bottom: 1px solid rgba(54, 53, 49, 0.35);*/
    padding: 10px 15px;
}

#main-footer .copyright {
    position: absolute;
    bottom: 0;           /* an unterem Rand ausrichten */
    left: 0;
    width: 100%;
    padding: 8px 0;
    background: rgba(0, 0, 0, 0.4); /* halbtransparent schwarz */
    color: #fff;
    font-size: 12px;
}




.box {
    border: none !important;   /* keine Rahmen */
    -webkit-border-radius: 8px 8px 0 0;
    -moz-border-radius: 8px 8px 0 0;
    border-radius: 8px 8px 0 0;
    background: transparent !important;
}

.box > .panel-heading{
    color: #ffffff !important;
    font-size: 13px;
    font-weight: normal;
    margin: 0;
    padding: 10px 7px;
    -webkit-border-radius: 8px 8px 0 0;
    -moz-border-radius: 8px 8px 0 0;
    border-radius: 8px 8px 0 0;
    background: url("images/nav_oben.png") no-repeat center / 100% 100% !important;
    background-size: cover;
    border-bottom: none;
    background-repeat: no-repeat;
    background-position: center; /* Start oben links */
    min-height: 40px;
    display: block;
    overflow: hidden;
    text-align: center !important;
}

.opentable {
    border-bottom: 2px solid rgba(255, 0, 36, 0.65);
    background: transparent;
}

.openside {
    border-bottom: 2px solid rgba(60, 130, 196, 0.65);
    background: transparent;
}

.openside::after {
    content: "";
    display: block;
    width: 100%;
    height: 50px; /* Höhe des Footerbilds */
    background: url("images/nav_unten.png") no-repeat center;
    background-size: cover;
    border-radius: 0 0 8px 8px;
}

.openside > .panel-heading {
    text-align: center;
}

#error_logform {
    margin-bottom: 20px !important;
    background: transparent;
}

#error_logform #delete_entries {
    font-size: 13px;
    line-height: 1.5;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    padding: 3px 10px;
    background: rgba(0, 0, 0, 0.2);
    color: #fff;
}

#error_logform #delete_status-field {
    margin-top: 1.5px;
}

.select2-offscreen {
    display: none;
}

.panel-txtarea > .panel-heading {
    -webkit-border-radius: 0;
    border-radius: 0;
    background: #030303;
    color: #ffffff;
}

.panel-txtarea > .panel-heading .bbcode {
    margin: 5px 1px;
}

.panel-txtarea > .panel-footer {
    -webkit-border-radius: 0;
    border-radius: 0;
    background: transparent;
}

.panel-txtarea .editor-wrapper > .nav > li.active > a,
.panel-txtarea .editor-wrapper > .nav > li a:active {
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    background: rgb(248, 248, 248);
    color: #020202;
}

.panel-txtarea .editor-wrapper > .nav > li > a {
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    background: transparent;
    color: #e2e2e2;
}

.text-primary,
.text-primary:hover {
    color: #158cba;
}

.text-success,
.text-success:hover {
    color: #28b62c;
}

.text-danger,
.text-danger:hover {
    color: #ff4136;
}

.text-warning,
.text-warning:hover {
    color: #ff851b;
}

.text-info,
.text-info:hover {
    color: #75caeb;
}

.btn-primary {
    background-color: #ff00ff;
    border-color: #ff6600;
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #ff00ea;
    border-color: #cc5200;
    color: #fff;
}

.button {
	font-family:"tahoma ms",Arial,Sans-Serif;
	font-size:10px;
	color:#ffffff; 	
    background-color:#000000;	
	border:#ffffff 2px solid;
	margin-top:2px;
}



.tbl1 {
	font-size:15px; 
	color:#da00f7; 
	padding:4px;
}

.tbl2 {
	font-size:10px; 
	color:hsl(295, 81%, 34%); 
    padding:4px;
	border-bottom: #032640;
	border-bottom-width: 1px;
}


div.panel-body {
    background-color: #202020 !important; /* dunkler Hintergrund */
    color: #fcfcfc !important;           /* helle Schrift */
    padding: 15px;                       /* mehr Innenabstand */
    border-radius: 6px;                  /* abgerundete Ecken */
}



/* === Transparent Member List Fixes === */

/* Tables (Bootstrap) */
.table,
.table > thead > tr > th,
.table > thead > tr > td,
.table > tbody > tr > th,
.table > tbody > tr > td,
.table > tfoot > tr > th,
.table > tfoot > tr > td {
    background-color: transparent  !important;
}

/* Striped / Hover variants */
.table-striped > tbody > tr:nth-of-type(odd),
.table-hover > tbody > tr:hover {
    background-color: transparent  !important;
}

/* Table borders a bit subtle so Text bleibt lesbar */
.table > thead > tr > th,
.table > tbody > tr > td,
.table > tfoot > tr > th,
.table > tfoot > tr > td {
    border-color: rgba(255,255,255,0.15) !important;
}

/* DataTables (häufig genutzt für Mitgliederlisten) */
table.dataTable,
table.dataTable tbody tr,
table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd,
table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover {
    background: transparent  !important;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate,
.dataTables_wrapper .dataTables_paginate .paginate_button {
    background: transparent  !important;
    border-color: rgba(255,255,255,0.15) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: rgba(0,0,0,0.25) !important;
    color: #fffdfd !important;
}

/* List groups, wells, alerts etc. */
.list-group,
.list-group-item,
.well,
.alert {
    background: transparent  !important;
}

/* Pagination pills/links */
.pagination > li > a,
.pagination > li > span {
    background: transparent  !important;
    border-color: rgba(255,255,255,0.15) !important;
}

/* Forms (Suchfeld/Filter auf der Mitgliederliste) */
.form-control{
    background-color: #000 !important;
    color: #fff !important;
    border-color: #ff00ff !important; /* pinker Rahmen */
}

.input-group-addon,
.input-group-text,
.select2-container .select2-selection,
.select2-dropdown,
.select2-results__option {
    background:#000000 !important;
    border-color: rgba(255,255,255,0.25) !important;
}

.form-control:focus{
    background-color: #111 !important;
    color: #0f0 !important; /* grüne Schrift beim Schreiben */
    border-color: #0ff !important; /* cyan Rahmen im Fokus */

}
.select2-container--default .select2-selection--single:focus {
    background-color: rgba(0,0,0,0.15) !important; /* leichte Hervorhebung beim Fokus */
    color: #ffffff !important;
    outline: none;
    box-shadow: none;
}

/* Bootstrap panels in Listenbereichen sicherheitshalber nochmals */
.panel,
.panel .panel-body {
    background: transparent  !important;
}

/* Optional: Labels/Badges etwas absetzen (falls sonst zu blass) */
.label,
.badge {
    background: rgba(0,0,0,0.35) !important;
}

.pull-left {
    float: none !important;   /* Float von Bootstrap überschreiben */
    clear: both;              /* immer UNTER dem Footer */
    display: block;     /* als Block untereinander */
    width: 100%;              /* volle Breite */
    text-align: left;   /* links ausrichten */
    margin-top: 20px;         /* Abstand nach dem Footer */
    margin-left: left;  /* vom linken Rand */
}

/* Nur die Lupe im Menü ausblenden */
#main-nav .fa-search {
    display: none !important;
}

/*Cube Anfang*/
:root{
  --size:300px;   /* Kantenlänge des Würfels in px (größer/kleiner macht den Würfel größer/kleiner) */
  --speed:14s;    /* Rotationsgeschwindigkeit: Zeit für eine volle Umdrehung (größer = langsamer, kleiner = schneller) */
  --radius:14px;  /* Rotationsgeschwindigkeit: Zeit für eine volle Umdrehung (größer = langsamer, kleiner = schneller) */
  --border:1px solid rgba(0,0,0,.08);   /* dünner Rand um jede Seite */
  --shadow:0 12px 35px rgba(0,0,0,.20);  /* Schatten für 3D-Effekt */
  --perspective:1100px; /* Perspektive (geringer Wert = stärkerer 3D-Effekt, höherer Wert = flacher) */
}
.cube-scene{
  width:min(90vmin,var(--size));
  aspect-ratio:1/1;
  margin:24px auto;
  perspective:var(--perspective);
  display:grid;
  place-items:center;
  isolation:isolate;
}
.cube{
  width:100%;height:100%;
  position:relative;
  transform-style:preserve-3d;
  animation:spin var(--speed) linear infinite;
  will-change:transform;
}
.cube-scene:hover .cube{animation-play-state:paused}
.face{
  position:absolute;
  inset:0;
  display:block;
  box-shadow:var(--shadow);
  border-radius:var(--radius);
  overflow:hidden;
}
.face img{
  width:100%;height:100%;
  object-fit:cover;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  border:var(--border);
  border-radius:var(--radius);
  display:block;
}
.face--front {transform:translateZ(calc(var(--size)/2))}
.face--back  {transform:rotateY(180deg) translateZ(calc(var(--size)/2))}
.face--right {transform:rotateY(90deg) translateZ(calc(var(--size)/2))}
.face--left  {transform:rotateY(-90deg) translateZ(calc(var(--size)/2))}
.face--top   {transform:rotateX(90deg) translateZ(calc(var(--size)/2))}
.face--bottom{transform:rotateX(-90deg) translateZ(calc(var(--size)/2))}
@keyframes spin{
  0%{transform:rotateX(0) rotateY(0) rotateZ(0)}
  100%{transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg)}
}
@media (prefers-reduced-motion: reduce){
  .cube{animation:none!important}
  
}

/* === Cube: responsive Größen === */
@media (max-width: 1024px) {
  :root { --size: 220px; }
}
@media (max-width: 768px) {
  :root { --size: 300px; }
    }

@media (max-width: 480px) {
  :root { --size: 230px; }
}


/* Override: Schwarze Textfelder mit weißer Schrift */
.form-control,
input[type="text"],
textarea {
  background-color: #00000052 !important;  /* schwarzer Hintergrund */
  color: #fff !important;             /* weiße Schrift */
  border: 1px solid #666 !important;  /* dezenter grauer Rahmen */
}

.form-control:focus,
input[type="text"]:focus,
textarea:focus {
  background-color: #111 !important;  /* etwas helleres Schwarz beim Fokus */
  color: #fff !important;             /* Schrift bleibt weiß */
  border-color: #fff !important;      /* weißer Rahmen beim Fokus */
  outline: none !important;
  box-shadow: none !important;
}
/* Override: Auswahlfenster (Select / Dropdowns) schwarz mit weißer Schrift */
select,
.select2-container .select2-selection,
.select2-dropdown,
.select2-results__option {
  background-color: #000 !important; /* schwarzer Hintergrund */
  color: #fff !important;            /* weiße Schrift */
  border: 1px solid #666 !important; /* dezenter Rahmen */
}

/* beim Fokussieren / Aufklappen */
select:focus,
.select2-container--default .select2-selection--single:focus,
.select2-dropdown:focus {
  background-color: #111 !important; /* etwas helleres Schwarz */
  color: #fff !important;
  border-color: #fff !important;     /* weißer Rahmen im Fokus */
  outline: none !important;
  box-shadow: none !important;
}

/* Hover- und Auswahl-Effekte in Dropdown-Listen */
.select2-results__option--highlighted,
select option:hover {
  background-color: #333 !important; /* dunkleres Grau bei Hover */
  color: #0ff !important;            /* z. B. Cyan als Hervorhebung */
}

select option:checked {
  background-color: #222 !important; /* gewählte Option */
  color: #fff !important;
}