/* === Formatierung Reservierungsformular === */
/* === ANZEIGEBEREICH  ======================================================================================================== */
    /* *** Formular --- Anzeigebereich *** */
    .form_anz_ber { 
      width: auto; padding: 10px;     
    }
    /* Formular --- Spalteneinteilung */
    .form_anz_spalten {
      width: 300px; 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: #2D4463;
    }
    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 ab 1800px )  *** */
@media only screen and (min-width: 1800px) {
  .form_anz_ber {  margin-left: 150px; }  
}
/* *** Laptop   ( Anzeige 1600px - 1799px )  *** */
@media only screen and (max-width: 1799px) {
  .form_anz_ber {  margin-left: 40px; }
}
/* *** TABLET   ( Anzeige 800px - 1599px) *** */
@media only screen and (max-width: 1599px) {
  .form_anz_ber {  margin-left: 100px; }
}
/* *** Tablet    ( Anzeige 500px - 799px ) *** */
@media only screen and (max-width: 799px) {
  .form_anz_ber {  margin-left: 150px; }
}
/* *** Phone    ( Anzeige < 499px ) *** */
@media only screen and (max-width: 499px) {
  .form_anz_ber {  margin-left: 30px; }
}