/* === Formatierung Reservierungsformular === */
/* === ANZEIGEBEREICH  ======================================================================================================== */
    /* *** Formular --- Anzeigebereich *** */
    .form_anz_ber { width: auto; padding: 10px; }
    /* Formular --- Spalteneinteilung */
    .form_anz_spalten { min-height: 300px; margin: 0 10px 0 0; float: left; }
    /* Formular --- Eingegebene Daten anzeigen */
    .ausg_daten_span { width: 60px ; display: inline-block; }
    .ausg_daten {
      width: 275px; min-height: 100px; padding: 5px; 
      color: #ffffff;  text-shadow: 2px 1px #008000;
      border: 1px solid #ffffff;
      background-image: url(reservierung_hg1.png); background-repeat: no-repeat;  background-size: 100% auto;
    }
    /* === Formular --- ELEMENTE ============================================================================================== */
    /* *** Label ************************************************************************************************************** */
    label { 
      width: 280px; margin: 10px 0 10px 0;      
      display: block; 
    }
    /* *** Input ************************************************************************************************************** */
    input { width: 275px; padding: 0 0 0 10px;
      line-height: 25px;
      border: 1px solid #C0C0C0;
      background-color: #C0C0C0;
    }
    input:active,
    input:focus,
    input:hover
      { background-color: #C0C0C0;}
    /* *** Besondere Wünsche ************************************************************************************************** */
    .wuensche {  width: 275px;  height: 140px;  margin-top: 5px; padding: 5px;
      color: #000000; font-size: 13px;
      text-align: center;
      border: 1px solid #C0C0C0;
      background-color: #C0C0C0;
    }
    /* *** Button ************************************************************************************************************* */
    div.button_a { 
      margin: 10px 0 3px 0;
    }
    input.button_a { 
      width: 275px; height: 30px; margin: 5px 0 5px 0;
      color: #ffffff; line-height: 25px;
      display: block;
      border: 1px outset #ffffff;
      background-color: #628889;
    }
    input.button_a:hover { 
      border: 1px inset #ffffff;
      background-color: #808080;
    }
    /* *** Fehleranzeige ****************************************************************************************************** */
    .fehler { width: 280px;  height: 40px;  margin-top: 5px; padding: 5px;
      color: #800000; font-size: 13px;
      text-align: center;
      border: 1px solid #800000;
      background-color: #C0C0C0;
    }
    /* ************************************************************************************************************************ */
    /* *** Select ************************************************************************************************************* */
    /* ************************************************************************************************************************ */
    /* select.name { } --  label.name { }*/
    /* ---  Bereich select Voreinstellung --------------------------------------------------------------------------------------- */
    select,
    ::picker(select) { appearance: base-select;
    width: 280px; padding: 0 0 0 10px; line-height: 25px; 
    border: 0px solid #C0C0C0; background-color: transparent;    
    }
    * { box-sizing: border-box; }
    /* ---  Bereich SELECT ------------------------------------------------------------------------------------------------------ */
    /* *** select input *** */
    select  { width: 280px; margin: 0 0 10px 0; line-height: 25px; font-size: 16px; color: #000000; 
      border: 1px solid #000080; border-radius: 0 0 0 0;  transition: 0.4s; background-color: #C0C0C0;  
    }
    /* *** select input -- hover,focus *** */
      select:hover,
      select:focus { background: #C0C0C0;   
    }
    /* *** select input -- icon *** */
    select::picker-icon { color: #2D4463; transition: 0.4s rotate; margin-right: 20px;}
    select:open::picker-icon { rotate: 180deg;}
    /* ---  Bereich OPTION ------------------------------------------------------------------------------------------------------ */
    ::picker(select) { border: none;  }
      option.zeit { width: 100px;}
      option { width: 200px; margin: 0 0 0 0px ; padding: 0 0 0 10px; border: 1px solid #2D4463;  background: #628889;
      display: flex; justify-content: flex-start; gap: 20px; transition: 0.4s;
    }
    /* *** erste Option *** */
    option:first-of-type { border-radius: 0 0 0 0;}
    /* *** letzte Option *** */
    option:last-of-type { border-radius: 0 0 8px 8px;}
    ::picker(select) { border-radius: 8px;}
    option:not(option:last-of-type) { border-bottom: none;}
    option:nth-of-type(odd) { background: #628889;}
    /* *** Option hover,focus *** */
    option:hover,
    option:focus { background: #C0C0C0;}
    selectedcontent.icon { display:  inline-block;}
    option:checked { font-weight: bold; font-style: italic; padding-right: 10px;}
    /* option.name::checkmark { order: 1; margin-left: auto; content: url("../Bootshaus GbR/image/symbole/haken.png") / "haken"; */
    option::checkmark { order: 1; margin-left: auto; content: ;}
    ::picker(select) { opacity: 0;  transition: all 0.4s allow-discrete;}
    ::picker(select):popover-open { opacity: 1;}
    @starting-style {
    ::picker(select):popover-open { opacity: 0;  
    }
    }
    ::picker(select) { top: calc(anchor(bottom) + 1px); left: anchor(10%);}
    *,
    *:before,
    *:after{
        padding: 0; 
        margin: 0;
    }
    * { box-sizing: border-box;}
    
    input[type="date"]{
        width: 280px; padding: 0 0 0 10px;
        line-height: 25px;
        border: 1px solid #C0C0C0; 
        background-color: #C0C0C0;        
        font-family: Arial;
    }
    ::-webkit-calendar-picker-indicator{
        background-color: #C0C0C0;
        padding: 5px;
        cursor: pointer;
    }
/* ============================================================================================================================ */
/* ===  DESKTOP ( Anzeige CENTER 1900px ) ========== */
@media only screen and (min-width: 1801px){
  .form_anz_ber {  margin-left: 100px; }
    .form_anz_spalten { width: 300px; }
}
/* ===  Laptop 1 ( Anzeige CENTER 1700px ) ========= */
@media only screen and (max-width: 1800px){
  .form_anz_ber {  margin-left: 180px; }
  .form_anz_spalten { width: 280px;
}
/* ===  LAPTOP 2 ( Anzeige CENTER 1200px ) ========= */
@media only screen and (max-width: 1300px){
  .form_anz_ber {  margin-left: 100px; }
  .form_anz_spalten { width: 300px;
}
/* === TABLET  ( Anzeige CENTER 700px ) ============ */
@media only screen and (max-width: 800px){
  .form_anz_ber {  margin-left: 1px; }
  .form_anz_spalten { width: 300px;
}
/* === PHONE ( Anzeige CENTER 360px ) ============== */
@media only screen and (max-width: 380px){
  .form_anz_ber {  margin-left: 1px; }
  .form_anz_spalten { width: 300px;
}