/*
color-primary
color-primary-dark
color-accent
color-primary-contrast
color-accent-contrast
*/

/* MDC */
:root {
    --mdc-theme-primary: #64b5f6; 
    --mdc-theme-secondary: #ffca28; 
}

html, body {
    font-family: 'Roboto', 'Helvetica', sans-serif;
    margin: 0;
    padding: 0;
    color: #5f6368; /* Textfarbe grau */
    font-size: 14px; /* Std Grösse */
}

/************************************************************************/

.cY-keinDruck {
    display: block;
}

.en {
    display: none;
}

.es {
    display: none;
}

.cY-keinBildschirm {
    display: none;
}

/************************************************************************/

#google-dialog {
  position: fixed;
  top: 50%;
  transform: translate(0, -50%);
  width: calc(100% - 48px); /* padding ist 2*24 */
}

/*
    minimum    320
    iPhone6q   375
    iPhone6+q  414px
    iPhone5    568px
    iPhone6    667px
    iPhone6+   736px
    iPadq      768px
    iPad      1024px
    iPad pro  1366px
*/
#google-map {
  height: calc(320px - 148px); /* von der hoehe 148 abziehen */
  width: 100%;
}

@media all and (min-height:375px) {
    #google-map {
        height: calc(375px - 148px); /* von der hoehe 148 abziehen */
    }
}
@media all and (min-height:414px) {
    #google-map {
        height: calc(414px - 148px); /* von der hoehe 148 abziehen */
    }
}
@media all and (min-height:568px) {
    #google-map {
        height: calc(568px - 148px); /* von der hoehe 148 abziehen */
    }
}
@media all and (min-height:667px) {
    #google-map {
        height: calc(667px - 148px); /* von der hoehe 148 abziehen */
    }
}
@media all and (min-height:736px) {
    #google-map {
        height: calc(736px - 148px); /* von der hoehe 148 abziehen */
    }
}
@media all and (min-height:768px) {
    #google-map {
        height: calc(768px - 148px); /* von der hoehe 148 abziehen */
    }
}
@media all and (min-height:1024px) {
    #google-map {
        height: calc(1024px - 148px); /* von der hoehe 148 abziehen */
    }
}
@media all and (min-height:1366px) {
    #google-map {
        height: calc(1366px - 148px); /* von der hoehe 148 abziehen */
    }
}

/************************************************************************/
/* Gelbe Buchungs Info im Kalender */
/************************************************************************/

#cY-buchung-info  {
	display: none; /* wird erst später angezeigt */
    position: fixed;
    left: 2rem;
    top: 7rem;
    width: auto;
    /* width: calc(100%-80px); wie margin-left */
    /*height: 3em;
    line-height: 3em;
    text-align: center;
    vertical-align: middle;*/
	border-radius: 2px;
    z-index: 5; /* mdc-drawer ist z-index: 6 da bleiben wir drunter */
    background-color: rgba(255, 202, 40, 0.54); /* IE kenn rgba(# nicht #ffca28 */
    /* @alternate */
    background-color: var(--mdc-theme-secondary, rgba(255, 202, 40, 0.54));
    border-radius: 16px;
}

#cY-buchung-info .mdc-chip {
    background-color: rgba(255,202,40, 0.54); /* IE kenn rgba(# nicht #ffca28 */
    /* @alternate */
    background-color: var(--mdc-theme-secondary, rgba(255, 202, 40, 0.54));
}

/************************************************************************/
/* Gelbe Buchungs Info im Kalender */
/************************************************************************/

#cY-corona-info  {
	display: block;
    position: fixed;
    left: 10rem;
    top: 3.3rem;
    width: auto;
	border-radius: 2px;
    z-index: 5; /* mdc-drawer ist z-index: 6 da bleiben wir drunter */
    background-color: rgba(255, 45, 40, 0.54); /* IE kenn rgba(# nicht #ffca28 */
    /* @alternate */
    background-color: var(--mdc-theme-error, rgba(255, 45, 40, 0.54));
    border-radius: 16px;
}

#cY-corona-info .mdc-chip {
    background-color: rgba(255, 45,40, 0.54); /* IE kenn rgba(# nicht #ffca28 */
    /* @alternate */
    background-color: var(--mdc-theme-error, rgba(255, 45, 40, 0.54));
    color: white;
}

.cY-corona-info-text {
    color: white;
}

/************************************************************************/
/* Drei floating Buttons unten rechts */
/************************************************************************/

#cY-bottom-messenger-button {
    position: fixed;
    display: block;
    right: 0;
    bottom: 0;
    width: 120px; /*152-32*/
    margin-right: 40px;
    margin-bottom: 100px;
    z-index: 5; /* mdc-drawer ist z-index: 6 da bleiben wir drunter */
    will-change:top; /*Damit der Button nicht mehr verschwindet beim runterscrollen mit slick im chrome*/
}

#cY-bottom-fewo-button {
    position: fixed;
    right: 1rem;
    bottom: 7rem;
    width: 120px; /*152-32*/
    z-index: 5; /* mdc-drawer ist z-index: 6 da bleiben wir drunter */
    background-color: whitesmoke;
}

#cY-bottom-facebook-button {
    position: fixed;
    right: 1rem;
    bottom: 4rem;
    width: 120px; /*152-32*/
    z-index: 5; /* mdc-drawer ist z-index: 6 da bleiben wir drunter */
}

#cY-bottom-button {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    width: 120px; /*152-32*/
    z-index: 5; /* mdc-drawer ist z-index: 6 da bleiben wir drunter */
}

@media(min-width: 1024px) {
    #cY-bottom-fewo-button {
        bottom: 7.5rem;
        right: 1.5rem;
    }
    #cY-bottom-facebook-button {
        bottom: 4.5rem;
        right: 1.5rem;
    }
    #cY-bottom-button {
        bottom: 1.5rem;
        right: 1.5rem;
   }
 }

#cY-bottom-button.mdc-button {   
    background-color: rgba(255, 202, 40, 0.54); /* IE kenn rgba(# nicht #ffca28 */
    /* @alternate */
    background-color: var(--mdc-theme-secondary, rgba(255, 202, 40, 0.54));
}

/************************************************************************/

p, ul, ol {
    line-height: initial; /* das wird auf 24px umgestellt, gibt haessliche absaetze */
    font-size: 14px;
}

p {

    letter-spacing: 0;
    margin: 0 0 16px;
}

h5 {
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
    margin-block-start: 1em;
    margin-block-end: 1em;
}
/************************************************************************/

.material-icons {
    text-rendering: optimizeLegibility;
}
    /* Fix für Blackberry https://github.com/google/material-design-lite/issues/1583 */

    .material-icons.md-cY {
        font-size: 60px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        text-rendering: optimizeLegibility;
    }

.cY-fa-icons {
        font-size: 24px !important;
        display: block;
        text-rendering: optimizeLegibility;
    }

/* das macht das Menue kaputt*/
.fa-euro:before,.fa-eur:before {
    /*content: "\f153" das macht das Menue kaputt*/
    content: "";
}

	
.mdl-card__media > img {
    max-width: 100%;
}

.mdl-card__media {
	background-color: white;
	border:0px;
	padding:0px 0px 0px 0px;
}

/* Extra Rand unter allen Texten in den Cards */
.section__text.mdl-cell {
    padding-bottom: 20px;
}

/* jetzt in spezieller css je Ferienobjekt
@media all and (min-width:480px) { 
.navigation {
    background: url('assets/commondata/bilder/background.jpg') center / cover;
}
}
*/

/* 07-02-2021 mdl entfernt */
/*
.mdl-layout__header {
    /*background: #6a99e1;/
    opacity: 0.9;
}
*/

/*
mdl-cell--hide-desktop; hides the column in desktop-size viewport size (> 840px)
mdl-cell--hide-tablet; hides the column in tablet-size viewport size (> 480px)
mdl-cell--hide-phone; hides the column in the mobile-size viewport size (< 480px)
Grid Demo: https://codepen.io/tutsplus/pen/VLXRBO
Grid Center Demo: http://codepen.io/anon/pen/VmmLzN
*/

@media all and (max-width: 479px) {
.cY-hide-phone {
    display: none!important;
}
}

@media all and (max-width: 839px) and (min-width: 480px) {
.cY-hide-tablet {
    display: none!important;
}}

/* This background is dark, so we set text to white. Use 87% black instead if
         your background is light. */

/*
.cY-layout-transparent .mdl-layout__header,
.cY-layout-transparent .mdl-layout__drawer-button {
      color: white;
    }
*/
/* wegen wasserfall menue */
/*
.cY-layout-transparent .mdl-layout__header-row .mdl-navigation__link:last-of-type  {
    padding-right: 0;
    }
*/
/************************************************************************/

/* @media screen, projection, handheld { */
/*

.mdl-layout:not(.is-small-screen) .mdl-layout__header-row {
  padding-left: 40px;
  height: 100px;
}

.mdl-layout.is-small-screen .mdl-layout__header-row {
  padding-left: 40px;
}
*/
/*
.mdl-layout.is-small-screen .mdl-layout__header-row h3 {
  font-size: inherit;
}


.mdl-layout:not(.is-small-screen) .mdl-layout__tab-bar,
.mdl-layout:not(.is-small-screen) .mdl-layout__tab-bar-container {
  overflow: visible;
}

                
.mdl-layout__tab-bar-container {
  height: 64px;
}
.mdl-layout__tab-bar {
  padding: 0;
  padding-left: 16px;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
}
.mdl-layout__tab-bar .mdl-layout__tab {
  height: 64px;
  line-height: 64px;
}
.mdl-layout__tab-bar .mdl-layout__tab.is-active::after {
  background-color: white;
  height: 4px;
}
main > .mdl-layout__tab-panel {
  padding: 8px;
  padding-top: 48px;
}
                */
/*
.mdl-card {
  height: auto;
  display: flex;
  flex-direction: column;
}
*/

/* XXX */
/* 07-02-2021 mdl entfernt */
/*
.mdl-card {
    height: auto;
    min-height: 150px;
    /* display: inline; geht nicht, hintergrund ist mist  /* FIX fuer IE11
	display: block; /* ohne dieses ging es im FireFox nicht 
}

.mdl-card.cY-picture-Card {
    height: 100%;
    /* width: initial; 
}
*/
.mdc-card.cY-picture-Card {
    height: min-content; /* Damit der Rahmen nicht bis unten reicht */
}

.cY-mdc-card__media--3-4::before {
    margin-top: 75%;
}

.cY-card-maxheight .mdc-card__media   {
    background-size: contain; /* z.B. für die Watch Bilder in Solar Check */
}

/* 07-02-2021 mdl entfernt */
/*
    
    .mdl-card > * {
      height: auto; /* Für IE11 ware 100% besser
    }

 @media all and (-ms-high-contrast:none)
 {
 *::-ms-backdrop, .mdl-card > img {
      height: 100%; /* Für IE11 ware 100% besser
 } /* IE11
 }


    .mdl-card .mdl-card__supporting-text {
        margin: 15px;
      /*  flex-grow: 1; vergrossert das feld zulasten des Bildes 
        padding: 0;
        color: inherit;
		height: auto;  /* Hier wieder die Höhe zurück auf auto, insbesondere wegen es IE11 Fixeds in mdl-card > * 
        width: calc(100% - 30px); /*30=15*2
    }
    */

    /*
.mdl-card__supporting-text h4 {
    margin-top: 0;
    margin-bottom: 20px;
}*/

    /* macht den blauen titel keiner
.mdl-card .mdl-card__title {
    margin: 25px;
    flex-grow: 1;
    padding: 0;
    color: inherit;
    width: calc(100% - 50px);
}
        
.mdl-card__actions {
    margin: 0;
    padding: 5px 15px;
    color: inherit;
}

    .mdl-card__actions a {
        color: #00BCD4;
        margin: 0;
    }

        .mdl-card__actions a:hover,
        .mdl-card__actions a:active {
            color: inherit;
            background-color: transparent;
        }
    
.mdl-card__supporting-text + .mdl-card__actions {
    border-top: 1px solid rgba(0, 0, 0, 0.12);
}

/********************************************************/
/* cY-card-wide sind die Cards mit eigener Ueberschrift */
/********************************************************/

/* MDL */
/* 07-02-2021 mdl entfernt */
/*
.cY-card-wide.mdl-card {
    width: auto;
}

.cY-card-wide > .mdl-card__title {
    background-color: rgb(33,150,243); /* #6a99e1; 
    opacity: 0.90;
    color: white;
    height: auto;
}

.cY-card-wide > .mdl-card__menu {
    color: rgb(33,150,243); /* #6a99e1; 
}
*/

.mdc-card > .cY-card__secondary {
    font-size: 14px;
    line-height: 18px;
    padding: 0 1rem 8px;
    margin: 24px 0 16px;
}

.cY-card__secondary > h5 {
font-size: 20px;
font-weight: 500;
line-height: 1;
letter-spacing: .02em;
}

.cY-card__secondary > p {
    letter-spacing: 0;
    margin: 0 0 16px;
    line-height: 18px;
}

/* card__primary nach card__secondary, sonst gib es bei verschachtelten cards Probleme */
.cY-card-wide {
    background-color: rgb(100, 181, 246); /* IE kennt rgb(# nicht #64b5f6 */
    /* @alternate */
    background-color: var(--mdc-theme-primary, rgba(100, 181, 246, 0.54));
    opacity: 0.90;
    height: auto;
    margin: 0px;
    padding: 16px;
    color: white;
    /* @alternate */
    color: var(--mdc-theme-background, white);
    font-weight: 300;
    font-size: 24px;
    letter-spacing: -.02em;
}

.mdc-card > .cY-card__primary {
    padding: 1rem;
}

.mdc-card .cY-mdc-card-text{
    padding: 1rem;
}

/********************************************************/
/* für Tabs */
/* Beispile siehe https://codepen.io/kfranqueiro/pen/yxzppj */
/********************************************************/

.cY-tab {
    display: none;
  }
  
  .cY-tab-active {
    display: block;
  }

/********************************************************/

/* 07-02-2021 mdl entfernt */
/*
.mdl-card__supporting-text {
    text-align: left; /* hier war start ?!? 
}


.mdl-layout__content section:not(:last-of-type) {
    position: relative;
    margin-bottom: 36px;
}
*/ 
section.section--center {
    max-width: 860px;
}

#features section.section--center {
    max-width: 620px;
}

/* brauchen wir das ? section > header {
    /* display: flex; das macht die Bilder im IE gross
    align-items: center;
    justify-content: center;
}*/

/*
section > header > .material-icons {
  font-size: 3rem;
}
    */

/* TODO für MDC
section > button {
    position: absolute;
    z-index: 99;
    top: 8px;
    right: 8px;
}
*/

section .section__circle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-grow: 0;
    flex-shrink: 1;
}

section .section__text {
    flex-grow: 1;
    flex-shrink: 0;
    padding-top: 8px;
}

    section .section__text h5 {
        font-size: inherit;
        margin: 0;
        margin-bottom: 0.5em;
    }

    section .section__text a {
        text-decoration: none;
    }

section .section__circle-container > .section__circle-container__circle {
    width: 64px;
    height: 64px;
    border-radius: 32px;
    margin: 8px 0;
}

section.section--footer .section__circle--big {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    margin: 8px 32px;
}

.is-small-screen section.section--footer .section__circle--big {
    width: 50px;
    height: 50px;
    border-radius: 25px;
    margin: 8px 16px;
}


section.section--footer {
    padding: 64px 0;
    margin: 0 -8px -8px -8px;
}
    
section.section--center .section__text:not(:last-child) {
    border-bottom: 1px solid rgba(0,0,0,.13);
}

/* 07-02-2021 mdl entfernt */
/*
.mdl-card .mdl-card__supporting-text > h3:first-child {
    margin-bottom: 24px;
}
*/

/* Hintergrund auf weiss, sonst schaut das Hintergrundbild hervor :not(#overview) 
.mdl-layout__tab-panel {
  background-color: white;
}
    */
/*
#features section {
  margin-bottom: 72px;
}
#features h4, #features h5 {
  margin-bottom: 16px;
}
    */

/************************************************************************/
/* Textaerea sieht irgendwie anders aus */
/************************************************************************/

.mdc-text-field.mdc-text-field--textarea {
    border-bottom: 1px solid;
    background-color: #f5f5f5;
    padding-top: 16px;
    width: 100%; /* fehler im original mdc-text-field in Kombination mit Grid */
}

.mdc-text-field--textarea .mdc-floating-label {
    left: 16px;
    top: 32px;
}

/************************************************************************/
/* Die Tabellen sind viel zu hoch */
/************************************************************************/

.mdc-data-table__header-cell{
    height: 32px
}

.mdc-data-table__cell {
    height: 32px
}

/************************************************************************/
/* Breite für meine mdc-selects */
/************************************************************************/

.CY-mdc-select-width-class {
    width: 400px;
}

/************************************************************************/
/* Kurze Aufzaehlung in Form einer Card */
/************************************************************************/
	
.card-small {
  min-height: initial;
  height: 100%;
}

.card-small > .cY-card__primary {
  color: rgba(0, 0, 0, 0.87);
  height: auto;
  min-height: initial;
  padding-bottom: 0px; /* Abstand halbiert, da wir jetzt Icons bzw Kreise mit 30px haben */
}

/* oben und unten fallen ggf. zusammen */
.card-small .cY-card__primary  {
  font-size: 20px;
  text-justify: center; 
  line-height: 32px;
}

/* Kreis */
.card-small .cY-card__primary:not(.cY-no-circle)::before {
  content: "";
  display: inline-block;
  margin-right: 0.5em;
  width: 32px;
  height: 32px;
  background-color: #6a99e1;
  border-radius: 50%;
}

.card-small .cY-card__primary .cY-circle {
    display: inline-block;
    margin-right: 0.5em;
    width: 32px;
    min-width: 32px;
    height: 32px;
    line-height: 32px;
    color: white;
    text-align: center;
    background-color: #6a99e1;
    border-radius: 50%;
  }
  


/************************************************************************/

.toc {
    border-left: 4px solid #C1EEF4;
    margin: 24px;
    padding: 0;
    padding-left: 8px;
    display: flex;
    flex-direction: column;
}

    .toc h4 {
        /*font-size: 0.9rem;*/
        margin-top: 0;
    }

    .toc a {
        color: #4DD0E1;
        text-decoration: none;
        font-size: 16px;
        line-height: 28px;
        display: block;
    }

    .toc li, .toc ul {
        list-style: none;
    }

    /* 07-02-2021 mdl entfernt */
/*
.mdl-menu__container {
    z-index: 99;
}
*/

/************************************************************************/
/* Aufzaehlungsliste der Gegenstaende im Haus */
/************************************************************************/

/* 07-02-2021 mdl entfernt */
/*
.cY-list-icon .mdl-list__item {
	padding-left: 0px;
}

.cY-list-icon .mdl-list__item .mdl-list__item-primary-content .mdl-list__item-icon {
    margin-right: 16px;
}
*/

/* Abstand zwischen Icon und der ersten Schrift war auf 32px */
.cY-list-icon .mdc-list-item__graphic {
    margin-right: 16px;
}
/************************************************************************/

/*
.cY-login-valid-input {
    background-color: white !important;
}

.cY-login-invalid-input {
    background-color: #fffacd !important;
}

.cY-login-invisible {
    display: none;
}

.cY-login-visible {
    display: block;
}

.cY-login-error {
    background-color: #ffe1cd;
    padding: 0 .5em;
    margin-bottom: .5em;
    border: 1px solid #e9cfbd;
    border-radius: 3px 3px;
}
*/

/* Footer */

/* Kleiner als 16 geht nicht, gibt Fehler im Chrome */
/*
.mdl-mini-footer {
  padding: 8px 24px 16px 24px; 
}
    */

/**************************************************************************/
/* Slider */
/**************************************************************************/

.cY-Slides {
    display: none;
    width: 100%;
}

.cY-Slides img {
    width: 100%;
}

/* Slideshow container */
.cY-slide {
  position: relative;
  margin: auto;
}


.cY-slide__caption {
    color: white;
    top: 0px;
    min-height: 80px;
    left: 10px;
    position: absolute;
    width: 100%;
    z-index: 2;
}    
/* Fading animation */
.cY-fade {
  -webkit-animation-name: cY-fade;
  -webkit-animation-duration: 1.5s;
  animation-name: cY-fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes cY-fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes cY-fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/**************************************************************************/
/* Für Bild das mitläuft, derzeit nicht genutzt */
/**************************************************************************/

/*
.demo-card-image.mdl-card {
    margin-top: 435px;
    width: 256px;
    height: 256px;
    background: url('assets/commondata/bilder/casa0.jpg') center / cover;
}
.demo-card-image > .mdl-card__actions {
    height: 52px;
    padding: 16px;
    background: rgba(0, 0, 0, 0.2);
}
.demo-card-image__filename {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
}
*/

/**************************************************************************/
/* Logos der Webstores */
/**************************************************************************/

.cY-badge {
  display: none;
}

.cY-badge img {
  border: 0px;
  width: 100%;
}

			
/**************************************************************************/
	
/*
h1, h2, h3, h4 , h5, .mdl-grid , .mdl-cell , .mdl-card__supporting-text , section{
    page-break-inside: auto;
    page-break-after: always;
    page-break-before: always;
    overflow: visible !important;
    float: none !important;
        }
*/

/*
  .mdc-button.cY-button--facebook {
      color: rgb(63, 81, 181)
  }
  .mdc-button.cY-button--facebook:focus:not(:active) {
      background-color: #3b5998
  }
  .mdc-button--raised.cY-button--facebook {
      background: #3b5998;
      color: rgb(255, 255, 255)
  }
  .mdc-button--raised.cY-button--facebook:hover {
      background-color: #3b5998
  }
  .mdc-button--raised.cY-button--facebook:active {
      background-color: #3b5998
  }
  .mdc-button--raised.cY-button--facebook:focus:not(:active) {
      background-color: #3b5998
  }
  .mdc-button--raised.cY-button--facebook .mdl-ripple {
      background: rgb(255, 255, 255)
  }
  mdc-button--fab -> mdc-button
  */
  .mdc-button.cY-button--facebook {
      background: #3b5998;
      color: rgb(255, 255, 255)
  }
  .mdc-button.cY-button--facebook:hover {
      background-color: #3b5998
  }
  .mdc-button.cY-button--facebook:focus:not(:active) {
      background-color: #3b5998
  }
  .mdc-button.cY-button--facebook:active {
      background-color: #3b5998
  }
  /*
  .mdc-button.cY-button--facebook .mdl-ripple {
      background: rgb(255, 255, 255)
  }
*/
  /* Kleines rundes Icon hängt unter dem Menue */
  .cY-menu-picture {
    position: relative;
    top: 24px;
    width: 80px;
    height: 80px; 
    z-index: 5; /* Menu in MDC ist auf 8 */  /* mdc-drawer ist z-index: 6 da bleiben wir drunter */
    overflow: hidden; /* nach wechsel auf material-components-web@7.0.0 */
  }
  
  .cY-menu-picture-img {
    width: 80px;
    height: 80px;
  }

  @media all and (max-width:480px) { 
    .cY-menu-picture {
        width: 56px;
        height: 56px; 
    }

      .cY-menu-picture-img {
        width: 56px;
        height: 56px;
      }   
    }

  /* Einträge auf der Startseite index.php zur Verzweigung auf die Objekt-Seiten */
  /*                                 
  https://codepen.io/eode9/pen/twkKm
  https://stackoverflow.com/questions/37688743/how-to-set-ribbon-on-image-by-stacking-it-in-a-div
   */

 .startpage-card-wide > .mdl-card__title  {
   color: white;
   height: 300px;
   /* jetzt über data-image und jquery realisiert */
   /* background: url('assets/commondata/bilder/casa3.jpg') center / cover; */
 }

.startpage-card-wide  .mdl-card__title-text {
   background: rgba(0, 0, 0, 0.4);
 }

 .startpage-card-wide > .mdl-card__menu {
   color: #fff;
 }

.startpage-card-wide .mdc-card__media-content {
    display: flex;
    align-items: flex-end; /* Textblock nach links unten */
    padding: 16px;
}

.startpage-card-wide .cY-card__primary {
    color: white;
    background: rgba(0, 0, 0, 0.4);
}

.startpage-card-wide h2 {
    margin: 0px;
}

.startpage-card-wide .mdc-card__media {
    height: 300px;
}

 /* Schriftzug als Kleber auf Bilder oder sonstwo in der Ecke */
 
.corner-ribbon {
  width: 200px;
  background: #e43;
  position: absolute; 
  top: 25px;
  left: -50px;
  text-align: center;
  line-height: 50px;
  letter-spacing: 1px;
  color: #f0f0f0;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.corner-ribbon.sticky {
  position: absolute;
}

.corner-ribbon.shadow {
  box-shadow: 0 0 3px rgba(0, 0, 0, .3);
}

.corner-ribbon.top-left{
  top: 25px;
  left: -50px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.corner-ribbon.top-right{
  top: 25px;
  right: -50px;
  left: auto;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.corner-ribbon.bottom-left{
  top: auto;
  bottom: 25px;
  left: -50px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.corner-ribbon.bottom-right{
  top: auto;
  right: -50px;
  bottom: 25px;
  left: auto;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

/**************************************************************************/
/* Footer */
/**************************************************************************/
.cY-footer  {
    z-index: 5; /* mdc-drawer ist z-index: 6 da bleiben wir drunter */

    display: -webkit-flex;
display: -ms-flexbox;
display: flex;

-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;

-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 32px 16px;
color: #9e9e9e;
background-color: #424242;

}

.cY-footer .cY-footer-logo {
    color: white;
}

.cY-footer ul {
    margin: 0px;
    padding: 0px;
  
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    
    list-style: none;
  }

.cY-footer li {
  margin-bottom: 0;
  margin-right: 16px;
}

.cY-footer a {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

/*
 Social Sharing Buttons for Material Design Lite
 by Brandon Himpfen http://www.himpfen.com/
 --------------------------------------------------

$twitter: #00acee;
$facebook: #3b5998;
$googleplus: #e93f2e;
$stumbleupon: #f74425;
$linkedin: #0e76a8;

$md-colour-list: (
twitter $twitter,
facebook $facebook,
googleplus $googleplus,
stumbleupon $stumbleupon,
linkedin $linkedin
);

*/

/**
* @author  Xu Ding
* @website https://www.StarTutorial.com
* @revised by Alessandro Marinuzzi
* @website https://www.alecos.it/
* @revised 10.17.2017
**/

/*************************** Calendar Top Navigation **************************/
.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome and Opera */
  }

.csscalendar {
    margin: 0px auto;
    padding: 0px;
    width: 100%; /* calc(2px + (7 * 2em) + (8 * 1px)); */ /* 602px; */ /* zwei Pixel Rahmen */ /* 1px; Abstand */
    /*font-family: Helvetica, "Times New Roman", Times, serif;*/
    background-color: white;

    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
  }
  /* Header von links nach rechts */
  .csscalendar .calendar_box {
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 2em; /* 20px; */
    background-color: rgb(33,150,243); /* #6a99e1; */
  }
  /* im Header nur der Text */
  .csscalendar .calendar_header {
    line-height: 2em; /* 20px; */
    vertical-align: middle;
    position: absolute;
    top: 0px;
    left: calc((100% - 1px) / 7 - 1px + 2px); /* 2em; 1 Pixel Rand*/ /* NEU 100% -1px da ein Pixel Rand mehr */
    width: calc(5 * ((100% - 1px) / 7) - 1px); /* 5 Tage lang */ 
    height: 2em; /* 20px; */
    text-align: center;
  }

  .csscalendar .calendar_header .calendar_title {
    color: #FFF;
    /*font-size: 18px;*/
  }

  /* Buttons, derzeit nicht eingesetzt */

  .csscalendar .calendar_prev, .csscalendar .calendar_next {
  position: absolute; /*
    top: 0px;
    height: auto;
    display: block;
    */
    text-decoration: none;
    /*color: #FFF;
  */
  cursor: pointer;  
  margin: 0px;
  padding: 0px;
  margin-right: 1px; /* Abstand */
  line-height: 2em;
  vertical-align: middle;
  float: left;
  width: calc((100% - 1px) / 7 - 2px); /* 2em; 1 Pixel Rand*/ /* NEU 100% -1px da ein Pixel Rand mehr */
  height: 2em;
  /*font-size: 15px;*/
  background-color: rgb(33, 150, 243); /* #6a99e1; */
  color: white;
  text-align: center;
  }
  
  .csscalendar .calendar_prev {
    left: 2px; /* Rand */
  }
  .csscalendar .calendar_next {
    right: 2px; /* Rand */
  }
  
  /*************************** Calendar Content Cells ***************************/

  .csscalendar .calendar_content {
    border: 1px solid #787878;
    border-top: none;
  }
  
  .csscalendar .calendar_content_legende {
    line-height: 2em;
	border-bottom: none;
  }
  
  .csscalendar .calendar_label {
    float: left;
    margin: 0px;
    padding: 0px;
    margin-left: 1px; /* Abstand */
    margin-top: 1px; /* Abstand */
    margin-right: 1px; /* NEU Abstand */
    width: 100%;
  }
  /* Wochentage */
  .csscalendar .calendar_label .calendar_names {
    margin: 0px;
    padding: 0px;
    margin-right: 1px; /* Abstand */
    line-height: 2em;
    vertical-align: middle;
    float: left;
    width: calc((100% - 1px) / 7 - 1px); /* 2em; 1 Pixel Rand*/ /* NEU 100% -1px da ein Pixel Rand mehr */
    height: 2em;
    /*font-size: 15px;*/
    background-color: rgb(33, 150, 243); /* #6a99e1; */
    color: white;
    text-align: center;
  }

  /* Der Block aller Datuemer ohne Wochentagezeile */
  .csscalendar .calendar_dates {
    float: left;
    margin: 0px;
    padding: 0px;
    margin-left: 1px; /* Abstand */
    margin-bottom: 1px; /* Abstand */
    margin-right: 1px; /* NEU Abstand */
    width: 100%;
  }
  /** overall width = width+padding-right **/
  .csscalendar .calendar_dates .calendar_names,
  .csscalendar .calendar_dates .calendar_days,
  .csscalendar .calendar_dates .calendar_today,
  .csscalendar .calendar_dates .belegt-cell,
  .csscalendar .calendar_dates .frei-cell,
  .csscalendar .calendar_dates .anreise-cell,
  .csscalendar .calendar_dates .abreise-cell,

  .csscalendar .calendar_dates .angeblockt-cell,
  .csscalendar .calendar_dates .abgeblockt-cell,
  .csscalendar .calendar_dates .anabgeblockt-cell,
  .csscalendar .calendar_dates .ansonder-cell,
  .csscalendar .calendar_dates .absonder-cell,
  .csscalendar .calendar_dates .anabsonder-cell,
  .csscalendar .calendar_dates .anreiseabgeblockt-cell,
  .csscalendar .calendar_dates .ansonderabgeblockt-cell,
  .csscalendar .calendar_dates .angeblocktabreise-cell,
  .csscalendar .calendar_dates .angeblocktabsonder-cell,
  .csscalendar .calendar_dates .anreiseabsonder-cell,
  .csscalendar .calendar_dates .angeblocktabsonder-cell,
  .csscalendar .calendar_dates .ansonderabreise-cell,
  .csscalendar .calendar_dates .ansonderabgeblockt-cell,
  .csscalendar .calendar_dates .fehler-cell,
  
  .csscalendar .calendar_dates .sonder-cell,
  .csscalendar .calendar_dates .geblockt-cell,
  
  .csscalendar .calendar_dates .anabreise-cell {
    margin: 0px;
    padding: 0px;
    margin-right: 1px; /* Abstand */
    margin-top: 1px; /* Abstand */
    line-height: 2em;
    vertical-align: middle;
    float: left;
    width: calc((100% - 1px) / 7 - 1px); /* 2em; 1 Pixel Rand*/ /* NEU 100% -1px. da ein Pixel Rand mehr */
    height: 2em;
    /*font-size: 25px;*/
    background-color: #DDD;
    color: #000;
    text-align: center;
	cursor: pointer; /* mouse form */
  }

.csscalendar .calendar_dates .calendar_today {
    color: white;
}

.csscalendar .calendar_dates .belegt-cell {
    background-color: red;
}

.csscalendar .calendar_dates .sonder-cell {
    background-color: yellow;
}

.csscalendar .calendar_dates .geblockt-cell {
    background-color: gray;
}

.csscalendar .calendar_dates .frei-cell {
    background-color: green;
}

.csscalendar .calendar_dates .anreise-cell {
    background-image: linear-gradient(to bottom right, green 0%,  green 45%, red 55%, red 100%);
}

.csscalendar .calendar_dates .abreise-cell {
    background-image: linear-gradient(to bottom right, red 0%,  red 45%, green 55%, green 100%);
}

.csscalendar .calendar_dates .anabreise-cell {
	background-image: linear-gradient(to bottom right, red 0%, red 40%, #DDD 45%, #DDD 55%, red 60%, red 100%);
}

.csscalendar .calendar_dates .angeblockt-cell {
    background-image: linear-gradient(to bottom right, green 0%,  green 45%, gray 55%, gray 100%);
}

.csscalendar .calendar_dates .abgeblockt-cell {
    background-image: linear-gradient(to bottom right, gray 0%,  gray 45%, green 55%, green 100%);
}
.csscalendar .calendar_dates .anabgeblockt-cell {
	background-image: linear-gradient(to bottom right, gray 0%, gray 40%, #DDD 45%, #DDD 55%, gray 60%, gray 100%);
}
.csscalendar .calendar_dates .ansonder-cell{
    background-image: linear-gradient(to bottom right, green 0%,  green 45%, yellow 55%, yellow 100%);
}

.csscalendar .calendar_dates .absonder-cell {
    background-image: linear-gradient(to bottom right, yellow 0%,  yellow 45%, green 55%, green 100%);
}
.csscalendar .calendar_dates .anabsonder-cell{
	background-image: linear-gradient(to bottom right, yellow 0%, yellow 40%, #DDD 45%, #DDD 55%, yellow 60%, yellow 100%);
}
.csscalendar .calendar_dates .anreiseabgeblockt-cell {
    background-image: linear-gradient(to bottom right, gray 0%,  gray 45%, red 55%, red 100%);
}

.csscalendar .calendar_dates .ansonderabgeblockt-cell {
    background-image: linear-gradient(to bottom right, gray 0%,  gray 45%, yellow 55%, yellow 100%);
}

.csscalendar .calendar_dates .angeblocktabreise-cell  {
    background-image: linear-gradient(to bottom right, red 0%,  red 45%, gray 55%, gray 100%);
}

.csscalendar .calendar_dates .angeblocktabsonder-cell {
    background-image: linear-gradient(to bottom right, yellow 0%,  yellow 45%, gray 55%, gray 100%);
}

.csscalendar .calendar_dates .anreiseabsonder-cell {
    background-image: linear-gradient(to bottom right, yellow 0%,  yellow 45%, red 55%, red 100%);
}

.csscalendar .calendar_dates .ansonderabreise-cell  {
    background-image: linear-gradient(to bottom right, red 0%,  red 45%, yellow 55%, yellow 100%);
}


.csscalendar .calendar_dates .fehler-cell {
    background-color: blue;
}

/**********************************/

.csscalendar .calendar_dates .frei-cell:hover ,
.csscalendar .calendar_dates .sonder-cell:hover ,
.csscalendar .calendar_dates .frei-cell:hover ,
.csscalendar .calendar_dates .anreise-cell:hover ,
.csscalendar .calendar_dates .abreise-cell:hover ,
.csscalendar .calendar_dates .angeblockt-cell:hover ,
.csscalendar .calendar_dates .abgeblockt-cell:hover ,
.csscalendar .calendar_dates .ansonder-cell:hover ,
.csscalendar .calendar_dates .absonder-cell:hover ,
.csscalendar .calendar_dates .anabsonder-cell:hover ,
.csscalendar .calendar_dates .ansonderabgeblockt-cell:hover ,
.csscalendar .calendar_dates .angeblocktabsonder-cell:hover ,
.csscalendar .calendar_dates .anreiseabsonder-cell:hover ,
.csscalendar .calendar_dates .ansonderabreise-cell:hover,
.csscalendar .calendar_prev:hover,
.csscalendar .calendar_next:hover {
	outline-style: solid;
	outline-color: black;
	outline-width: 1px;
    background: darkblue;
}

/**********************************/
/* Beispiele: https://css-tricks.com/the-shapes-of-css/ */

/* #burst-12 */
.csscalendar .calendar_dates .calendar_dates_selected {
	outline-style: solid;
	outline-color: black;
	outline-width: 1px;
    /*background: darkblue;*/
}
	

/*
  :focus {
    outline: none;
  }
  */
  
  .calendar_clear {
    clear: both;
  }
  
  /*****************************************/
  
  /*
   * Tables Umbruch behandeln
  */

  /* 07-02-2021 mdl entfernt */
/*
@media all and (max-width:480px) { 

.mdl-data-table {
    table-layout:fixed;
    width:100%; 
}

.mdl-data-table td, .mdl-data-table th {
  width: 100%;
  /*white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;/
  padding-left: 0px; /* 24px hier war mir der Rand zu gross /
  padding-right: 0px; /* 24px hier war mir der Rand zu gross /
}

.mdl-data-table td:first-of-type, .mdl-data-table th:first-of-type {
  padding-left: 0px; /* 24px hier war mir der Rand zu gross /
  padding-right: 0px; /* 24px hier war mir der Rand zu gross /
}

.mdl-data-table td:last-of-type, .mdl-data-table  th:last-of-type {
  padding-left: 0px; /* 24px hier war mir der Rand zu gross /
  padding-right: 0px; /* 24px hier war mir der Rand zu gross /
}
}
*/

/* Smartbanner auf relativ umstellen, da wir die Positioning Api nicht verwenden */
#my_smartbanner_page {
    display: none;
}

.smartbanner {
    position: relative;
}

.smartbanner__exit {
    display: none;
}
/*
.smartbanner__exit::before, .smartbanner__exit::after {
    position: relative;
}
.smartbanner__icon {
    position: relative;
}
.smartbanner__info {
    position: relative;
}
.smartbanner__button {
   position: relative;
}
*/

.sceditor-button-cmdsave div { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M433.941 129.941l-83.882-83.882A48 48 0 0 0 316.118 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V163.882a48 48 0 0 0-14.059-33.941zM272 80v80H144V80h128zm122 352H54a6 6 0 0 1-6-6V86a6 6 0 0 1 6-6h42v104c0 13.255 10.745 24 24 24h176c13.255 0 24-10.745 24-24V83.882l78.243 78.243a6 6 0 0 1 1.757 4.243V426a6 6 0 0 1-6 6zM224 232c-48.523 0-88 39.477-88 88s39.477 88 88 88 88-39.477 88-88-39.477-88-88-88zm0 128c-22.056 0-40-17.944-40-40s17.944-40 40-40 40 17.944 40 40-17.944 40-40 40z"/></svg>') !important; }