/* ==========================================
   1. GLOBAL & BASICS
   ========================================== */
/* webfont */
@font-face {
    font-family: 'leyer';
    src: url('/webfont/leyer-webfont.eot');
    src: url('/webfont/leyer-webfont.eot?#iefix') format('embedded-opentype'),
         url('/webfont/leyer-webfont.woff2') format('woff2'),
         url('/webfont/leyer-webfont.woff') format('woff'),
         url('/webfont/leyer-webfont.ttf') format('truetype'),
         url('/webfont/leyer-webfont.svg#leyer') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'chalkpaintmedium';
    src: url('/webfont/chalkpaint-webfont.eot');
    src: url('/webfont/chalkpaint-webfont.eot?#iefix') format('embedded-opentype'),
         url('/webfont/chalkpaint-webfont.woff2') format('woff2'),
         url('/webfont/chalkpaint-webfont.woff') format('woff'),
         url('/webfont/chalkpaint-webfont.ttf') format('truetype'),
         url('/webfont/chalkpaint-webfont.svg#chalkpaintmedium') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* font-family setzen */
h1, .h1, .nav-item a {
  font-family: leyer !important;
}
h1, .h1 {
  font-size: 300% !important; 
}
.nav-item a {
  font-size: 150% !important; 
}


body {
  background: transparent url("/images/background/bg_brot.jpg") no-repeat fixed 0 0 / cover;
  height: 100%;
}

.grid-child {
  background: rgba(255, 255, 255, 0.8) none repeat scroll 0 0;
  padding: 0 20px;
}

h1 {
  padding-bottom: 20px;
}

a, h1 {
  color: #dfa83b;
  text-decoration: none;
}

a:hover, a:focus, h2, h3 {
  color: #72383c;
}

a:focus {
  text-decoration: underline;
}

.site-grid a {
  font-weight: bold;
}

h3 {
  font-weight: normal;
}
.btn, .btn-secondary {
  background-color: #dfa83b;
  border-color: #72383c;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 5px 5px 10px grey;
  -moz-box-shadow: 5px 5px 10px grey;
  box-shadow: 5px 5px 10px grey;
  color: #fff;
}
.btn:hover, .btn:focus, .btn.focus, .btn:active, .btn.active, .open > .dropdown-toggle.btn, .btn-secondary:hover, .btn-secondary:focus, .btn-secondary.focus, .btn-secondary:active, .btn-secondary.active, .open > .dropdown-toggle.btn-secondary {
  background-color: #72383c;
  border-color: #72383c;
  color: #fff;
}
.link_button {
  background: transparent url("/images/background/tafel_klein.jpg") no-repeat right 0;
  background-size: auto;
  -webkit-box-shadow: 5px 5px 10px grey;
  -moz-box-shadow: 5px 5px 10px grey;
  box-shadow: 5px 5px 10px grey;
  margin-bottom: 30px;
  padding: 10px;
  width: -moz-max-content;
  width: -webkit-max-content;
  display: -ms-inline-grid;
  -moz-transform: rotate(-12deg);
  -ms-transform: rotate(-12deg);
  -o-transform: rotate(-12deg);
  -webkit-transform: rotate(-12deg);
  transform: rotate(-12deg);
  background-size: 100%;
}
.schatten {
  -webkit-box-shadow: 5px 5px 10px grey;
  -moz-box-shadow: 5px 5px 10px grey;
  box-shadow: 5px 5px 10px grey;
}
.contact_form {
  background-color: #fff;
  border: 2px solid #dfa83b;
  border-radius: 10px;
  padding: 20px;
}

/* ==========================================
   2. PERMANENTER DESKTOP-HEADER & LOGO (AB 992PX)
   ========================================== */
@media (min-width: 992px) {

  /* 1. Header hat wieder seine PERMANENTE, feste Höhe von 130px */
  header.header.container-header {
    background: linear-gradient(to bottom, #dfa83b 0%, #fff 100%) !important;
    height: 130px !important;    
    position: relative;   
    display: block !important; 
    z-index: 100;
    overflow: visible !important; /* Wichtig für das herausragende Logo */
  }
  
  /* Der Seiteninhalt rückt fest an die Unterkante des 130px-Headers heran */
  .site-grid {
    margin-top: 0 !important; 
    position: static !important; /* Neutralisiert das Raster für die absolute Positionierung */
  }

  header.container-header .grid-child {
    background: none !important;
  }

  /* Hauptnavigation zentriert (obere 80px) */
  header.container-header .container-nav {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 20px;      
    height: 80px;         
    display: flex !important;
    align-items: center;  
    box-sizing: border-box;
  }

  /* Gemeinsame Listen-Strukturen */
  .mod-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  .container-top-b .mod-menu {
    flex-direction: row !important;           
  }

  /* 3. SCHWEBENDER BUTTON-EFFEKT (HAUPTMENÜ) */
  header.container-header .nav-item a {
    display: inline-block !important;
    background-color: transparent !important; 
    padding: 10px 22px !important;
    text-decoration: none !important;
    color: #5d3a21 !important;              
    font-weight: bold !important;
    border-radius: 8px !important;
    border: 1px solid rgba(93, 58, 33, 0.3) !important;
    box-shadow: 5px 6px 12px rgba(0, 0, 0, 0.25), 
                inset 0 1px 2px rgba(255, 255, 255, 0.4) !important;
    position: relative;
    top: -3px;
    left: -2px;
    transition: all 0.15s ease-in-out !important;
  }

  header.container-header .nav-item a:hover,
  header.container-header .nav-item a:focus {
    background-color: transparent !important;
    top: 1px !important;
    left: 1px !important;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.35),
                inset 0 1px 1px rgba(0, 0, 0, 0.1) !important;
  }

  header.container-header .nav-item.active a {
    top: 1px !important;
    left: 1px !important;
    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(93, 58, 33, 0.5) !important;
  }

  /* Dropdown-Pfeil-Indikator */
  header.container-header .nav-item.parent a {
    padding-right: 34px !important; 
  }
  
  header.container-header .nav-item.parent a::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #5d3a21;
    opacity: 0.7;
  }

  /* 4. SUBNAVIGATION (FEST BEI PIXEL 80 IM HEADER EINGEBLENDET) */
  .container-top-b {
    position: absolute !important;   
    top: 80px !important;   /* Völlig starr an der 80px-Unterkante der Hauptnav ausgerichtet */
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    max-width: 1320px !important;
    padding: 0 20px !important;
    box-sizing: border-box;
    display: flex !important;
    align-items: center;
    height: 50px !important; /* Füllt die unteren 50px des 130px permanenten Headers aus */
    z-index: 105 !important;
    background: none !important;
    
    /* DAUERHAFT SICHTBAR */
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .container-top-b nav.moduletable {
    width: 100% !important;
    padding-right: 180px !important; /* Schutzpuffer vor dem Bäckerei-Logo */
    box-sizing: border-box;
  }

  /* Submenü-Links als reine Textlinks in Bäckerei-Braun */
  .container-top-b .metismenu-item a {
    display: inline-block !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 5px 10px !important;
    color: #5d3a21 !important;     
    font-weight: bold !important;
    position: static !important;   
    transition: color 0.15s ease !important;
  }

  .container-top-b .metismenu-item a:hover {
    color: #72383c !important;     
    text-decoration: underline !important;
  }

  /* 5. LOGO (RECHTSBÜNDIG AN DER 1320PX-KANTE) */
  header.container-header .grid-child:first-child {
    position: absolute !important;
    top: 0;
    left: 50%;
    transform: translateX(-50%); 
    width: 100%;
    max-width: 1320px;            
    height: 80px;                 
    padding: 0 20px;              
    box-sizing: border-box;
    background: none !important;
    display: flex !important;
    justify-content: flex-end !important; 
    align-items: center !important;       
    pointer-events: none; 
    z-index: 110;
  }

  header.container-header .navbar-brand {
    pointer-events: auto;
    display: block;
    margin-left: auto !important;
    margin-right: 0 !important;
  }

  /* Das Bäckerei-Logo ragt stabil über den permanenten 130px-Header heraus */
  header.container-header .brand-logo img {
    position: relative !important;
    top: 45px;            
    z-index: 999 !important; 
    display: block;
    box-shadow: 5px 5px 10px grey;
  }
}

/* ==========================================
   3. MOBIL-ANSICHT (UNTEREINANDER FÜR SMARTPHONES)
   ========================================== */
@media (max-width: 991.98px) {
  header.header.container-header {
    background: linear-gradient(to bottom, #dfa83b 0%, #fff 100%) !important;
    height: auto !important;
    display: block !important;
  }
  
  header.container-header .grid-child,
  .container-top-b {
    background: none !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    text-align: center;
    padding: 10px 20px !important;
    display: flex;
    position: static !important; 
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  header.container-header .brand-logo img {
    margin: 10px auto;
    top: 0 !important; 
    box-shadow: 5px 5px 10px grey;
  }
}


/* ==========================================
   PRODUKT-BLOG LAYOUT (BILD RECHTS NEBEN TEXT)
   ========================================== */
@media (min-width: 768px) {
  /* Macht den einzelnen Blog-Eintrag zur Flexbox */
  .com-content-category-blog__item.blog-item {
    display: flex !important;
    flex-direction: row;       /* Text links, Bild rechts (durch HTML-Fluss gesteuert) */
    align-items: flex-start;   /* Richtet Elemente oben aus */
    gap: 30px;                 /* Abstand zwischen Text und Bild */
    width: 100%;
    margin-bottom: 40px;       /* Abstand zum nächsten Produkt */
  }

  /* Der Textbereich nimmt den gesamten verfügbaren Platz links ein */
  .com-content-category-blog__item.blog-item .item-content {
    flex: 1;
    order: 1;                  /* Zwingt den Text nach links */
  }

  /* Der Bildbereich wird rechts positioniert */
  .com-content-category-blog__item.blog-item .item-image {
    flex: 0 0 350px;           /* Feste Breite für das Produktbild (anpassbar) */
    order: 2;                  /* Zwingt das Bild nach rechts */
    margin: 0 !important;      /* Löscht alte Abstände */
  }

  /* Sorgt dafür, dass das Brot-Bild innerhalb seiner Box responsiv mitskaliert */
  .com-content-category-blog__item.blog-item .item-image img {
    width: 100%;
    height: auto;
    display: block;
  }
}

/* ==========================================
   MOBIL-OPTIMIERUNG (UNTEREINANDER AUF SMARTPHONES)
   ========================================== */
@media (max-width: 767.98px) {
  .com-content-category-blog__item.blog-item {
    display: flex;
    flex-direction: column;    /* Auf Handys steht das Bild für bessere Lesbarkeit über/unter dem Text */
  }
  .com-content-category-blog__item.blog-item .item-image {
    margin: 0 auto 15px auto !important;
    max-width: 100%;
  }
}

/* ==========================================
   FOOTER-STYLING (PERFEKT ZENTRIERT)
   ========================================== */
footer.container-footer.footer {
  width: 100%;
  display: flex !important;
  justify-content: center; /* Zentriert das innere Raster auf dem Bildschirm */
  text-align: center;      /* Zentriert alle Texte und Links */
  box-sizing: border-box;
  background: #fff;
  color: #000;
}

/* Richtet das innere Rasterelement aus */
footer.container-footer .grid-child {
  width: 100%;
  max-width: 1320px;       /* Gleiche Begrenzung wie im Header */
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column;  /* Stapelt die Textzeilen sauber untereinander */
  align-items: center;     /* Zentriert die inneren Boxen horizontal */
  justify-content: center;
  background: none !important; /* Entfernt eventuelle weiße Hintergrund-Blöcke */
}

/* Zentrierung des Modul-Inhalts */
footer.container-footer .mod-custom {
  width: 100%;
  text-align: center !important;
}

/* Links im Footer optisch anpassen */
footer.container-footer a {
  display: inline-block;
  padding: 0 5px;
  color: #dfa83b !important;
  text-decoration: none;
}

footer.container-footer a:hover {
  color: #72383c !important;
}