/* ***********************************************
 * 
 * shanty-fsd.de/css/basis.css  2020-02-23 12:40
 * 
 * Copyright: Karl-Heinz Osmer, Groß-Gerau
 * 
 * *********************************************** */

@page {
  margin: 0;
}

* {
  box-sizing: border-box;
  hyphens: auto;
}
::placeholder {
  color: #a00;
  font-size: 80%;
  font-style: italic;
  font-weight: normal;
}

/* ******************
 * print
 * ****************** */
@media print {
  .screen {
    display: none ! important;
  }
} /* @media print */



/* ******************
 * screen
 * ****************** */
@media screen {
  .print {
    display: none;
  }
  .a4_hoch {
    margin-bottom: 1em;
  }
} /* @media screen */



@media (max-width: 30em) { /* Kompaktes Layout */
  * {
    color: #000;
  }
}

@media (min-width: 30.01em) {
/*
  header, .navi, .main, footer {
    margin-left: .5vw;
    margin-right: .5vw;
  }
*/
  /* header fuer breites Display */
  .flex {
    display: flex;
    width: 100%;
    justify-content: space-between;  /* = justify */
    justify-content: center;
  }
  .flex > h1:nth-of-type(2) {
    padding-top: 3.5em;
  }

} /* min-width: 30.01em */


body {
}
header, .main, footer {
  position: relative;
  background: rgba(255,255,255,.9);
  max-width: 210mm;
  margin-left: auto;
  margin-right: auto;
  display: block;
  padding: 5px;
}
/*
  border-radius: 5px;
*/
header::after, .main::after, footer::after {
  content: "";
  display: block;
  clear: both;
}
footer {
  margin-top: .5em;
  border-top: 1px solid #00a;
  padding-top: .5em;
  font-size: 80%;
}
footer p:nth-of-type(1) {
  float: left;
}
footer p:nth-of-type(2) {
  float: right;
}

p {
  margin: 0 0 0.5em 0;
  line-height: 130%;
  letter-spacing: .05em;
}


a  {
  text-decoration: none;
  border-bottom: .1pt solid #888;
}
a.aktiv {
  color: #a00;
  background: #ff0;
  font-weight: bold;
  letter-spacing: 2px;
  border: .1pt solid #00a;
}
a.pf_rechts {
  background-image:    url(../img/pf_rechts_rot.gif);
  background-repeat:   no-repeat;
  background-position: center right;
  padding-right:       13px;
}
audio {
  vertical-align: middle;
  opacity: .6;
  border-radius: 5px;
  background: #0f0;
}

ol, ul {
  margin: 0 0 .5em 0;
}
li {
  margin: 0 0 .3em 0;
}

div#helptext {
  position: absolute;
/*display: none;*/
  visibility: hidden;
  left: 5px;
/*width: 25em;*/
  max-width: 25em;
  top: 5px;
  min-height: 5em;
  background-color: #ffc;
  border: 1px solid #000;
  border-radius: 5px;
  box-shadow: 5px 5px 10px #666; /* horizontal vertical verwaschen farbe */
  padding: 10px;
  z-index: 5;
}
div#helptext p {
  margin: 0 0 .5em 0;
}
.help {             /* icon_info.png - veraltet: help-Buchstaben */
/*font-weight: bold;*/
  cursor: help;
}
.help img, img.help {   /* icon_info.png */
  height: 1.2em;
  cursor: help;
  vertical-align: middle;
}

h1,h2,h3 {
  font-family: sans-serif;
  font-weight: normal;
  margin: 0 0 .5em 0;
}
h1 {
  font-size: 1.8em;
}
h2 {font-size:1.5em}
h3 {font-size:1.1em; letter-spacing:0.1em}

img.ic   {border:none; height:1.2em; vertical-align:middle}
img.ic_kl{
  border: none!important;
  height: .9em!important;
  vertical-align: middle!important;
}
img.ic_gr{border:none; height:1.7em; vertical-align:middle}

button {
  border: 1px solid #44f;
  background: #ccc;
}
button:hover {
  background: #ffa;
}
hr {
  height: .1pt;
  margin: .5em;
  padding: 0;
  color: #0ff;
}

/* **************************************
 * Eingabefelder hellgruen
 * disabled grau (Standard), kein border
 * ************************************** */
input, select, textarea {
  font-size: 110%;
  vertical-align: middle;
}
input, textarea {
  font-family: 'courier new', courier, monospace;
  color: #008;
  padding-left: 0.2em;
  padding-right: 0.2em;
}

input[type='text'] {
  max-width: 100%;
}
input[type='checkbox'], input[type='radio'] {
  transform: scale(1.5);
  margin-left: 5px;
  margin-right: 5px;
}
input[type='reset'], input[type='submit'] {
  font-family:      arial,sans-serif;
}
input[readonly]  {
  background-color: #fcc;
}

@media print {
  input, textarea {
    background: transparent;
  }
}
@media screen {
  input:disabled, textarea:disabled {
//  border: 1px solid #fff;
    background: #ccc;
  }
  input:required, .pflichtfeld {
    background: #efe;
//  border: .1pt solid #000;
    border-left: 5px solid #0a0;
  }
  input:focus, textarea:focus {
    background-color:#ff8;
//  border: .1pt solid #0c0;
  }
}


table.liste {
  border-collapse:  collapse;
  empty-cells:      show;
}
table.liste td {
  border:            1px solid #ccf;
  padding:           0 5px 0 5px;
  vertical-align:    top;
}
table.liste thead {
  position: -webkit-sticky;
  position: moz-sticky;
  position: -o-sticky;
  position: -ms-sticky;
  position: sticky;   /* bleibt beim Scrollen am oberen Rand kleben */
  top: 5px;
  background-color: #fe8;
}
table.liste thead td, table.liste thead th {
  border: .1pt solid #aaf;
  padding: 5px;
}
table.liste tbody tr:nth-of-type(even) {
  background: rgba(0,0,255,.02);
}
textarea.feld_gr {
  margin: .2em auto .2em auto;
  width: 99%;
}


/* ================
   KLASSEN
   ================ */
.a4_hoch {
  position: relative;
  width: 205mm;
  height: 294mm;
  height: 290mm;
  padding-top: 3mm;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  page-break-after: always;
  background: #fff;
  border: 2px solid red;
  border: 2px solid transparent;
}
/*
.a4_hoch:last-child {
  page-break-after: avoid;
}
*/
.aen {
  font-family:     arial,sans-serif;
  background-color:#ff0!important;
  font-weight:     bold;
  color:           #00a;
}
.arial {font-family:verdana,arial!important}
.bb{border-bottom:1px solid #aaa; padding-bottom:0.2em}
.bnone {border:none}
.bgpapier {background-image:url(../img/bg_papier.jpg)}
.bgtransp {
  background: url(../img/transp.gif);
  background: rgba(255,255,255,.4);
}
.bianca{color:#0af;letter-spacing:2px}
.bo {
  border:1px solid #00a;
  padding: 5px;
  border-radius: 5px;
}
.bo img {
  width: 100%;
  display: block;
  border-radius: 5px;
}
.bo p {
  margin: .2em 0 0 0;
  font-size: 80%;
  letter-spacing: .05em;
}
.bold {font-weight:bold}
.brot {border:2px solid #f00}
.bt {border-top:1px solid #aaa; padding-top:0.2em}
.button {
  padding: 2px;
  border: 1px solid #888;
	border-radius: 4px;
  background: #ccc;
}
.c_gry {
  color: #888;
}
.clear {
  clear: both;
}
.cm {text-align:center; vertical-align:middle}
.co {
  text-align: center;
  vertical-align: top;
}
.courier{font-family:'courier new',monospace}
.cur_help {cursor:help}
.cur_pointer {cursor:pointer}
.css_hide{display:none}
.drehlogo {
  transition: transform 3s ease;
}
.drehlogo:hover {
  transform: rotate(360deg);
}
.em05{font-size: 50%}
.em06{font-size: 60%}
.em08{font-size: 80%}
.em11{font-size:110%}
.em12{font-size:120%}
.em13{font-size:130%}
.em14{font-size:140%}
.em16{font-size:150%}
.em18{font-size:180%}
.em20{font-size:200%}
.external {
  background-image: url(../img/external.png);
  background-repeat: no-repeat;
  background-position: center right;
  padding-right: .8em ! important;
}
.fehler {
  background: #ff0;
  color: #a00;
  padding: 5px;
}
.fehler p {
  margin: 0;
}
.feiertag {color:#f00}
.hinweis {
  background: #afa;
  padding: 5px;
}
.hinweis p {
  margin: 0;
}
.float {
  padding-left: 0.2em;
  padding-right:0.2em;
  border-left:  2px solid #fff!important;
  border-right: 2px solid #ccc!important;
}
.icon img {height:1em; vertical-align:middle}
.italic {font-style:italic}
.li {
  float: left;
  margin-right: .5em;
  margin-bottom: .5em;
}
.lo {text-align:left; vertical-align:top}
.loe {
  font-family:     arial,sans-serif;
  background-color:#f00!important;
  font-weight:     bold;
  color:           #fff;
}
/* .logo ist alt seit 2008-03-20 */
form.logo, form.logo1, form.logo2 {
  display: inline-block;
  height: 1.5em;
  padding: 5px;
  background: #ffc;
  margin-right: 5px;
  border-left:   2px solid #eee;
  border-top:    2px solid #eee;
  border-bottom: 2px solid #888;
  border-right:  2px solid #888;
}
form.logo1 input, form.logo2 input {
  margin: 0;
  padding: 0;
  border: none;
}
form.logo1 img, form.logo2 img {
  height: 100%;
}
form l, l {
  display: inline-block;
  position: relative;
  width: 12em;
  border: .1pt dotted transparent;
}
form l img.help {
  position: absolute;
  top: 0;
  right: 5px;
}

.ls0 {letter-spacing:0}
.ls2 {letter-spacing:2px}
.lu  {text-align:left; vertical-align:bottom}
.mb00 {margin-bottom:0!important}
.mb05 {margin-bottom:0.5em!important}
.mb10 {margin-bottom:1em!important}
.ml10 {margin-left:1em}
.mr05 {margin-right:0.5em}
.mt05 {margin-top:0.5em!important}
.mt10 {margin-top:1em!important}
.neu {
  font-family:     arial,sans-serif;
  background-color:#0f0!important;
  font-weight:     bold;
  color:           #000;
}
.nodisplay {display:none}
.nowrap {white-space:nowrap}
.np {padding:0!important}
.pr100 {width:100%}
.pt05 {padding-top:0.5em!important}
.pd05, .px05 {padding:5px}
.pos_markiert {
  background-color: #0f0!important;
}
.rd08 {
/*background-image: url(../img/transp_weiss_60.png);*/
  background-color: #fff;
  padding: 5px;
  margin-bottom: 0.5em;
  border-radius: 8px;
/*
  border: 1px solid #666;
  box-shadow: 5px 5px 10px #666; /* horizontal vertical verwaschen farbe */
}
.re {
  float: right;
  margin-left: .5em;
  margin-bottom: .5em;
}
.remso {
  background-image: url("https://remso.eu/img/logo_remso.png");
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 1.5em 1.5em; /* width height */
  font-family: sans-serif;
  letter-spacing: 0.1em;
  padding-left: 1.8em;
  color: #f00;
}
/* .rgt{width:49%;float:right} ZUSATZ, NICHT BASIS */
.rm  {text-align:right; vertical-align:middle!important}
.ro  {text-align:right; vertical-align:top}
.ru  {text-align:right; vertical-align:bottom}
.row {clear:both; border-top:1px solid #aaa}
.samstag {color:#0a0}
.subm_gr {
  width:         100%;
  font-weight:   bold; 
  padding:       2px;
}
.suc {
  font-family:     arial,sans-serif;
  background-color:#aaf;
  font-weight:     bold;
  color:           #000;
}
.titel2 {border:none; border-bottom:1px solid #000; padding:0.2em}
.transp_weiss_20 {background:url(../img/transp_weiss_20.png)}
.transp_weiss_40 {background:url(../img/transp_weiss_40.png)}
.transp_weiss_60 {background:url(../img/transp_weiss_60.png)}
.transp_weiss_80 {background:url(../img/transp_weiss_80.png)}
.upper {text-transform:uppercase}
.vorschlaege {
  position:     absolute;
  left:         0;    /* wird mit JS veraendert */
  top:          0;    /* wird mit JS veraendert */
  min-width:    10px;
  min-height:   10px;
  display:      none;
  background:   #ffe;
  z-index:      10;
}
.vorschlaege table {
  font-size: 80%;
  font-family: arial,sans-serif;
/*
  text-align:   left;
  border:       2px solid #0a0;
  white-space:  nowrap;
  padding:      5px;
*/
}
.warnung {background:#afa; color:#f00; margin:0}
.werktag {color:#000}
/* ENDE */