/* Schrift aus Google importieren - Gehe auf fonts.google.com, wähle eine Schrift aus und suche dort den Import Befehl */

@import url('https://fonts.googleapis.com/css2?family=Georama:wght@100&display=swap');

/* Schrift auf der Seite nutzen: Auf Google findest du auch die CSS Anweisung für die Nutzung der Schrift. Wenn du diese in das body element einfügst dann wird die Schrift auf der ganzen Webseite genutzt. */
/* Der Seitenkopf von Cassiopeia hat die Klasse "header" du steuerst diese also mit .header an */

:root {
  --cassiopeia-color-primary: #000;
  --cassiopeia-color-link: #000;
  --cassiopeia-color-hover: gray;
}

.mybanner_tabell{
  border-radius: 10px;
}

/* Zurück - Such Button usw... ---------- */
.btn-primary {
  border : 0;
  background-color: black; 
  color: white;
  box-shadow: 5px 5px 9px -1px rgba(255,255,255,0.79);
  -webkit-box-shadow: 5px 5px 9px -1px rgba(255,255,255,0.79);
  -moz-box-shadow: 5px 5px 9px -1px rgba(255,255,255,0.79);
}

.btn-primary:hover {
  background: #202020;
  color: white; 
  box-shadow: 5px 5px 9px -1px rgba(255,255,255,0.79);
  -webkit-box-shadow: 5px 5px 9px -1px rgba(255,255,255,0.79);
  -moz-box-shadow: 5px 5px 9px -1px rgba(255,255,255,0.79);
}

/* Header ----------------------------------------*/
.header {
  background-image: none; 
  
background: rgb(29,253,251);
background: -moz-linear-gradient(0deg, rgba(29,253,251,1) 0%, rgba(0,0,0,1) 100%);
background: -webkit-linear-gradient(0deg, rgba(29,253,251,1) 0%, rgba(0,0,0,1) 100%);
background: linear-gradient(0deg, rgba(29,253,251,1) 0%, rgba(0,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1dfdfb",endColorstr="#000000",GradientType=1);
  
  text-shadow: 2px 2px 8px rgba(150, 150, 150, 1);
}

/*Topmenu---------------------------------------------*/
.mymenu_top{
  /*position: fixed;
  width: 100%;
  z-index: 1;
  background-color: rgba(255,255,255,0.5);
  background-image: none;
  text-shadow: 2px 2px 8px rgba(150, 150, 150, 1);
  background: rgb(0,0,0);
  background: -moz-linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(255,158,0,1) 50%, rgba(29,253,251,1) 100%);
  background: -webkit-linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(255,158,0,1) 50%, rgba(29,253,251,1) 100%);
  background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(255,158,0,1) 50%, rgba(29,253,251,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#1dfdfb",GradientType=1);*/
}

.metismenu.mod-menu .metismenu-item:not(.level-1) > ul, .metismenu.mod-menu .metismenu-item:not(.level-2) > ul {
  background-color:rgba(255,255,255,0.5);
}

/*Banner---------------------------------------------*/
.container-banner img{
  /*margin-top: 50px;*/
}

/*Body---------------------------------------------*/
body {
  text-shadow: 2px 2px 8px rgba(150, 150, 150, 1);
  
  background: rgb(255,255,255);
  background: -moz-linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(29,253,251,1) 100%);
  background: -webkit-linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(29,253,251,1) 100%);
  background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(29,253,251,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#1dfdfb",GradientType=1);
}

/*Kontaktformular---------------------------------------------*/
.com-contact__container {
  /*Titel ausblenden*/
  display:none;
}
div.contact h3 {
  /*Titel ausblenden*/
  display:none;
}

.page-header{
  /*Titel ausblenden*/
  display:none;
}

/*Kontainer über Inhalt mittig (Aktuelle Seite) ---------------------------------------------*/
.mod-breadcrumbs__wrapper {
  border: 1px;
  border-style:dashed;
  border-color: black; 
  background-color:rgba(255,255,255,0.2);
  
}

/*Kontainer Inhalt mittig ---------------------------------------------*/
main {
  padding: 20px;
  border: 1px;
  border-style:dashed;
  border-color: black; 
  background-color:rgba(255,255,255,0.2);
}

/* Module ---------------------------------------------*/
/*Modul ganz*/
.mymodul{
  border: 1px;
  border-style:dashed;
  border-color: black; 
  background-color: transparent;
}

/*Modul Titel (oben)*/
.mymodul .card-header{
  background-color:rgba(255,255,255,0.4);
  color: black;
  text-shadow: -1px -1px 1px rgba(255,255,255,.1), 1px 1px 10px rgba(255,255,255,1);
}

/*Modul unten (Inhalt)*/
.mymodul .card-body{
  background-color:rgba(255,255,255,0.2); 
}

/* Menu links ---------------------------------------------*/
.mymenu_left .card-header{
  background-color:rgba(255,255,255,0.4);
  color: black;
  text-shadow: -1px -1px 1px rgba(255,255,255,.1), 1px 1px 10px rgba(255,255,255,1);
}

/*Modul unten (Inhalt)*/
.mymenu_left .card-body{
  background-color:rgba(255,255,255,0.2); 
}

.mymenu_left .mod-list li .mod-menu__sub{
  list-style-type: disc;  
}

.mymenu_left{
  border: 0px;
}

.mod-list li{
   font-size: 16px;  
}

/*Datenschutz*/
.mymenu_left .small {
  list-style-type: disc;
}

/* unbesuchte link */
.mymenu_left a:link {
  color: black;
}
/* visited link */
.mymenu_left a:visited {
  color: black;
}
/* mouse over link */
.mymenu_left a:hover {
  color: grey;
}
/* selected link */
.mymenu_left a:active {
  color: white;
}

/* Kategorien-----------------------------------------------------------------*/
.mykategorien{
  border: 1px;
  border-style:dashed;
  border-color: black; 
  background-color: transparent;
}

/*Modul Titel (oben)*/
.mykategorien .card-header{
  background-color:rgba(255,255,255,0.4);
  color: black;
  text-shadow: -1px -1px 1px rgba(255,255,255,.1), 1px 1px 10px rgba(255,255,255,1);
}

/*Modul unten (Inhalt)*/
.mykategorien .card-body{
  background-color:rgba(255,255,255,0.2); 
}

.mykategorien .mod-list li .mod-menu__sub{
  list-style-type: disc;  
}

/* Nach oben Button ---------------------------------------------*/
.back-to-top-link{
  color: black;  
  margin-right: 20px;
}
.back-to-top-link:focus, .back-to-top-link:hover {
  background-color: grey;
  border-color: var(--white,#fff);
  color: var(--white,#fff);
}

/* footer ---------------------------------------------*/
.myfooter{
  border: 1px;
  border-style:dashed;
  border-color: black;
  
  text-align: center;
  text-shadow: 2px 2px 8px rgba(150, 150, 150, 1);
  
  background-color:rgba(255,255,255,0.4);
}

/* Phoca Download ---------------------------------------------*/
.pd-categories-view .col .card{
  background-color:transparent;
}

.pd-categories-view .col .card .card-body{
  background-color:rgba(255,255,255,0.2);
}
.pd-categories-view .col .card .card-footer{
  background-color:rgba(255,255,255,0.4);

}



/* -------------------------------
   js-dos sidebar / toolbar / menu
   Minimal extrahiert für UI
--------------------------------*/

/* Sidebar Container */
.dosbox-container {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Toolbar / Menü */
.dosbox-menu {
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    background: rgba(0,0,0,0.6);
    display: flex;
    flex-direction: column;
    z-index: 1000;
    padding: 4px;
    gap: 6px;
    border-left: 1px solid rgba(255,255,255,0.1);
}

/* Buttons */
.dosbox-button {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(4px);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
}

.dosbox-button:hover {
    background: rgba(255,255,255,0.2);
}

/* Button Icons */
.dosbox-button img,
.dosbox-button svg {
    width: 22px;
    height: 22px;
    opacity: 0.9;
}

/* Overlay Fenster */
.dosbox-modal {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 350px;
    transform: translate(-50%, -50%);
    background: rgba(20,20,20,0.95);
    padding: 20px;
    border-radius: 10px;
    z-index: 2000;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.1);
}

/* Modal Close Button */
.dosbox-modal-close {
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 22px;
    cursor: pointer;
}

/* Volume Slider */
.dosbox-slider {
    width: 100%;
    margin: 14px 0;
    -webkit-appearance: none;
    background: #444;
    height: 6px;
    border-radius: 3px;
}

.dosbox-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
}

.dosbox-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
}

/* Save/Load Slots */
.dosbox-slot {
    background: #333;
    padding: 10px;
    border-radius: 6px;
    margin: 5px 0;
    cursor: pointer;
}

.dosbox-slot:hover {
    background: #444;
}

/* Status Text */
.dosbox-status {
    position: absolute;
    bottom: 5px;
    left: 5px;
    color: #ccc;
    font-size: 12px;
    background: rgba(0,0,0,0.5);
    padding: 3px 6px;
    border-radius: 4px;
    z-index: 999;
}