/* FRONTEND STYLES */

:root {
    --whiteBorderSpace: 10px;
    --MobileNavbarHeight: 72px;
}

body {
    padding-bottom: calc(var(--MobileNavbarHeight) - 1px);
    overflow-x: hidden;
    overflow-y: hidden;
}
body.ready {
    overflow-y: auto;
}
body:after {
    content: "";
    width: 100dvw;
    height: 100dvh;
    background: var(--ColorBGLight) url("/assets/img/logo/Rottaler_Augustiner_Logo_farbe_mitRahmen.svg") center center no-repeat;
    background-size: 100px auto;
    position: fixed;
    z-index: 10000;
    top: 0;
    left: 0;
    transition: opacity 1s ease-in-out ;
}
body.ready:after {
    opacity: 0;
    pointer-events: none;
}


body[data-round-corner="true"],
body[data-webapp="true"] {
    --MobileNavbarHeight: 100px;
}

a.btn,
button {
    text-transform: uppercase;
}

.modal-content {
    border-radius: 0!important;
}


.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.fade-in {
    opacity: 0;
    transition: opacity 0.6s ease-out;
}

/* Aktiver Zustand – wenn im Viewport */
.fade-in.is-visible {
    opacity: 1;
}

/* + HEADER +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

*.debugsdfsdf {
    outline: red 1px solid;
}

#header {
    position: absolute;
    z-index: 10;
    width: 100%;
    padding-top: var(--whiteBorderSpace);
}

.header-logo {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    top: 18px;
    z-index: 11;
    /* filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, .3));*/
}

.header-logo img {
    width: 112px;
}

.header-badges {
    margin-top: calc(var(--whiteBorderSpace) * -1)!important;
    font-size: 0;
}
.header-badges > div {
    padding-top: 40px!important;
    font-size: 30px;
    border-radius: 0;
    height: 85px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, .5);
    transition: all .3s ease;
}
.header-badges > div:hover {
    padding-bottom: 5px;
    height: 90px;
}
.header-badges > div a {
    color: #fff;
}
.header-badges > div:hover a {
    color: var(--ColorGold);
}

.desktop-nav a {
    color: #fff;
    text-transform: uppercase;
}

#header .nav-link {
    font-weight: 600;
    color: #fff;
}

#header .nav-link:hover {
    color: #fff;
}

#header .nav-link.active {
    color: #fff!important;
}
    /* + INNER BORDERS +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

.border-gold,
.border-white {
    position: relative;
}
.border-gold:after,
.border-white:after {
    content: "";
    display: block;
    position: absolute;
    left: var(--whiteBorderSpace);
    top: var(--whiteBorderSpace);
    width: calc(100% - var(--whiteBorderSpace) * 2);
    height: calc(100% - var(--whiteBorderSpace) * 2);
    border: solid 1px white;
    pointer-events: none;
}
.border-gold:after {
    border: solid 1px var(--ColorGold);
}


/* + FIRSTVIEW +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */


#firstview {
    width: 100%;
    height: calc(100svh - var(--MobileNavbarHeight));
    background: silver;
    background-image: url("/assets/img/heros/hoch/gaststube-2.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
#firstview .headline-1 {
    color: #fff;
}
#firstview .headline-1-sup {
    color: var(--ColorTextDark);
}
#firstview-small:before,
#firstview:before {
    content: "";
    display: block;
    position: absolute;
    pointer-events: none;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.25) 43%, rgba(0,0,0,0.05) 80%, rgba(0,0,0,0.7) 100%);
}

#firstview-small {
    width: 100%;
    height: 225px;
    background: silver;
    background-image: url("/assets/img/heros/flach/abstrakt.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
#firstview .wetter-hint {
    color: #fff;
}

#main-status-kueche {
    font-size: 22px;
}


/* + HEROS HOCH +++++++++++++ */

body[data-pageslug="dahoam"] #firstview /* [data-geoeffnet="ja"] */ {
    /* background-image: url("/assets/img/heros/hoch/gaststube-2.jpg");
    background-image: url("/assets/img/heros/hoch/kuche-2.5.jpg"); */
    background-image: url("/assets/img/heros/hoch/bratl.jpg");
}
body[data-pageslug="dahoam"][data-tageszeit="vormittag"] #firstview /* [data-geoeffnet="ja"] */ {
    background-image: url("/assets/img/heros/hoch/stelze.jpg");
}
body[data-pageslug="dahoam"][data-biergarten="true"] #firstview /* [data-geoeffnet="ja"] */ {
    background-image: url("/assets/img/heros/hoch/biergarten_eroeffnung.jpg");
}
body[data-pageslug="dahoam"][data-biergarten="true"][data-tageszeit="vormittag"] #firstview /* [data-geoeffnet="ja"] */ {
    background-image: url("/assets/img/heros/hoch/biergarten-rouladen.jpg");
}




body[data-pageslug="dahoam"][data-geoeffnet="false"][data-ruhetag="true"] #firstview,
body[data-pageslug="dahoam"][data-geoeffnet="false"]:not([data-tageszeit="vormittag"], [data-tageszeit="morgens"]) #firstview {
    background-image: url("/assets/img/heros/hoch/ruhetag.jpg") ;
}
body[data-pageslug="dahoam"][data-geoeffnet="false"]:not([data-tageszeit="vormittag"], [data-tageszeit="morgens"]) #firstview:before {
    background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.45) 43%, rgba(0,0,0,0.45) 80%, rgba(0,0,0,0.8) 100%);
}

/* + HEROS FLACH +++++++++++++ */

body[data-pageslug="speisekarte"] #firstview-small {
    background-image: url("/assets/img/heros/flach/speisekarte.jpg");
}
body[data-pageslug="kontakt"] #firstview-small {
    background-image: url("/assets/img/heros/flach/kontakt-hund.jpg");
}

body[data-pageslug="kontakt"] select {
     overflow:hidden;
 }

/* + FOOTER +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */


.totop-btn {

}
.totop-btn:hover {
    filter: brightness(1.1);
}
footer {
    background: var(--ColorBlueDark);
    text-align: left;
    white-space: nowrap;
}

footer * {
    color: #fff;
}
footer .row > div {
    padding-top: calc(var(--whiteBorderSpace) * 3);
    padding-bottom: calc(var(--whiteBorderSpace) * 3);
}
footer a.nav-link {
    display: inline-block;
    font-size: 18px;
}
footer .headline-3 {
    font-size: 36px;
    color: #fff;
}
footer .footer-nav > span,
footer .nav-link  {
    font-family: "Pirata One", Arial, sans-serif;
}
.footer-logo img {
    width: 50%;
    min-width: 95px;
}
.footer-social small {
    display: block;
}
.footer-social small span {
    opacity: .5;
}
footer a {
    text-decoration: none;
}

.icon.tripadvisor {
    fill: #fff;
    height: 28px;
    width: 28px;
    margin-top: 3.5px;
}



/* + MOBIL FIXED NAV +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

#mobil-nav {
    background: var(--ColorBlueDark);
    height: var(--MobileNavbarHeight);
    box-shadow: 0 0px 15px rgba(0,0,0,0.5);
}
#mobil-nav * {
    color: #fff;
    font-size: 11px;
}
#mobil-nav i {
    font-size: 26px!important;
    color: var(--ColorGold);
}

/* + SECTIONS +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

section {
    position: relative;
}
section:not(#oeffnungszeiten, #bier, #abholen, #wirtshaus-tl, #aktuelles, #pan, #anfahrt, #partner) {
    max-width: 1600px;
    margin: 0 auto;
}
#aktuelles,
#wirtshaus-tl,
#pan {
    background: var(--ColorGoldLightUltra);
}
section > div {
    position: relative;
}
#aktuelles img {
    width: 100%;
    height: auto;
}

.aktuelles-card {
    border: solid 1px var(--ColorGold)!important;
}
.aktuelles-card .headline-3 {
    margin-bottom: 2rem;
}
.aktuelles-card-body {
    max-height: 100px;
    overflow: hidden;
    position: relative;
    transition: max-height 0.5s ease;
}
.toggle-card-body-btn {

}

.fade-gradient {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.aktuelles-card-body.expanded .fade-gradient {
    opacity: 0;
}


* > p:last-of-type {
    margin-bottom: 0!important;
}
.mobile-square {
    position: relative;
}
.mobile-square:after {
    content: "";
    display: block;
    aspect-ratio: 1;
    margin-top: calc(var(--PadY) + 3rem);
}

.has-mobile-pad-top {
    padding-top: var(--PadY);
}


.section-image {
    position: absolute;
    width: 100%;
    height: calc(100vw + 5rem);
    background: silver no-repeat center center;
    background-size: cover;
    top: 0;
}

.section-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;       /* wie background-size: cover */
    object-position: center; /* wie background-position: center */
    opacity: 0;
    transition: opacity 2s ease-in-out; /* Fade-Dauer */
}

.section-image img.visible {
    opacity: 1;
}

/*
#wirtsleid .section-image {
    background-image: url("/assets/img/sections/maximator.jpg");
}
#wirtshaus .section-image {
    background-image: url("/assets/img/sections/wirtshaus.jpg");
}
#wirtsstube .section-image {
    background-image: url("/assets/img/sections/gaststube.jpg");
}


#biergarten .section-image {
    background-image: url("/assets/img/sections/augustiner_mass.jpg");
}

#wettersection .section-image {
    background-image: url("/assets/img/sections/tonnengewölbe.jpg");
}
#saal .section-image {
    background-image: url("/assets/img/sections/veranstaltungen.jpg");
}
#veranstaltungen .section-image {
    background-image: url("/assets/img/sections/kartln.jpg");
}
#speisen .section-image {
    background-image: url("/assets/img/sections/spargel_mit_schnitzel.jpg");
}
#stammtische_vereine .section-image {
    background-image: url("/assets/img/sections/stammtisch.jpg");
}
#jobs .section-image {
    background-image: url("/assets/img/sections/koch.jpg");
}
*/
#oeffnungszeiten {
    z-index: 1;
}

#oeffnungszeiten .section-image {
    background-image: url("/assets/img/sections/oeffnungszeiten.jpg");
    left: auto;
    right: 0;
    top: 0;
    mask-image: linear-gradient(to top,
    transparent 0%,
    black 30%,
    black 100%
    );
    -webkit-mask-image: linear-gradient(to top,
    transparent 0%,
    black 30%,
    black 100%
    );
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    z-index: 0;
}
#abholen .section-image {
    background-image: url("/assets/img/sections/schmankerl_fuer_dahoam.jpg");
    mask-image: linear-gradient(to bottom,
    black 0%,
    black 70%,
    transparent 100%
    );
    -webkit-mask-image: linear-gradient(to bottom,
    black 0%,
    black 70%,
    transparent 100%
    );
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    left: 0;
    top: 0;
}


#kundenstimmen .headline-2 {
    margin-top: 0;
}



.pan-hotels {
}
.pan-hotels h3 {

}
.pan-hotels .card {
    background: rgba(255,255,255,0.8);
}

/* + SLIDER +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

.slider-wrapper {
    overflow: hidden;
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}


.slider-wrapper {
    overflow: hidden;
    position: relative;
    max-width: 90%;
    margin: 0 auto;
    height: auto;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.slider-track {
    display: flex;
    transition: transform 0.6s ease;
    will-change: transform;
    height: 100%;
    width: 100%;
    pointer-events: auto;
}

.slider-item {
    flex: 0 0 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: 1rem;
    box-sizing: border-box;
    align-items: center;
}

.slider-item .logo {
    max-height: 120px;
    margin-bottom: 1rem;
}

.slider-dots {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    gap: 0.5rem;
    pointer-events: none;
}

.slider-dots button {
    width: 10px;
    height: 10px;
    border-radius: 50% !important;
    border: none;
    background: var(--ColorGoldLight);
    cursor: pointer;
    padding: 0;
    transition: all .5s;
    pointer-events: auto;
}

.slider-dots button.active {
    background: var(--ColorBlue);
}

.slider-nav {
    position: absolute;
    top: 50%;
    width: 100%;
    justify-content: space-between;
    transform: translateY(-50%);
    padding: 0 1rem;
    pointer-events: none;
}

.slider-nav button {
    background: transparent;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    pointer-events: auto;
    color: var(--ColorGold);
}
.quote {
    width: 100%;
    font-size: 20px;
    margin-bottom: 1rem;
}

/* + BRAUSPEZIALITÄTEN +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */


#biere {
    position: relative;
}
.mask-horizontal-fade {
    mask-image: linear-gradient(to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
    );
    -webkit-mask-image: linear-gradient(to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
    );
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}
#biere .slider-wrapper:before {
    content: "";
    position: absolute;
    background-size: contain;
    background: radial-gradient(circle at center, rgba(210, 210, 210, 0.3) 0%, transparent 70%) no-repeat center center;
    width: 100%;
    aspect-ratio: 1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    mix-blend-mode: luminosity;
}
#biere .slider-wrapper {
    width: 90%;
    margin-left: 5%;
}
.bier_foto_wrap {
    width: 85%;
    aspect-ratio: 5 / 7;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bier-foto {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.bier-beschreibung {
    height: 260px;
    margin: 0 -1rem;
}
#bier .slider-nav {
    position: absolute;
    top: 38%;
    width: 120%;
    justify-content: space-between;
    transform: translate(-50%, -50%);
    padding: 0 1rem;
    pointer-events: none;
    left: 50%;
}
#bier .slider-dots {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
    margin-top: 1rem;
    gap: 0.5rem;
    pointer-events: none;
}

#bier .headline-4 {
    color: #fff;
}


#bier .slider-dots > button {
    width: 30px;
    height: 30px;
    background-color: transparent!important;
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 0!important;
}

#bier .slider-dots button.active {
    transform: translateY(-5px) scale(1.1);
}

#bier .slider-dots > button:nth-of-type(1) {
    background-image: url("/assets/img/augustiner/etiketten/augustiner_lagerbier_hell.png");
}
#bier .slider-dots > button:nth-of-type(2) {
    background-image: url("/assets/img/augustiner/etiketten/augustiner_alkoholfrei.png");
}
#bier .slider-dots > button:nth-of-type(3) {
    background-image: url("/assets/img/augustiner/etiketten/augustiner_edelstoff.png");
}
#bier .slider-dots > button:nth-of-type(4) {
    background-image: url("/assets/img/augustiner/etiketten/augustiner_heller_bock.png");
}
#bier .slider-dots > button:nth-of-type(5) {
    background-image: url("/assets/img/augustiner/etiketten/augustiner_weissbier.png");
}
#bier .slider-dots > button:nth-of-type(6) {
    background-image: url("/assets/img/augustiner/etiketten/augustiner_pils.png");
}
#bier .slider-dots > button:nth-of-type(7) {
    background-image: url("/assets/img/augustiner/etiketten/augustiner_oktoberfestbier.png");
}
#bier .slider-dots > button:nth-of-type(8) {
    background-image: url("/assets/img/augustiner/etiketten/augustiner_maximator.png");
}
#bier .slider-dots > button:nth-of-type(9) {
    background-image: url("/assets/img/augustiner/etiketten/augustiner_dunkel.png");
}


/* + STÖRER +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */



#bier,
#abholen,
#oeffnungszeiten {
    background: var(--ColorBlueDark);
    color: #fff;
}

#bier .headline-2,
#abholen .headline-2,
#oeffnungszeiten .headline-2,
#bier .headline-3,
#abholen .headline-3,
#oeffnungszeiten .headline-3 {
    color: #fff;
}

#bier strong,
#abholen strong,
#oeffnungszeiten strong {
    color: var(--ColorGold)
}

/* + ÖFFNUNGSZEITEN +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

.oeffnungszeiten-live {
    background: var(--ColorGold);
    color: var(--ColorBlueDark);
}
.oeffnungszeiten-live {
    padding: 1rem;
    text-align: center;
    font-family: 'Pirata One', Arial, sans-serif;
    font-size: 24px;
}
#oeffnungszeiten .table tr td {
    padding: 0.75rem 1.25rem;
}
#oeffnungszeiten .table tr:not(:first-of-type) td {
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* feine Linien */
}
#oeffnungszeiten .table td:first-of-type {
    border-right: 1px solid rgba(255, 255, 255, 0.1); /* feine Linien */
}

#oeffnungszeiten .bg-highlight {
    background-color: rgba(255, 255, 255, 0.1); /* Highlight für aktuellen Tag */
}

body[data-saison="sommer"] .reservieren-btn {
    display: none!important;
}

#main-status-sup span {
    color: #fff;
}


/* + GOOGLE MAPS +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
#anfahrt {

}

#map-container {
    position: relative;
    width: 100%;
    height: 80vh;
}

#map-container .map {
    width: 100%;
    height: 100%;
}

#map-container .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #F3EFE7;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 10;
    text-align: center;
    padding: 1rem;
    box-sizing: border-box;
}

#map-container .overlay button {
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    cursor: pointer;
}



/* + WETTER WIDGET +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */


#weather-widget {

}
#weather-widget .icon {
    font-size: 55px;
}
#weather-widget .details {
    display: flex;
    flex-direction: column;
}
#weather-widget .details span {
    color: #333;
}
#weather-description {
    font-weight: 600;
    width: 100%;
    white-space: nowrap;
}
#weather-opened {
    color: var(--ColorBlue)!important;
    font-weight: 600;
    white-space: nowrap;
}
#weather-details > div > span:first-of-type {
    display: inline-block;
    width: 120px;
}
#weather-details > div > span:last-of-type {
    font-weight: 600;
}
.weather-more-toggle {
    cursor: pointer;
}
.weather-more-toggle:after {
    content: "Mehr anzeigen ...";
}
.weather-more {
    display: none!important;
}
.show-more-weather .weather-more {
    display: block!important;
}
.show-more-weather .weather-more.d-flex {
    display: flex!important;
}
.show-more-weather .weather-more-toggle:after {
    content: "Weniger anzeigen ...";
}

#weather-preview {
    border-top: solid 1px var(--ColorGoldLight);
}
#weather-preview .preview {
    border-right: solid 1px var(--ColorGoldLight);
    min-height: 80px;
    padding: 0.5rem;
    font-size: 14px;
}
#weather-preview .preview:last-of-type {
    border-right: none;
}
.preview-temp {
    font-size: 16px;
}
.preview-temp > span {
    color: var(--ColorGold);
    font-weight: 600;
}
.preview-icon {
    font-size: 25px;
}

.btn {
    min-width: 240px;
}
.karte-container .btn {
    min-width: auto;
}
/* + KONTAKT +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

#bestellung-msg {
    color: var(--ColorBlue);
    font-weight: 600;
    font-size: 18px;
}
#bestellung-msg:not(:empty) ~ * {
    display: none;
}
.hp-field { display: none; }

#message {
    min-height: 12em;
}
#kontakt-short-links {
    display: none!important;
}

/* + SPEISEKARTE +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

#partner {
    padding: var(--PadY) 0;
    margin-bottom: calc(var(--PadY) * -1) !important;
    background: var(--ColorGoldLightUltra);
    margin-top: 100px !important;
    overflow: hidden;
}

.speisekarte-tab.active {
    font-weight: bold;
}


.speisekarten-tabs {
    overflow-x: auto;
    white-space: nowrap;
    border-bottom: 1px solid #ddd;
    user-select: none;
    color: var(--ColorBlue);
    scrollbar-width: none;
}

.speisekarte-tab {
    display: inline-block;
    min-width: 230px;
    padding: 0.8rem 1.5rem;
    text-align: center;
    cursor: pointer;
    border-right: 1px solid #ddd;
    transition: background 0.3s;
    text-transform: uppercase;
    font-weight: 600;
}
.speisekarte-tab:last-of-type {
    border-right: none;
}

.speisekarte-tab:hover {
    background: #f7f7f7;
}

.speisekarte-tab.active {
    background: var(--ColorBlue);
    color: #fff;
}

.tab-container {
    overflow: hidden;
}

.speisekarten-tabs {
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.speisekarten-tabs::-webkit-scrollbar {
    display: none;
}

.tab-scroll-btn {
    width: 40px;
    background: linear-gradient(to right, var(--ColorBGLight) 50%, transparent);
    color: var(--ColorGold);
    z-index: 10;
    text-align: start;
    padding: 8px 0 !important;
    font-size: 20px;
}

.tab-scroll-btn.right {
    background: linear-gradient(to left, var(--ColorBGLight) 50%, transparent);
    text-align: end;
}

.speisekarten-tabs.justify-content-center {
    justify-content: center;
}




.speisekarten-wrapper {
    overflow: hidden;
    width: 100%;
    margin-top: 2rem;
}
#speisekarten-output {
    --whiteBorderSpace: 0px;
}
.speisekarten-bodies {
    display: flex;
    transition: transform 0.3s ease;
}

.karte-container {
    flex: 0 0 100%;
    box-sizing: border-box;
}
.produkt-info {
    color: var(--ColorBlue);
    font-size: var(--FontsizeSecond);
}

.karte-page {
    --kartenBorderSpace: 5mm;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    margin: 0;
    box-shadow: none;
    position: relative;
    background:transparent;
    padding: 2rem 1rem;
    font-family: 'PT Sans Narrow', Arial, sans-serif;
    --FontsizeTitel: 17px;
    --FontsizeSecond: 16px;
}

/* IDENTISCH ZU MEDIAQUERY MD */
body.generate-pdf .karte-page {
    --kartenBorderSpace: 5mm;
    width: 210mm;
    height: 297mm;
    padding: 20mm 20mm;
    box-sizing: border-box;
    margin: 0 auto 20px auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    background: #fff;
    position: relative;
}


body.pdf-export .karte-page .karte-border {
    content: "";
    position: absolute;
    left: var(--kartenBorderSpace);
    top: var(--kartenBorderSpace);
    width: calc(100% - var(--kartenBorderSpace) * 2);
    height: calc(100% - var(--kartenBorderSpace) * 2);
    border: solid 2px var(--ColorGoldDark);
    pointer-events: none;
}


.karte-page img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 10px;
    pointer-events: none;
}

.karte-page .headline-2 {
    color: var(--ColorBlue);
}

.karte-page .headline-2-sup {
    text-align: center;
    font-size: 1rem;
}

.karte-page[data-karte-id="getraenke"][data-page-index="2"] .produkt,
.karte-page[data-karte-id="getraenke"][data-page-index="3"] .produkt,
.karte-page[data-karte-id="getraenke"][data-page-index="4"] .produkt {
    margin-bottom: 15px;
}
.karte-page[data-page-index="1"] .headline-2 {
    margin-bottom: 3rem!important;
}

.karte-page[data-karte-id="biergarten"][data-page-index="1"] .headline-2 {
    margin-bottom: 1rem!important;
}
.karte-page[data-karte-id="biergarten"][data-page-index="1"] .headline-3 {
    margin-top: 1rem!important;
}
.karte-page[data-karte-id="getraenke"][data-page-index="4"] .headline-2 {
    margin-bottom: 15px;
    margin-top: 0;
}
.karte-page[data-karte-id="getraenke"][data-page-index="4"] .headline-3 {
    margin-bottom: 15px;
    margin-top: 1rem;
}
.karte-page[data-karte-id="getraenke"][data-page-index="2"] .headline-2 {
    margin-bottom: 15px;
}



.allergene-card {
    border: solid 3px var(--ColorBlue)!important;
    box-shadow: none!important;
}

.allergene-card .headline-4 {
    font-size: 20px;
    font-family: "Pirata One", Arial, sans-serif;
    font-weight: 400;
    line-height: 1.0;
    color: var(--ColorBlue);
    margin: 5px 0px;
}
.allergene-card p {
    line-height: 1;
    font-size: 11px;
}
.karte-page .headline-3 {
    text-align: center;
    font-size: 36px;
    color: var(--ColorBlue);
    margin-bottom: 25px;
    margin-top: 3rem;
}
.karte-page > .headline-3:first-of-type {
    margin-top: 0;
}
#weather-details .small {
    font-size: 0.7rem;
    padding-top: 10px;
}

.karte-page .product-title {
    color: var(--ColorBlue);
    font-size: var(--FontsizeTitel);
    font-weight: 600;
    text-transform: uppercase;
}

.karte-page .product-title .badge {
    font-family: "Open Sans", Arial, sans-serif;
    text-transform: uppercase;
    font-weight: 400;
    color: #fff;
    background: var(--ColorGold)!important;
    border-radius: 0;
    border: none;
    padding: 2px 4px;
    font-size: 11px;
    vertical-align: bottom;
}

.page-number {
    display: none;
}


.produkt {
    position: relative;
    margin-bottom: 20px;
}
.produkt > div:first-of-type{

    /* border-bottom: dotted 2px #e9e9e9; */
}
.allergenekurz {
    font-weight: 400;
    font-size: 10px;
    margin-left: 4px;
}

.produkt.isShort .beschreibung {
    display: block;
}
.beschreibung,
.produkt-zeile,
.topRow {
    line-height: 18px;
    margin-bottom: 0.1rem;
}
.produkt.oneliner .topRow {

}
.produkt-zeile:has(> div:empty + div:empty) {
    height: 0px!important;
}

.produkt.isShort .produkt-zeile:has(> div:empty + div:empty) {
    height: 20px!important;
}
.produkt-zeile {
    color: var(--ColorBlue);
    font-size: var(--FontsizeSecond);
    justify-content: space-between;
}
.beschreibung {
    color: var(--ColorBlue);
    font-size: var(--FontsizeSecond);
}
.shortDesc {
    font-weight: 400;
    display: none;
    vertical-align: top;
}
.karte-page .product-title .shortDesc {
    color: var(--ColorBlue);
    font-size: var(--FontsizeSecond);
    text-transform: none;
}
.karte-page .inhalt,
.karte-page .preis {
    white-space: nowrap;
}
.karte-page .preis {
    color: var(--ColorGold);
    font-size: var(--FontsizeSecond);
    font-weight: 600;
}

/* Order-Control – –/+ Buttons */
.order-control button {
    width: 24px;
    height: 24px;
    padding: 0;
    line-height: 23px;
}

.order-control .order-qty {
    min-width: 20px;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
}

.minus-btn,
.plus-btn {
    padding: 5px;
}





/* PDF-Buttons */
.pdf-buttons {
    margin-top: 1rem;
    text-align: center;
}

.pdf-buttons .btn {
    margin: 0 0.5rem;
}

.generate-pdf {
    display: none;
}
body[data-session="true"] .generate-pdf {
    display: inline-block;
}
.pdf-buttons-admin {
    display: none;
}
body[data-session="true"] .pdf-buttons-admin {
    display: block;
}

.karte-page[data-karte-id="abo"] .headline-2 {
    line-height: 35px;
    margin-bottom: 2rem !important;
}

.abo-sub {
    font-size: 16px;
    color: var(--ColorGold);
    font-family: "Open Sans", Arial, sans-serif;
    font-weight: 600;
}

/* + Bestellübersicht (Warenkorb) +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

.order-summary {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0 auto;
    background: #f8f9fa;
    padding: 1rem;
    border-top: 1px solid #ddd;
    z-index: 1050;
    transform: translateY(100%);
    transition: all .4s ease-in-out;
}
body.bestellmodus .order-summary {
    transform: translateY(calc(var(--MobileNavbarHeight) * -1));
}


#pdf-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 24px;
    text-align: center;
}


body.pdf-export .karte-page {
    /* padding: 20mm 35mm; */
    padding: 20mm 20mm;
}

body.pdf-export .no-pdf {
    display: none !important;
}



body.pdf-export #pdf-temp-container .karte-page:nth-of-type(2) .produkt {
    margin-bottom: 14px;
}






/* + CHRONIK +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */


.timeline {
    position: relative;
    border-left: 1px solid var(--ColorGold);
    margin-left: 1.6rem;
    padding-left: 2.0rem;
}
.timeline-event {
    position: relative;
    margin-bottom: 2rem;
}
.timeline-event:last-of-type {
    margin-bottom: 0;
}
/*
.timeline-event::before {
    content: "";
    position: absolute;
    left: -2.25rem;
    top: 0.7rem;
    width: 0.7rem;
    height: 0.7rem;
    background-color: #fff;
    border-radius: 50%;
}
 */

.timeline-event::before {
    content: "";
    position: absolute;
    left: -3rem;
    top: 0rem;
    transform: none;
    width: 2rem;
    height: 2rem;
    background: var(--ColorGoldLightUltra) url(/assets/img/augustiner/augustiner_pin.png) no-repeat center center;
    background-size: contain;
    border: solid 5px var(--ColorGoldLightUltra);
}




.timeline-date {
    font-size: 20px;
    font-family: "Pirata One", Arial, sans-serif;
    color: var(--ColorBlue);
}




/* + IMPRESSUM, DATENSCHUTZ, JUGENDSCHUTZ +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

body[data-pageslug="impressum"] p {
    margin-bottom: 2rem;
}

body[data-pageslug="datenschutz"] h1 {
    font-size: 45px;
}
body[data-pageslug="datenschutz"] h2 {
    margin-bottom: 2rem;
    margin-top: 3rem;
}
body[data-pageslug="datenschutz"] .headline-3 {
    font-size: 35px;
}
body[data-pageslug="datenschutz"] h3 {
    margin-bottom: 1rem;
    margin-top: 2rem;
}
body[data-pageslug="datenschutz"] h4 {
    font-size: 16px;
    font-weight: 600;
}


/* + SCROLLTOP BIERKRUG +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++


#bierglas-anzeige {
    position: fixed;
    right: 10px;
    bottom: 10px;
    z-index: 50;

    transform-origin: right bottom;
    transform: scale(0.25);
    cursor: pointer;
    transition: opacity .3s ease;
    opacity: 0;
    pointer-events: none;
}

#bierglas-anzeige.show-glas {
    opacity: 1;
    pointer-events: auto;
}



#bierglas-inner {
    position: absolute;
    bottom: 37px;
    left: 44px;
    height: 194px;
    width: 123px;
}
#bierglas-bier {
    position: absolute;
    bottom: 0;
    left: 0;
    height:100%;
    width: 100%;
    transition: height .5s linear;
    z-index: 1;
    mix-blend-mode: multiply;
}
#bierglas-fluessigkeit {
    position: absolute;
    bottom: 0;
    left: 0;
    height:100%;
    width: 100%;
    background: #d59000;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    filter: blur(3px);
}
#bierglas-schaum {
    position: absolute;
    top: -44%;
    left: -1%;
    height: 50%;
    width: 102%;
    z-index: -1;
}
#bierglas-schaum img {
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
#bierglas-basis {
    position: relative;
    z-index: 1;
    opacity: .7;
    filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, .5)) brightness(1.2);
}
#bierglas-highlights {
    position: absolute;
    z-index: 3;
    left: 0;
    top: 0;
}

#bierglas-label {
    position: absolute;
    bottom: 55px;
    left: 44px;
    width: 123px;
    text-align: center;
    z-index: 4;
    font-family: "Lobster", "Roboto Medium", Arial, sans-serif;
    color: #0f2952;
    font-size: 60px;
    transition: opacity .2s linear;
    opacity: 0;
    transform: rotate(-15deg);
}
#bierglas-label:after {
    content: '↑';
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 123px;
    color: var(--ColorBlue);
    font-size: 1.7em;
    transform: rotate(15deg) translateX(30px);
}
#bierglas-anzeige:hover #bierglas-label,
#bierglas-anzeige.show-label #bierglas-label {
    opacity: 1;
}
*/
/* +  +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */



.card {
    border-radius: 0;
    border: none;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.1);
}
.form-select,
.form-control {
    border-radius: 0;
    padding: .6rem;
}
.alert {
    border-radius: 0;
}

/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ////////////////////////////////////////////////// MEDIA QUERYS ////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
✅ Layout Mediaquerys > Bootstrap 5 */

/* Small (SM) – ≥576px */
/* Stile für kleine Bildschirme (z. B. große Smartphones) */
@media (min-width: 576px) {

    #bierglas-anzeige {
        transform: scale(0.35);
    }
}

/* Medium (MD) – ≥768px */
/* Stile für mittlere Bildschirme (z. B. Tablets) */
@media (min-width: 768px) {


}

/* Large (LG) – ≥992px */
/* Stile für größere Bildschirme (z. B. kleine Laptops) */
@media (min-width: 992px) {

    :root {
        --whiteBorderSpace: 25px;
        --MobileNavbarHeight: 0px;
        --PadY: 100px;
    }
    p {
        line-height: 32px;
    }
    .mobile-square:after {
        display: none;
    }
    #bier .slider-nav {
        width: 100%;
    }
    body.bestellmodus .order-summary.order-summary {
        transform: translateY(0)
    }
    .headline-1 {
         font-size: 72px;
     }
    .headline-2 {
        font-size: 50px;
        margin: 1rem 0 2rem;
    }
    .section-image {
        width: 50%;
        height: 100%;
        top:0;
        bottom: initial;
    }
    section.section-right .section-image {
        left: 0;
    }

    section.section-left .section-image {
        right: 0;
    }
    .speisekarten-tabs {
        scrollbar-width: thin;
        scrollbar-width: none;
    }

    .timeline-event::before {
        left: 50%;
        top: -3rem;
        transform: translateX(-50%);
    }
    .timeline {
        border-top: 1px solid var(--ColorGold);
        border-left: none;
        padding: 0;
        margin: 0;
        padding-top: 2rem;
    }

    .karte-page {
        --kartenBorderSpace: 5mm;
        width: 210mm;
        height: 297mm;
        padding: 20mm 20mm;
        box-sizing: border-box;
        margin: 0 auto 20px auto;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        background: #fff;
        position: relative;
    }
    #speisekarten-output {
        padding: 1rem;
    }
    .karte-container {
        flex: 0 0 100%;
        box-sizing: border-box;
        padding: 1rem;
    }
    .tea-names {
        line-height: 2;
    }
    .karte-container.border-gold:after {
        display: none;
    }
    #main-status-kueche {
        font-size: 26px;
    }
    #oeffnungszeiten .section-image {
        background-image: url("/assets/img/sections/oeffnungszeiten.jpg");
        left: auto;
        right: 0;
        mask-image: linear-gradient(to right,
        transparent 0%,
        black 30%,
        black 100%
        );
        -webkit-mask-image: linear-gradient(to right,
        transparent 0%,
        black 30%,
        black 100%
        );
        mask-size: 100% 100%;
        -webkit-mask-size: 100% 100%;
        mask-repeat: no-repeat;
        -webkit-mask-repeat: no-repeat;
        z-index: 0;
    }
    #abholen .section-image {
        background-image: url("/assets/img/sections/schmankerl_fuer_dahoam.jpg");
        mask-image: linear-gradient(to right,
        black 0%,
        black 70%,
        transparent 100%
        );
        -webkit-mask-image: linear-gradient(to right,
        black 0%,
        black 70%,
        transparent 100%
        );
        mask-size: 100% 100%;
        -webkit-mask-size: 100% 100%;
        mask-repeat: no-repeat;
        -webkit-mask-repeat: no-repeat;
        left: 0;
        top: 0;
    }

    .karte-page:after {
        display: block;
    }



    .bg-hopfen:before {
        left: 0;
        bottom: 0;
        width: 30vw;
        height: 30vw;
    }
    .bg-hopfen2:before {
        left: -10vw;
        top: 0;
        width: 40vw;
        height: 35vw;
    }

    .bg-hopfen2:after {
        right: 0;
        bottom: -8vw;
        width: 40vw;
        height: 35vw;
    }
    .bg-hopfen3:before {
        left: 50%;
        top: 50%;
        width: 70vw;
        height: 60vw;
        transform: translate(-50%, -50%);
        max-height: 1400px;
    }
    .bg-hopfenfeld:before {
        left: 50%;
        top: 30%;
        width: 70vw;
        height: 60vw;
        transform: translate(-50%, -50%);
        max-width: 1000px;
    }
    .bg-kutsche:before {
        left: 0;
        top: -10vw;
        width: 40vw;
        height: 20vw;
    }
    .bg-wappen-pan:before {
        left: 50%;
        top: 50%;
        width: auto;
        height: 70%;
        transform: translate(-50%, -50%);
    }

    .headline-1-sup {
        font-size: 20px;
    }
    .headline-2-sup {
        font-size: 20px;
    }

    .quote {
        width: 70%;
    }

    .footer-social small {
        display: block;
        text-align: right;
    }
    .footer-social small span {
        float: right;
    }
    .bier-beschreibung {
        height: auto;
    }
    .bier_foto_wrap {
        width: 75%;
    }
    .produkt {
        white-space: nowrap;
    }
    .shortDesc {
        display: inline;
    }
    .produkt.isShort .beschreibung {
        display: none;
    }


    #karte-biergarten .karte-page:nth-of-type(3) .produkt {
        margin-bottom: 14px;
    }
}

/* Extra Large (XL) – ≥1200px */
/* Stile für große Bildschirme (z. B. Desktops) */
@media (min-width: 1200px) {

    #bierglas-anzeige {
        transform: scale(0.45);
    }
    .headline-1 {
        font-size: 72px;
    }
    .headline-2 {
        font-size: 62px;
    }
    .bier_foto_wrap {
        width: 65%;
    }
}

/* Extra Extra Large (XXL) – ≥1400px */
/* Stile für sehr große Bildschirme (z. B. große Monitore) */
@media (min-width: 1400px) {

    .headline-1 {
        font-size: 80px;
    }
    .headline-2 {
        font-size: 67px;
    }
}


/* Höhenabhönig */
@media (min-height: 750px) {

    .firstview-content {
        margin-bottom: 5vh;
    }
}

/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
✅ Basis-Gerätetypen (Smartphone, Tablet, Laptop, Desktop) */

/* Smartphones: Kleine Touchscreens */
/* Stile für Smartphones */
@media (max-width: 599px) and (pointer: coarse) {

}

/* Tablets: Mittlere Touchscreens */
/* Stile für Tablets */
@media (min-width: 600px) and (max-width: 1024px) and (pointer: coarse) {

}

/* Laptops: Mittelgroße Bildschirme mit Maus/Touchpad */
/* Stile für Laptops */

@media (min-width: 1025px) and (max-width: 1400px) and (pointer: fine) {

}

/* Desktops: Große Bildschirme mit Maus */
/* Stile für Desktop-PCs */
@media (min-width: 1401px) and (pointer: fine) {

}


/*  /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
✅ Orientierung des Geräts (Portrait vs. Landscape) */

/* Hochformat (z. B. Smartphone hochkant) */
/* Stile für Portrait-Modus */
@media (orientation: portrait) {

}

/* Querformat (z. B. Tablet/Laptop quer) */
/* Stile für Landscape-Modus */
@media (orientation: landscape) {

}



/*  /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
✅ Eingabegeräte (Touchscreen, Maus, Stift) */

/* Geräte mit präziser Eingabe (Maus, Trackpad) */
/* Stile für Geräte mit Maus/Trackpad */
@media (pointer: fine) {


}

/* Geräte mit grober Eingabe (Finger, Stylus) */
/* Stile für Touchscreens (Finger/Stift) */
@media (pointer: coarse) {


}

/* Geräte, die Hover unterstützen (Maus) */
/* Stile für Hover-fähige Geräte */
@media (hover: hover) {

    .footer-social small span.wbst-link:hover {
        opacity: 1;
    }
    .social-icons a:hover i,
    footer a:hover {
        color: var(--ColorGold)!important;
    }
    .footer-social small span.wbst-link a:hover {
        color: #fff!important;
    }
    .icon.tripadvisor:hover {
        fill: var(--ColorGold);
    }

}


#karte-wildwochen .karte-page .product-title {
    color: #008439;
}
#karte-wildwochen .karte-page .product-title .shortDesc {
    color: #000;
}
#karte-wildwochen .beschreibung,
#karte-wildwochen .inhalt,
#karte-wildwochen .preis {
    color: #000;
}

.star-spacer {
    border-bottom:solid 1px var(--ColorGold);
    margin: 3rem auto;
    text-align:center;
    color:var(--ColorGold);
}
.star-spacer > span {
    background: var(--ColorBGLight);
    transform: translate(-50%, -9px);
    letter-spacing: 2px;
    position: absolute;
    display: block;
    left: 50%;
    padding: 0 10px;
    line-height: 1;
}
#aktuelles-area .star-spacer {
    margin: 1.5rem 0;
}
#aktuelles-area .star-spacer > span {
    background:#f9f7f3;
}

#aktuelles-area > div {
    border: solid 1px var(--ColorGold);
    background-color: #f9f7f3;
    padding:30px 15px;
    max-width:800px;
    margin:0 auto;
}
@media (min-width: 992px) {
    .star-spacer > span {
        background: #fff;
    }
}


.karte-page[data-karte-id="tageskarte"] {
    .headline-2,
    .headline-3 {
        margin: 0!important;
    }
}