/* This file can be used for custom styling */


/* Abstände auf Seite Versand-/Zahlinfos*/
#content_td li {
    margin-bottom: 25px;
}


/* Abstand zwischen Inhalt und Footer weg*/
div.content_td {
    margin-bottom: 0;
}


/* Kunden-Kästchen oben rechts > Schrift normale Grösse*/
.hauptnav_td #login_box_ibox_content .mein_konto_item a {
font-size: inherit !important;
}


/* doppelten Menü-Eintrag "Shop" auf Mobile ausblenden*/
@media (max-width: 768px) {  /* Anpassen je nach Breakpoint */
    #dl-menu a[href="/ki/Biere.html"] {
        display: none;
    }
}

/* Newsletter im Footer soll aussehen wie ein Link*/
#newsletterbutton {
  color: #ffffff;  
  cursor: pointer; /* Zeigt die Hand als Mauszeiger */
}
#newsletterbutton:hover {
  color: #cccccc; /* Ändert die Farbe beim Darüberfahren */
}



/* Links mouse over nicht weiss sondern grau*/
.content a:hover:not(.footer a:hover) {
    color: #b3b3b3 !important;
}

/* Hauptnavi nicht zentriert*/
.slidemenu_wrapper {
margin-right: 360px
}



/* Altersprüfung Bild vollflächig etc*/

#cms4_iq5tv {
    background-color: #fff;
    top: -100px;
    z-index: 99999;
    position: fixed;
    height: 150vh;
    width: 100%;
}
@media (max-width: 768px) {
    #cms4_iq5tv {
        height: 150vh; 
        width: 100%;
        top: -100px; 
z-index: 99999;
    }
}
/* Altersprüfung Logo*/
#cms4_itvu1 {
    width: 100%; /* Standard: Bild nimmt die volle Breite des Containers */
    max-width: 800px; /* Begrenzung für größere Bildschirme */
    height: auto; /* Verhältnis beibehalten */
}
@media (max-width: 768px) {
    #cms4_itvu1 {
        width: 80%; /* Auf mobilen Geräten nur 50% der Breite */
        max-width: 500px; /* Maximale Größe weiter begrenzen */
    }
}





/* Box für Gast-Bestellung ausblenden*/
div.login_direkt_box {
  display: none !important;
}



/* Allgemein */
html {
letter-spacing: 0.03em;
}



/* Titel Cookie-Warnung */
.cookiewarning h3.content {
  margin-bottom: 10px !important;
}

/*
html.mce-content-html, body.fancybox-active, body {
line-height: 1.6;
}
.artikel_box, .artikel_box a.content:link, .artikel_box a.content:visited, div.artikel_box_preis .preisstaffelung_uebersicht .table {
font-size: px;
}
*/


h1, h2, h3, h4, h5 {
font-family: Martian Mono;
text-transform: uppercase;
word-spacing: -0.3em;
letter-spacing: 0.03em;
font-weight: 400;
line-height: 1.3em;
}
@media (max-width: 1024px) {
    h2  {
        font-size: 22px !important; 
    }
}




/* Content chli Rand rechts*/  

.content.cell_content:not(.sub_footer_top .content.cell_content) {
    margin-left: 5%;
    margin-right: 20%;
}
/* Buttons Desktop auch mit Rand, ausser Alters-Check-Buttons */
.btn.btn-default.cell_content:not(#cms4_ipxes):not(#cms4_irtxd) {
    left: 5%; 
}

/* Seite über Shop mit Abstand weil Pepper grrrr*/ 
#cms8_iwz0f .content.cell_content {
    margin-left: 25px;   
    margin-right: 25px; 
}





/* Ausnahme für den spezifischen Bereich */
#cms2_in6h .content.cell_content {
    width: auto;
    margin-right: 0;
}

/* Responsive Anpassung */
@media (max-width: 1024px) {
    .content.cell_content:not(.sub_footer_top .content.cell_content) {
        margin-right: 0%;
        margin-left: 0%;
    }
    .btn.btn-default.cell_content {
    left: 0% !important;}

    #cms2_in6h .content.cell_content {
        width: auto;
        margin-right: 0;
    }
}





/* Header-Bilder ohne Rand oben/unten  */

.container-fluid:not(#cms2_i5vi) {
margin-top: -50px; 
margin-bottom: -50px;
margin-left: -50px;
margin-right: -50px;
}
/* Auf Mobile anständige Höhe for Header-Bilder, ausgenommen die 2 Textspalten von Infos über Shop*/
@media (max-width: 1024px) {
    .container-fluid {
        height: 200px !important;
    }
    .bg_wrapper#cms8_iaq1y .container-fluid {
        height: auto !important; /* Zurücksetzen für das spezifische Element */
    }
}



/* Header-Bilder min. Höhe für Mobile. 1. 4 Ausschlüsse nicht sicher; danach Galerie alte Biere: */ 

.bg_wrapper:not(#cms2_i5vi):not(#cms6_iecmd3):not(#cms7_ifudqi):not(#cms2_ivt6rv):not(#cms7_itejn5):not(#cms7_i97yyj):not(#cms7_i7khsb) {
min-height: 350px;
margin-top: 50px;
}
/* iPhone – nur bis 767px */
@media only screen and (max-width: 767px) {
  .bg_wrapper#cms6_imwx35,
  .bg_wrapper#cms6_ikzmzo,
  .bg_wrapper#cms6_i2d474 {
    min-height: 280px;     /* Beispielwert – anpassen nach Bedarf */
    margin-top: 30px;
  }
}

/* iPad Portrait – 768px bis 1024px + Portrait */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .bg_wrapper#cms6_imwx35,
  .bg_wrapper#cms6_ikzmzo,
  .bg_wrapper#cms6_i2d474 {
    min-height: 600px !important;     /* z. B. etwas höher als iPhone */
    margin-top: 30px;
  }
}

/* iPad Landscape – 768px bis 1024px + Landscape */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .bg_wrapper#cms6_imwx35,
  .bg_wrapper#cms6_ikzmzo,
  .bg_wrapper#cms6_i2d474 {
    min-height: 600px !important;
    margin-top: 30px;
  }
}


/* Fix VIDEO Home Smartphone */ 
@media (max-width: 1024px) {
  .bg_wrapper#cms6_iecmd3 {
    min-height: 270px;
    margin-top: -20px;
    margin-bottom: -100px;
  }
}
/* iPad Portrait & Landscape: VIDEO-Block höher machen */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .bg_wrapper#cms6_iecmd3 {
    min-height: 720px;     /* z. B. höher als Mobile */
    margin-top: -40px;
    margin-bottom: -60px;  /* etwas weniger abgeschnitten? */
  }
}
/* Fix BILDER Home Smartphone */ 
@media only screen and (max-width: 767px) {
  .bg_wrapper#cms6_imwx35,
  .bg_wrapper#cms6_ikzmzo,
  .bg_wrapper#cms6_i2d474 {
    margin-bottom: -100px;
  }
}
/* iPad Portrait & Landscape: Abstand unter BILDERN verringern */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .bg_wrapper#cms6_imwx35,
  .bg_wrapper#cms6_ikzmzo,
  .bg_wrapper#cms6_i2d474 {
    margin-bottom: -100px; /* z. B. etwas weniger negativ als bei iPhone */
  }
}














/* Fix 1. Bild Home Mobile, Animation */ 

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  #cms6_icw2vq {
    transform: translateY(0px);
  }
  #cms6_i6x0bt {
    transform: translateY(30px);
  }
  #cms6_ir0cuo {
    transform: translateY(-160px);
  }
}

#cms6_icw2vq,
#cms6_i6x0bt,
#cms6_ir0cuo
 {
  will-change: background-position, background-size;
}
@media (max-width: 1024px) {
  #cms6_icw2vq {
    background-size: 147% auto;
    background-position: center 59%;
    animation: bgPulse1 13s ease-in-out infinite;
  }
}
@keyframes bgPulse1 {
  0% {
    background-position: 0% 42%;
    background-size: 140% auto;
  }

  3% {
    background-position: 54% 43%;
    background-size: 162% auto;
  }

  25% {
    background-position: 54% 43%;
    background-size: 162% auto;
  }

  28% {
    background-position: 75% 45%;
    background-size: 181% auto;
  }

  50% {
    background-position: 75% 45%;
    background-size: 181% auto;
  }

  53% {
    background-position: 25% 45%;
    background-size: 157% auto;
  }

  75% {
    background-position: 25% 45%;
    background-size: 157% auto;
  }

  78% {
    background-position: 0% 42%;
    background-size: 140% auto;
  }

  100% {
    background-position: 0% 42%;
    background-size: 140% auto;
  }
}



/* Fix 2. Bild Home Mobile, Parallax-Effekt */ 
@media (max-width: 1024px) {
  #cms6_i6x0bt {
    animation: bgPulse2 10s ease-in-out infinite;
    background-size: 140% auto;
    background-position: 20% 63%;
  }
}
@keyframes bgPulse2 {
  0% {
    background-position: 45% 62%;
    background-size: 124% auto;
  }
20% {
    background-position: 45% 62%;
    background-size: 124% auto;
  }

  24% {
    background-position: 25% 72%;
    background-size: 175% auto; 
  }
 39% {
    background-position: 25% 72%;
    background-size: 175% auto; 
  }

  44% {
    background-position: 80% 70%;
    background-size: 145% auto;
  }
 60% {
    background-position: 80% 70%;
    background-size: 145% auto;
  }
  64% {
    background-position: 50% 72%;
    background-size: 195% auto; 
  }
 79% {
    background-position: 50% 72%;
    background-size: 195% auto; 
  }
  83% {
    background-position: 45% 62%;
    background-size: 124% auto;
  }
  100% {
    background-position: 45% 62%;
    background-size: 124% auto;
  }
}




/* Fix 3. Bild Home Mobile, Parallax-Effekt */ 
@media (max-width: 1024px) {
  #cms6_ir0cuo {
    animation: bgPulse3 8s ease-in-out infinite;
    background-size: 140% auto;
    background-position: 40% 41%;
  }
}
@keyframes bgPulse3 {
  0% {
    background-position: 13% 43%;
    background-size: 140% auto;
  }

  4% {
    background-position: 54% 39%;
    background-size: 162% auto;
  }

  25% {
    background-position: 54% 39%;
    background-size: 162% auto;
  }

  29% {
    background-position: 75% 34%;
    background-size: 181% auto;
  }

  50% {
    background-position: 75% 34%;
    background-size: 181% auto;
  }

  54% {
    background-position: 20% 37%;
    background-size: 157% auto;
  }

  75% {
    background-position: 20% 37%;
    background-size: 157% auto;
  }

  79% {
    background-position: 13% 43%;
    background-size: 140% auto;
  }

  100% {
    background-position: 13% 43%;
    background-size: 140% auto;
  }
}




















/* Hauptnavigation */
.container_hauptnavigation a {
font-family: Martian Mono;
text-transform: uppercase;
word-spacing: -0.4em;
letter-spacing: 0.05em;
font-weight: 400;
font-size: 22px !important;
}



/* Breadcrumb-Navi */ 

.breadcrumb {
visibility: hidden;
padding: 0px 0px 0px 0px;
}

ul.breadcrumb.only a, li  {
/*font-family: Martian Mono;
text-transform: uppercase;
word-spacing: -0.4em;
letter-spacing: 0.05em;
font-weight: 400;*/
font-size: 12px;
}
ul.breadcrumb  a {
/*font-family: Martian Mono;
text-transform: uppercase;
word-spacing: -0.4em;
letter-spacing: 0.05em;
font-weight: 400;*/
font-size: 12px;
}





/* Artikelliste 
h3.content  {
font-size: px;
letter-spacing: 0.1em;
}*/
div.artikel_box a.content.no_underline {
font-size: 17px;
}

div.lagerampel {
font-size: 12px}


/* Artikel Titel in Übersicht */

a.content.artikel_box_name {
text-transform: uppercase;
font-family: Martian Mono;
word-spacing: -0.4em;
letter-spacing: 0.05em;
font-weight: 400;
}

/* Mengen-Wähler*/
.anzahl_inline_wrapper {
margin-bottom: 6px}




/* Tabelle Produktbeschrieb */

.tabelle_product_beschreib {
  width: 100%;
  border-collapse: collapse;
}

.tabelle_product_beschreib td {
  vertical-align: top;
}

/* Standard Desktop: 50/50 Aufteilung */
@media (min-width: 1024px) {
  .tabelle_product_beschreib td:first-child {
    width: 50%;
  }
  .tabelle_product_beschreib td:last-child {
    width: 50%;
  }
}

/* Mobile Ansicht: 100/0 Aufteilung */
@media (max-width: 768px) {
  .tabelle_product_beschreib td:first-child {
    width: 100%;
  }
  .tabelle_product_beschreib td:last-child {
    display: none;
  }
}


/* Text Beschrieb Artikeldetail*/
.product_beschrieb {
font-size: 1.2em;
line-height: 1.2em;
margin-bottom: 25px;
}

/*Shop-Bildli in voller Breite*/
@media (max-width: 400px) {
  img.artikel_box_bild {
    max-height: none !important;
  }
}


/* Artikeldetail 

.product_info {
margin: 0px 0px 100px 0px;
margin-left: 0%;
margin-right: 0%;
background-color: #fff;
box-shadow: 0 0 40px -20px rgba(0,0,0,.0);
padding: 0;
}
.product_content_container, .product_image_container {
margin: 0px 0px 10px 0px;
}
*/

.product_info[data-product_info_content_id="beschreibung"] > h3.content {
    display: none;
}

/*
.panel-title {
display: none
}
*/

/* Box Text-Titel ausverkaufte Biere */
#cms7_ilsmvw {
    min-height: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
/* Box Bilder ausverkaufte Biere */
#cms7_ipr4ce {
    margin-top: 0 !important;
    padding-top: 0 !important;
}


/* Link Newsletter und Insta auf Home bei Rampenverkauf */
#flux-links {
  font-size: 1.06em;
  line-height: 1.5;
  text-shadow: 0 0 0.2px currentColor;
}
#flux-links a {
  font-size: 1.06em;
  color: #a8a8a8 !important;
  text-decoration: none !important;
}
#flux-links a:visited {
  color: #a8a8a8 !important;
}
#flux-links a:hover {
  color: #bfbfbf !important;
}



/* HTML-Element auf Home > Newsletter und Insta - Nur Desktop: Abstand links und rechts */
@media only screen and (min-width: 1025px) {
  #flux-links {
    margin-left: 5%;
    margin-right: 20%;
    margin-bottom: 10px;
  }
}
/* Optional: Auf Mobile/iPad (wenn nötig, Werte rücksetzen) */
@media only screen and (max-width: 1024px) {
  #flux-links {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 10px; /* beibehalten */
  }
}



/* Formular unter Kontakt linken Abstand entfernen*/
#kontaktformular .col-sm-offset-2 {
  margin-left: 0;
}
/* mehr Abstand unter dem Formular */
#kontaktformular {
  margin-top: 30px; 
margin-bottom: 80px; 
}
#kontaktformular label {
  font-size: 85%;
}
#kontaktformular .checkbox label {
  font-size: 100%;
}



/* Menu resp. Special Mobile-Navi */
header.hauptnav_td .dl-menuwrapper li,
header.hauptnav_td .dl-menuwrapper li a {
  font-family: "Martian Mono", monospace !important;
  font-size: calc(24px * 0.8) !important; 
}


/* Consent- resp- Cookie-Pop-Up Linkfarbe */
.cookiewarning a {
    color: #aaa !important;
}
.cookiewarning a:hover {
    color: #888 !important;
}


/* Menu > Warenkorb-Icon 20px weiter links */
.hauptnavigation_middle.order_first, .hauptnavigation_right {
flex: 0 0 180px; /* statt 200*/
}



/* Footer */
footer, footer p, footer a:not(.btn):link, footer a:not(.btn):hover, footer a:not(.btn):visited, footer a:not(.btn):active, footer a.footer, footer a.footer:hover, footer a.footer:visited, footer a.footer:active {
text-transform: uppercase;
font-family: Martian Mono;
word-spacing: -0.4em;
letter-spacing: 0.05em;
font-weight: 400;
}
/* Footer */ 
.footer {
padding-left: 0%;
}