@charset "utf-8";
/*
sand:   rgb(168,142,11)
        #A88E0B
*/
*{
    font-family:Verdana;
    box-sizing: border-box;
    font-size:15px;
    margin:0;
    padding:0;
    text-decoration:none !important;
    color:#000;
}

body{
    background-color: #C0C0C0;
}
html{
    background-color: #C0C0C0;
    overflow:auto;
}
body > main{
    padding:10px 10px 0px 10px;
}
body > main.grid2{
    width:100%;
    height:calc(100vH - 18px);

    margin:auto;
    padding-bottom:0px;
    display: grid;
    grid-template-columns: 435px 1fr;
    grid-template-rows: 60px 1fr 95px;
    gap: 10px 15px;
    grid-template-areas:
        "topleft topright"
        "middleleft middleright"
        "bottomleft bottomright";
}

.ol  { grid-area: topleft; }
.or  { grid-area: topright; }
.ml  { grid-area: middleleft; }
.mr  { grid-area: middleright; overflow:auto; }
.bol { grid-area: bottomleft; text-align: center;}
.bor { grid-area: bottomright; }

body > main.grid9{
    width:100%;
    height:98vH;
    overflow:auto;
    margin:auto;
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: 30vH 30vH 14.5vH 14.5vH;
    gap: 1vH 15px;
    grid-template-areas:
        "area1 area2 area3 laufschrift laufschrift laufschrift area4 area5 area6"
        "area7 area8 area9 area10 area11 area12 area13 area14 area15"
        "area16 area17 area18 area19 area20 area22 area23 area24 area25"
        "area16 area17 area18 area19 area21 area22 area23 area24 area26";
}

body > main.grid9 a{
    width:100%;
    height:100%;
}

button,a{
    cursor:pointer;
}
.icon-login{
    display:inline-block;
    padding:8px 10px 8px 10px;
    font-size:1.8rem;
}
.icon-login span{
    display:inline-block;
    margin:0px 10px;
    font-family:Verdana;
    font-size:inherit;
}
button,.button{
    margin:auto;
    display:inline-block;
    padding:4px 6px;
    background-color:rgba(255,255,255,0.7);
    border:1px solid #666699;
    border-radius:6px;
}

ul li,ol li{
    margin-left:40px;
}
form{
    line-height:1.6em;
}
form input,form select{
    display:inline-block;
    padding:4px 6px;
    width:95%;
    border-radius:6px;
}
table{
    border-spacing:0;
}
td{
    vertical-align: top;
    padding:2px 3px;
}
footer{
    display: block;
    position:fixed;
    bottom:0px;
    left:0px;
    z-index:1000;
    height:30px;
    width:100vW;
    max-width:100%;
    line-height:30px;
    padding:0px;
    text-align: right;
    background-color: rgba(255,255,255,0.7);
}
footer a{
    font-size:0.9rem;
}

/* ------------------------------------------ [+] Seiten ------------------------------------------- */
#home{
    overflow:auto;
}
@keyframes example {
  0% {text-shadow:4px 4px 10px #808080;}
  50% {text-shadow:4px 4px 10px #0B0B0B;}
  100% {text-shadow:4px 4px 10px #808080;}
}

body > h1,.empty{
    margin-top:40px;
    margin-bottom:40px;
    font-size:5rem;
    text-align:center;
    font-family: arial;
    font-weight:bold;
    text-shadow:4px 4px 10px #808080;
    animation-name: example;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    color:#C0C0C0;
}
.empty{
    position:fixed;
    top:50px;
    left: calc(50% - 440px);
    display:block;
    width:880px;
    text-align:center;
}
#zurueck.button{
    padding:8px 10px 8px 10px;
    font-size:1.8rem;
    position:fixed;
    top:200px;
    left: calc(50% - 90px);
    display:block;
    width:180px;
}

#settings form{
    line-height:34px;
    max-width:80%;
    margin:auto;
}
#settings form label{
    display:inline-block;
    width:19%;
    vertical-align:top;
}
#settings form input,#settings form  select{
    width:75%;
    display: inline-block;
    padding: 4px 6px;
    border-radius: 6px;
}
#uploaddialog, #uploaddialog *, #uploaddialog .ui-dialog .ui-dialog-content{
    overflow: hidden;
}
#deldialog figure{
    display:inline-block;
    width:120px;
    height:130px;
    border:1px solid red;
    vertical-align: top;
    line-height:225px;
    text-align:center;
    background-size:contain;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #fff;
    border:1px solid #0B0B0B;
    border-radius:4px;
    margin:4px;
    overflow:hidden;
}
#deldialog figure a{
    color:#DE1919;
}

/* ------------------------------------------ [-] Seiten ------------------------------------------- */


/* ------------------------------------------ [+] Laufschrift -------------------------------------- */
#lauf{
    border:1px solid #0B0B0B;
    border-radius:8px;
    background-color:rgb(255,255,255);
    position:relative;
}

#lauf h2{
    font-size:4rem;
    line-height:4.5rem;
    text-align:center;
    font-family: arial;
    font-weight:bold;
    text-shadow:4px 4px 10px #808080;
  animation-name: example;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  color:#fff;
}
#laufschrift{
    width:95%;
    height:105px;
    display:block;
    margin:auto;
    margin-top:15px;
    line-height:1.2rem;
    font-size:0.85rem;
    position:absolute;
    bottom:0px;
    left:2.5%;
}
#laufschrift *{
    font-size:inherit;
}
/* ------------------------------------------ [-] Laufschrift -------------------------------------- */

/* ------------------------------------------ [+] IDs ---------------------------------------------- */
#layer{
    display:none;
    position:fixed;
    top:0px;
    left:0px;
    z-index:15000;
    background-color:rgba(0,0,0,0.9);
    height:100vH;
    width:100vW;
    overflow:auto;
}
#layer #close{
    position:absolute;
    top:10px;
    right:20px;
    background-color:#FFF;
    width:40px;
    height:40px;
    display:block;
    z-index:1;
    text-align:center;
    line-height:36px;
    font-weight:bold;
    border-radius:20px;
    text-transform: uppercase;
    border:2px solid #808080;
}
#layer #close:hover{
    color:red;
    border:2px solid red;
}
#layer #details{
    display:block;
    line-height: 1.3rem !important;
    padding:20px;
    width:95vW !important;
    min-height:90vH;
    max-height:97vH;
    overflow: auto;
    margin:10px auto;
    margin-top:20px;
    border:1px solid #0B0B0B;
    border-radius:8px;
    background-color:rgb(255,255,255);
}
#layer #details img{
    max-width:100%;
    max-height:76vH;
}
#layer #details .thumb{
    max-width:80px;
    max-height:80px;
    vertical-align: middle;
    border:1px solid #0B0B0B;
    border-radius:4px;
    cursor:pointer;
    margin-bottom: 4px;
}
#printdialog{
    display:none;
}
#deldialog .thumb{
    max-width:140px;
    max-height:140px;
    vertical-align: middle;
    border:1px solid #0B0B0B;
    border-radius:4px;
    margin: 4px;
}
/* ------------------------------------------ [-] IDs ---------------------------------------------- */


/* ------------------------------------------ [+] Klassen ------------------------------------------ */

@keyframes loading {

  0% { width:0px;}
  50% {width:35%;}
  100% {width:70%;}
}
.dots{
    text-align:center;
    font-family: arial;
    font-weight:bold;
    animation-name: loading;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    overflow:hidden;
    height:1em;
    display:inline-block;
    border-bottom:3px dotted #000;
    margin-left:10px;
}

.fehler{
    color: #FF6600;
}
.erfolg{
    color: #008000;
}
.ui-state-error{
    color:#fff;
}

.titel h3{
    padding:4px 0px;
    text-align:center;
    font-size:1.2rem;
    line-height:inherit;
}
h3.content {
    line-height:1.5em;
    overflow:hidden;
}

.grid9 a.auswahl{
    display:inline-block;
    border:1px solid #0B0B0B;
    border-radius:8px;
    background-color:rgb(255,255,255);
    line-height:160px;
    background-position:center center;
    background-repeat: no-repeat;
    background-size:contain;
    transition:all 1s;
    opacity:1;
    position:static;
    overflow:hidden;
}
.grid3{
    width:100%;
    display: grid;
    grid-template-columns: 1fr 100px 80px;
    grid-template-rows: 1fr;
    gap: 0px 20px;
}
.grid3 figure{
    border:1px solid #0B0B0B;
    border-radius:4px;
    background-color:rgb(255,255,255);
}
.content{
    padding:5px 7px;
    background-color:rgb(255,255,255);
    border-radius:4px;
    border:1px solid #333333;
}
.flagge{
    max-height:50px;
    max-width:150px;
}
.r{
    text-align:right;
}
.c{
    text-align:center;
}
.inaktiv{
    opacity:0.5;
    background-color:rgba(255,255,255,0.3);
    cursor: default;
}
.zuenderdetails{
    float:right;
    margin-right: 20px;
    line-height:inherit;
}
ol.zuendervorschau li{
    display:inline-block;
  	vertical-align:top;
    width:180px;
    height:180px;
    border-radius:4px;
    background-position:center center;
    background-repeat: no-repeat;
    background-size:contain;
    position: relative;
    text-align:center;
    box-shadow:4px 4px 8px #000;
    margin:10px;
    cursor:pointer;
    opacity: 0.6;
    transition:all 0.4s;
}
ol.zuendervorschau li:hover{
    opacity: 1;
}
.grid3h{
    width:100%;
    height:calc(100vH - 35px);
    display: grid;
    grid-template-columns: 1fr ;
    grid-template-rows: 135px 1fr 80px;
    gap: 20px 0px;
}
.grid3h_small{
    width:100%;
    height:calc(100vH - 35px);
    display: grid;
    grid-template-columns: 1fr ;
    grid-template-rows: 90px 1fr 80px;
    gap: 20px 0px;
}
.whitebg{
    border:1px solid #0B0B0B;
    border-radius:8px;
    background-color:rgb(255,255,255);
    background-position:center center;
    background-repeat: no-repeat;
    background-size:contain;
}
.settingbt{
        display:inline-block;
        margin:10px;
        background-color:#C0C0C0;
        border-radius:4px;
        border:1px solid #333333;
        width:65px;
        height:65px;
        vertical-align: middle;
        text-align: center;
        line-height:65px;
        position: relative;
        box-shadow:5px 5px 8px #808080;
        color:rgba(0,0,0,0.4);
        transition:all 0.4s;
}
.settingbt:hover, .settingbt.aktiv{
        color:rgba(0,0,0,1);
        box-shadow:0px 0px 8px #808080;
        margin:15px 5px 5px 15px;
}
.settingbt:before{
    font-size:1.5em !important;
}

/* ------------------------------------------ [-] Klassen ------------------------------------------ */
/* ------------------------------------------ [+] Filterformular ----------------------------------- */

.detailbt{
    display:inline-block;
    margin:0px 5px 0px 0px;
    padding:10px;
    background-color:rgb(255,255,255);
    border-radius:4px;
    border:1px solid #333333;
    width:85px;
    height:85px;
    line-height:85px;
    vertical-align: middle;
    text-align: center;
    position: relative;
}
.detailbt img{
    max-width:65px;
    max-height:65px;
    text-align: center;
}
.detailbt .count{
    width:17px;
    height:17px;
    border-radius:50%;
    border:1px solid #333333;
    display:inline-block;
    font-size:10px;
    text-align:center;
    line-height:15px;
    position: absolute;
    bottom:10px;
    right:10px;

}
.detailbt.inaktiv .count{
    visibility:hidden;
}
.bor .detailbt{
    margin:0px 0px 0px 0px;
}
#filteroptionen .ml{
      display:grid;
      width:435px;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(10, 1fr);
      gap: 0px 0px;
      grid-auto-flow: row;
      grid-template-areas:
        "flaggen flaggen flaggen flaggen"
        "line1"
        "l3 l3 r3 r3"
        "l4 l4 r4 r4"
        "line2"
        "l5 l5 r5 r5"
        "l6 l6 r6 r6"
        "l7 l7 r7 r7"
        "l8 l8 r8 r8"
        "l9 l9 r9 r9";
}

.filterlabel,.filterbt{
    display:inline-block;
    margin:0px 0px 10px 0px;
    padding:5px 7px;
    background-color:rgb(255,255,255);
    border-radius:4px;
    border:1px solid #333333;
    width:210px;
    line-height:1.3rem;
}
.auswahl_herkunft{
    display:inline-block;
    margin-bottom:4px;
    margin-left:6px;
    margin-right:0px;
    opacity:0.5;
    width:47px;
}
.auswahl_herkunft.aktiv{
    opacity:1;
}
.auswahl_herkunft img{
    height:28px;
    width:47px;
}
#filteroptionen input[type=number]{
     margin-left:0px;
     margin-right:0px;
     width:100px;
    padding:5px 7px;
}
.filterbt.aktiv{
    color:#339966;
}

.auswahlliste{
    max-height: 100%;
    overflow: auto;
    list-style-type:none;
}
.auswahlliste li{
    margin:3px 5px 3px 5px;
    border:1px solid #333333;
    border-radius:4px;
    transition: all 0.3s;
}
.auswahlliste li:hover,.auswahlliste li.aktiv{
    background-color:rgba(0,0,0,0.2);
}
.auswahlliste li a{
    padding:5px 7px;
    line-height:1.6em;
    display:block;
}
/* ------------------------------------------ [-] Filterformular ----------------------------------- */

/* ------------------------------------------ [+] Zündersuche ----------------------------------- */
form#zuendersuche,form#suchform{
    display:inline-block;
    margin:10px auto;
    line-height:34px;
    text-align: left;
}
form#zuendersuche input,form#suchform input,form#zuendersuche select{
    width:200px;
    display: inline-block;
    padding: 4px 6px;
    border-radius: 6px;
}
form#zuendersuche label,form#suchform label{
    display:inline-block;
    width: 220px;
    vertical-align:top;
}

.ergebnistbl .tbllist{
    width:85%;
    margin:10px auto;
    border-spacing:0;
}
.ergebnistbl .tbllist th{
    text-align: left;
    line-height: 1.6em;
}
.tbllist tbody tr:hover{
    background-color:rgba(0,0,0,0.2);
}
.ergebnistbl{
    max-height:100%;
    overflow: auto;
}

/* ------------------------------------------ [-] Zündersuche ----------------------------------- */

@media (max-width: 1000px) {

    body{
        overflow:auto;
        height:100vH;
    }
	body > main.grid9{
    width:100vW;
    }

    body > main.grid2{
        width:100%;
        height:99vH;
        margin:auto;
        margin-bottom:0px;
        padding:10px;
        padding-bottom:0px;
        display: grid;
        grid-template-columns: 428px 1fr;
        grid-template-rows: 55px 1fr 70px;
        gap: 10px 15px;
        grid-template-areas:
            "topleft topright"
            "middleleft middleright"
            "bottomleft bottomright";
    }


    .detailbt{
        display:inline-block;
        margin:0px 5px 0px 0px;
        padding:10px;
        background-color:rgb(255,255,255);
        border-radius:4px;
        border:1px solid #333333;
        width:75px;
        height:75px;
        line-height:75px;
        vertical-align: middle;
        text-align: center;
        position: relative;
    }
    .detailbt img{
        max-width:55px;
        max-height:55px;
        text-align: center;
    }
    .bol { text-align: center; }
    .bol .detailbt { float: none !important; }
    .bol .detailbt { margin-left:0px !important; }
    #settingbt{ display:none;}

    .filterlabel,.filterbt{
        margin:0px 0px 10px 0px;
    }
}