/** 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 === */

/* Container */
nav.tbm-main {
  width: 280px;
}

/* Burger Button */
nav.tbm-main .tbm-button {
  display: block !important;
  width: 100%;
  height: 44px;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

/* Burger Striche Container */
nav.tbm-main .tbm-button .tbm-button-container {
  display: block !important;
  position: relative !important;
  width: 44px !important;
  height: 31px !important;
  padding: 0 !important;
  margin: 12px 0 !important;
}

/* Basis-Styling für ALLE Zustände */
nav.tbm-main .tbm-button .tbm-button-container span {
  display: block !important;
  position: absolute !important;
  height: 3px !important;
  background-color: #000 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* GESCHLOSSEN: Feste Positionen und Breite */
nav.tbm-main .tbm-button:not([aria-expanded="true"]) .tbm-button-container span {
  width: 44px !important;
  left: 0 !important;
}

nav.tbm-main .tbm-button:not([aria-expanded="true"]) .tbm-button-container span:nth-child(1) {
  top: 0px !important;
}

nav.tbm-main .tbm-button:not([aria-expanded="true"]) .tbm-button-container span:nth-child(2) {
  top: 14px !important;
}

nav.tbm-main .tbm-button:not([aria-expanded="true"]) .tbm-button-container span:nth-child(3) {
  top: 28px !important;
}

/* Span 4 immer versteckt */
nav.tbm-main .tbm-button .tbm-button-container span:nth-child(4) {
  display: none !important;
}

/* Menü ausgeklappt */
.tbm-collapse {
  width:400px !important;
  background-color: #fff;
  padding: 0;
  overflow: hidden;                            /* NEU */
}

/* Nach Animation overflow freigeben */
.tbm-button[aria-expanded="true"] ~ .tbm-collapse {
  overflow: visible !important;                /* NEU */
}

/* Level 1 - Hauptmenü */
.tbm-nav {
  background-color: #fff;
  padding: 0;
  margin: 0;
  list-style: none;
}

.tbm-item {
  border: none !important;
  background-color: #fff;
  line-height: 36px;
}

.tbm-nav a {
  display: block;
  padding: 10px 20px;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 1.6em;
  color: #000;
  background-color: #fff;
  border: none;
}

.tbm-nav a:hover {
  text-decoration: underline;
  background-color: #fff !important;
  color: #222;
}

/* tbm-link-container als relative Position */
.tbm-link-container {
  position: relative;
}

/* SUBMENU TOGGLE BUTTON (Pfeil rechts) */
.tbm-submenu-toggle,
.tbm-submenu-toggle.always-show {
  position: absolute !important;
  right: 79px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 22px !important;
  height: 22px !important;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: pointer;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Verstecke Default Inhalt und ::after */
.tbm-submenu-toggle *,
.tbm-submenu-toggle.always-show * {
  display: none !important;
}

.tbm-submenu-toggle::after,
.tbm-submenu-toggle.always-show::after {
  display: none !important;
}

/* SVG Pfeil ::before - zentriert */
nav.tbm-main .tbm-item .tbm-submenu-toggle::before,
nav.tbm-main .tbm-item .tbm-submenu-toggle.always-show::before {
  content: '' !important;
  display: block !important;
  position: static !important;
  transform: none !important;
  left: auto !important;
  top: auto !important;
  width: 12px !important;
  height: 22px !important;
  border: none !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  background-image: url('../images/pfeil.svg') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  transition: transform 0.3s ease !important;
}

/* Pfeil rotiert beim Öffnen */
nav.tbm-main .tbm-item.open .tbm-submenu-toggle::before,
nav.tbm-main .tbm-item .tbm-submenu-toggle[aria-expanded="true"]::before {
  transform: rotate(90deg) !important;
}

/* Level 2 - Untermenü - MIT ANIMATION */
.tbm-submenu {
  background-color: #fff !important;
  border: none !important;
  margin-left: 25px !important;
  padding: 0;
  display: block !important;                   /* IMMER block, nicht none! */
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;                       /* NEU - startet unsichtbar */
  transition: max-height 0.35s ease, opacity 0.35s ease !important;
}

/* Submenu geöffnet */
.tbm-item.open .tbm-submenu,
.tbm-item[aria-expanded="true"] .tbm-submenu {
  max-height: 800px !important;
  overflow: visible !important;
  opacity: 1 !important;                       /* NEU - wird sichtbar */
}

/* Überschreibt Inline-Style vom Modul */
nav.tbm-main .tbm-item--has-dropdown .tbm-submenu[style] {
  width: 420px !important;
  min-width: 420px !important;
  max-width: 420px !important;
}

.tbm-subnav {
  padding: 0;
  margin: 0;
}

.tbm-submenu a,
.tbm-subnav a,
.tbm-link.level-2 {
  font-size: 1.6em;
  color: #222 !important;
  padding: 8px 20px 8px 45px !important;
  background-color: #fff;
  text-decoration: none;
  white-space: nowrap !important;              /* NEU - Text nicht umbrechen */
}

.tbm-submenu a:hover,
.tbm-subnav a:hover,
.tbm-link.level-2:hover {
  color: #222 !important;
  background-color: #fff !important;
  text-decoration: underline;
}

/* === ENDE NAVIGATION === */

/* 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) {
  
  nav#tbm-main .tbm-nav {width:98% !important;}

}

/* 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;}
  .tbm-submenu {
    margin-left: 10px !important;  /* Von 25px auf 10px */
  }
  
  .tbm-submenu a,
  .tbm-subnav a,
  .tbm-link.level-2 {
    padding: 8px 10px 8px 20px !important;  /* Von 45px auf 20px */
  }
  
  nav.tbm-main {
    width: 60px !important;
    position: relative !important;
  }
  
  /* Das aufgeklappte Menü schwebt ÜBER dem Layout */
  .tbm-collapse {
    position: absolute !important;
    left: 0 !important;
    top: 44px !important;  /* Unter dem Burger-Button */
    width: 280px !important;
    background-color: #fff !important;
    z-index: 1000 !important;
  }
  
}

@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;}

}