/* mobile Ansicht */
@media screen and (max-width: 40em) {
.container { height:100vh; display: grid; grid-template-rows: 3em 1fr !important; grid-template-columns: 100%; align-items:center; align-items:center; grid-gap: .5em 0 !important; }
article { padding: 0.5em !important; border-radius:none !important; }
label { display: block; padding: 1em 0 .5em 0;width:95%;}
input { display: block;}
fieldset {border:none;margin:0;padding:0;}

h1 {font-size: 150% !important;  }
h2 {font-size: 140% !important;  }
h3 {font-size: 133% !important;  }
h4 {font-size: 127% !important;  }
h5 {font-size: 121% !important;  }
h6 {font-size: 115% !important;  }

.grauebox{margin-bottom:2em}
.flex-itemB { margin:1em 0;  }
header { height:3rem !important; padding: .1em .5em !important; margin: 0 !important;  }

.flex-container-res-column { flex-direction: column;   }
.flex-container-720-column { flex-direction: column !important;   }

.floatrightresp img { padding: 0; }
.floatrighttop{margin:1em 0 0 1.5em; }
.floatrighttop img {width:40px;height:40px;}
.navmenu {font-size:30px !important;  }

.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
.flex-containerC {list-style: none; }

.headschrift, .headsymbol { display:none !important; }
.mobileweg { display:none !important; }

/* flex-box tabellen */
.flex-table { display: flex; flex-direction: column; width: 100%;  }
.flex-row { display: flex; flex-wrap: wrap; /* Erlaubt das Umfließen der Zellen */    }
.flex-cell { flex: 0 1 auto; /* Wächst, schrumpft und nimmt nur den nötigen Platz ein */ padding: 8px; margin: 2px; /* Etwas Abstand zwischen den Zellen */ }

/* flex-box aufgaben */
.flex-container-aufgaben {  margin:0 0; }

/* Standard: Items füllen 100% (stapeln) */
.flex-container-aufgaben > .flex-item-aufgaben {
        flex: 1 1 100%;
        min-width: 0;
}

/* Eingaben füllen die Zelle */
.flex-item-aufgaben input,
.flex-item-aufgaben textarea,
.flex-item-aufgaben select,
.flex-item-aufgaben button {
        width: 100%;
}

/* Hilfsklasse: auf kleinen Screens zwei pro Reihe */
.sm-half {
        flex: 1 1 calc(50% - .5rem);
}
.sm-drittel {
        flex: 1 1 calc(33% - .5rem) !important;;
}
.sm-viertel {
        flex: 1 1 calc(25% - .5rem) !important;
}
.sm-fuenftel {
        flex: 1 1 calc(20% - .5rem) !important;
}
.sm-sechstel {
        flex: 1 1 calc(15% - .5rem) !important;
}
/* flex-box aufgaben */

/* NEU.php */
.ergebnis { padding: 10px !important;  }
.ergebnis-trenner { padding: 10px !important; }
/* NEU.php */
}
/* mobile Ansicht */






@media screen  {
body{font-family: 'Ubuntu', sans-serif; font-size: 1.05em; color: #333;background-color:#F5F5F5}
.container { height:100vh; display: grid; grid-template-rows: 5em 1fr; grid-template-columns: 0% 100% 0%; grid-gap: 1em 0; }
header { background:white; grid-row:1 / 2; grid-column:2; text-align:center; padding: .5em; border-radius:6px;  }
aside { grid-row:1 / 2; grid-column:1; text-align:left; padding:0 1em; }
aside ul { list-style-type: none; margin: 0; padding: 0; }
article { background:white; grid-row:2 / 3; grid-column:2; padding:1em; border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px; }
footer { background:white; grid-row:3 / 4; grid-column:2; text-align:center; padding:0em; border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px; }

h1, h2, h3, h4, h5, h6 { font-family: 'Archivo Black', sans-serif; font-weight: 400; margin: 0; }
h1 {font-size: 200%; margin: 0 0 0.5em 0; }
h2 {font-size: 175%; margin: 0 0 0.5em 0; }
h3 {font-size: 150%; margin: 0 0 0.5em 0; }
h4 {font-size: 140%; margin: 0 0 0.5em 0; }
h5 {font-size: 130%; margin: 0 0 0.5em 0; }
h6 {font-size: 125%; margin: 0 0 0.5em 0; }
p { font-size: 100%; line-height: 1.5; margin: 0 0 1.5em 0; }
.gross1 { font-size: 130%;font-weight:400;font-family: 'Archivo Black', sans-serif;  }
.gross2 { font-size: 130%;font-weight:400;font-family: 'Archivo Black', sans-serif; margin-bottom:0;  }
.NavStriche { font-size: 150%;font-weight:700;  }

ul, ol, dl { font-size: 100%; line-height: 1.5; margin: 0 0 1.5em 0;    }
ul { list-style-type: disc; list-style-position:inside; }
ol { list-style-type: decimal; }
li { font-size: 100%; line-height: 1.5;  margin:0; padding:0;   }


.fett { font-size: 175%; font-family: 'Archivo Black', sans-serif; font-weight: 400; margin: 0; }

a.nohover{background-color:transparent;text-decoration: none;color:#000;outline:0;}
a.keinunterstrich{text-decoration: none;outline:0;}
.flexible{margin-bottom: 0em; max-width: 100%; height: auto; }

.logo_head {background:url(/images/csvberlin.svg) left no-repeat !important; width:340px; height:65px;  }


.nurduck { display: none; }

.orange { background:#FF530E; }

.menu { line-height:1.4em; }


label{display:inline-block;}
legend{background:#fff;padding:.6em;border:2px solid lightgray;box-shadow:inset 2px 2px 3px rgba(0,0,0,0.1);border-radius:3px;font-weight:700}
input,select,textarea{border:2px solid lightgray;box-shadow:inset 1px 1px 3px rgba(0,0,0,0.1);border-radius:5px;}
input:hover,select:hover,textarea:hover{background:LightYellow; border:2px solid GreenYellow;box-shadow:0 0 1em rgba(173, 255, 47, 0.5)}
input:focus,select:focus,textarea:focus{border:2px solid lightgray;box-shadow:0 0 1em rgba(15, 199, 255, 0.7);outline:none}
input:active,select:active,textarea:active{border:2px solid lightgray;box-shadow:0 0 1em rgba(15, 199, 255, 0.7);outline:none}
input[type="checkbox"],div input[type="radio"] {width: auto; margin-right:.5rem;box-shadow: none; /* Entfernt den Schattenrahmen */ }
input[type="checkbox"]:focus { outline: none; /* Entfernt den Rahmen komplett */ }

/*
input[type="submit"],input[type="reset"]{width:10rem;margin:.8em 0 .4em;padding:.6em;background:#fafafa;border:1px solid #aaa;border-radius:20px;background:linear-gradient(to top,#fafafa 10%,#ccc 100%);box-shadow:0 0 5px rgba(255,255,255,0.8);text-shadow:1px 1px 1px rgba(255,255,255,0.8)}
input[type="submit"]{margin-right:.2em;font-weight:700}
input[type="submit"]:hover,input[type="submit"]:focus{border-color:Coral;color:Coral}
input[type="reset"]:hover,input[type="reset"]:focus{border-color:OrangeRed;color:OrangeRed}
input[type="submit"]:active,input[type="reset"]:active{background-image:linear-gradient(to bottom,#fafafa 10%,#ccc 100%)}
input.kill  { border: #BF0000 2px solid !important; }
input.kill:hover,input.kill:focus{border-color:#f55 !important;color:#f55 !important}
input.kill:active{background-image:linear-gradient(to bottom,#fafafa 10%,#ccc 100%) !important;}
*/

input:valid { border: green 1px solid; }
input:invalid  { border: #BF0000 1px solid; }
select:valid { border: green 1px solid; }
select:invalid  { border: #BF0000 1px solid; }
textarea:valid { border: green 1px solid; }
textarea:invalid  { border: #BF0000 1px solid; }

/* Farben */
.farbegrau { background-color: grey; }
.weiss { color: #FFF; }
.hellgrau { color: #F6F8FD; }
.dgrau { color: #030; }
.schwarz { color: #000; }
.orange { color: #ef6c00; }
.gelb { color: #FCD514; }
.blau { color: #1160b3; }
.drot { color: #BF0000; }
.hellbraun { color: #C90; }
.gruen { color: #008500; }
.hellgruen { color: #00FF00; }

/* Farben */


.suche { margin: 0 0 1em 0; }
.suche select {width:15em; height:2.2em;}

 .formselect {width:15em; height:2.2em;}

.box{border-radius:.3em;border-width:1px;border-style:solid;border-color:#888;border-color:rgba(0,0,0,0.3);box-shadow:inset 1px 1px 3px rgba(0,0,0,0.2);color:#444;color:rgba(0,0,0,0.8);padding:1em;margin:0 0 1em}
.box > :last-child{margin-bottom:0}
.boxueberschrift { border-radius:.3em; padding:0.2rem 0.5rem; display:inline-block;  }

.box1{ border-radius:.7rem; padding:1rem; margin: 0 0 1rem 0; }
.box1 > :last-child{ margin-bottom:0; }
.box1:hover{ background:Gold; color: #000; }


/* Farben */
.success{background:#067D0A;color:#FFF}
.info{background:NavajoWhite;color:black}
.warning{background:#FCD516}
.error{background:#c88}

.gruen{ background:LimeGreen;  }
.grau{ background:Silver;  }
.rot{ background:FireBrick;  }

.schriftweiss{color:White !important;}
/* Farben */



.scrollicon{text-align:center;text-decoration:none;cursor:pointer;width:50px;height:50px;border-radius:50%;background:#ccc;opacity:.7;position:fixed;bottom:180px;right:17px;display:none;border:1px solid #FFF;z-index:9999}
.scrollicon div{font-weight:700;font-size:28px;color:#000;padding-top:12px}

.keinabsatzunten { margin-bottom:0 !important; }
.keinabsatz { margin:0 !important; }




.textgross{ font-size:2rem;font-weight:700; }
.textklein{ font-size:.7rem; }
.textrechts{ text-align: right; }
.wordwrap-breakword{ word-wrap: break-word; }

.width100P { width: 100%;  }


.servicepreislisteoben {font-weight:700;background:#ececec;margin-bottom: .5em; padding:.7em .1em .7em .1em;}
.servicepreisliste {border-bottom:solid 2px #ececec;margin-bottom: .5em; padding-bottom:.2em;}
.servicepreisliste2 {border-bottom:solid 5px #ececec;margin-bottom:2em; padding-bottom:2em;}
.servicepreislast {margin-bottom: 1em; padding-bottom:.2em;}
.servicepla{float:left;overflow:hidden;position:relative;width:17em;font-weight:bold;margin-right:1em;}
.servicepla > *:last-child { margin-bottom: 0; }
.serviceplb{float:left;overflow:hidden;position:relative;width:15em}
.serviceplb > *:last-child { margin-bottom: 0; }
.serviceplc{float:left;overflow:hidden;position:relative;width:5em;text-align:right;}
.serviceplc > *:last-child { margin-bottom: 0; }
.servicepl1{float:left;overflow:hidden;position:relative;width:25em;margin-right:1em;}
.servicepl1 > *:last-child { margin-bottom: 0; }
.servicepl2{float:right;overflow:hidden;position:relative;width:5em;text-align:right;}
.servicepl2 > *:last-child { margin-bottom: 0; }
.servicepl3{float:right;overflow:hidden;position:relative;width:5em;}
.servicepl3 > *:last-child { margin-bottom: 0; }
.servicepl4{float:right;overflow:hidden;position:relative;width:5em;}
.servicepl4 > *:last-child { margin-bottom: 0; }
.servicepfeile{list-style-image:url(/images/icons/pfeil_rechts_klein.png); margin:0; padding:0; }
.servicepfeile li{line-height:1.8}
.grossuberschrift{font-size:130%;margin-bottom:1em;}
.ym-clearfix:before{content: ""; display: table;}
.ym-clearfix:after{clear:both; content: "."; display: block; font-size: 0; height: 0; visibility: hidden;  }

.floatrightresp{float:right;padding:0em 0 1.5em 0;}
.floatrightresp img { padding: 0 0 0 2em; }
.floatrighttop{float:right; margin:1em 0 0 2em;  }
.floatrighttop img {width:27px;height:27px;margin-top:.3em;}
.floatrighttop span {font-size: 135%; color:#FF530E; margin-left: .5em; }
.floatright2{float:none;overflow:hidden;position:relative;padding:0 0 .5em 0;}
.floatleft2{float:none;overflow:hidden;position:relative;padding:0 0 .5em 0;}


.flex-containerB { display: flex; flex-direction: row; padding:0; margin: 0 0 1em 0; list-style: none; line-height: 1em;   }
.flex-itemB { flex: 0 1 auto; margin: 1em 2em 1em 0; padding:0;  }
.flex-itemB:last-child { margin-right: 0 !important;  }
.flex-itemC { flex: 0 1 auto; margin: 1em 1em 1em 0; padding:0;  }
.flex-itemC:last-child { margin-right: 0 !important;  }
.flex-itemB2 { flex: 0 1 auto; margin: 1em 2em 1em 0; padding:0; }
.flex-itemB3 { flex: 0 1 auto; margin: 0em 2em 0em 0; padding:0; }
.flex-item-1 { order: 2; background:white;  }
.flex-item-2 { order: 1;  }

.flex-justifycontent-flex-start { justify-content: flex-start !important;  }
.flex-justifycontent-center { justify-content: center !important;  }
.flex-justifycontent-space-between { justify-content: space-between !important;  }
.flex-justifycontent-space-around   { justify-content: space-around  !important;  }

.flex-align-items-center { align-items: center; }
.flex-align-items-strech { align-items: strech; }

.flex-wrap-nowrap { flex-wrap: nowrap; }
.flex-wrap-wrap { flex-wrap: wrap; }




/* alles nebeneinander und auf gleicher H�he  */
.flex-containerC {padding:0; margin:0; list-style: none; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;-webkit-flex-flow: row nowrap; justify-content: flex-start; align-items:center;  }
.flex-itemC { margin: 0; padding:0em;  }

.grauebox{background:#ccc; height:100%;  border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px; }
.grauebox .gross1{ padding: 1em 1em 0em 1em; }
.grauebox .innertext{ padding: 0em 1em 1em 1em; }
.graueboxunten{background:#8F0003;padding:.7em;text-align:right;color:#FFF;bottom:0;  border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;-webkit-border-radius:0 0 6px 6px;}
.graueboxunten a {color:#FFF;background:transparent;text-decoration:none;}
.graueboxunten a:hover {color:#FFF;background:transparent;text-decoration:none;}

 /* The side navigation menu */
.navmenu { font-size:1.6em !important; cursor:pointer;  }
.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 0;
    right: 0;
    background-color: #111; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
/* The navigation menu links */
.sidenav a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 20px; color: #818181; display: block; transition: 0.3s; }
.sidenav input { margin: 3rem 0 0 2rem; }
/* When you mouse over the navigation links, change their color */
.sidenav a:hover { color: #f1f1f1; }
/* Position and style the close button (top right corner) */
.sidenav .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; }
/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#container { transition: margin-left .5s; padding: 20px; }
 /* The side navigation menu */

.flex-auto { display: flex; justify-content: space-between; align-items: center; }
.flex-auto-item { flex: 0 1 auto; }

.flex50rl { display: flex; justify-content: space-between; align-items: flex-start; }
.flex50rl-item { flex: 0 1 auto; }
.headsymbol img { width:27px;height:27px;margin:.3em 1rem 0 0; }
.headschrift { font-size: 135%; color:#FF530E; margin:.3em 1rem 0 0; }

/* Aufgabenbuttons */
.headaufgabe { display: inline-block; padding: .1em .5em .2em .5em; margin: 0;  background-color: #FF70B0; color: white; text-align: center; text-decoration: none; border-radius: 5px; border: none;  cursor: pointer; transition: background-color 0.3s; font-size: 150%; }
.headaufgabe:hover { background-color: #FF8FC1; }
.aufgabevorhanden { display: inline-block; padding: .3em 1em; margin: 0;  background-color: #007BFF; color: white; text-align: center; text-decoration: none; border-radius: 5px; border: none;  cursor: pointer; transition: background-color 0.3s; }
.aufgabevorhanden:hover { background-color: #0056b3; }
/* Aufgabenbuttons */

/* neues Ticket */
.headnticket { display: inline-block; padding: .1em .5em .2em .5em; margin: 0;  background-color: #CCFF66; color: white; text-align: center; text-decoration: none; border-radius: 5px; border: none;  cursor: pointer; transition: background-color 0.3s; font-size: 150%; }
.headnticket:hover { background-color: #99FF66; }
/* neues Ticket */


/* Außenabstände MARGINS */
.keinabsatz { margin-bottom:0; }

.margintop03em { margin-top:0.3em; }
.margintop05em { margin-top:0.5em; }
.margintop1em { margin-top:1em; }
.margintop15em { margin-top:1.5em; }
.margintop2em { margin-top:2em; }
.margintop3em { margin-top:3em; }
.margintop4em { margin-top:4em; }

.marginbott03em { margin-bottom:0.3em; }
.marginbott05em { margin-bottom:0.5em; }
.marginbott08em { margin-bottom:0.8em; }
.marginbott1em { margin-bottom:1em; }
.marginbott15em { margin-bottom:1.5em; }
.marginbott2em { margin-bottom:2em; }
.marginbott3em { margin-bottom:3em; }
.marginbott4em { margin-bottom:4em; }

.marginleft1em { margin-left:1em; }
.marginleft15em { margin-left:1.5em; }
.marginleft2em { margin-left:2em; }
.marginleft3em { margin-left:3em; }
.marginleft4em { margin-left:4em; }

.marginright05em { margin-right:.5em; }
.marginright1em { margin-right:1em; }
.marginright15em { margin-right:1.5em; }
.marginright2em { margin-right:2em; }
.marginright3em { margin-right:3em; }
.marginright4em { margin-right:4em; }


.margin1rem{ margin:1rem;  }
.marginTop1rem{ margin-top:1rem;  }
.marginBottom1rem{ margin-bottom:1rem;  }
.marginLeft1rem{ margin-left:1rem;  }
.marginRight1rem{ margin-right:1rem;  }

/* Außenabstände MARGINS */

/* Knöpfe / Buttons */

/* runde Buttons */
.button{ width:auto;border-radius:.5rem;padding:.6rem 1rem;font-weight:400 !important;margin:0;box-shadow:none !important; cursor:pointer; }
.button:disabled { pointer-events: none; opacity: 0.5; }

.buttonsmall{ width:auto;border-radius:.3rem;padding:.3rem .5rem;font-weight:400 !important;margin:0;box-shadow:none !important; cursor:pointer; }
.buttonsmall:disabled { pointer-events: none; opacity: 0.5; }

/* in das entsprechende Template kopieren
.button { margin:.8rem 2rem .4rem 0;padding:.6rem 2rem; }
.button:last-of-type { margin:.8rem 0rem .4rem 0; }
in das entsprechende Template kopieren */
.graurahmen { background:Gainsboro;border:1px solid Gainsboro;color:#000; }
.graurahmen:hover { background:Gainsboro;border:1px solid #44E935; }
.graurahmen:active { background:#44E935;border:1px solid #44E935;color:Black; }
.graurahmen:visited { background:#44E935;border:1px solid #44E935;color:Black; }

.graunurrahmen { border:1px solid Gainsboro;color:#000;  }
.graunurrahmen:hover { border:1px solid #44E935; }
.graunurrahmen:active { border:1px solid #44E935;color:Black; }
.graunurrahmen:visited { border:1px solid #44E935;color:Black; }

.hellblaurahmen { background:LightBlue;border:1px solid LightBlue;color:#000; }
.hellblaurahmen:hover { background:LightBlue;border:1px solid #44E935; }
.hellblaurahmen:active { background:#44E935;border:1px solid #44E935;color:Black; }
.hellblaurahmen:visited { background:#44E935;border:1px solid #44E935;color:Black; }

.dexxblaurahmen { background:#149dd9;border:1px solid #1a334a;color:#000; }
.dexxblaurahmen:hover { background:#1a334a;border:1px solid #1a334a;color:#FFF; }
.dexxblaurahmen:active { background:#1a334a;border:1px solid #1a334a;color:#FFF; }
.dexxblaurahmen:visited { background:#1a334a;border:1px solid #1a334a;color:#FFF; }

.gruenrahmen { background:#22B814;border:1px solid #22B814;color:#FFF; width: auto !important; }
.gruenrahmen:hover { background:#22B814;border:1px solid #44E935; }
.gruenrahmen:active { background:#44E935;border:1px solid #44E935;color:Black; }
.gruenrahmenvisited { background:#44E935;border:1px solid #44E935;color:Black; }

.gelbrahmen { background:Gold;border:1px solid Gold;color:Black; }
.gelbrahmen:hover { background:Gold;border:1px solid SeaGreen; }
.gelbrahmen:active { background:SeaGreen;border:1px solid SeaGreen;color:White; }
.gelbrahmen:visited { background:SeaGreen;border:1px solid SeaGreen;color:White; }

.hellgelbrahmen { background:#FFFFCC;border:1px solid #FFCC33;color:Black; }
.hellgelbrahmen:hover { background:#FFFF66;border:1px solid #FFFF66; }
.hellgelbrahmen:active { background:#FFFF66;border:1px solid #FFFF66;color:Black; }
.hellgelbrahmen:visited { background:#FFFF66;border:1px solid #FFFF66;color:Black; }

.orangerahmen { background:DarkOrange;border:1px solid DarkOrange;color:White; }
.orangerahmen:hover { background:DarkOrange;border:1px solid SeaGreen; }
.orangerahmen:active { background:SeaGreen;border:1px solid SeaGreen;color:White; }
.orangerahmenvisited { background:SeaGreen;border:1px solid SeaGreen;color:White; }

.rotrahmen { background:FireBrick;border:1px solid FireBrick;color:#FFF; }
.rotrahmen:hover { background:FireBrick;border:1px solid SeaGreen; }
.rotrahmen:active { background:SeaGreen;border:1px solid SeaGreen;color:White; }
.rotrahmenvisited { background:SeaGreen;border:1px solid SeaGreen;color:White; }

.pcvisitrahmen { background:#81642d;border:1px solid #DF9707;color:Black; }
.pcvisitrahmen:hover { background:#81642d;border:1px solid #f7a70a; }
.pcvisitrahmen:active { background:#81642d;border:1px solid #f7a70a;color:Black; }
.pcvisitrahmen:visited { background:#81642d;border:1px solid #f7a70a;color:Black; }

.rdmtrahmen { background:#1f85eb;border:1px solid #1270CE;color:white; }
.rdmtrahmen:hover { background:#1f85eb;border:1px solid #FAF605; }
.rdmtrahmen:active { background:#1f85eb;border:1px solid #FAF605;color:Black; }
.rdmtrahmen:visited { background:#1f85eb;border:1px solid #FAF605;color:Black; }

.serahmen { background:#f28700;border:1px solid #525456;color:white; }
.serahmen:hover { background:#f28700;border:1px solid #D67600; }
.serahmen:active { background:#f28700;border:1px solid #D67600;color:Black; }
.serahmen:visited { background:#f28700;border:1px solid #D67600;color:Black; }

.dsrahmen { background:#b10a05;border:1px solid #0d66b9;color:white; }
.dsrahmen:hover { background:#b10a05;border:1px solid #0B5499; }
.dsrahmen:active { background:#b10a05;border:1px solid #0B5499;color:Black; }
.dsrahmen:visited { background:#b10a05;border:1px solid #0B5499;color:Black; }

.rerahmen { background:#b1ddf6;border:1px solid #ffc73c;color:Black; }
.rerahmen:hover { background:#b1ddf6;border:1px solid #FFB700; }
.rerahmen:active { background:#b1ddf6;border:1px solid #FFB700;color:Black; }
.rerahmen:visited { background:#b1ddf6;border:1px solid #FFB700;color:Black; }

.isDisabled { color: currentColor; cursor: not-allowed; opacity: 0.5; text-decoration: none; }
/* runde Buttons */


/* Textknöpfe */
.textbutton{ width:auto;padding:.2rem; margin:0;cursor:pointer;font: normal bold 1em/2em Arial,Helvetica,sans-serif; }
/* Abstände im entsprechenden Template regel */

.durchsichtig { background-color:none; }
.durchsichtig::after { content: " >"; color: OrangeRed; }
.durchsichtig:hover{color:Green;background-color:White;}
.durchsichtig:active{color:White;background-color:Navy;border-radius:.3rem;}

/* Textknöpfe */


/* Knöpfe / Buttons */



/* flex-boxen */
.flex-auto { display: flex; justify-content: space-between; align-items: center; }
.flex-auto-item { flex: 0 1 auto; }

.flex50 { display: flex; justify-content: space-between; align-items: center; }
.flex50-item { flex: 0 1 auto; }

.flex-order1 { order: 1; }
.flex-order2 { order: 2; }
.flex-order3 { order: 3; }
.flex-order4 { order: 4; }


.flex-container { display: flex; flex-direction: row; padding:0; margin: 0; list-style: none; line-height: 1em;  }
.flex-container-res-column { display: flex; flex-direction: row; padding:0; margin: 0; list-style: none; line-height: 1em;  }
.flex-container-720-column { display: flex; flex-direction: row; padding:0; margin: 0; list-style: none; line-height: 1em;  }
.flex-container-column { display: flex; flex-direction: column; padding:0; margin: 0; list-style: none; line-height: 1em; }
.flex-container-column-start { display: flex; flex-direction: column; padding:0; margin: 0; justify-content: flex-start;  }
.flex-container-column-end { display: flex; flex-direction: column; padding:0; margin: 0; justify-content: flex-end; align-content: flex-end; text-align: right;  }
.flex-container-column-res-end { display: flex; flex-direction: column; padding:0; margin: 0; justify-content: flex-end;  }
.flex-container-column-720-end { display: flex; flex-direction: column; padding:0; margin: 0; justify-content: flex-end;  }
.flex-container-cartsumme { display: flex; flex-direction: column; padding:0; margin: 0; justify-content: flex-end;  }
.flex-container-zb { display: flex; flex-direction: row; padding:0; margin: 0; }

.flex-item { flex: 0 1 auto; margin: 0; padding:0;   }
.flex-item:last-child { margin-right: 0 !important;  }
.flex-item2 { flex-grow: 1; flex-shrink: 1; margin: 0; padding:0;  }
.flex-item2:last-child { margin-right: 0 !important;  }
.flex-item-20-ngrow { flex-basis: 20%; flex-grow: 0; flex-shrink: 1;  }
.flex-item-25-ngrow { flex-basis: 25%; flex-grow: 0; flex-shrink: 1;  }
.flex-item-30-ngrow { flex-basis: 30%; flex-grow: 0; flex-shrink: 1; }
.flex-item-40-ngrow { flex-basis: 40%; flex-grow: 0; flex-shrink: 1;  }
.flex-item-50-ngrow { flex-basis: 50%; flex-grow: 0; flex-shrink: 1; }

.flex-item-20 { flex-basis: 20%; flex-grow: 1; flex-shrink: 1; }
.flex-item-25 { flex-basis: 25%; flex-grow: 1; flex-shrink: 1; }
.flex-item-30 { flex-basis: 32%; min-width:10rem; flex-grow: 1; flex-shrink: 1; }
.flex-item-30:first-child { flex-basis: 32%; min-width:10rem; flex-grow: 0;  }
.flex-item-30:last-child { flex-basis: 32%; min-width:10rem; flex-grow: 0;  }
.flex-item-35 { flex-basis: 35%; flex-grow: 1; flex-shrink: 1; }
.flex-item-40 { flex-basis: 40%; flex-grow: 1; flex-shrink: 1;}
.flex-item-40:last-child { margin-right: 0 !important;  }
.flex-item-45 { flex-basis: 45%; flex-grow: 1; flex-shrink: 1; }
.flex-item-45:last-child { margin-right: 0 !important;  }
.flex-item-50 { flex-basis: 50%; flex-grow: 1; flex-shrink: 1; }
.flex-item-50:last-child { margin-right: 0 !important;  }
.flex-item-60 { flex-basis: 60%; flex-grow: 1; flex-shrink: 1; }
.flex-item-60:last-child { margin-right: 0 !important;  }
.flex-item-70 { flex-basis: 70%; flex-grow: 1; flex-shrink: 1; margin: 0; padding:0; }
.flex-item-70:last-child { margin-right: 0 !important;  }
.flex-item-80 { flex-basis: 80%; flex-grow: 1; flex-shrink: 1; }
.flex-item-80:last-child { margin-right: 0 !important;  }
.flex-item-90 { flex-basis: 90%; flex-grow: 1; flex-shrink: 1; }
.flex-item-90:last-child { margin-right: 0 !important;  }
.flex-item-100 { flex-basis: 100%; flex-grow: 1; flex-shrink: 1; }
.flex-item-100:last-child { margin-right: 0 !important;  }
.break { height: 0; width: 100%; }

.flex-justifycontent-flex-start { justify-content: flex-start !important;  }
.flex-justifycontent-flex-end { justify-content: flex-end !important;  }
.flex-justifycontent-center {  justify-content: center !important; }
.flex-justifycontent-space-between { justify-content: space-between !important;  }
.flex-justifycontent-space-around { justify-content: space-around !important;  }
.flex-justifycontent-space-evenly { justify-content: space-evenly !important; }
.flex-justifycontent-artsearch { justify-content: flex-start !important; }

.flex-shrink0 { flex-shrink:0; }  /* Items dürfen nicht kleiner werden als festgelegt */
.flex-shrink1 { flex-shrink:1; }  /* Items dürfen kleiner werden als festgelegt */
.flex-shrink2 { flex-shrink:2; }
.flex-shrink3 { flex-shrink:3; }

.flex-grow0 { flex-grow:0; }   /* Items dürfen nicht größer werden als festgelegt */
.flex-grow1 { flex-grow:1; }    /* Items dürfen größer werden als festgelegt */
.flex-grow2 { flex-grow:2; }    /* Items dürfen größer werden als festgelegt */

.flex-align-content-flex-start { align-content: flex-start; }
.flex-align-content-flex-end { align-content: flex-end; }
.flex-align-content-center { align-content: flex-center; }
.flex-align-content-space-between { align-content: space-between !important; }
.flex-align-content-space-around { align-content: space-around; }
.flex-align-content-space-evenly { align-content: space-evenly; }
.flex-align-content-stretch { align-content: stretch; }
.flex-align-content-start { align-content: start; }
.flex-align-content-end { align-content: end; }
.flex-align-content-baseline { align-content: baseline; }
.flex-align-content-first-baseline { align-content: first baseline; }
.flex-align-content-last-baseline { align-content: last baseline; }


.flex-align-items-center { align-items: center; }
.flex-align-items-strech { align-items: strech; }
.flex-align-items-space-between { align-items: space-between; }
.flex-align-items-flex-start  { align-items: flex-start; }
.flex-align-items-flex-end { align-items: flex-end; }
.flex-align-items-baseline { align-items: baseline; }

.flex-wrap-nowrap { flex-wrap: nowrap; }
.flex-wrap-wrap { flex-wrap: wrap; }

.flex-gap02 { gap: .2rem .2rem;  }
.flex-gap03 { gap: .3rem .3rem;  }
.flex-gap05 { gap: .5rem .5rem;  }
.flex-gap07 { gap: .7rem .7rem;  }
.flex-gap1 { gap: 1rem 1rem;  }
.flex-gap15 { gap: 1.5rem 1.5rem;  }
.flex-gap2 { gap: 2rem 2rem;  }
.flex-gap3 { gap: 3rem 3rem;  }
.flex-gap4 { gap: 4rem 4rem;  }
.flex-gap5 { gap: 5rem 5rem;  }

.flex-item-align-self-auto  { align-self: auto; }
.flex-item-align-self-flex-start  { align-self: flex-start; }
.flex-item-align-self-flex-end  { align-self: flex-end; }
.flex-item-align-self-center { align-self: center; }
.flex-item-align-self-baseline { align-self: baseline; }
.flex-item-align-self-stretch { align-self: stretch; }

/* flex-boxen */



/* flex-box tabellen */
.flex-table { display: flex; flex-direction: column; width: 100%;  }
.flex-row { display: flex;  width: 100%; /* Stellt sicher, dass flex-row die volle Breite einnimmt */ }
.flex-row form { display: flex; flex: 1; /* Sorgt dafür, dass das Formular die volle Breite der Zeile einnimmt */ width: 100%; /* Gibt dem Formular die volle Breite */ box-sizing: border-box; /* Schließt Padding und Border in der Breite ein */ border-radius:5px; padding: .5rem 0 .4rem 0; }
.form .flex-cell { flex: 1; /* Gibt jeder Zelle gleich viel Platz */ padding: .2rem; border: none; }
.flex-cell-head { font-weight: bold; background-color: #f4f4f4; }
.flex-table .flex-row:nth-child(odd) { background-color: #FFFFFF; }
.flex-table .flex-row:nth-child(even) { background-color: #F2F2F2; }
.flex-cell:hover,.flex-cell:active  { background:none; }
/* flex-box tabellen */



/* Hintergründe */
.hintergrundweiss { background:White; }
.hintergrundweissgrau { background:#F5F5F5; }
.hintergrundhellgrau { background:Gainsboro; }
.hintergrundgrau2 { background:#E4E4E4; }
.hintergrundgrau { background:Grey; }
.hintergrundhellgelb { background:#FFFFDB; }
.hintergrundhellgruen { background:#C2FFC2; }
.hintergrundhellbraun { background:#E8D1BA; }
.hintergrundhellrosa { background:#FFCCFF; }
.hintergrundhellblau { background:#BDD7FF; }
.hintergrundhellrot { background:#FF8080; }
.hintergrundhell2rot { background:#FF0A0A; }
/* Hintergründe */




/* Schriftgrößen */
.fontsize200 { font-size: 200%; }
.fontsize190 { font-size: 190%; }
.fontsize180 { font-size: 180%; }
.fontsize170 { font-size: 170%; }
.fontsize160 { font-size: 160%; }
.fontsize150 { font-size: 150%; }
.fontsize140 { font-size: 140%; }
.fontsize130 { font-size: 130%; }
.fontsize120 { font-size: 120%; }
.fontsize110 { font-size: 110%; }
.fontsize75 { font-size: 75%; }
/* Schriftgrößen */




/* rest Schrift */
.fett700 { font-weight: 700; }
.fett600 { font-weight: 600; }
.fett500 { font-weight: 500; }
.fett400 { font-weight: 400; }

.lineheight10 { line-height: 1em; }
.lineheight12 { line-height: 1.2em; }
.lineheight15 { line-height: 1.5em; }
.lineheight18 { line-height: 1.8em; }
.lineheight20 { line-height: 2em; }

/* rest Schrift */


/* Breiten */
.width99 { width:99%; }
.width50 { width:50%; }
.width45 { width:45%; }
.width40 { width:40%; }
.width30 { width:30%; }
.width20 { width:20%; }
.width10 { width:10%; }


.widthres50 { width:50%; }
.widthres45 { width:45%; }
.widthres40 { width:40%; }
.widthres33 { width:33%; }
.widthres25 { width:25%; }


.width2rem { width:2rem; }
.width3rem { width:3rem; }
.width4rem { width:4rem; }
.width5rem { width:5rem; }
.width6rem { width:6rem; }
.width7rem { width:7rem; }
.width8rem { width:8rem; }
.width10rem { width:10rem; }
.width12rem { width:12rem; }
.width15rem { width:15rem; }
.width18rem { width:18rem; }
.width20rem { width:20rem; }
.width25rem { width:25rem; }
.width30rem { width:30rem; }

.widthmax2rem { max-width:2rem; }
.widthmax3rem { max-width:3rem; }
.widthmax5rem { max-width:5rem; }
.widthmax7rem { max-width:7rem; }
.widthmax10rem { max-width:10rem; }
.widthmax12rem { max-width:12rem; }
.widthmax15rem { max-width:15rem; }
.widthmax18rem { max-width:18rem; }
.widthmax20rem { max-width:20rem; }
.widthmax25rem { max-width:25rem; }
.widthmax30rem { max-width:30rem; }

.widthmin1rem { min-width:1rem; }
.widthmin2rem { min-width:2rem; }
.widthmin3rem { min-width:3rem; }
.widthmin4rem { min-width:4rem; }
.widthmin5rem { min-width:5rem; }
.widthmin6rem { min-width:6rem; }
.widthmin10rem { min-width:10rem; }
.widthmin11rem { min-width:11rem; }
.widthmin12rem { min-width:12rem; }
.widthmin15rem { min-width:15rem; }
.widthmin18rem { min-width:18rem; }
.widthmin20rem { min-width:20rem; }
.widthmin25rem { min-width:25rem; }
.widthmin30rem { min-width:30rem; }

/* Breiten */


/* Höhe */
.height100p { height:100%; }
.height1p5rem { height:1.5rem; }
.height2rem { height:2rem; }
.height3rem { height:3rem; }
.height10rem { height:10rem; }
.height11rem { height:11rem; }
.height12rem { height:12rem; }
.height13rem { height:13rem; }
.height15rem { height:15rem; }
.height16rem { height:16rem; }
.height17rem { height:17rem; }
.height18rem { height:18rem; }
.height20rem { height:20rem; }
.height23rem { height:23rem; }
/* Höhe */


/* runde Ecken */
.rundeecke0p3 { border-radius:.3rem; }
.rundeecke0p4 { border-radius:.4rem; }
.rundeecke0p5 { border-radius:.5rem; }
.rundeecke0p7 { border-radius:.7rem; }
.rundeecke0p8 { border-radius:.8rem; }
.rundeecke10 { border-radius: 1rem; }
/* runde Ecken */

/* Rahmen */
.border3px { border: 3px solid Silver; }
.borderbott1px { border-bottom: 1px solid grey; }
.borderbott3px { border-bottom: 3px solid grey; }
.borderbott5px { border-bottom: 5px solid grey; }
.bordertop { border-radius:.4rem; }
/* Rahmen */



/* Außenabstände MARGINS */
.keinabsatz { margin-bottom:0; }

.margintop03em { margin-top:0.3em; }
.margintop05em { margin-top:0.5em; }
.margintop1em { margin-top:1em; }
.margintop15em { margin-top:1.5em; }
.margintop2em { margin-top:2em; }
.margintop3em { margin-top:3em; }
.margintop4em { margin-top:4em; }

.marginbott03em { margin-bottom:0.3em; }
.marginbott05em { margin-bottom:0.5em; }
.marginbott08em { margin-bottom:0.8em; }
.marginbott1em { margin-bottom:1em; }
.marginbott15em { margin-bottom:1.5em; }
.marginbott2em { margin-bottom:2em; }
.marginbott3em { margin-bottom:3em; }
.marginbott4em { margin-bottom:4em; }

.marginleft1em { margin-left:1em; }
.marginleft15em { margin-left:1.5em; }
.marginleft2em { margin-left:2em; }
.marginleft3em { margin-left:3em; }
.marginleft4em { margin-left:4em; }

.marginright05em { margin-right:.5em; }
.marginright1em { margin-right:1em; }
.marginright15em { margin-right:1.5em; }
.marginright2em { margin-right:2em; }
.marginright3em { margin-right:3em; }
.marginright4em { margin-right:4em; }


.margin1rem{ margin:1rem;  }
.marginTop1rem{ margin-top:1rem;  }
.marginBottom1rem{ margin-bottom:1rem;  }
.marginLeft1rem{ margin-left:1rem;  }
.marginRight1rem{ margin-right:1rem;  }

/* Außenabstände MARGINS */






/* Innenabstände PADDING */
.padding02rem{ padding:0.2rem;  }
.padding04rem{ padding:0.4rem;  }
.padding05rem{ padding:0.5rem;  }
.padding07rem{ padding:0.7rem;  }
.padding08rem{ padding:0.8rem;  }
.padding09rem{ padding:0.9rem;  }
.padding1rem{ padding:1rem;  }
.padding13rem{ padding:1.3rem;  }

.paddingbott06rem{ padding-bottom:.6rem;  }
.paddingbott08rem{ padding-bottom:.8rem;  }
.paddingbott1rem{ padding-bottom:1rem;  }


.paddingtop06rem{ padding-top:.6rem;  }
.paddingtop08rem{ padding-top:.8rem;  }
.paddingtop1rem{ padding-top:1rem;  }
/* Innenabstände PADDING */



/* Hover-Text */
.hovertext { position: relative; border-bottom: 1px dotted black; }
.hovertext:before { content: attr(data-hover); visibility: hidden; opacity: 0; width: 140px; background-color: black; color: #fff; text-align: center; border-radius: 5px; padding: 5px 0; transition: opacity 1s ease-in-out; position: absolute; z-index: 1; right: 0; top: 0; }
.hovertext:hover:before { opacity: 1; visibility: visible; }
/* Hover-Text */



/* NEU.php */
/* JavaSuche Firma */
.suchergebnisse { background: white; width:25rem; max-width:20rem; max-height: 50vh; overflow-y: auto; border: 1px solid #ccc; box-shadow: 0 4px 6px rgba(0,0,0,0.1); z-index: 1000; }
.ergebnis { padding: 5px; border-bottom: 1px solid #eee; cursor: pointer; color: #000; }
.ergebnis:last-child { border-bottom: none; }
.ergebnis:hover { background-color: #e0e0e0; }
.ergebnis-trenner { padding: 5px; background-color: #EDED42; pointer-events: none; /* Verhindert, dass auf den Trenner geklickt werden kann */ }
/* JavaSuche Firma */
/* NEU.php */

/* JavaSuche initUniversalSearch */
#vorschlagsliste {
        position: absolute; /* Wichtig für Überlagerung */
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 0 0 8px 8px; /* Unten abgerundet */
        box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* Schatten für Tiefe */
        z-index: 1000;
        max-width: 100%; /* Passt sich dem Container an */
        max-height: 250px;
        overflow-y: auto;
        margin-top: 2px;
}

.vorschlag {
        padding: 12px 15px; /* Mehr Platz zum Klicken/Tippen */
        cursor: pointer;
        border-bottom: 1px solid #f0f0f0;
        transition: background 0.2s;
}

.vorschlag:last-child {
        border-bottom: none;
}

/* Der Fokus durch Tastatur oder Maus */
.vorschlag:hover,
.vorschlag.highlighted {
        background-color: #e3f2fd !important; /* Sanftes Blau */
        color: #1976d2;
}
/* JavaSuche initUniversalSearch */



/* Asset */
        /* Stil für die Box, in die der Asset-Name eingebettet wird */
        .asset-box {
                display: inline-block;
                padding: 3px;
                margin: 2px;
                background-color: #e0e0e0;
                border-radius: 3px;
                border: 1px solid #ccc;
                word-wrap: break-word;
        }
        /* Stil für die Dropdown-Liste */
        .autocomplete-list {
                border: 1px solid #ccc;
                max-height: 150px;
                overflow-y: auto;
                background-color: white;
                position: absolute;
                z-index: 1000;
        }
        .autocomplete-item {
                padding: 5px;
                cursor: pointer;
        }
        .autocomplete-item:hover {
                background-color: #f0f0f0;
        }
        .autocomplete-item.highlighted {
                background-color: #e0e0e0;
                color: black;
        }
/* Asset */



/* Dashboard */
        .dashboard {
            display: flex;
            flex-wrap: wrap;
            gap: 2rem;
        }

        .card {
            background: white;
            border-radius: 10px;
            box-shadow: 0 0 5px rgba(0,0,0,0.1);
            flex: 1 1 48%;
            display: flex;
            flex-direction: column;
            max-height: 500px;
            overflow: hidden;
        }

        .card-content {
            max-width: 100%;
            overflow-x: hidden;
        }

        .card.klappbar .card-content {
            display: none;
        }
        .card.klappbar.zugeklappt .card-content {
            display: none;
        }
        .card.klappbar:not(.zugeklappt) .card-content {
            display: block;
        }

        .card.klappbar:not(.zugeklappt) .card-header::after {
            content: " ▲";
            font-size: 0.9em;
            color: #555;
        }

        .card.klappbar.zugeklappt .card-header::after {
            content: " ▼";
            font-size: 0.9em;
            color: #555;
        }

        .entry {
            display: flex;
            align-items: flex-start;
            padding: 0.7rem 0.5rem;
            border-bottom: 1px solid #f0f0f0;
            gap: 0.8rem;
        }

        .icon {
            font-size: 1.5em;
            margin-right: 0.5em;
            flex-shrink: 0;
        }

        .entry-info {
            flex-grow: 1;
            overflow: hidden;
        }

        .entry-title-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
        }

        .entry-title-text {
            font-weight: bold;
            margin-right: 1em;
            flex-grow: 1;
            min-width: 200px;
        }

        .wartung-eintrag button {
            font-size: 1em;
            cursor: pointer;
            white-space: nowrap;
        }

        .entry-sub {
            margin-top: 0.3em;
            font-size: 0.95em;
            color: #555;
        }

        .entry-title {
            font-weight: bold;
            margin-bottom: 0.2rem;
        }



        /* Symbole per Unicode */
        .expired .icon { content: "⏰"; }
        .activity .icon { color: U+1F5D2; }

        .card-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            padding: 0.8rem 1rem;
            font-weight: bold;
            border-bottom: 1px solid #FFC5AD;
            background-color: #FFC5AD;
        }

        .card-title {
            font-size: 1.1rem;
            display: flex;
            align-items: center;
            gap: 0.4rem;
        }

        .card-option {
            display: flex;
            align-items: center;
        }

        .card-option input[type="checkbox"] {
            cursor: pointer;
        }

        .add-link {
            font-size: 1.4rem;
            text-decoration: none;
            color: #3f5765;
            transition: color 0.2s ease;
        }

        .add-link:hover {
            color: #1D292F;
        }
/* Dashboard */


/* Aufgaben – GLOBAL */
        .flex-container-aufgaben {
            display: flex;
            flex-wrap: wrap;
            gap: .5rem;
            align-items: center; /* optional */
        }

        /* Mobil: alles 100% breit stapeln */
        .flex-container-aufgaben > .flex-item-aufgaben {
            flex: 1 1 100%;
            min-width: 0;
        }

        /* Inputs standardmäßig füllen die Zelle */
        .flex-item-aufgaben input,
        .flex-item-aufgaben select,
        .flex-item-aufgaben button,
        .flex-item-aufgaben textarea {
            width: 100%;
        }


        .flex-item-aufgaben select { height:2rem; border-radius:5px;  }
        .flex-item-aufgaben input { height:1.8rem; border-radius:5px;  }
        .flex-item-aufgaben textarea { height:1.6rem; border-radius:5px;  }

        /* Halbe Breite markieren (2 pro Zeile auf kleineren Screens) */
        .sm-half { flex: 1 1 calc(50% - .5rem); }


        /* Aufgabenliste: Zeilen-Optik über das Form-Element */
        form.aufgaben {
            display: block;              /* entkoppelt von evtl. Flex-Vorgaben */
            padding: .6rem .5rem;
            border-top: 1px solid #e5e5e5;     /* Trennlinie über jedem Eintrag */
        }

        /* erste Zeile ohne doppelte Linie oben */
        form.aufgaben:first-of-type {
            border-top: none;
        }

        /* optional: unten eine Abschlusslinie */
        form.aufgaben:last-of-type {
            border-bottom: 1px solid #e5e5e5;
        }

        /* Zebra-Streifen */
        form.aufgaben:nth-of-type(odd)  { background: #FFFFFF; }
        form.aufgaben:nth-of-type(even) { background: #F7F7F7; }

        /* leichte Hover-Markierung fürs schnelle Scannen */
        form.aufgaben:hover {
            background: #FFFBEA;
        }

/* Aufgaben */


}

/* Ab 60em: Desktop – alles wieder “nebeneinander” */
@media (min-width: 60em) {
        .flex-container-aufgaben {  margin:0.1rem 0; }
        .flex-container-aufgaben > .flex-item-aufgaben {
        flex: 0 0 auto;                /* nebeneinander */
    }

    /* Auf Desktop sollen Felder nicht zwangsläufig 100% breit sein */
    .flex-item-aufgaben input,
    .flex-item-aufgaben select,
    .flex-item-aufgaben button {
        width: auto;
    }
    .flex-item-aufgaben textarea {
        width: 40rem;
    }

}



@media screen and (max-width: 60em) {
        .container { height:100vh; display: grid; grid-template-rows: 5em 1fr auto; grid-template-columns: 100%; grid-gap: 1em 0; }
        header { background:white; grid-row:1; grid-column:1; text-align:center; padding:.5em; }
        aside { grid-row:3; grid-column:1; text-align:center; padding:1em; }
        article { background:white; grid-row:2; grid-column:1; padding:1em; }
        footer { background:white; grid-row:4; grid-column:1; text-align:center; padding:0 1em; }

        header .logo { width:100px; float:left;  }
        .logo_head {background:url(/images/csvberlin_quadrat.svg) left no-repeat !important; width:67px; height:39px;  }

/* Aufgaben */
    .flex-container-aufgaben > .flex-item-aufgaben { flex: 1 1 calc(50% - .5rem); }
    .stay-full { flex: 1 1 calc(100% - .5rem) !important; }
/* Aufgaben */
}



@media print {

aside, .sidenav, .floatrighttop, footer, header { display: none; }
h1 { font-family: Verdana, Geneva, sans-serif; color: #000; font-weight:700;font-size:2em; text-align:center;text-decoration:none;  }
.noprint { display: none; }

}