/* ********************************************
// 
// 2025-06-189 shantyfreun.de/css/basis_fsd.css
// 
// ********************************************* */

* {
  hyphens: auto;    /* Silbentrennung */
  box-sizing: border-box;
}
*::placeholder {
  color:        #ccf;
  font-style:   italic;
  font-size:    80%;
}


.main, footer {
  position: relative;
  width:    100%;
/*
  margin: 0 auto .5em auto;
  width: 210mm;
*/
}
footer {
  margin-top: 1em;
  border-top: 2px solid #a00;
  padding-top: .5em;
  min-height: 1em;
  font-size: 80%;
}
footer p:nth-of-type(1) {
  position: absolute;
  left: 0;
  top: .5em;
}
footer p:nth-of-type(2) {
  position: absolute;
  right: 0;
  top: .5em;
}



/* A */
a {
  text-decoration: none;
  border-bottom: 1px solid #888;
}
a:hover {
  background: #afa;
  border-bottom: 1px solid #f00;
}
.a4_hoch {
  position:         relative;
  width:            205mm;
  width:            210mm;
  height:           290mm;
  height:           296mm;
  overflow:         hidden;
  page-break-after: always;
  border:           .1pt solid blue;
}
/*
  _ackground: #fff;
  padding-top:      3mm;
  margin-left:      auto;
  margin-right:     auto;
*/
.a4_hoch:last-child {
  page-break-after: avoid;
}
.a4_hoch:nth-of-type(odd) {
  padding-left: 15mm;
  padding-right: 0;
  padding-right: 5mm;
}
.a4_hoch:nth-of-type(even) {
  padding-left: 0;
  padding-left: 5mm;
  padding-right: 15mm;
}

a.aktiv {
  font-weight:         bold;
  letter-spacing:      2px;
}
.aen {
  font-family:     arial,sans-serif;
  background-color:#ff0!important;
  font-weight:     bold;
  color:           #00a;
}
.arial {
  font-family: verdana, arial, sans-serif;
}
audio {
  position: relative;
  color: #afa;
  background: #afa;
  vertical-align: middle;
  opacity: .7;
  border-radius: 5px;
/*z-index: -1;*/
}



/* B */
.bo {
  border: 1px solid #aaf;
  border-radius: 5px;
  padding: 5px;
}
.bo .img { /* 2017-06-11 */
  display: block;
  border: 1px solid #ccc;
  border-radius: 5px;
}
body {
  width:        calc( 100% - 2em );
  height:       800px;
  border:       1px dotted  red;
  font-family:  sans-serif;
  font-size:    12pt;
  border:       1px dotted red;
/*
  margin-left:  auto;
  margin-right: auto;
  max-width:    205mm;
*/
}
button, .button {
  border:         1pt solid #88f;
  box-shadow:     2px 2px 2px #666; /* horizontal vertical verwaschen farbe */
  font-size:      110%;
  text-align:     center;
  background-color: #ddd;
  letter-spacing: .05em;
  cursor:         pointer;
}
/*
  border-radius:  5px;
*/
button:hover, .button:hover {
  background-color: #fff!important;
}

/* C */
.clear {
  clear: both;
  font-size: 1px;
  height: 1px;
}
.co {
  text-align: center;
  vertical-align: top;
}
.courier{font-family:'courier new',monospace}
.cur_help {cursor:help}
.cur_pointer {cursor:pointer}


/* D */
.drehlogo {
  transition: transform 3s ease;
}
.drehlogo:hover {
  transform: rotate(360deg);
}



/* E */
.external {
  background-image:    url(../img/external.png);
  background-repeat:   no-repeat;
  background-position: center right;
  padding-right:       13px;
}
.em08{font-size: 80%}
.em12{font-size:120%}
.esc {  /* button "abbrechen" p124 */
  font-family:     arial,sans-serif;
  background-color:#ddd!important;
  font-weight:     bold;
  color:           #000;
}

/* #####
   ##
   ####
   ##
   ##   */
.fehler { /* fehlermeldung */
  background: #ff0;
  color:      #c00;
  padding:    5px;
}
.feiertag {
  color:#f00;
}
fieldset {
  display: inline-block;
  border: 1px solid #00c;
  font-family: arial, sans-serif;
  color: #00c;
}
fieldset legend {
  font-size: 80%;
}
.flex {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.flex > div {
  margin-right: .5em;
  margin-bottom: .5em;
  padding: 5px;
}
form {
  position:       relative;
  background:     rgba(240,240,240,.7);
  padding:        1em;
  border:         1px solid #888;
  border-radius:  20px;
/*
  padding:        5px;
  background:     #ffe;
  border-radius:  5px;
  background: #eee;
*/
}
form .legend {
  position: absolute;
  right: 5px;
  top: 5px;
  font-size: 60%;
  color: #aaf;
}
@media (max-width: 30em) {
  form input[type='file'].rest,
  form input[type='text'].rest,
  form input[type='search'].rest {
    width: 100%;
  }
}
@media (min-width: 30.01em) {
  form input[type='file'].rest,
  form input[type='text'].rest,
  form input[type='search'].rest {
    width: calc( 100% - 13em );
  }
}

/* *I */
input, select, textarea {
  font:           1em 'Fira Mono', 'PT Mono', monospace;
  font-size:      110%;
  font-size:      100%;
  border:         1px solid #88f;
  border-radius:  5px;
  vertical-align: middle;
}
input, textarea {
  font-family: 'courier new', courier, monospace;
  padding-left: 0.2em;
  padding-right: 0.2em;
}
input:focus, textarea:focus {
  background-color: #ff8!important;
  border: 1px solid #0c0;
}
input[type='checkbox'], input[type='radio'] {
  transform:    scale(2);
  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}
input:required, .pflichtfeld {
/*background: #efe; */
  border-left: 5px solid #f00!important;
}
input:required:focus {
  border-left: 5px solid #f00;
}



/* *H */
h1,h2,h3 {
  font-family:  verdana,arial,sans-serif;
  font-weight:  normal;
  margin:       0 0 5px 0;
}
h1 {
  font-size:    1.8em;
  color:        #00f;
}
h2 {
  font-size:    1.5em;
/* 20250618
  position:     sticky;
  top:          1.5em;
  background:   rgba(255,255,255,.9);
  z-index:      10;
*/
}
h3 {
  font-size:      1.1em;
  letter-spacing: 0.1em;
  font-weight:    bold;
}
h3.gastgeber, h3.teilnehmer {
  background: #ddd;
  padding: 5px;
}
header {
  position:     sticky;
  top:          0;
  background:   rgba(255,255,255,.9);
  z-index:      10;
}
.hinweis {
  background: #afa;
  padding: 5px;
}
hr {
  color:            transparent;
  background-image: url(../img/rgnbgn_weiss.jpg);
  margin:           .2em;
  padding:          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 {             /* help-Buchstaben */
/*font-weight: bold;*/
  cursor: help;
}
.help img, img.help {   /* help-icon */
  height:         1.2em;
  cursor:         help;
  vertical-align: middle;
}
label img.help {
  position: absolute;
  right:    .1em;
  bottom:   0;
}


/* I  input->form */
iframe {
  border: 1px solid #aaf;
  border-radius: 5px;
}
img.ic   {border:none; height:1.2em; vertical-align:middle}
img.ic_kl{border:none; height:0.9em; vertical-align:middle}
img.ic_gr{border:none; height:1.7em; vertical-align:middle}
div#infotext {
  position: fixed;
  visibility: hidden;
  left: 10%;
  width: 80%;
  top: 10%;
  background-color: #fff;
  border: .2px solid #000;
  border-radius: 5px;
  box-shadow: 5px 5px 10px #666; /* horizontal vertical verwaschen farbe */
  padding: 10px;
  z-index: 5;
}
.italic {
  font-style: italic;
}

/*L
##
##
##
##
#####
*/
@media (max-width: 30em) {
  l, label {
    display:  block;
    position: relative;
  }
}
@media (min-width: 30.01em) {
  l, label {
    display:  inline-block;
    width:    12em;
    position: relative;
  }
  label {
    border-bottom: .5pt dotted #aaa;
  }
}
.legend {
  margin-bottom: 0;
  text-align: right;
  font-size: 80%;
  color: #aaa;
}

.lg_bg { /* language background - nicht ausgewaehlte Sprache */
  opacity: 0.5;
}
.lg_bg:hover {
  opacity: 1;
  font-size: 140%;
}
.lg_fg { /* language foreground - ausgewaehlte Sprache */
  font-size: 120%;
  opacity: 1;
}

.lato_medium {
  font-family: 'Lato-Medium';
}
.lato_thin {
  font-family: 'Lato-Thin';
}
.lfd {  /* laufende Nr. in Tabellen */
  text-align: right;
}
.ls2 {letter-spacing:2px}
.lt  {
  text-decoration: line-through;
}
.li {
  float: left;
  margin-right: 1em;
  margin-bottom: .5em;
}
.lo {text-align:left; vertical-align:top}
.loe {  /* loesch-button */
  font-family:     arial,sans-serif;
  background-color:#f00!important;
  font-weight:     bold;
  color:           #fff;
}

/* M */
.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}

/* N */
.neu {
  font-family:     arial,sans-serif;
  background-color:#0f0!important;
  font-weight:     bold;
  color:           #000;
}
.nodisplay {
  display: none;
}
.nowrap, nowrap {
  white-space: nowrap;
}

/* P */
p {
  margin:             0 0 0.5em 0;
  font-weight:        500; /* 400 ist normal */
  margin:             0 0 .8em 0;
  line-height:        130%;
  break-inside:       avoid;
  letter-spacing:     .05em;
/*
  text-align:         justify;
  font-size:          110%;
*/
}

div.position {
  page-break-inside: avoid;
  margin-bottom: 2em;
}
div.position > div:nth-of-type(1) {
  float: left;
  width: 25px;
  min-width: 25px;
  border: 1px solid transparent;
}
div.position > div:nth-of-type(2) {
  float: left;
  margin-left: 5px;
  width: 100px;
  max-width: 15%;
  border-radius: 5px;
  overflow: hidden;
}
div.position > div:nth-of-type(2) img {
  width: 100px;
  max-width: 100%;
  display: block;
}
div.position > div:nth-of-type(3) {
  margin-left: 140px;
}
div.position > div:nth-of-type(3) h2 {
  font-weight: bold;
}
div.position::after {
  content: "";
  display: block;
  clear: both;
}
@media screen and (max-width: 400px) {
  .position > div:nth-of-type(2) {
/*  display: none; */
    margin-right: .5em;
  }
  div.position > div:nth-of-type(3) {
    margin-left: 0;
  }
}
.pr100 {
  width: 100%;
}
.pd05, .px05 {
  padding: 5px;
}
.pos_markiert {
  background-color: #0f0!important;
}

/* R */
.re {
  float: right;
  margin-left: .5em;
  margin-bottom: .5em;
}
.ro {
  text-align: right;
  vertical-align: top;
}
.remso {
  background-image: url("http://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;
}

/* S */
._shadow::after {
  content:             "";
  background-image:    url(../img/small_shadow.png);
  background-repeat:   no-repeat;
  background-position: center right;
}
.samstag {
  color:  #0a0;
}
.shadow {
  box-shadow: 5px 5px 10px #666; /* horizontal vertical verwaschen farbe */
}
.sonntag,
.feiertag {
  color:  #f00;
}
.sticky {   /* 2018-04-11 */
  position: sticky;
  top: 5px;
  z-index: 2;
}
.subm_gr {
  width:         98%;
  margin:        0 1% 0 1%;
  font-weight:   bold; 
  padding:       2px;
}
.suc {
  font-family:     arial,sans-serif;
  background-color:#aaf;
  font-weight:     bold;
  color:           #000;
}

/* T */
table.liste {
  width:            100%;
  border-collapse:  collapse;
  empty-cells:      show;
  margin-bottom:    .5em;
}
table.liste td {
  border:            1px solid #ccf;
  padding:           0 5px 0 5px;
  vertical-align:    top;
}
table.liste thead {
  position: sticky;   /* bleibt beim Scrollen am oberen Rand kleben */
  z-index: 10;
  top: 0;
  background-color: #fe0;
  background-color: rgba( 255,239,0,.7);
  
}
table.liste thead td, table.liste thead th {
  border: 1px solid #aaf;
  padding: 5px;
  text-align: left;   /* wg. th */
}
/* 2023-03-05
table.liste thead td:before, table.liste thead th:before {  /* Bugfix: sticky loescht border //
  content: '';
  display: block;
  margin-top: -6px;
  margin-bottom: 5px;
  border-top: 1px solid #aaf;
}
*/
table.liste tbody tr:nth-of-type(even) {
  background-color: rgba(196,196,196,.6);
  background-color: #eee;
}

/* U */
ul {
  margin: 0 0 .5em 1.5em;
  padding: 0;
}
ul li {
  padding: .2em 0;
  margin: 0;
}

/* V */
/* 2013-02-28 ?
.vorschlaege {
  position:     absolute;
  left:         0;    // wird mit JS veraendert
  top:          0;    // wird mit JS veraendert
  min-width:    10px;
  min-height:   10px;
  display:      none;
  text-align:   left;
  border:       2px solid #0a0;
  background:   #ffa;
  z-index:      10;
  white-space:  nowrap;
  font-family:  courier,monospace;
  padding:      5px;
}
*/

/* ENDE */