/* ***************************** allgemeine Einstellungen ********************************* */
a.skip-link:focus {
  position:fixed;
  width:auto;
  height:auto;
  clip:unset;
  color:inherit;
  opacity:1;
  visibility:visible;
  left:50%;
  -webkit-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  padding:0.2rem 0.5rem;
}


/* ***************************** Einstellungen linke + rechte Seitenleiste ********************************* */
/* sonst sind Auszeichnungen nicht sichtbar in einspaltiger Darstellung! */
[id*="hauptseiteninhalt"].block,
[id*="auszeichnungen"].block,
[id*="benutzeranmeldung"].block,
[id*="login"].block {
  position:relative;
  clear:both;
}

[id*="benutzeranmeldung"].block form input[type="submit"] {
  margin-top:2rem; /* sonst üblicher Abstand zu groß */
  padding: 0.2rem 2rem; /* Ausgleich, damit optisch wie oben Input-Felder */
}

/* nicht bei Handy, sonst kommt Menü nicht hoch! */
@media screen and (min-width:40rem){
  aside.links, aside.rechts, footer.fussbereich .mittig {
    position:relative;
    clear:both;
  }
}
aside.links > .block > ul,
aside.links > .block > div {
  border-width:1px;
  border-style: solid;
}
.linke_Seitenleiste nav, .rechte_Seitenleiste ul {
  font-size: 85%;
}
.linke_Seitenleiste ul, .linke Seitenleiste ol,
.rechte_Seitenleiste ul, .rechte Seitenleiste ol {
  margin-left:0;
}
.linke_Seitenleiste ul li::marker,
.rechte_Seitenleiste ul li::marker {
  content: '';
}
.hauptanzeigebereich aside.links a img {
  display:inline; /* entfernt unteren Rand! */
}

/* *************************** Benutzeranmeldung ************************************ */

[id*="login"].block form,
[id*="benutzeranmeldung"].block form {
  text-align:right;
  padding:1rem 1rem 0 1rem;
}
[id*="login"].block label,
[id*="benutzeranmeldung"].block label {
  width:8rem;
  text-transform:uppercase;
  font-size:75%;
}
[id*="login"].block ul,
[id*="benutzeranmeldung"].block ul {
  display:none;
}

/* ********************************** Drupal User Interface ******************************** */

.ui-dialog {
  z-index:50;
  /* width, max-width, .. */
  padding:3rem;
  overflow:auto;
  background: #eee;
  height:100%;
  width:75%;
  position: fixed;
  overflow: scroll;
}

.ui-dialog figure img {
  width:auto;
}

.views-filterable-options-controls {
  display: none;
}
.views-ui-dialog .views-filterable-options-controls {
  display: inline;
}

/* Don't let the messages overwhelm the modal */
.views-ui-dialog .views-messages {
  max-height: 200px;
  overflow: auto;
}

.views-display-setting .label,
.views-display-setting .views-ajax-link {
  float: left; /* LTR */
}
[dir="rtl"] .views-display-setting .label,
[dir="rtl"] .views-display-setting .views-ajax-link {
  float: right;
}
.form-item-options-value-all {
  display: none;
}
.js-only {
  display: none;
}
html.js span.js-only {
  display: inline;
}
.ajs .views-edit-view .dropbutton-wrapper {
  width: auto;
}
/* ************************** Fehlermeldungen, Statusmeldungen und Startseite *********************** */
/* .admin .icon, */
.dblog-warning .icon, 
.dblog-error .icon, 
.dblog-critical .icon, 
.dblog-alert .icon, 
.dblog-emergency .icon {
  background-size:1.3rem 1.3rem;
  abackground: no-repeat center;
}

.messages {
  margin: 1rem 0;
  border-width: 1px 0;
  border-radius: 0;
  background-color: transparent;
  background-repeat:no-repeat;
  box-shadow: none;
  background-size: 1.3rem;
  background-position: 5px 50%;
  padding: 15px 20px 15px 35px;
  padding: 1.2rem 1.5rem 1.rem 2rem;
  overflow-wrap: break-word;
}

div[aria-label="Statusmeldung"], 
div[aria-label="Fehlermeldung"],
div[role="contentinfo"],
div[role="alert"]
{
  padding: 0.3rem 0.5rem;
  border-width:1px;
  border-style:solid;
}
body.not-logged-in div[aria-label="Statusmeldung"], 
body.not-logged-in div[aria-label="Fehlermeldung"],
body.not-logged-in div[role="contentinfo"],
body.not-logged-in div[role="alert"] {
  display:none;
}
.meldung {
  margin:0 0 2rem 0;
}
.meldung:first-child {
  margin-top:2rem;
}

.startseite #Infobereich .meldung {
  position: absolute;
  top:0;
  width:auto;
}
div[role="contentinfo"] .field-item {
  margin-bottom:0;
  display:block;
}

/* ************************************* Inhalt mittlere Spalte allgemein ************************* */
/* scheitert an den Wohnungen - Text begrenzen?
.mittig {
  max-width: 85rem;
  margin-left: auto;
  margin-right: auto;
}


.angebot .mittig p {
  text-align:justify;

}

*/
/* ********************************************** Starseite *************************************** */

@media only screen {
  .startseite h1.page-title {
    position:absolute;left:-9999rem;display:block;height:1px;width:1px;clip:1px 1px 1px 1px;visibility:hidden;opacity:0;
  }
}
.startseite main::after {
  clear:both;
}

.startseite .hauptanzeigebereich main .block{
  padding:0 2%;
}
.startseite main div.diashow {
  position: relative;
  cursor:default;
}

.startseite main div.diashow article {
  position: absolute;
  top:0;
}

.startseite main div.diashow article:first-of-type {
  position:relative; /* das höchste Element bestimmt den Platzbedarf */
}
.startseite main .diashow article {
  margin-bottom:0;
}
.startseite main .diashow article .field_item {
  border-width:1px;
  border-style: solid;
}
.startseite main .diashow article a {
  padding:1rem;
  display: block;
}

@media screen and (min-width: 40em) {


  .startseite .hauptanzeigebereich main {
    /* von Layout.css aufheben, weil position:fixed vom .block die eh nicht respektiert, daher dort dann Abstände regeln */
    padding:0;
    margin:0;
  }
  .startseite .hauptanzeigebereich main {
    position:relative; /* noch nötig? */
  }
  .startseite .hauptanzeigebereich main #block-hauptseiteninhalt.block{
    position:absolute; /* fixed unten ab Mindeshöhe */
    padding:0 0.5%;
  }
  .startseite main div.diashow {
    /* position:relative;*/ /* Wiederholung von oben */
  }
  .startseite main div.diashow article {
    /* position:article;*/ /* Wiederholung von oben */
  }
  .startseite main div.diashow article:first-of-type {
    /* oben schon: position:relative; */ /* das höchste Element bestimmt den Platzbedarf */
  }
}
@media all and (min-height:40rem) and (min-width:40em) {

  .startseite .hauptanzeigebereich main #block-hauptseiteninhalt.block{
    position:fixed;
  }

  /* größtes Element (hier das 1.) nimmt eh mit pos rel den ganzen .diashow-Raum ein, alle anderen innerhalb davon vertikal zentrieren:*/
  
  .startseite main div.diashow article:not(.first-of-type) {
    top:50vh;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }

}
@media screen and (min-width: 60em) {

  .startseite .hauptanzeigebereich main #block-hauptseiteninhalt.block {
    padding:0 10%;

  }
}
@media screen and (min-width: 90em) {

  .startseite .hauptanzeigebereich main #block-hauptseiteninhalt.block {
    padding:0 20%;
  }
}

/* kleine Handy-Bildschirme Platz erst ab gewisser Höhe, so dass Kasten immer sichtbar ist */
@media all and (min-height:30rem) and (max-width:39.999em) {
  .startseite main div.diashow article {
    margin-top:5%;
    margin-bottom:5%;
  }
}

a.zurueck_zum_angebot {
  content:'f359';
  position:absolute;top:0;left:0;
  width:100%;
}
a.zurueck_zum_angebot {
  visibility: visually-hidden;
  position:relative;
  height:1.7rem;
  width:1.7rem;
}

/* ************ Angebot und Angebotsübersicht ************ */

/* einspaltig */
#visualisierungen object {
  max-width:100%;
  width:400px;
  height:200px;
  width:800px;
  height:400px;
}

/* zweispaltig */

@media all and (min-width: 40em) {
  .angebotsuebersicht:first-of-type > h3 {
    margin-top:0;
  }
  #visualisierungen object {
    transform:scale(1.0);
    width:800px;
    height:400px;
  }
}


/* **************** Formulare *************************** */

/* ****************************************************** */
/* Danke an: https://tympanus.net/TipsTricks/EnhanceRequiredFields/index2.html
/* ****************************************************** */

/*
[class*="contact-form"] label,
[class*="angebote"] .tabelle label,
[class*="einverstaendniserklaerung"] .tabelle label {
  font-size:80%;
  letter-spacing: 2px;
  text-transform: uppercase;
}
*/

/* **************** Aufnahme in die Kundenkarte **************************** */

/* ersten Optionseintrag ausblenden, da Aufruf nicht von einem bestimmten Objekt - Option zum Einmaligen Exposé-Versand ist nicht zutreffend */
/*
#edit-field-speicherdauer .form-item-field-speicherdauer:last-child {
  display:none;
}

*/

.maklervertrag main .button a,
.einverstaendnis_datenspeicherung main .button a {
  margin:0;
}



/* **************** Notizen **************************** */


.node--type-notizen main .description {
  display:none;
}

/* ************ Switch-Schalter für Pflichtfelder ***************** */

input.switch:checked ~ form fieldset:not(.required-fields),
input.switch:checked ~ form select:not(.required),
input.switch:checked ~ form textarea:not(.required),
input.switch:checked ~ form input[type="text"]:not(.required),
input.switch:checked ~ form input[type="number"]:not(.required),
input.switch:checked ~ form input[type="email"]:not(.required),
input.switch:checked ~ form input[type="tel"]:not(.required),
input.switch:checked ~ form input[type="date"]:not(.required),
input.switch:checked ~ form label:not(.form-required),
input.switch:checked ~ form input#edit-copy,
input.switch:checked ~ form legend {

  height: 0px;
  margin:0;
  padding:0;
  visibility: hidden;
  line-height: 0;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -o-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  opacity: 0;
  position: absolute;
}
input.switch {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden;
}
input.switch + label {
  display: block;
  position: relative;
  cursor: pointer;
  outline: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
input.switch + label {
  padding: 0.2rem 0.2rem 0.2rem 1rem;
  width: 4rem;
  height: 2rem;
  background-color: #dddddd;
  -webkit-border-radius: 2rem;
  -moz-border-radius: 2rem;
  -ms-border-radius: 2rem;
  -o-border-radius: 2rem;
  border-radius: 2rem;
  margin-top:0.666rem;
  margin-bottom: 1.666rem;
}
input.switch + label div {
  padding-left: 4.5rem;
  color:#555;
  min-width: 15rem;
}

input.switch + label:before,
input.switch + label:after {
  display: block;
  position: absolute;
  top: 0.0666rem;
  left: 0.0666rem;
  bottom: 0.0666rem;
  content: "";
}
input.switch + label:before {
  right: 0.1rem;
  background-color: #f1f1f1;
  -webkit-border-radius: 2rem;
  -moz-border-radius: 2rem;
  -ms-border-radius: 2rem;
  -o-border-radius: 2rem;
  border-radius: 2rem;
  -webkit-transition: background 0.4s;
  -moz-transition: background 0.4s;
  -o-transition: background 0.4s;
  transition: background 0.4s;
}
input.switch + label:after {
  width: 1.9333rem;
  background-color: #fff;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;
  -webkit-box-shadow: 0 0.1333rem 0.333rem rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 0.1333rem 0.333rem rgba(0, 0, 0, 0.3);
  box-shadow: 0 0.1333rem 0.333rem rgba(0, 0, 0, 0.3);
  -webkit-transition: margin 0.4s;
  -moz-transition: margin 0.4s;
  -o-transition: margin 0.4s;
  transition: margin 0.4s;
}
input.switch:checked + label:before {
  background-color: #8ce196;
}
input.switch:checked + label:after {
  margin-left: 2rem;
}

input.switch + label div {width:100%;}