/* HEADER / NAVBAR */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 9vh;
    z-index: 9999;
    background: #000;
    display: flex;
    align-items: center;
  }
  .navbar .navbar-inner {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 3%;
  }
  
  /* Header Logo Styling */
  .navbar .title .header-logo {
    height: 5.5vh; /* 7.5vh für 9vh Header - etwas kleiner */
    width: auto;
    max-width: 140px; /* Kleinere max-width */
    object-fit: contain;
    filter: brightness(0) invert(1); /* Macht das Logo weiß */
  }
  
  /* Logo-Container zentrieren und Ränder optimieren */
  .navbar .title {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0;
  }
  
  /* Profil-Icon in der Navbar */
  .navbar .right a.link i {
    color: #fff;
  }

  /* Language switch styling */
  .navbar .lang-switch {
    color: #fff;
    margin: 0;
    padding: 0 4px;
  }
  .navbar .lang-switch.active-lang {
    color: #c8a165 !important;
  }
  .navbar .lang-separator {
    color: #fff;
    margin: 0 2px;
  }

  :root {
    --f7-tab-link-highlight-color: #c8a165; /* oder deine Wunschfarbe */
  }
  
  
  /* FOOTER / TOOLBAR */
  .toolbar.tabbar.toolbar-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 90px;
    z-index: 9999;
    background-color: #000;
    display: flex;
    align-items: center;
  }
  
  .toolbar-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.3em;
    width: 100%;
    height: 100%;
  }
  
  .toolbar.tabbar .tab-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    text-align: center;
  }
  
  /* Größere Icons im Footer */
  .toolbar.tabbar .tab-link i.fa-solid {
    font-size: 140%;
    padding-bottom: 0.4em;
  }
  
  .toolbar.tabbar .tab-link .tabbar-label {
    font-size: 80%;
  }
  
  /* Farben & aktives Tab */
  .toolbar.tabbar .tab-link,
  .toolbar.tabbar .tab-link .icon,
  .toolbar.tabbar .tab-link .tabbar-label {
    color: #c8a165;
  }
  
  .tab-link-active .icon,
  .tab-link-active .tabbar-label {
    color: #fff;
  }
  
  /* Kleiner Strich als Tab-Highlight */
  .md .toolbar.tabbar.tabbar-highlight .tab-link-highlight,
  .ios .toolbar.tabbar.tabbar-highlight .tab-link-highlight {
    position: relative;
    bottom: 6px !important;
    top: 40% !important;
    height: 3px !important;
    background-color: #c8a165 !important;
  }

  /* Smooth transition for the highlight bar */
  .toolbar.tabbar .tab-link-highlight {
    transition: all 0.3s ease;
  }
  
  /* Page slide animations */
  @keyframes slideInFromBottom {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }
  @keyframes slideOutToBottom {
    from { transform: translateY(0); }
    to { transform: translateY(100%); }
  }
  
  /* Apply slide-up on page enter with slower speed */
  .page.page-current {
    animation: slideInFromBottom 0.3s ease-out;
  }
  /* Remove outgoing animation to instantly remove previous page */
  .page.page-previous {
    display: none !important;
  }
  

  /* Panel-Profil (Seitenmenü) */
  .panel-profile {
    position: fixed !important;
    top: 0;
    left: 0;
    height: 100%;
    width: 90%;
    background-color: white !important;
    opacity: 0;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    z-index: 10000;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.2);
  }
  
  .panel-profile.open {
    transform: translateX(0);
    opacity: 1;
  }
  
  /* Blurry Hintergrund beim Öffnen */
  .panel-backdrop {
    position: fixed;
    top: 0;
    left: 90%;
    width: 10%;
    height: 100%;
    backdrop-filter: blur(10px);
    background-color: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
  }
  .panel-profile.open + .panel-backdrop {
    opacity: 1;
  }
  
  /* X-Button im Panel */
  .close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    color: black;
    cursor: pointer;
    background: none;
    border: none;
    outline: none;
  }

  /* Disable default Framework7 horizontal transitions */
.router-transition-f7-cover-forward .page-current,
.router-transition-f7-cover-backward .page-current,
.router-transition-f7-push-forward .page-current,
.router-transition-f7-push-backward .page-current,
.router-transition-f7-dive-forward .page-current,
.router-transition-f7-dive-backward .page-current {
  animation: none !important;
}
.router-transition-f7-cover-forward .page-previous,
.router-transition-f7-cover-backward .page-previous,
.router-transition-f7-push-forward .page-previous,
.router-transition-f7-push-backward .page-previous,
.router-transition-f7-dive-forward .page-previous,
.router-transition-f7-dive-backward .page-previous {
  animation: none !important;
}

/* Ensure default horizontal transitions are fully disabled for incoming/outgoing pages */
.router-transition-f7-cover-forward .page-next,
.router-transition-f7-push-forward .page-next,
.router-transition-f7-cover-backward .page-previous,
.router-transition-f7-push-backward .page-previous {
  animation: none !important;
}

/* Apply only bottom-up slide animations */
.router-transition-f7-cover-forward .page-next,
.router-transition-f7-push-forward .page-next {
  animation: slideInFromBottom 0.5s ease-out !important;
}
.router-transition-f7-cover-backward .page-previous,
.router-transition-f7-push-backward .page-previous {
  animation: none !important;
}