/* ========================================================================== */
/* Variablen                                                                  */
/* ========================================================================== */

:root {
  --hauptfarbe: rgb(73, 131, 169);
  --rahmenfarbe: rgb(170, 200, 240);
  --hellgrau: #eee;
  --schrift: Arial, Helvetica, sans-serif;
}

/* ========================================================================== */
/* Grundlayout                                                                */
/* ========================================================================== */

* {
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--schrift);
  font-size: 100%;
  overflow: hidden;
  background-color: var(--hellgrau);
}

#gesamt {
  width: 100%;
  max-width: 1224px;
  margin: 0 auto;
  background-color: white;
}

/* ========================================================================== */
/* Bannerbereich                                                              */
/* ========================================================================== */

#banner_li,
#banner_re,
#banner_fix_re,
#banner_fix_re_mob,
#banner_re_o,
#banner_re_u {
  background-color: var(--hauptfarbe);
  float: left;
}

#banner_li {
  width: 33%;
  height: 80px;
  overflow: hidden;
}

#banner_re,
#banner_fix_re,
#banner_fix_re_mob {
  width: 67%;
  height: 80px;
  overflow: hidden;
}

#banner_re,
#banner_re_o {
  display: table;
}

#banner_re_o {
  width: 67%;
  height: 49px;
}

#banner_re_u {
  width: 67%;
  height: 31px;
}

/* ========================================================================== */
/* Hauptbereich                                                               */
/* ========================================================================== */

#haupt,
#haupt_breit {
  width: 100%;
  position: absolute;
  bottom: 50px;
  top: 80px;
  background-color: white;
  overflow: auto;
}

#haupt {
  max-width: 1224px;
}

/* Wrapper für zwei Haupt-Instanzen */
#haupt-wrapper {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.haupt-instance {
  width: 48%;
  padding: 10px;
  border: 1px solid #ccc;
}

/* ========================================================================== */
/* Fußbereich                                                                 */
/* ========================================================================== */

#fuss {
  width: 100%;
  max-width: 1224px;
  position: absolute;
  height: 50px;
  background-color: var(--hauptfarbe);
  bottom: 0;
}

#fuss_li,
#fuss_re {
  height: 100%;
  overflow: hidden;
}

#fuss_li {
  width: 40%;
  float: left;
}

#fuss_re {
  width: 60%;
  float: right;
}

/* ========================================================================== */
/* Allgemeine Elemente                                                        */
/* ========================================================================== */

#trenner {
  margin: 10px 0 4px 2%;
  width: 96%;
  float: left;
  font-size: 14px;
}

#bildfloat_partner {
  float: left;
  margin-bottom: 10px;
  margin-left: 2%;
  width: 165px;
  height: 140px;
  font-size: 12px;
  overflow: auto;
  display: block;
  text-align: center;
}

#bilder {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 45px;
  top: 54px;
  background-color: var(--hellgrau);
  overflow: auto;
}

.bild-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  clear: both;
  margin: 0 2%;
}

.bildfloat {
  width: 220px;
  text-align: center;
  font-size: 11px;
}

.bildtext {
    max-width: 220px;       /* maximale Textbreite */
    word-wrap: break-word;  /* bricht lange Wörter */
    overflow-wrap: break-word;
    text-align: center;
    margin-top: 4px;
}

#löschen {
  text-align: right;
  margin: 4px 20px 0 0;
}

/* ========================================================================== */
/* Desktop (min-width: 900px)                                                 */
/* ========================================================================== */

@media only screen and (min-width: 900px) {
  .gross_nein,
  #banner_fix_re_mob,
  #suche_alle_mob,
  #suche_mob,
  #bild_mob,
  #noshow {
    display: none;
  }

  #zentrieren {
    margin: 25px auto 0 auto;
    width: 748px;
    display: block;
  }

  #label,
  #label_serie {
    margin-top: 8px;
    margin-left: 2%;
    width: 12%;
    float: left;
    font-size: 12px;
  }

  #text {
    border: 1px solid var(--rahmenfarbe);
    margin-top: 6px;
    margin-left: 2%;
    width: 82%;
    float: left;
  }

  #text_serie,
  #text_bew,
  #bew {
    border: 1px solid var(--rahmenfarbe);
    margin-top: 6px;
    margin-left: 2%;
    float: left;
    font-size: 12px;
  }

  #text_serie {
    height: 24px;
    width: 33%;
    padding: 0;
    background-color: white;
  }

  #text_bew {
    width: 74%;
  }

  #bew {
    width: 6%;
    height: 24px;
  }

  h5 {
    padding-right: 2%;
    color: white;
    font-size: 18px;
    margin-left: 2%;
    display: table-cell;
    vertical-align: middle;
    font-weight: lighter;
  }
}

/* ========================================================================== */
/* Mobile (max-width: 900px)                                                  */
/* ========================================================================== */

@media only screen and (max-width: 900px) {
  .klein_nein,
  #banner_fix_re,
  #qr-code,
  #bild_pc,
  #nicht_anzeigen_mob,
  #noshow {
    display: none;
  }

  #label,
  #text,
  #label_serie,
  #text_serie,
  #text_bew,
  #bew {
    margin-left: 2%;
    float: left;
    font-size: 12px;
  }

  #label {
    margin-top: 8px;
    width: 96%;
  }

  #text {
    border: 1px solid var(--rahmenfarbe);
    margin-top: 6px;
    width: 96%;
  }

  #label_serie {
    margin-top: 8px;
    width: 28%;
  }

  #text_serie,
  #text_bew,
  #bew {
    border: 1px solid var(--rahmenfarbe);
    margin-top: 6px;
  }

  #text_serie {
    height: 24px;
    width: 66%;
  }

  #text_bew {
    width: 88%;
  }

  #bew {
    width: 6%;
    height: 24px;
  }

  h5 {
    padding-right: 2%;
    color: white;
    font-size: 12px;
    margin-left: 2%;
    display: table-cell;
    vertical-align: middle;
  }

  /* Tabelle Smartphone */
  table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
  }

  th,
  td {
    padding: 4px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
  }

    th.nr-col {width: 8%;}
    th.typ-col {width: 8%;}
    th.bez-col {width: 16%;}
    th.eigner-col {width: 12%;}
    th.jahr-col {width: 8%;} 
    th.bes-col {width: 44%;}

}

/* ========================================================================== */
/* Formularelemente                                                           */
/* ========================================================================== */

textarea,
.inputfeld {
  border: none;
  background-color: white;
  font-size: 12px;
  font-family: var(--schrift);
}

textarea {
  padding: 0;
  width: calc(100% - 2px);
  resize: none;
  transition: height 0.2s;
  height: 56px;
}

textarea:placeholder-shown {
  height: 36px;
}

.inputfeld {
  padding: 0;
  width: 100%;
  height: 100%;
}

/* Basis-Button */

.schaltflaeche {
  border: 1px solid var(--rahmenfarbe);
  border-radius: 8px;
  margin-top: 8px;
  margin-left: 2%;
  width: calc(96% - 6px);
  font-size: 12px;
  text-align: center;
  background-color: rgb(217, 217, 217);
  cursor: pointer;
  display: inline-block;
  height: auto;
  line-height: normal;
  padding: 6px 8px;   /* sorgt für angenehme Höhe */
  text-decoration: none;
  color: black;
}

.schaltflaeche:hover {
  background-color: #999;
  color: #fff;
}

/* Child-Button */

.schaltflaeche--child {
  background-color: var(--hauptfarbe);
  color: white;
  width: auto;
  float: right;
  margin-right: 18px;
  margin-top: 11px;
}

.schaltflaeche_l,
.schaltflaeche_r {
  width: 47%;
  position: absolute;
  top: 34px;
}

.schaltflaeche_r {
  left: 49%;
}

.schaltflaeche_o {
  width: 96%;
  position: absolute;
  top: 34px;
}

.schaltflaeche_k {
  width: 75px;
  margin-top: -6px;
}

.input_t {
  border: none;
  width: 97%;
  padding-left: 1%;
  height: 24px;
  font-size: 12px;
  background-color: rgb(255, 255, 175);
}

/* ========================================================================== */
/* Überschriften & Linien                                                     */
/* ========================================================================== */

h1,
h2 {
  padding-top: 16px;
  padding-bottom: 4px;
  color: black;
  font-size: 18px;
  font-weight: normal;
  margin-left: 2%;
}

h1 {
  clear: both;
}

h3 {
  padding-top: 12px;
  padding-bottom: 4px;
  color: black;
  font-size: 14px;
  font-weight: normal;
  margin-left: 2%;
}

h4 {
  padding-top: 4px;
  padding-bottom: 2px;
  color: black;
  font-size: 14px;
  font-weight: bold;
  margin-left: 2%;
}

h6 {
  padding: 6px 2% 4px 0;
  color: white;
  font-size: 11px;
  font-weight: lighter;
  margin-left: 2%;
}

hr {
  background: var(--hauptfarbe);
  border: none;
  height: 4px;
  margin: 2px 0 4px 0;
  width: 100%;
}

/* ========================================================================== */
/* Tabellen                                                                   */
/* ========================================================================== */

table {
  border: 4px solid var(--hauptfarbe);
  border-collapse: collapse;
  background-color: var(--hellgrau);
  font-size: 12px;
  width: 96%;
  margin-left: 2%;
}

th {
  height: 24px;
  border: 1px solid var(--hauptfarbe);
}

td {
  height: 20px;
  border: 1px solid var(--hauptfarbe);
}

td a {
  display: block;
  width: 100%;
  text-decoration: none;
  color: black;
}

.normal {
  background-color: var(--hellgrau);
}

.spezial {
  background-color: rgb(188, 210, 226);
  cursor: pointer;
}

.print-text {
  display: none;
}

/* ========================================================================== */
/* Drucklayout                                                                */
/* ========================================================================== */

@media print {
  @page {
    margin: 0.8cm;
  }

  body {
    background: white;
  }

  #banner_fix_re_mob,
  .schaltflaeche,
  #noprint {
    display: none !important;
  }

  #haupt,
  #fuss {
    position: relative;
    top: 0;
  }

  #fuss {
    top: 4px;
  }

  #fuss_re {
    width: 60%;
    float: right;
  }

  #fuss_li {
    width: 40%;
    float: left;
  }

  #label,
  #label_serie {
    margin-top: 6px;
    margin-left: 2%;
    width: 14%;
    height: 18px;
    float: left;
    font: 12px Arial, Helvetica, sans-serif;
  }

  #text,
  #text_serie {
    border: 1px solid var(--rahmenfarbe);
    margin-top: 6px;
    margin-left: 2%;
    float: left;
    font: 12px Arial, Helvetica, sans-serif;
  }

  #text {
    width: 80%;
    height: auto !important;
    min-height: 28px !important;
    overflow: visible !important;
  }

  #text_serie {
    width: 31%;
    height: 18px;
  }

  textarea {
    font-size: 11px;
  }

  #text textarea {
    display: none !important;
  }

  #text .print-text {
    display: block !important;
    white-space: pre-wrap !important;
    min-height: 28px !important;
  }

  #bildfloat {
    overflow: hidden;
  }

  #trenner {
    margin-top: 6px;
  }
}