/* Browser merkt sich Zustand (d.h. welcher Radiobutton von name="input_objekt" aktiviert war) vom letzten Aufruf beim erneuten Laden der Seite ! => entspricht:
input[name="input_objekt"]:checked:not(:focus) {
}
*/
@media screen {

  [id*="seitenbearbeitung"].block li,
  .admin ul.operations li,
  .admin-actions {
    display:block;
    float:left;
    clear:none;
  }
  [id*="seitenbearbeitung"].block li a,
  .admin-actions a {
    float:left;
    display:block;
    clear:none;
    font-size:inherit;
    min-width:auto;
    margin:0;
    cursor: pointer;
    text-transform: none;
    font-weight: normal;
    letter-spacing: 2px;
  }
  [id*="seitenbearbeitung"].block li a,
  .admin-actions a {
    padding:0.2rem 1.2rem;
  }
  .admin-actions a:hover,
  .admin-actions a:focus {
    border:0; /* aufheben von dotted bei a:focus */
    outline:0;
}

/* **************************************** Buttons wie Angebotstabs aussehen lassen *********************************************** */
/*
.button a,
a.button {
    border-style:solid;
    border-width: 1px;
    border-radius: 2px;
    font-size: inherit;
    cursor: pointer;
    text-transform: none;
    font-weight: normal;
    letter-spacing: 2px;
    padding:0.2rem 0.7rem;
}

:not(a).button {
  padding:0;
  margin:0
}
.button a,
a.button {
    display:inline-block;
}
main .button .field_item {
  margin-bottom:0;
}
*/
/* **************************************** Styling für das zusätzliche Angebotsmenü unten an der Seite (im Block oben vor den eigentlichen Tabs *********************************************** */

.angebotsmenu {
  display:block;
  position:fixed;
  z-index:12;
  bottom:0;
  left:0;
  border-left-width:2px;
  border-left-style:solid;
}

@media screen and (min-width:40rem) {
  nav.angebotsmenu {
    position:fixed;
    left:-9999rem;
    width:1px;
    opacity:0;
  }
}
.angebotsmenu li {
    position:relative;
    display:block;
    float:left;
    clear:none;
  }
  .angebotsmenu a{
    position:relative;
    border:0;
    outline:0;
  }
  .angebotsmenu i::before {
    border-right-style:solid;
    border-right-width:2px;
    border-top-style:solid;
    border-top-width:2px;
    border-bottom-style:solid;
    border-bottom-width:2px;
    padding:0.35rem;
    font-size:1.5rem;
    line-height:2.5rem; 
 }
  .angebotsmenu div {
    font-size:60%;
    color:white;
    position:absolute;
    display:block;
    padding:0.1rem 0.1rem 0.1rem 0.7rem;
    transform: rotate(315deg);
    white-space:nowrap;
    box-shadow:0 0 1px white;
    border-top-style:solid;
    border-top-width:1px;
    border-right-style:solid;
    border-right-width:1px;
    border-bottom-style:solid;
    border-bottom-width:1px;
    text-align:center;
    width:12em; /* weitere Informationen! */
    left:-1em;
    top:-4.6em;
    height:2rem; /* wie im clip-path */
    clip-path:polygon(0 0, 100% 0, 100% 100%, 2rem 100%); /* 2rem wie Höhe */
  }

/* **************************************** die eigentlichen Tabs *********************************************** */

/* input[name="input_objekt"] {*/
main input[role="radio"] {
    display:block;
    opacity: 0;
    right:0;
    position: static;
    width: 1px;
    height:1px;
    background-color:transparent;
    -moz-appearance:none; / * Firefox * /
    -webkit-appearance:none; / * Safari and Chrome * /
    color:transparent; /* Farbe des Dreieckes, wenn nicht fokussiert, aber offen = Hintergrundfarbe vom Input-Farbverlauf als Backup */
    appearance:none;
    margin:0; /* aufheben von globals.css */
}

/* input[name="input_objekt"] + label:last-of-type {*/
main input[role="radio"] + label.horizontal.tab:last-of-type {
  margin-bottom:0.5rem; /* Abstand zum Trennstrich */
}
/* input[name="input_objekt"] + label:last-of-type::after {*/
main input[role="radio"] + label.horizontal.tab:last-of-type::after {
  clear:both;
}

input[role="radio"] + label.horizontal.tab + * {
  position:relative;
  display:block;
  width:100%;
}


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

/* input[name="input_objekt"] {*/
main input[role="radio"] {
    float:none; /* aufheben von reset.css */
    position:absolute;
    padding:0;
    opacity:1;
    overflow:hidden;
    visibility:visible;
    clip:0px, 0px, 0px, 0px;
    width:1px;height:1px;
    right:auto;left:auto;
    clear:none !important; /* aufheben von admin.css */
  }
  input[role="radio"] + label.horizontal.tab{
    position:static;
    clear:none !important; /* aufheben von admin.css */
    display:block;
    float:left;
    font-size: inherit;
    margin:0; /* aufheben von reset.css */
    cursor: pointer;
    text-transform: none;
    font-weight: normal;
    letter-spacing: 2px;
    padding:0.2rem 0.7rem;
  }
  input[role="radio"] + label.horizontal.tab:last-of-type {
    clear:both;
  } 
  /* erstmal nur oberste Ebene sichtbar machen */
  input[role="radio"] + label.horizontal.tab + * {
    position: absolute;
    left:0;
    height:0px;
    width:0px;
    margin:0;
    padding:0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;

    -moz-transform: scale(0);
    -o-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0);


    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;  

    height:0;
  }
  main input[role="radio"]:checked:not(:focus) + label.horizontal.tab + *,
  main input[role="radio"]:focus + label.horizontal.tab + *, 

  main input[role="radio"][name="input_wohneinheit"]:checked:not(:focus) + label.horizontal.tab + *, /* Initialzustand = Fokus ist woanders */
  main input[role="radio"][name="input_wohneinheit"]:focus + label.horizontal.tab + * { 

    position:absolute;
    left:0;
    width:100%;

    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
 
    height:auto;
    width:100%;
    opacity: 1;
    visibility: visible;
 
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    overflow: visible;

  }
}

/* nicht-eingeloggt testen! */

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

  main input[role="radio"] + label.horizontal.tab + * {
    top:13rem;
  }
}
@media only screen and (min-width: 52em) and (max-width:75em) {

  main input[role="radio"] + label.horizontal.tab + * {
    top:10rem;
  }
  .user-logged-in main input[role="radio"] + label.horizontal.tab + * {
    top:13rem;
  }
}
@media only screen and (min-width:75em) {

  main input[role="radio"] + label.horizontal.tab + * {
    top:8rem;
  }
  .user-logged-in main input[role="radio"] + label.horizontal.tab + * {
    top:10rem;
  }
}

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

  main input[role="radio"] + label.horizontal.tab + * {
    top:5rem;
  }
  .user-logged-in main input[role="radio"] + label.horizontal.tab + * {
    top:8rem;
  }
}

/* ************************** Untertab Wohnungen bzw. Häuser in Angeboten ********************************* */
/*

#wohnungen {
  --tab-margin-right:-2rem;
  --tab-margin-right:0;
  --breite-div-prozent:calc(100% / var(--anzahl-tabs-level-2));
  --breite-div-rem:calc((var(--breite-mittlere-spalte-rem) - 1rem) / var(--anzahl-tabs-level-2) * 0.90);
  width:100%;
}


#wohneinheit > div,
main input[role="radio"][name="input_wohneinheit"], 
input[role="radio"][name="input_wohneinheit"] + label.horizontal.tab {
  font-size:50%;
  display:block;
}
main input[role="radio"][name="input_wohneinheit"], 
input[role="radio"][name="input_wohneinheit"] + label.horizontal.tab {
  opacity:0;
  position:fixed;
  left:-999rem;
  visibility:hidden;
}

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

  main input[role="radio"][name="input_wohneinheit"], 
  input[name="input_wohneinheit"][name="input_wohneinheit"] + label.horizontal.tab {
    opacity:1;
    position:absolute;
    left:auto;
    visibility:visible;
  }
*/

  /* calc geht nicht in nth-of-type  - generell nach 6 Stück Zeilenschaltung*/

/*

  #wohnungen > div {
    float:left;
    clear:none;
    margin-right:-2rem;
    margin-right:var(--tab-margin-right);
    width:var(--breite-div-rem);
    height:var(--breite-div-rem);
  }
  #wohnungen > div:nth-of-type(2n+1) {
    margin-top:-1em;   
  }
  #wohnungen > div:nth-of-type(2n) {
    margin-top:3em;   
  }
  #wohnungen > div:last-of-type {
    margin-right:0; 
  }
*/

  /* Achtung id variabel, je nach Beschriftung! */
/*
  main input[role="radio"][name="input_wohneinheit"] {

    -moz-appearance:none;
    -webkit-appearance:none;
    color:transparent;
    appearance:none;
    transform: rotate(45deg);
    margin:0;
    height:9em;
    width:9em;
  }
*/
  /* em statt rem zur Anpassung an Schriftgröße !!! */
  /* gute Werte für kleine Raute: oben input width / height 5rem = Größe weiße Raute, unten width / height 6rem für Label größer, wird abgeschnitten mit Clip dann mit padding:0 + margin 0,5 */

/*
  input[role="radio"][name="input_wohneinheit"] + label.tab.horizontal {
    margin-bottom:0em;
    position:absolute;
    display:block;
    height:9em;
    width:9em; */ /* Größe unabhängig von oben, wegen clip */
/*
    clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    text-align: center;
    padding-top:2.2em;
    border:none; 
    font-style:normal;
    text-transform: none;
    letter-spacing: inherit;
    line-height:1.5;
  }
  input[role="radio"][name="input_wohneinheit"] + label.tab.horizontal + * {
    margin-top: 3rem;
  }

}


small.zimmer, small.wohnflaeche {opacity:0;position:fixed;left:-999rem;visibility:hidden;}

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

  small.zimmer, small.wohnflaeche {opacity:1;position:static;left:0;visibility:visible;}

  #wohnungen strong.wohnungsnummer {font-weight:bold;font-family:'Kite One', 'Open Sans Condensed', sans-serif;font-size:inherit;}
  #wohnungen small.zimmer {font-family:'Kite One', 'Open Sans Condensed', sans-serif;}
  #wohnungen small.wohnflaeche {font-family:'Kite One', 'Open Sans Condensed', sans-serif;}

}
*/