/*
Roland Schuler
Bootstrap 4.5.3
November 2020

#123 oder div#123 = ID-Selektor
.123 oder p.123   = class Selektor
Vererbung:  html -> body -> div -> sonstiges

Abstand
außen    magin
innen    padding 
----------------------------------------------------------------------------------------*/
/*
@media (min-width: @screen-md-min) { ... }
*/
@font-face { font-family: 'Nunito-Regular';
             src: url('../fonts/Nunito-Regular.ttf') format('truetype');
              }
@font-face { font-family: 'Nunito-Bold';
             src: url('../fonts/Nunito-Bold.ttf') format('truetype');
              }
@font-face { font-family: 'Nunito-Light';
             src: url('../fonts/Nunito-Light.ttf') format('truetype');
              }
@font-face { font-family: 'OpenSans-Semibold';
             src: url('../fonts/OpenSans-Semibold.ttf') format('truetype');
            }


/*--------Variablen deviniern ------------------------------------------------------------*/
 :root {
   --body-back-color: #e5e5e5; 
   --header-bg-color: #084f93;
   --header-bg-color: #ffffff;
   --header-txt-color: blue;
   --hellgrau-color:#f0f0f0;
   --container-fluid-bg-color: #0069b4;
   --main-txt-color: blue;
 }

 @media (min-width: 1200px) {
   .container, .container-lg, .container-md, .container-sm, .container-xl {
       max-width: 1200px;
   }  
}   

body {
  background: var(--body-back-color); 
  margin-top: 10px;
 
 /* background:linear-gradient(to bottom, rgb(159, 171, 184), #ffffff);
 /* background:linear-gradient(to bottom, #7e7e7e, #dddddd);
 /* background:linear-gradient(to bottom, #79BBD9,#22353E); */
 /* background:linear-gradient(to bottom,#245F7E,#091920);        /* dunkelblau */
 /* background:linear-gradient(to bottom,#9F5941,#341D15);        /* rotbraun   */
 /*  background:linear-gradient(to bottom,rgb(119, 119, 250), #ffffff,)) fixed;   /* Hintergrund wird nicht gescrollt */
 /* background-size: 100% 1000px;*/                                /* nicht in Verbindung mit fixed    */
/* background-image: linear-gradient(#d7dbde, #ffffff); */
 background-image: linear-gradient(#a3aeb6, #ffffff); 
 /*background-size: 1300px;    */

  background-size: auto auto;     
}

/* -------------------- Schriften ------------------------*/
h1 {
   color: var(--header-txt-color);
}

h2 {
   color: var(--header-txt-color);
}
 

h3 {
   color: var(--header-txt-color);
   font-size: 22px;
   font-weight: bold;
}

h4 {
   color: var(--header-txt-color);
}

.footerfont {
      line-height: 100%;
      font-size: 14px;
      font-style: normal;
      color: #ffffff;
   }
   

/*---------------------------------------------------------------------------*/

.topzeile {
   /* background-image:linear-gradient(#edece8 5% ,#178fd6); */
   background-color: var(--container-fluid-bg-color);
}

.container-fluid {
   background-color: var(--container-fluid-bg-color);
}

 .header_1 {
   height: 40px;
 }

.menuecontent {
   margin-top: 15px;
   margin-bottom: 15px;
}

.Logo {
  margin-top: 10px;
  margin-left: 20px;
  margin-bottom: 10px;
}

.content {
   box-shadow: 10px 10px 10px silver;
}

.content0 {
   background-color: #ffffff;
   padding: 30px;
   padding-top: 40px;
   padding-left: 35px;
}

.content1 {
   background-color: #ffffff;
   padding: 20px;
   padding-left: 30px;
   padding-top: 40px;
   border-left: 2px solid;
   border-color: rgb(218, 230, 241);
}

.footer_menu {
   margin-top: 10px;
}

.footer {
   margin-top: 10px;
   padding-top: 15px;
   padding-bottom: 10px;
   background-color:  var(--container-fluid-bg-color);
   
}

.hr-footer { 
   width: 320%; 
   height: 1px; 
   margin: 0 auto;
   color:#ffffff;
   background: #ffffff;
}

/* die uhr auf der Home-Seite wird nach unten geschoben 
   eventuell auch andere Images   
.image-embed-item {
   margin-top: 0px;
}
 */


.nowrap {
   white-space: nowrap; 
}
 
/* ---------------------------------- Hauptmenü -----------------------------------------------*/
/*----------------------------------- Typo3 Ver. 12, 2024 -------------------------------------*/

.nav-link, .dropdown-item {
   color:blue ; 
   font-size: 18px;
}
a.nav-link:hover {
   color: darkblue;
   text-decoration: underline;
}

a.dropdown-item:hover {
   color: darkblue;
   text-decoration: underline;
}

.nav-current {
    font-weight: bold; 
}

.navbar-brand {
   color: blue;
}

.navbar {
   /* verhindert den Zeilenumbruch in der MenüZeile */
   white-space: nowrap;
   
}

#navbarSupportedContent {
   text-align: right;
}

/*--- Hintergrundfarbe Menü ---*/
.bg-light, .dropdown-menu {
 background: var(--header-bg-color) !important;
 box-shadow: 10px 10px 10px silver;
 border-color: var(--header-txt-color);
 /* box-shadow: 6px 6px 5px hsla(300,15%,25%,0.3) inset; */
}

/* Dropdownmenü öffnet automatisch bei Hover */
.dropdown:hover>.dropdown-menu {
   display: block;
 }

.level-1 {
     background-color:#ffffff; 
     padding-left:4px;
     padding-right:4px;
     font-size: 18px;
     font-style: normal;
     color: var(--header-txt-color);
}

.level-1.active {
      text-decoration: none;
      font-weight: bold; 
}

a.level-1:hover {
   text-decoration: none;
   padding: 4px;
   background-color: #c8e4f5;    
   /* border-radius: 6px; */
}

a.dropdown-toggle:hover {
   background-color: #ffffff;    
}

.level-2 {
   padding-left:4px;
   padding-right:4px;
   font-size: 16px;
   font-style: normal;
   font-weight: 450; 
   color: var(--header-txt-color);
   }
 
 .level-2.active {
   font-weight: bold; 
 }

 a.level-2:hover {
   text-decoration: none;
   padding: 4px;
   /* border-radius: 5px; */
}

li.level-2:hover {
   background-color: #c8e4f5;    
   }

/* ------------------------------------- Hamburger Menü ------------------------------------------ 
   --  wird ab 767 Pixel eingeschaltet ------------------------*/
@media only screen and (max-width: 767px)
{
   li.level-1 {
      margin-left: 75px;
      background-color: #ffff;
      border-bottom: 1px solid blue;
   }

   li.level-2 {
      background: var(--body-back-color); 
      border-bottom: 1px dashed blue;
      margin-left: 30px;
   }

   .navbar-nav {
       margin-top: 25px;
       text-align: right;
   }

   .navbar-text {
      text-align: right;
  }

}

/* -----------  Menü in der Fusszeile ----------------- */

.menue-fuss-no {
   color: var(--header-txt-color);
   font-size: 18px;
   transition-property: background-color;
   transition-duration: 1s;
   text-decoration: none; 
}

.menue-fuss-act {
   color: var(--header-txt-color);
   font-size: 18px;
   font-weight: bold; 
   transition-property: background-color;
   transition-duration: 1s;
   text-decoration: none; 
}

.menue-fuss-no:hover, .menue-fuss-act:hover {
   background-color: #c8e4f5;    
   border-radius: 5px;
   text-decoration: none; 
}

.rs_item {
   padding: 6px;
}

a.footerfont:hover {
   color: #ffffff;
   text-decoration: underline;
 }

 /* --------------------- RTE Editor  -------------------------------------------------------------*/
 .sprechzeit {
    white-space: nowrap;
 }

 /* --------------------- Sonstiges ---------------------------------------------------------------*/
.textabstandtop6 {
   padding-top: 6px;
}
.texthoch6 {
   vertical-align: 6px;
}

 /* --------------------- Tabulatoren  -------------------------------------------------------------*/
.tab15 {
   padding-left: 15px;
}
.tab25 {
   padding-left: 25px;
}
.tab31 {
   padding-left: 31px;
}
.tab40 {
   padding-left: 40px;
}
.tab65 {
   padding-left: 65px;
}

/* --------------------- Tabelle in Content  -------------------------------------------------------------*/
.ce-table {
   font-size: 12px;
 }

 .sprechzeit {
   font-size: 14px;
   line-height: 1.3;
 }

 /* --------------------- Kontaktseite  -------------------------------------------------------------*/
 .kontakttable {
    margin-left: 30px;
 }
/* -------------------- Formulare -------------------------------------------------------------*/
/* --- Eingabefeder --- */
.form-control {
   background: var(--hellgrau-color);
   height: calc(1.2em + .75rem + 2px);
   margin-left: 5px;
}

/* Textabstand nach oben zum Imputfeld */
.form-label {
   margin-bottom: 2px;
   margin-left: 5px;
}

div.form-group {
   height: 67px;
}

/* betrifft den rechten Textblock */
#rezept-13-checkbox-1 + span {
   margin-top: -23px;
   margin-left : 5px;
   display: block;	
   line-height: 1.25;
}

#rezept-13-checkbox-1 {
   margin-left : -15px;
}

/* betrifft den benachbarten Textblock bei ID #ueberweisung-19-checkbox-1 */
#ueberweisung-15-checkbox-1 + span {
   margin-top: -23px;
   margin-left : 5px;
   display: block;	
   line-height: 1.25;
}

#ueberweisung-15-checkbox-1 {
   margin-left : -17px;
}

label.add-on.form-check-label {
   margin-top : 15px;
}

/* Buttons auf den Formularen */
button.btn.btn-primary {
   margin-left: 8px;
   background-color: #007AFF;
   color: #ffffff;
}

button.btn.btn-cancel {
   margin-top: 10px;
   background-color: #007AFF;
   color: #ffffff;
}

button.btn.btn-primary:hover {
   background-color: blue;
   color: #ffffff;
   text-decoration: underline;
}

button.btn.btn-cancel:hover {
   margin-top: 10px;
   background-color: blue;
   color: #ffffff;
   text-decoration: underline;
}

span.btn-group.next.submit {
   margin-top: 10px;
   height: 40px;
}


/* respoinsive Container --->  verwendet in Google Anfahrtsmap */
.responsiveContainer {
   position: relative;
   padding-bottom: 59%;
   height: 0;
   overflow: hidden;
 }
 
 .responsiveContainer iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
 }