/*
Theme Name: bolz_site
Theme URI: https://bolz.studio/
Author: Dein Name
Author URI: https://deinportfolio.de/
Description: Ein minimalistisches Theme für bolz.studio
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bolz_site
*/
@media only screen and (min-width: 768px) {
    /* Grundlegende Stile */
    body, html {
      margin: 0;
      padding: 0;
      font-family: 'Gothic A1', sans-serif;
      /*text-align: center;*/
    }
  
    /*=========================================================*/
  
    /* Stil für den Header */
    .header {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px; /* Schriftgröße 16px */
      background-color: #ffffff; /* Weißer Hintergrund */
      color: #333; /* Dunkle Textfarbe */
      padding: 0px ; /* Innenabstand oben und unten */
      position: fixed; /* Fixierte Position */
      height: 75px;
      width: 100%; /* Volle Breite */
      z-index: 1; /* Stellt sicher, dass der Header über anderen Elementen liegt */
      box-shadow: 0 2px 4px rgba(0,0,0,.1); /* Leichter Schatten für den Header */
      transition: background-color 0.2s; /* Sanfter Übergang für die Hintergrundfarbe */
    }
  
    /* Stil für den transparenten Header beim Scrollen */
    .header.transparent {
      background-color: rgba(255, 255, 255, 0.7); /* Halbtransparenter Hintergrund */
      transition: background-color 0.5s; /* Sanfter Übergang für die Hintergrundfarbe */
      backdrop-filter: blur(5px); /* Verschwommener Hintergrund */
    }
  
    /*=========================================================*/
  
    /* Stil für die Navigation */
    .navbar {
      display: flex; /* Flexbox-Layout */
      flex-direction: row; /* Stapelt die Elemente horizontal */
      justify-content: center; /* Zentriert die Inhalte horizontal */
      align-items: center; /* Zentriert die Inhalte vertikal */
      height: 75px; /* Volle Höhe des Headers */
    }
  
    /* Stil für die Navigationslinks */
    .navbar a.nav-link {
      padding: 30px 40px; /* Innenabstand oben und unten, um die Hitbox zu vergrößern */
      text-decoration: none; /* Keine Textdekoration */
      color: #333; /* Dunkle Textfarbe */
      align-items: center; /* Zentriert die Inhalte vertikal */
      font-weight: normal; /* Normale Schrift */
      letter-spacing: 2px; /* Erhöht den Abstand zwischen den Buchstaben */
      position: relative; /* Position relativ für die Pseudo-Elemente */
      transition: all 1.4s ease; /* Sanfter Übergang für den Hover-Effekt */
      display: inline-block; /* wichtig für die Breite */
      cursor: default;
    }
  
    /* Stil für das Pseudo-Element der Navigationslinks */
    .navbar a.nav-link::after {
      content: ''; /* Inhalt des Pseudo-Elements */
      display: block; /* Block-Element */
      height: 2px; /* Höhe der Linie */
      background-color: #333; /* Farbe der Linie */
      position: absolute; /* Absolute Positionierung */
      bottom: 25px;
      left: 0;
      width: 100%;
      transform: scaleX(0); /* Linie ist "unsichtbar" */
      transform-origin: center; /* wächst von der Mitte */
      transition: transform 0.7s ease;
    }
  
    /* Stil für die Navigationslinks beim Überfahren mit der Maus */
  .navbar a.nav-link:hover::after {
    transform: scaleX(0.7); /* Linie wird eingeblendet */
  }
  
    /*=========================================================*/
  
    /* Stil für das Logo */
    .logo {
      position: absolute; /* Position relativ zum nächsten übergeordneten Element */
      justify-content: flex-start;
      top: 20.25px;
      left: 25px;
    }
  
    /* Stil für das Einkaufswagen-Icon */
    .shopping-cart {
      position: fixed; /* Fixierte Position */
      display: flex;
      justify-content: flex-end;
      align-items: center; /* Zentriert die Inhalte vertikal */
      top: 20.25px; /* Abstand von oben */
      right: 25px; /* Abstand von rechts */
      vertical-align: middle;
      transition: transform 0.2s ease-in-out; /* Smooth Zoom */
      cursor: default;
    }
    .shopping-cart:hover {
      transform: scale(1.1); /* Zoom auf 110 % */
    }
  
    /*=========================================================*/
  
    @keyframes slideDown {
      from {
        transform: translateY(-20%);
        opacity: 0;
      }
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }
    @keyframes slideUp {
      from {
        transform: translateY(0);
        opacity: 1;
      }
      to {
        transform: translateY(-20%);
        opacity: 0;
      }
    }
  
    /*=========================================================*/
  
    /* Stil für das Dropdown-Menü beim Überfahren mit der Maus */
    .dropdown:hover .dropdown-content {
      display: flex;
      opacity: 1;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      height: 65px;
      justify-content: center;
      align-items: center;
      backdrop-filter: blur(2px); /* Verschwommener Hintergrund */
      animation: slideDown 0.7s forwards;
      /* Dropdown sichtbar bei Hover */
      pointer-events: auto;
      z-index: -1; /* Dropdown hinter der Navigationsleiste */
  
    }
  
    /* Dropdown bleibt sichtbar, wenn im Dropdown navigiert wird */
    .dropdown .dropdown-content:hover {
      display: flex;
      opacity: 1;
    }
  
    /* Standard-Zustand: Dropdown versteckt mit SlideUp */
  .dropdown-content {
      display: flex;
      position: absolute;
      left: 0;
      top: 100%;
      justify-content: center;
      align-items: center;
      background-color: rgba(255, 255, 255, 0.7);
      width: 100%;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
      z-index: -1; /* Dropdown hinter der Navigationsleiste */
      opacity: 0;
      height: 0; /* Höhe auf 0, um ausblenden zu unterstützen */
      overflow: hidden;
      transition: opacity 0.3s ease, height 0.3s ease;
      pointer-events: none; /* verhindert Hover während des Ausblendens */
      animation: slideUp 0.2s forwards;
    }
  
    .dropdown-content a.drp-link {
      display: inline-block; /* wichtig, damit Breite vom Text abhängt */
      position: relative;
      padding: 12px 20px;
      text-decoration: none;
      color: #333;
      cursor: de;
    }
    
    .dropdown-content a.drp-link::after {
      content: '';
      display: block;
      height: 1.5px;
      background-color: #333;
      position: absolute;
      bottom: 7px;
      left: 0;
      width: 100%; /* ← passt sich jetzt an den Text an */
      transform: scaleX(0);
      transform-origin: center;
      transition: transform 0.7s ease;
    }
    
    .dropdown-content a.drp-link:hover::after {
      transform: scaleX(0.7); /* animiert das Wachstum */
    }
    
  
    /*=========================================================*/
  
    /* Mobile Navigationsbar unsichtbar */
    .navbarmobile {
      display: none;
    }
  }
  
  /* Media Query für Smartphones */
  @media only screen and (max-width: 768px) {
    /* Grundlegende Stile */
    body, html {
      margin: 0;
      padding: 0;
      font-family: 'Gothic A1', sans-serif;
      text-align: center;
    }
  
    /* Desktop Header ausblenden */
    .header {
      display: none; /* Navigation standardmäßig ausblenden */
    }
  
    /* Stil für den mobilen Header */
    .header-mobile {
      height: 50px;
      background-color: rgba(255, 255, 255, 0.7); 
      position: fixed; /* Fixierte Position */
      top: 0; /* Oben am Bildschirm */
      width: 100%; /* Volle Breite */
      transition: background-color 0.2s; /* Sanfter Übergang für die Hintergrundfarbe */
      display: flex; /* Flexbox-Layout */
      justify-content: space-between; /* Elemente am Anfang und Ende des Headers ausrichten */
      align-items: center; /* Elemente vertikal zentrieren */
    }
  
    /* Stil für das Hamburger-Menü */
    .menu-toggle {
      width: 50px;
      height: 50px;
      border: none;
      background: transparent;
      padding: 9.5px;
      cursor: default;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      position: fixed; /* Ändere zu "fixed", damit das Menü beim Scrollen sichtbar bleibt */
      right: 10px; /* Rechts 20px vom Bildschirmrand */
      z-index: 1000; /* Stellt sicher, dass das Menü über anderen Elementen liegt */
    }
  
    /* Stil für die Striche im Hamburger-Menü */
    .menu-bar {
      width: 30px;
      height: 1px;
      background-color: #333;
      transition: transform 0.2s;
      color: black;
      border-radius: 1px; /* Abgerundete Ecken */
    }
  
    /* Stil für das geklickte Hamburger-Menü */
    .menu-toggle.open .menu-bar:nth-child(1) {
      transform: rotate(-45deg) translate(-5px, 5px);
    }
  
    .menu-toggle.open .menu-bar:nth-child(2) {
      transform: rotate(45deg) translate(-6px, -6px);
    }
  
    /* Stil für die mobile Navigation */
    .navbarmobile {
      display: none;
      flex-direction: column; /* Navigationslinks vertikal anordnen */
      position: fixed; /* Ändere zu "fixed", damit die Navigation beim Scrollen sichtbar bleibt */
      z-index: 999; /* Stellt sicher, dass die Navigation über anderen Elementen liegt */
      top: 0; /* Oben am Bildschirm */
      right: 0; /* Rechts am Bildschirm */
      width: 100%;
      height: 100vh; /* 100% der Bildschirmhöhe */
      background-color: rgba(255, 255, 255, 0.8); /* Hintergrundfarbe für die Navigation */
      backdrop-filter: blur(5px); /* Verschwommener Hintergrund */
      padding: 20px; /* Innenabstand für die Navigation */
      justify-content: center; /* Links mittig zentrieren */
      align-items: center; /* Links mittig zentrieren */
    }
  
    .navbarmobile.open {
      display: flex;
    }
  
    /* Stil für die Navigationslinks */
    .navbarmobile a.nav-link-mobile {
      text-decoration: none; /* Keine Textdekoration */
      color: #535353; /* Dunkle Textfarbe */
      margin-bottom: 20px; /* Vergrößerter Abstand zwischen den Navigationslinks */
      transition: color 0.3s; /* Sanfter Übergang für die Textfarbe */
      font-size: 30px; /* Größere Schriftgröße für die Links */
    }
  
    /* Stil für die Navigationslinks beim Überfahren mit der Maus */
    .navbarmobile a.nav-link-mobile:hover {
      color: #666; /* Ändern Sie die Textfarbe beim Überfahren */
    }
  
    .button-image {
      align-items: center; /* Zentriert die Inhalte vertikal */
    }
  
    .title {
      font-family: cursive; /* Geschwungene Schriftart verwenden */
      text-align: center; /* Zentriert ausrichten */
      font-size: 20px; /* Beispiel für Schriftgröße */
      color: #333; /* Dunkle Textfarbe */
      padding: 10px 0; /* Beispiel für Innenabstand oben und unten */
      width: 100%; /* Volle Breite */
      position: absolute; /* Absolute Positionierung */
      top: 50%; /* Oben zur Hälfte des Headers */
      transform: translateY(-50%); /* Vertikal zentrieren */
    }
    
  
  
  }