/*** Einige Defaults ***/
html                 { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

.hidden          { display: none; }
.clear           { clear: both; }
.help            { cursor: help; }
.comment         { color: #999; font-style: italic; }
.pointer         { cursor: pointer; }
.orange          { color: #fea338; }
.indent          { padding-left: 25px; }
label, legend    { cursor: pointer; }

.container       { display: flex; width: 100%; }
.col             { flex: 1; }
.col.sidenav     { flex: 0.4; }

.left            { float: left; }
.right           { float: right; }
.bottom          { align-self: flex-end; }
.first           { margin-top: 0; padding-top: 0; }

.status_active   { color: #0d0; }
.status_inactive { color: #666; }
.status_okay     { color: #0d0; }
.status_error    { color: #d00; }

body, header, div, ul, li {
  margin: 0;
  padding: 0;
}

body {
  background-color: #f5f5f5;
  color: #3b3b3b;
  font-family: Roboto, sans-serif;
}

a { color: #3b3b3b; text-decoration: none; }
a:focus, a:active, a:hover, a.active { text-decoration: underline; }

a[href^="tel:"]::before {
  content: "\260e";
  margin-right: 5px;
}

span.fax::before {
  content: "\1f5b7";
  margin-right: 5px;
}

a[href^="mailto:"]::before {
  content: "\2709";
  margin-right: 5px;
}

span.au   { font-size: 1.5em; }
span.tark { font-size: 1.2em; }
p.em      { font-size: 1.3em; }
p.center  { text-align: center; }
.code     {
  border: 1px solid #ccc;
  padding: 1px 3px;
  background-color: #f9f9f9;
  font-family: monospace;
  white-space: nowrap;
}

h1, h2, h3, h4, h5 { margin-top: 0.5em; margin-bottom: 0.5em; }


/*** Layout-Elemente ***/
body > div, header > div {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  background-color: #fff2e6;
  border-left: double #999;
  border-right: double #999;
}

body > div {
  border-bottom: double #999;
}

/* Header und Balken-Menü */
header > div {
  background-color: #f6b600;
  min-height: 60px;
}

header div.menu {
  float: left;
  margin-top: 20px;
  margin-left: 20px;
}

header div.menu a.menu {
  display: inline-block;
  width: 30px;
  cursor: pointer;
}

header div.menu a.menu span {
  display: block;
  height: 3px;
  background-color: #000;
  margin-bottom: 4px;
  border-radius: 5px;
}

header div.menu nav {
  display: none;
  position: absolute;
  left: 0;
  z-index: 5;
  width: 100%;
  padding-left: 25px;
  padding-bottom: 15px;
  background-color: #f6b600;
  border-bottom: 1px solid #960;
}

header div.menu nav li {
  padding-bottom: 5px;
}

/* Menu-Interaction */
header div.menu:focus  nav,
header div.menu:hover  nav,
header div.menu:active nav {
  display: block;
}

header  nav {
  font-weight: bold;
}

header nav ul {
  padding-top: 20px;
}

header li.logo img {
  position: relative;
  top: -10px;
  width: 60%;
  height: 60%;
}

/* Nav */
nav ul {
  margin: 0;
  padding-top: 15px;
  list-style-type: none;
}

nav.horizontal li {
  float: left;
  margin-left: 20px;
}

nav.horizontal li:first-child {
  margin-left: 35px;
}

/* Footer */
footer {
  min-height: 75px;
  padding: 15px 35px;
}

footer div.head {
  font-size: 1.2em;
}

footer div.content {
  padding: 0;
  padding-bottom: 15px;
}

footer div.orange, footer div.orange {
  position: relative;
  top: 9px;
}

footer div.bg {
  padding: 5px 15px;
  background-image: linear-gradient(to right, #ffe500, #df7217);
}

div.fisheye {
  width: 20%;
  padding-bottom: 20%;
  margin-right: 15px;
  background: url(../img/fischauge.png) no-repeat center center;
  background-size: contain;
}

footer div.content.right { margin-right: 65px; }

nav.footer { margin-top: -10px; margin-bottom: 15px; }

footer div.content a { color: #3b3b3b; }

/* Seiten-Inhalt/Content */
div.content { padding: 35px; }

div.content a { color: #dc6c0f; }

div.content ul li { margin-top: 5px; margin-left: 15px; }

div.content section {
  padding-top: 10px;
  padding-bottom: 10px;
  margin-bottom: 15px;
}

div.content section.emphasize {
  border: 4px solid #999;
  position: relative;
}

div.content section.emphasize p {
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  text-align: justify;
}

div.content section.emphasize.highlight {
  background-color: #ffd272;
}

div.content section.emphasize.highlight::before,
div.content section.emphasize.highlight::after {
  background-color: #ffd272;
}

div.content section.emphasize::before,
div.content section.emphasize::after {
  content: "";
  position: absolute;
  background-color: #fff2e6;
  z-index: 1;
}

div.content section.emphasize::before {
  width: 90%;
  width: calc(100% - 150px);
  height: calc(100% + 8px);
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
}

div.content section.emphasize::after {
  height: 90%;
  height: calc(100% - 100px);
  width: calc(100% + 8px);
  left: -4px;
  top: 50%;
  transform: translateY(-50%);
}

div.content section.emphasize > * {
  position: relative;
  z-index: 2;
}

div.content section.emphasize h1,
div.content section.emphasize h2 {
  text-align: center;
  font-size: 1.5em;
  font-weight: normal;
}

div.content section.block {
  border: 4px solid #999;
  position: relative;
  padding: 25px;
  margin-bottom: 35px;
}

div.content section.block::before,
div.content section.block::after {
  content: "";
  position: absolute;
  background-color: #fff2e6;
  z-index: 1;
}

div.content section.block::before {
  width: 90%;
  width: calc(100% - 150px);
  height: calc(100% + 8px);
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
}

div.content section.block::after {
  height: 90%;
  height: calc(100% - 100px);
  width: calc(100% + 8px);
  left: -4px;
  top: 50%;
  transform: translateY(-50%);
}

div.content section.block > * {
  position: relative;
  z-index: 2;
}

div.content section section {
  padding-bottom: 0;
}

div.content div.container {
  align-items: flex-start;
  justify-content: center;
}

div.content div.container.head {
  align-items: center;
  text-align: center;
}

div.content div.container.main {
  margin-top: 75px;
  margin-bottom: 30px;
}

div.content nav.sidenav ul {
  padding-top: 0;
  margin-right: 20px;
}

div.content nav.sidenav ul li {
  padding: 0;
  margin: 0 0 5px 0;
}

div.content nav.sidenav ul li.head {
  padding: 10px 5px;
  margin-bottom: 3px;
  font-weight: bold;
  font-size: 1em;
  text-align: center;
}

div.content nav.sidenav ul li.head:not(:first-child) {
  margin-top: 17px;
}

div.content nav.sidenav a {
  display: block;
  margin-bottom: 3px;
  padding-bottom: 20px;
  font-size: 1.2em;
}

div.content nav.sidenav a:focus,
div.content nav.sidenav a:hover,
div.content nav.sidenav a:active,
div.content nav.sidenav a.active {
  font-weight: bold;
}

div.content section.teaser {
  position: relative;
  padding: 0;
  padding-top: 34%; /* Aspect ratio 1030*350 pixels */
  background-size: cover;
}

div.content section.teaser.home                { background-image: url(../img/teaser/home.jpg); }
div.content section.teaser.admin               { background-image: url(../img/teaser/admin.jpg); }
div.content section.teaser.was_uns_ausmacht    { background-image: url(../img/teaser/was_uns_ausmacht.png); }
div.content section.teaser.freie_angebote      { background-image: url(../img/teaser/freie_angebote.jpg); }
div.content section.teaser.team                { background-image: url(../img/teaser/team.jpg?5); }
div.content section.teaser.leistungen          { background-image: url(../img/teaser/leistungen.png); }
div.content section.teaser.leistungen_sgb_ix   { background-image: url(../img/teaser/leistungen_sgb_ix.png); }
div.content section.teaser.leistungen_sgb_ii   { background-image: url(../img/teaser/leistungen_sgb_ii.png); }
div.content section.teaser.leistungen_sgb_viii { background-image: url(../img/teaser/leistungen_sgb_viii.png); }
div.content section.teaser.raeume              { background-image: url(../img/teaser/raeume.jpg); }
div.content section.teaser.kontakt             { background-image: url(../img/teaser/kontakt.jpg); }

div.content section.teaser div.container {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  /* background-color: rgba(255, 255, 255, 0.7); */
}

div.content section.teaser div.container h1 {
  font-size: 3.5em;
  color: #000;
}

div.content section.teaser.team           div.container    { align-items: flex-end; }
div.content section.teaser.team           div.container h1 { color: #f6b600; }
div.content section.teaser.freie_angebote div.container    { align-items: flex-end; color: #f6b600; }
div.content section.teaser.freie_angebote div.container h1 { color: #f6b600; margin-bottom: 0.2em; }
div.content section.teaser.leistungen     div.bottom       { display: flex; align-items: flex-end; height: 100%; }
div.content section.teaser.leistungen     div.bottom h2    { font-weight: normal; }

div.content section.teaser.was_uns_ausmacht div.container h1 {
  font-size: 2em;
}

div.content section.teaser.raeume div.container h1 {
  width: 14%;
  font-size: 2em;
  color: #f6b600;
}


/* Home page */
div.content.home {
  text-align: center;
}

div.content.home div.container {
  align-items: flex-start;
  justify-content: center;
}

div.content.home section.hands {
  padding-bottom: 0;
  margin-bottom: 0;
  text-align: right;
}

div.content.home section:not(:first-child) {
  margin-top: 50px;
}

h1#home_welcome {
  position: relative;
  top: 40px;
  font-weight: normal;
  font-size: 1.4em;
}

div#logo {
  width: 60%;
  height: 220px;
  background-image: url(../img/autark_logo.png?2021);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top left;
}

div.container.news {
  position: relative;
  min-height: 320px;
  overflow-x: hidden;
  overflow-y: visible;
}

div.home section.emphasize {
  width: 75%;
  margin: auto;
  margin-bottom: 30px;
}

div.raeume section.emphasize {
  width: 90%;
  margin: auto;
}

article {
  position: absolute;
  z-index: 2;
  width: 100%;
  overflow-x: hidden;
  overflow-y: visible;
}

a.prev, a.next {
  z-index: 10;
  width: 5%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3em;
  text-decoration: none;
}

a.prev {
  position: absolute;
  left: 0;
}

a.next {
  position: absolute;
  right: 0;
  text-align: right;
}

/* Unser Team */
div.team {
  padding-top: 14.77%; /* Maintain aspect ratio */
  background-image: url(../img/autark_team_2024-1.jpg);
  background-size: contain;
  background-repeat: no-repeat;
}

/* Räume */
div.content div.container.raeume {
  min-height: 680px;
  overflow-x: hidden;
  overflow-y: visible;
  align-items: center;
}

div.container.raeume article {
  width: 90%;
  margin: auto;
}

div.foto {
  padding-top: 75%;
  margin: auto;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

div.foto.f01 { background-image: url(/img/raeume/01_grosser_tisch.jpg?2); }
div.foto.f02 { background-image: url(/img/raeume/02_zettelwand.jpg?2); }
div.foto.f03 { background-image: url(/img/raeume/03_kinostuehle.jpg?2); }
div.foto.f04 { background-image: url(/img/raeume/04_steinwand.jpg?2); }
div.foto.f05 { background-image: url(/img/raeume/05_durchgang.jpg?2); }
div.foto.f06 { background-image: url(/img/raeume/06_orchidee_schreibtisch.jpg?2); }
div.foto.f07 { background-image: url(/img/raeume/07_orchidee_beratungstisch.jpg?2); }
div.foto.f08 { background-image: url(/img/raeume/08_orchidee_bild.jpg?2); }
div.foto.f09 { background-image: url(/img/raeume/09_papaya_couch.jpg?2); }
div.foto.f10 { background-image: url(/img/raeume/10_papaya_tisch.jpg?2); }
div.foto.f11 { background-image: url(/img/raeume/11_sessel_wintergarten.jpg?2); }
div.foto.f12 { background-image: url(/img/raeume/12_lagune_tisch.jpg?2); }
div.foto.f13 { background-image: url(/img/raeume/13_lagune_tisch.jpg?2); }

blockquote { width: 66%; margin-left: auto; margin-right: auto; }

/* Forms */
input, textarea, select, div.article_editor {
  background-color: #f9f9f9;
  border: 1px solid #999;
  outline: none;
  padding-left: 3px;
  border-radius: 3px;
}

input:hover, input:focus, input:active,
select:hover, select:focus, select:active,
textarea:hover, textarea:focus, textarea:active {
  border-color: orange;
}

select   { padding-top: 2px; padding-bottom: 2px; }
textarea { width: 450px; height: 250px; }

.required {
  color: red;
  font-weight: bold;
}

input.sort_order { width: 25px; }
input.date       { width: 150px; }

.required select, select.required, .required textarea, textarea.required {
  border-color: red !important;
  outline: 1px solid #f00;
}

.required input, input.required  {
  border-color: red !important;
  outline: 1px solid #f00;
}

input[type=submit] {
  cursor: pointer;
  padding: 5px;
  background-color: #2d2;
  color: #fff;
}

input[type=reset], input.reset  {
  cursor: pointer;
  padding: 5px;
  background-color: #666;
  color: #fff;
}

/* Tables */
table.grid    { border-spacing: 3px; }
table.grid td { background-color: #fff6f6; border: 1px solid #ccc; padding: 3px; }

/*** Clearfixes ***/
header::after, footer::after {
  content: "";
  clear: both;
  display: table;
}


/*** Breakpoints ***/
.phone_only                  { display: none; }
.tablet_only                 { display: none; }

/* Large/Desktop */
@media (max-width: 1199px) {
  .nodesktop                 { display: none; }
}

/* Medium */
@media (max-width: 991px) {
  /* article                    { width: 80%; } */
  nav.horizontal li             { margin-left: 10px; font-size: 0.75em; }
  nav.horizontal li:first-child { margin-left: 35px; }
  h1#home_welcome               { top: 30px; }
  div#logo                      { height: 260px; }
  blockquote                    { width: 75%; }
  div.content div.container.raeume { min-height: 535px; }
  div.content section.teaser div.container h1 { font-size: 2.5em; }
}

/* Small/Tablet */
@media (max-width: 767px) {
  .notablet                     { display: none; }
  .tablet_only                  { display: block; }
  nav.horizontal li:first-child { margin-left: 20px; }
  div#logo                      { width: 100%; height: 200px; }
  div.content                   { padding: 15px 20px; }
  div.home section.emphasize    { width: 100%; }
  footer                        { padding: 15px 20px; }
  div.content div.container.raeume { min-height: 435px; }
  div.content section.teaser.raeume div.container h1 { font-size: 1em; }
  blockquote                    { width: 85%; }
}

/* X-Small/Phone */
@media (max-width: 500px) {
  .nophone                      { display: none; }
  .phone_only                   { display: block; }
}