/** CSS File for bewusstsein **/

/* fonts */
@font-face {
    font-family: 'robotoregular';
    src: url('../fonts/Roboto-Regular.eot');
    src: url('../fonts/Roboto-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Roboto-Regular.woff2') format('woff2'),
        url('../fonts/Roboto-Regular.woff') format('woff'),
        url('../fonts/Roboto-Regular.ttf') format('truetype'),
        url('../fonts/Roboto-Regular.svg#Roboto-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'robotolight';
    src: url('../fonts/Roboto-Light.eot');
    src: url('../fonts/Roboto-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Roboto-Light.woff2') format('woff2'),
        url('../fonts/Roboto-Light.woff') format('woff'),
        url('../fonts/Roboto-Light.ttf') format('truetype'),
        url('../fonts/Roboto-Light.svg#Roboto-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}


*, *::before, *::after {box-sizing:border-box;}

html {margin:0; padding:0;}
body {font-family:'robotolight', sans-serif; font-size:1.5em; line-height:1.3em; margin:0; padding:0; color:#000; background:url("../images/background.jpg") no-repeat bottom center; background-size: 100vw auto; background-attachment: fixed; overflow-y:scroll;}

/* Frontpage Styles */
.page-front {
  margin: 0;
  padding: 0;
  height: 100vh;
  overflow: hidden;
}

.page-front .frontpage-container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
}

.page-front .frontpage-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
}

.page-front #logo {
  text-align: center;
  margin-top:25px;
}

.page-front #logo img {
  max-width: 300px;
  height: auto;
}

/* Responsive Design */
@media (max-width: 768px) {
  .page-front #logo img {
    max-width: 250px;
  }
}

@media (max-width: 480px) {
  .page-front #logo img {
    max-width: 200px;
  }
}

/* Accessibility: Focus-Ring für Tastaturnavigation */
.page-front .frontpage-link:focus {
  outline: transparent;
  outline-offset: 2px;
}



/* global*/
div[role="contentinfo"]         {padding:8px 10px; background-color:#bdfabb;}
div[aria-label="Error message"] {background-color:#fabbbb; margin-bottom:10px;}
div[aria-label="Fehlermeldung"] {background-color:#fabbbb; margin-bottom:10px;}
h1, h2, h3, h4, h5, h6          {}
h1                              {font-size:2.2em; line-height:1em;}
h2                              {font-size:1.8em; line-height:1em;}
h3                              {font-size:1.5em; line-height:1em;}
h4                              {font-size:1.3em;}
h5                              {font-size:1.15em;}
h6                              {font-size:1.0em; margin:0;}
a                               {color:#000;}
input, select                   {padding:5px 8px; font-size:1em;}
input[type="submit"]            {cursor:pointer; padding:10px 16px; font-size:16px; border:1px solid #aaa; border-radius:5px;}

body.node-3 h1 {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* structure */
#page                   {display:flex; flex-direction:column; max-width:1920px;}
  #header               {display:flex; flex-direction:column; width:100%; margin-top:15px !important; padding:0 5%; max-width:1920px;}
    #logo               {width:100%; margin-top:25px;}
    #navigation         {width:100%; max-width:1280px; margin:0 auto; padding-top:15px;}
  #main                 {width:100%; max-width:1280px; margin:50px auto 0 auto;}
    #content            {}
  #footer               {display:flex; flex-direction:row; justify-content:space-between; width:100%; margin-top:50px; padding:3% 5%; color:#000; font-size:0.7em;}
    #footer-first       {width:30%;}
    #footer-second      {width:30%;}
    #footer-third       {width:30%;}
    
/* admin */
body.toolbar-horizontal ul.contextual-links li a          {color:#000 !important;}
#block-bewusstsein-primary-local-tasks ul                 {margin-left:0; padding-left:0;}
#block-bewusstsein-primary-local-tasks ul li              {display:inline; margin:0 10px; padding:10px 15px; background-color:#e5e5e5;}
#block-bewusstsein-primary-local-tasks ul li a            {text-decoration:none; color:#000;}
#block-bewusstsein-primary-local-tasks ul li a:hover      {text-decoration:underline;}
#block-bewusstsein-primary-local-tasks ul li:first-child  {margin-left:0;}
#user-login-form                                          {margin-top:40px;}
#user-login-form .form-item                               {padding:8px 0;}
#user-login-form .form-item label                         {display:block;}
#user-login-form .button                                  {margin-top:30px;}

/* navigation */
nav#tbm-main                          {width:88px;}
nav#tbm-main :focus                   {outline:none !important; outline-offset:0 !important;}
nav#tbm-main a                        {text-transform:uppercase; text-decoration:none; font-size:1.6em; max-width:445px;}
nav#tbm-main a:hover                  {background-color:#f8f8f8; color:#222;}
nav#tbm-main .tbm-button              {width:100%; height:88px; margin:0; padding:0; background-color:transparent; border:none; border-radius:0; outline:none !important; outline-offset:0 !important;}
nav#tbm-main .tbm-button-container    {width:100%; height:54px; padding:0.5rem; margin:0;}
nav#tbm-main .tbm-link-container      {max-width:445px;}
nav#tbm-main .tbm-collapse            {padding-top:0;}
nav#tbm-main .tbm-nav                 {width: 445px !important;}
nav#tbm-main .tbm-nav .tbm-item--has-dropdown {width:375px;}
nav#tbm-main .tbm-submenu             {width: 375px !important; background-color:#fff !important;}
nav.tbm--mobile-show button.tbm-button      {background-color:none !important;}
nav#tbm-main.tbm--mobile-show .tbm-collapse {width:445px; background-color:#fff;}
.tbm-button-container span            {border-color:#000;}
.tbm.tbm--mobile .tbm-nav             {background-color:none;}
.tbm.tbm--mobile .tbm-item            {border:none; line-height:36px;}
.tbm.tbm--mobile .tbm-submenu         {margin-left:25px; width:300px; background-color:#fff; border-top:none;}
.tbm.tbm--mobile .tbm-submenu a       {color:#666;}
.tbm.tbm--mobile .tbm-submenu a:hover {color:#888;}
.tbm-item.level-1                     {border:none;}
nav.tbm--mobile .tbm-collapse         {position:static !important; z-index:1 !important; transition:max-height 0.4s ease; max-height:0; background-color:#fff;}
nav.tbm--mobile .tbm-collapse[aria-expanded="true"] {max-height:1000px;}
.tbm.tbm--mobile .tbm-submenu-toggle  {position:relative; border:none; background-color:#fff; margin-left:-50px;}
.tbm-submenu-toggle:before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 45px;
  height: 21px;
  background-image: url("../images/menuepfeil.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border: none !important;
  box-shadow: none !important;
  transition: transform 400ms ease-out;
}
.tbm-subnav>.tbm-item>.tbm-link-container>.tbm-link:focus {
    color: #000;
}

/* Hamburger Menu Animation - nur Rotation, kein Styling ändern */

/* Nur Transition für sanfte Animation hinzufügen */
nav#tbm-main .tbm-button-container span {
  transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Animation bei geöffnetem Menü - 4-Linien-Konzept */
/* Linie 1 und 4 beim Öffnen ausblenden */
nav#tbm-main .tbm-button[aria-expanded="true"] .tbm-button-container span:nth-child(1),
.menu-open nav#tbm-main .tbm-button .tbm-button-container span:nth-child(1) {
  opacity: 0;
}

/* Linie 2 rotiert zu 45° (oberer Strich des X) */
nav#tbm-main .tbm-button[aria-expanded="true"] .tbm-button-container span:nth-child(2),
.menu-open nav#tbm-main .tbm-button .tbm-button-container span:nth-child(2) {
  transform: rotate(45deg);
}

/* Linie 3 rotiert zu -45° (unterer Strich des X) */
nav#tbm-main .tbm-button[aria-expanded="true"] .tbm-button-container span:nth-child(3),
.menu-open nav#tbm-main .tbm-button .tbm-button-container span:nth-child(3) {
  transform: rotate(-45deg);
}

/* Linie 4 beim Öffnen ausblenden */
nav#tbm-main .tbm-button[aria-expanded="true"] .tbm-button-container span:nth-child(4),
.menu-open nav#tbm-main .tbm-button .tbm-button-container span:nth-child(4) {
  opacity: 0;
}

/* Alle Linien im geschlossenen Zustand sichtbar lassen */

/* header */
#logo img {display:block; margin:0 auto;}

/* praxis */
.praxisbilder     {display:flex; justify-content:space-between;}
.praxisbilder img {height:100%; width:auto;}

/* kontakt */
.field--name-field-google-map {margin-bottom:100px;}
.field--name-body a img       {margin-right:20px;}

/* ueber mich */
.portrait {display:flex; justify-content:center; gap:30px; flex-wrap:wrap;}

/* footer */
#footer a {color:#000;}

/* navigation - footer */
#block-bewusstsein-fusszeile ul li  {display:inline; list-style:none; list-style-image:none; margin:0 8px;}

/* portrait */
@media screen and (orientation: portrait) {
  


}

/* mediaqueries */

@media only screen and (max-width:470px) {
  
  #main                       {margin:50px auto 0 auto;}
  #header                     {padding:0 3%; text-align:center;}
  nav#tbm-main                {width: 60px;}
  nav#tbm-main .tbm-submenu   {width: 450px !important;}
  nav#tbm-main .tbm-button-container {width:60px; height:40px; padding:0.5rem; margin:0;}
  nav#tbm-main .tbm-button    {width:60px;}
  
}

@media only screen and (max-width:640px) {
  
  h1                          {font-size:2em;}
  #main                       {width:90%; margin:50px auto 0 auto;}
  #header                     {padding:0 3%; text-align:center;}
  nav#tbm-main                {width: 60px;}
  nav#tbm-main .tbm-submenu   {width: 450px !important;}
  nav#tbm-main .tbm-button-container {width:60px; height:40px; padding:0.5rem; margin:0;}
  nav#tbm-main .tbm-button    {width:60px;}
  
}

@media only screen and (max-width:768px) {

  #footer                                         {flex-direction:column; justify-content:center; text-align:center;}
  #footer-first, #footer-second, #footer-third    {width:95%;}
  #footer-third                                   {margin-bottom:30px;}

}

@media only screen and (max-width:960px) {
  
  #main             {padding:0 10px;}
  .praxisbilder     {flex-wrap:wrap; justify-content:center;}
  .praxisbilder img {display:block; width:95%; height:auto;}

}