:root {
    --backgroud-color: #030303;
    --dark-grey: #121212;
    --light-grey: #EAEAEA;
    --gold: #957D4A;
    --font-color: #191919;
    --font-regular: "helvetica-neue-lt-pro", 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-bold-cond: "helvetica-neue-lt-pro-cond", "Helvetica Neue Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
    /* --font-bold: "mundial", 'Helvetica Neue', Helvetica, Arial, sans-serif; */
    --font-bold: "helvetica-neue-lt-pro", 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;
    --font-weight-bolder: 700;
    --letter-spacing-bolder: 0.03em;
    --font-size-headline: 108px;
    --line-height-headline: 108px;
}

*, *::before, *::after {
    box-sizing: border-box;
}

a{
    color:#EAEAEA;
}

[id] {
    scroll-margin-top: 80px;
}

*{
    margin:0;
    padding:0;
    border:0;
    outline:0;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    *behavior: url(boxsizing.htc);
    font-family: var(--font-regular);
}

html,body{
    font-family: var(--font-regular);
    font-size:18px;
    font-weight:var(--font-weight-regular);
    background:var(--backgroud-color);
    background-size:auto 100%;
    color:var(--font-color);
    min-height:100%;
    position:relative;
    height:100%;
    line-height:27px;
    /* overflow-x:hidden; */
}
body{
    padding-top:70px;
}

section{
    max-width:1980px;
    margin:auto;
}


/* ALtersverifizierung */

#dm-age-verification-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    text-align: center;
    z-index: 9999;
    display:none;
}
#dm-age-verification-overlay .dm-container {
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 1760px;
    width: 100%;
    height:auto;
}
#dm-age-verification-overlay .dm-logo {
    top: -2px;
}


.dm-age-boxes {
    display: flex;
    gap: 40px;
    margin-bottom: 20px;
}


.dm-box button {
    background: #fff;
    color: #000;
    font-size: 30px;
    line-height:33px;
    padding: 30px 30px;
    width: 260px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    font-family: var(--font-bold-cond);
}

.dm-box button:hover {
    background: #957D4A;
    color: #fff;
}

.dm-box button strong {
    font-size: 60px;
    line-height: 60px;
    font-family: var(--font-bold-cond);
    margin-bottom: 10px;
    display:block;
}

.dm-info-text {
    max-width: 560px;
    margin: 20px auto 100px;
    color:var(--light-grey);
}
.dm-icons {
    display: flex;
    justify-content: center; /* optional: zentriert die Bilder horizontal */
    align-items: center;     /* optional: vertikal mittig */
    gap: 20px;               /* optional: Abstand zwischen den Bildern */
}
.dm-icons img {
    height: 90px;
    width: auto;
    display: block; /* das ist okay, aber nicht zwingend nötig hier */
}


/* Header Styles */
/* Header Grundlayout */
.dm-header {
    background-color: #000;
    border-bottom: 2px solid #957D4A;
    position: fixed;
    top: 0;
    z-index: 1000;
    height: 70px;
    width:100%;
}


/* Warenkorb-Icon im Header */
.dm-header .dm-container {
    display: flex;
    align-items: center;
}
.dm-cart-icon[hidden] { display: none !important; }

.dm-cart-icon {
    margin-right: 14px;          /* sitzt links von den Social Icons */
    background: transparent;
    border: none;
    color: #fff;                 /* passend zu deinem weißen Header-Logo */
    position: relative;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    line-height: 1;
    margin-top:3px;
}
.dm-cart-icon:hover svg { color: #957D4A; }
.dm-header .dm-cart-icon:hover svg { color: #ffffff; }

.dm-footer-socials a:hover .cls-1{
    fill:#957D4A;
}

.dm-footer-socials svg{
    height:25px;
    vertical-align: middle;
}


.dm-cart-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #e11d48;        /* Akzentfarbe (rot/pink) */
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* falls dein Header auf hellen Hintergrund wechselt (Mobile), kannst du die Farbe überschreiben */
@media (max-width: 900px){
    .dm-cart-icon { color: #1a1a1a; }
    .dm-header .dm-cart-icon { color: #ffffff; }
}

.dm-container {
    max-width: 1760px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;      /* vertikale Zentrierung */
    justify-content: space-between;
    height: 100%;
}
.dm-logo {
    width: 240px;
    height: 150px;
    border: 2px solid var(--gold);
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    top: 39px; /* ragt 110px unter den Header hinaus */
    z-index: 10;
    flex-shrink: 0;
}
.dm-logo img {
    width:180px;
    height:auto;
    display:block;
}
.dm-logo {
    margin-right: 40px;
}

/* Navigation */
.dm-nav {
    flex: 1;
    display: flex;
    max-width: calc(100% - 340px); /* 260px entspricht Breite des Logos */
}
.dm-nav ul {
    display: flex;
    justify-content: space-between;
    /* width: 100%; */
    max-width: calc(100% - 40px);
    list-style: none;
}

.dm-nav ul li {
    position: relative;
    padding: 0 60px 0 0;
}

.dm-nav ul li a {
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    font-size: 1rem;
    padding: 20px 0;
    display: block;
    line-height: 1.2;
    transition: color 0.3s;
}

.dm-nav ul li a:hover {
    color: #957D4A;
}
.dm-header .dm-footer-socials img{
    height:25px;
}
/* Submenu */
.dm-submenu-wrapper {
    position: relative;
}

.dm-submenu-area {
    position: absolute;
    top: 50px;
    left: 0;
    padding-top: 30px; /* Hover-Puffer */
    display: none;
    z-index: 2000;
}

.dm-submenu {
    background-color: #111;
    border: 2px solid #957D4A;
    padding: 20px;
    border-radius: 10px;
    width: 640px; /* feste Breite */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
}

.dm-submenu ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 20px;
}

.dm-submenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dm-submenu ul li {
    padding: 5px 0;
}

.dm-submenu ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 0.9rem;
    line-height:1.5em;
    padding: 5px 0;
}

.dm-submenu ul li a:hover {
    color: #957D4A;
}

.dm-submenu--two-column{
    width:280px;
}

.dm-submenu--two-column ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 20px;
}
.dm-submenu--one-column{
    width:180px;
}

.dm-submenu--one-column ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Hover Aktivierung */
.dm-submenu-wrapper:hover .dm-submenu-area,
.dm-submenu-area:hover {
    display: block;
}


.dm-submenu-wrapper:nth-child(4) .dm-submenu-area,
.dm-submenu-wrapper:nth-child(5) .dm-submenu-area {
    left: auto;
    right: -20px;
}

.dm-submenu-wrapper:nth-child(4) .dm-submenu-area {
    right: -60px;
}


/* Slider Styles */
.dm-slider {
    position: relative;
    width: 100%;
    height: calc(100vh - 70px);
    overflow: hidden;
}

.dm-slide-track {
    display: flex;
    height: 100%;
    transition: transform 0.8s ease;
    will-change: transform;
}

.dm-slide {
    flex: 0 0 100%;
    height: 100%;
    display: flex;
    position: relative;
}

/* Sonderfall: erster Slide */
.dm-slide.first-slide {
    flex-direction: row-reverse;
}

.dm-slide-image {
    flex: 1.85;
    background-size: cover;
    background-position: center;
    position: relative;
}

.dm-slide-text {
    flex: 1;
    display: flex;
    justify-content: center;
    flex-direction: column;
    color: white;
}

.dm-slide-text-left {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    padding: 40px;
    color: white;
    background: transparent linear-gradient(180deg, #85754E 0%, #433B2700 100%) 0 0 no-repeat padding-box;
}

.dm-slide .dm-slide-text {
    position: absolute;
    bottom: 40px;
    right: 40px;
    border-radius: 8px;
    flex: unset;
}

.dm-slide-text-left h2 {
    font-size: var(--font-size-headline);
    line-height: var(--line-height-headline);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-bold-cond);
    margin: 0;
    margin-bottom:20px;
}
.dm-slide-text-left h2 + p {
    font-size: 36px;
    line-height: 40px;
    font-weight: var(--font-weight-bold);
    font-family: var(--font-bold-cond);
    margin: 0;
}
.dm-slide-text h3 {
    font-size:30px;
    line-height: 30px;
}

/* Buttons */
.dm-slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.5);
    color: #fff;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    z-index: 10;
    border-radius: 5px;
    height:42px;
    width:42px;
    text-align: center;
    line-height: 42px;
}
.dm-slider-btn::before {
    content: '';
    display: inline-block;
    width: 15px;
    height: 15px;
    border-right: 3px solid #FCFBF9;
    border-bottom: 3px solid #FCFBF9;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
}
.dm-slider-btn.prev::before {
    transform: translateY(-50%) rotate(135deg);
    right: 10px;
}


.dm-slider-btn.prev {
    left: 20px;
}

.dm-slider-btn.next {
    right: 20px;
}



/* Brauerei Section Styles */

.dm-section-brauerei {
    background-color: #000;
    color: #fff;
    padding: 40px 40px;
}
.dm-section-title {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
}

.dm-section-title hr {
    flex: 1;
    min-width: 40px;   /* wichtig */
    border: none;
    border-top: 2px solid #fff;
    margin: 0;
}

.dm-section-title span {
    font-size: 30px;
    line-height: 1.2;  /* nicht 30px */
    font-family: var(--font-bold-cond);
    text-align: center;
}


.dm-text-column h2 {
    font-size: var(--font-size-headline);
    line-height: var(--line-height-headline);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-bold-cond);
    margin-bottom: 10px;
    hyphens: manual;        /* nur manuelle Trennstellen (­) */
    word-break: keep-all;   /* keine Wort-Zerstückelung */
    overflow-wrap: normal;
}

.dm-text-column h3 {
    font-size: 36px;
    font-weight: var(--font-weight-bold);
    font-family: var(--font-bold-cond);
    line-height: 40px;
    margin-bottom: 20px;
}

.dm-text-column h2,
.dm-text-column h3,
.dm-text-column p {
    overflow-wrap: break-word;
    word-break: break-word;
}

.dm-text-column p {
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 20px;
}

.dm-btn-primary {
    background-color: #fff;
    color: #000;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    cursor: pointer;
    font-weight: var(--font-weight-bold);
    font-size:22px;
    line-height:22px;
    display: inline-block;          /* verhindert volle Breite */
    max-width: max-content;         /* passt sich Inhalt an */
    text-decoration: none;
    text-transform: uppercase;

}

.dm-btn-primary:hover {
    background-color: #957D4A;
    color: #fff;
    border-color: #957D4A;
}

.basketFooter .dm-btn-primary:hover,
.dm-glasses-section > div > .dm-btn-primary:hover{
    border-color: #957D4A;
}

.dm-image-column {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dm-placeholder {
    background-color: magenta;
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    font-weight: bold;
}

/* Story Section Styles */

.dm-section-story {
    background-color: #000;
    color: #fff;
    padding: 40px 40px;
}





.dm-section-content {
    display: flex;
    gap: 40px;
    max-width: 1760px;
    margin: 0 auto;
    align-items: stretch; /* wichtig für gleiche Höhe */
    align-items: center;
}

.dm-image-column {
    flex: 1;
    display: flex;
    align-items: stretch;
}
.dm-image-column .dm-placeholder,
.dm-image-column img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* nur bei <img> sinnvoll */
    display: block;
}
.dm-image-column .dm-placeholder {
    display: flex!important;
    justify-content: center;
    align-items: center;
}
.dm-section-brauerei .dm-text-column,
.dm-section-story .dm-text-column {
    width: 560px;
    flex-shrink: 0;
}





.dm-text-column p {
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 20px;
}

.dm-btn-primary {
    background-color: #fff;
    color: #000;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    cursor: pointer;
    font-weight: bold;
}

.dm-btn-primary:hover {
    background-color: #957D4A;
    color: #fff;
}


/* Fanshop Section Styles */

.dm-section-fanshop {
    background-color: #000;
    color: #fff;
    padding: 40px 40px;
}




.dm-fanshop-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 1760px;
    margin: 0 auto;
}

.home .dm-fanshop-grid {
    align-items: center;
}
#ig-feed-wrap-1{
    max-width:1790px;
    margin:auto;
}
.wpsr-ig-post{
    height:100%;
}
#ig-feed-wrap-1 .dm-fanshop-item {
    display: flex;
    flex-direction: column;    /* Elemente untereinander */
    justify-content: center;   /* vertikal zentrieren */
    align-items: flex-start;   /* horizontal: linksbündig */
    height: 100%;              /* damit sich die Zentrierung an der Containerhöhe orientiert */
}
#ig-feed-wrap-1 .dm-fanshop-item h4,
.home .dm-fanshop-grid h4 {
    color: var(--gold);
    font-size: 24px;
}
#ig-feed-wrap-1 .dm-fanshop-item h2,
.home .dm-fanshop-grid h2 {
    margin-top:0;
}


.dm-fanshop-item .dm-placeholder {
    background-color: magenta;
    width: 100%;
    aspect-ratio: 1 / 1; /* quadratisch */
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 1.5rem;
    height: auto !important;
}

.dm-fanshop-item h2 {
    font-size: var(--font-size-headline);
    line-height: var(--line-height-headline);
    font-size: 88px;
    line-height: 106px;
    font-weight: bold;
    margin-top: 15px;
    margin-bottom: 5px;
    font-family: var(--font-bold-cond);
}

.dm-fanshop-item h3 {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 10px;
    font-family: var(--font-bold-cond);
    line-height:40px;
}

.dm-fanshop-item p {
    font-size: 18px;
    line-height: 27px;
    margin-bottom: 15px;
}

.dm-btn-primary {
    background-color: #fff;
    color: #000;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    cursor: pointer;
    font-weight: var(--font-weight-bold);
    font-size:22px;
    line-height: 22px;
    font-family: var(--font-bold-cond);
}

.dm-btn-primary:hover {
    background-color: #957D4A;
    color: #fff;
}

/* Gastro Section Styles */
.dm-section-gastro {
    background-color: #000;
    color: #fff;
    padding: 40px 40px;
    text-align: center;
}
.dm-section-gastro table{
    color:#fff;
    font-size:14px;
    border:2px solid var(--gold);
    border-radius: 20px;
    overflow: hidden;
}

.dm-section-gastro table th,
.dm-section-gastro table td {
    padding: 10px;
    text-align: left;
    vertical-align: top;
    border-right:1px solid #fff;
}
.dm-section-gastro table th{
    border-bottom: 2px solid var(--gold);
}
.dm-section-gastro table th:last-child,
.dm-section-gastro table td:last-child {
    border-right:0px solid #fff;
}
.dm-section-gastro table tr:nth-child(even){
    background:rgb(64, 64, 64);
}


/* Contact Section Styles */
.dm-section-contact {
    background-color: #000;
    color: #fff;
    padding: 40px 40px;
    text-align: center;
}
.dm-section-contact .dm-section-content{
    display:block;
}
.dm-section-contact .booking-form{
    margin:40px auto 40px;
    border:0;
    text-align: left;
}
.dm-section-contact .booking-form .booking-form-row-buttons{
   text-align: center;
}


/* Partner Section Styles */
.dm-partner-section {
    color: #000;
    padding: 40px;
}

.dm-partner-section .dm-section-title hr {
    border-top: 2px solid #000;
}
.dm-partner h1{
    font-size: 60px;
    line-height:60px;
    font-family: var(--font-bold-cond);
    text-align: center;
    padding-top:60px;
    margin-top:0;
}
.dm-partner-grid {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.dm-partner-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1760px;
    margin: 0 auto;
}
.dm-partner-grid a{
    color:#000;
    display:block;
    text-decoration: none;
    padding-bottom:4px;
}

/* Footer Styles */

.dm-footer {
    background-color: #111;
    border-top: 2px solid #957D4A; /* Goldene Linie */
    color: #fff;
    padding: 30px 20px;
}

.dm-footer a {
    color:#fff;
    text-decoration: none;
}
.dm-footer-logo {
    flex: 1;
    min-width: 0; /* verhindert Überlauf */
}
.dm-footer-logo img {
    width:260px;
    height: auto;
    display: block;
    margin-bottom: 5px;
}
.dm-footer-contact,
.dm-footer-links {
    flex: 0 0 260px;
}

.dm-footer-links {
    flex: 0 0 180px;
}

.dm-footer-socials {
    flex: 1 1 100%; /* volle Breite möglich */
}

.dm-footer-contact p,
.dm-footer-links ul {
    margin: 5px 0;
    font-size: 0.9rem;
}
.dm-footer-contact strong {
    font-family: var(--font-bold-cond);
    letter-spacing: var(--letter-spacing-bolder);
    font-size:22px;
}
.dm-footer-contact a:hover{
    color: var(--gold);
}

.dm-footer-links ul {
    list-style: none;
    padding: 0;
}

.dm-footer-links ul li {
    margin: 5px 0;
}

.dm-footer-links ul li a {
    color: #fff;
    text-decoration: none;
}

.dm-footer-links ul li a:hover {
    color: #957D4A;
}

.dm-footer-socials a {
    display: inline-block;
    margin-right: 10px;
}
.dm-footer-socials a:last-child {
    margin-right: 0px;
}

.dm-footer-socials img {
    height: 40px;
    width: auto;
    display:block;
}
.dm-footer .dm-footer-socials svg {
    height: 40px;
    width: auto;
    display:block;
}
.dm-footer-socials {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    max-width: 178px;
}
.dm-footer-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    max-width: 1760px;
    margin: 0 auto;
}

.page-id-10 .booking-form-row-buttons br,
.page-id-14 .booking-form-row-buttons br{
    display:none;
}
.page-id-10 .wpcf7 form  .wpcf7-response-output,
.page-id-14 .wpcf7 form  .wpcf7-response-output{
    max-width: 474px;
    background: transparent;
    font-size: 14px;
    line-height: 16px;
    text-align: center;
    margin: 20px auto;
    padding: 5px;
}



/* Sortiment Section Styles */

.dm-section-sortiment {
    background-color: #000;
    color: #fff;
    padding: 40px 40px;
    text-align: center;
}


.dm-bottle-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    padding: 20px 0;
}

/* Einzelne Flasche */
.dm-bottle {
    display: flex;
    align-items: flex-end;
    flex-shrink: 0;
    margin: 0 10px; /* Einheitlicher Abstand */
    position: relative;
    z-index: 1;
}

/* Bild */
.dm-bottle img {
    display: block;
    width: auto;
    height: auto;
    max-width: 140px;
}
.dm-bottle.dm-bottle-size-2 img {
    max-width: 156px;
}
.dm-bottle.dm-bottle-size-1 img {
    max-width: 165px;
}

/* Flaschenpaar */
.dm-bottle-pair {
    display: flex;
    align-items: flex-end;
    position: relative;
    flex-shrink: 0;
    margin: 0 20px 0 60px;      /* gleicher Abstand wie Einzelflasche */
    padding-left: 26px;      /* Platz für überlappte Flasche */
}

/* Erste Flasche im Paar – überlappt */
.dm-bottle-pair .dm-bottle:first-child {
    position: absolute;
    left: -54px; /* reduzierte Überlappung */
    z-index: 2;
}

/* Zweite Flasche im Paar */
.dm-bottle-pair .dm-bottle:last-child {
    z-index: 1;
}

/* Hover */
.dm-bottle:hover img {
    transform: rotate(-5deg);
}
.dm-bottle-pair .dm-bottle:last-child:hover img {
    transform: rotate(5deg);
}

/* Letztes Element ohne margin */
.dm-bottle:last-child,
.dm-bottle-pair:last-child {
    margin-right: 0;
}



.dm-sortiment-button {
    margin-top: 30px;
}

.dm-btn-primary {
    background-color: #fff;
    color: #000;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    cursor: pointer;
    font-weight: bold;
}

.dm-btn-primary:hover {
    background-color: #957D4A;
    color: #fff;
}

.dm-section-news{
    background-color: #000;
    color: #fff;
    padding: 40px 40px;
}
/* Gleichmäßige 50/50-Aufteilung */
.dm-section-news .dm-section-content {
    display: flex;
    flex-wrap: nowrap;
    gap: 40px;
    max-width: 1760px;
    margin: 0 auto;
    padding: 0;
}
.dm-section-news .dm-text-column {
    flex: 0 0 calc(50% - 20px);
    max-width: calc(50% - 20px);
}

.dm-section-news .dm-image-column {
    flex: 0 0 calc(50% - 20px);
    max-width: calc(50% - 20px);
    max-height:580px;
    overflow: hidden;
}

/* Bild oder Platzhalter füllt Höhe aus */
.dm-section-news .dm-image-column img,
.dm-section-news .dm-image-column .dm-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.dm-section-news h4{
    color: #957D4A;
    font-size: 30px;
    line-height: 40px;
}
.dm-section-news .dm-text-column {
    flex: 0 0 50%;
    max-width: calc(50% - 20px);
    box-sizing: border-box;
}
.dm-section-news .dm-section-content:nth-child(2){
    margin-bottom:40px;
}

/* Standardzustand: Button verstecken */
.dm-nav-toggle {
    display: none;
    background: none;
    border: none;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    z-index: 1001;
}

/* Hero */

.dm-hero-section {
    position: relative;
    width: 100%;
    height: 100vh;
    background-image: url('../images/brauerei-header.jpg'); /* Bild hier anpassen */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding:20px;
}

/* Container für zentrierten Titelbereich */
.dm-hero-title {
    position: absolute;
    top: 40px;
    width: calc(100% - 40px);
    color:#fff;
}

/* Optional – wenn du Hintergrund abdunkeln willst */
.dm-hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.1); /* abdunkelnder Layer */
    z-index: 0;
}


/* Team */

.dm-team-section {
    background-color: #000;
    color: #fff;
    padding: 40px 40px;
    text-align: center;
}
.dm-section-gastro .dm-section-content{
    display:block;
}
.tables-buttons{
    text-align:right;
    padding-top:20px;
}

.dm-team-section h2 {
    font-size: 28px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    display: inline-block;
    padding: 10px 20px;
    margin-bottom: 40px;
}

.dm-team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* genau 3 Spalten */
    gap: 40px;
    max-width: 1760px;
    margin: 0 auto;
}

.dm-team-card {
    background-color: #111;
    border: 2px solid #957D4A;
    border-radius: 12px;
    display: flex;
    overflow: hidden;
    align-items: stretch;
}

.dm-team-info {
    flex: 0 0 67%; /* Text bekommt 67% */
    padding: 20px;
    text-align: left;
}

.dm-team-info h3 {
    font-size: 60px;
    line-height: 60px;
    font-family: var(--font-bold-cond, sans-serif);
    margin: 0 0 10px;
}

.dm-team-info .phone {
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 10px;
}

.dm-team-info .role {
    font-size: 18px;
    line-height: 1.4;
    color: #ccc;
}

.dm-team-image {
    flex: 0 0 33%; /* Bild bekommt 33% */
    height: 100%;
}

.dm-team-image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0; /* glatt an der Seite */
}

/* Story */
/* --- Timeline (ohne Scrolling / Sticky) ------------------------------- */

.dm-timeline {
    display: flex;
    background: #000;
    color: #fff;
    padding: 40px;
    gap: 40px;
    min-height:800px;
}

/* linke Jahresliste – statisch */
.dm-timeline-years { margin-right: 40px; }
.dm-timeline-years ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 18px;
    font-weight: 400;
    font-family: var(--font-bold-cond);
    width:180px;
}

.dm-timeline-years li { cursor: pointer; opacity: 0.5; transition: transform 0.3s ease, opacity 0.3s ease, font-size 0.3s ease; will-change: transform, opacity, font-size; }
.dm-timeline-years li.active { font-size: 48px; line-height:62px; font-weight: bold; opacity: 1; transform: scale(1.4) translateX(10px); }
.dm-timeline-years li:hover { transform: scale(1.4) translateX(10px); opacity: 1; z-index: 3; }
.dm-timeline-years li:hover + li { transform: scale(1.2) translateX(5px); opacity: 0.8; z-index: 2; }
.dm-timeline-years li:hover + li + li { transform: scale(1.1) translateX(2px); opacity: 0.6; z-index: 1; }
.dm-timeline-years li:has(+ li:hover) { transform: scale(1.2) translateX(5px); opacity: 0.8; z-index: 2; }
.dm-timeline-years li:has(+ li + li:hover) { transform: scale(1.1) translateX(2px); opacity: 0.6; z-index: 1; }

/* rechter Content-Bereich */
.dm-timeline-content {
    flex: 1;
    position: relative; /* Container für absolute Entries */
    min-height: 375px;  /* Basishöhe, wächst durch aktiven Eintrag */
}

/* Entries liegen deckungsgleich und werden nur gefadet */
.dm-timeline-entry {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .45s ease;
}
.dm-timeline-entry.active {
    position: relative;   /* aktiver Eintrag bestimmt die Containerhöhe */
    opacity: 1;
    pointer-events: auto;
}

/* Inhalt & Layout im Entry */
.dm-timeline-inner {
    display: flex;
    align-items: center;
    gap: 40px;
    min-height: 375px;
    width:100%;
}

.dm-timeline-text {
    flex: 1;
    padding: 0 60px;
    font-size: 20px;
    line-height: 28px;
    max-width: 776px;
}
.dm-timeline-text h3{
    font-family: var(--font-bold-cond);
    font-size: 27px;
    line-height: 30px;
    margin-bottom: 20px;
}

.dm-timeline-image { flex: 0 0 50%; }
.dm-timeline-image img {
    width: 100%;
    height: auto;
    max-height: 400px;
    display: block;
    object-fit: contain;
}





/* --- Timeline: 1 Kachel pro View via Scroll-Snap --- */
.dm-timeline{
    max-height: calc(100vh - 361px);
    overflow: hidden;                 /* nur rechter Bereich scrollt */
}

.dm-timeline-years{
    position: sticky;
    top: 0;
    align-self: flex-start;
}

/* rechter Scroll-Container */
.dm-timeline-content{
    height: calc(100vh - 291px);                    /* gleich hoch wie View */
    overflow-y: auto;                 /* nur hier scrollen */
    scroll-snap-type: y mandatory;    /* Snap je Kachel */
    position: relative;
    min-height: 0;                    /* Flex/overflow fix */
}

/* jede Kachel füllt den View -> exakt eine sichtbar */
.dm-timeline-entry{
    position: static !important;      /* übereinander, nicht absolut */
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: none !important;
    margin: 0 !important;
    min-height: 100%;                 /* volle Höhe im Container */
    display: flex;
    align-items: center;
    scroll-snap-align: start;         /* am Anfang snappen */
    padding: 40px 0;                  /* Innenabstand statt margin */
}

/* (optional) aktive Navi optisch, Sichtbarkeit steuert Snap */
.dm-timeline-years li.active{
    opacity: 1;
}

/* Scrollbar unsichtbar machen (alle Browser) */
.dm-timeline-content{
    /* bereits vorhanden: height:100vh; overflow-y:auto; scroll-snap-type:y mandatory; */
    scrollbar-width: none;        /* Firefox */
    -ms-overflow-style: none;     /* IE/Edge alt */
    overscroll-behavior: contain; /* verhindert Bounce/Zurückfedern */
    scrollbar-gutter: stable both-edges; /* reserviert Platz, vermeidet Layoutsprung */
    transform: translateZ(0);     /* eigene Compositing-Layer -> ruhigeres Scrolling */
    will-change: scroll-position;
}
.dm-timeline-content::-webkit-scrollbar{ width:0; height:0; }

/* Exakt 1 Kachel pro View ohne Höhen-“Pumpen” */
.dm-timeline-entry{
    height: 100% !important;      /* füllt den Scroller-Viewport */
    padding: 0 !important;        /* kein Außenabstand, der die Höhe verändert */
    margin: 0 !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;     /* snappt stabil auf jede Kachel */
}

/* Innenabstand in den Inhalt verlagern, nicht auf der Kachel-Ebene */
.dm-timeline-inner{
    height: 100%;
    padding: 40px 0;              /* war vorher u.U. an der Entry – hier wackelfrei */
    box-sizing: border-box;
}

/* tours */

.genusstour-section {
    background-color: #000;
    color: #fff;
    padding:60px 40px;
}

.genusstour-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: flex-start;
}


.genusstour-left h2 {
    font-size: 72px;
    line-height: 72px;
    font-family: var(--font-bold-cond);
    margin-bottom:20px;
}

.genusstour-left h3 {
    font-size: 27px;
    line-height: 30px;
    font-family: var(--font-bold-cond);
    margin-bottom:10px;
}

.genusstour-left p {
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.genusstour-left button {
    background-color: #fff;
    color: #000;
    border: none;
    padding: 0.6rem 1.2rem;
    font-size: 1rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    width: auto;
    display: inline-block;
}
.genusstour-left button {
    width: fit-content;
}

.genusstour-left,
.genusstour-right {
    align-self: start;
    display: flex;
    flex-direction: column;
}
.genusstour-center {
    display: flex;
}
.genusstour-entry{
    align-self: start;
    display: flex;
    flex-direction: column;
    background-color: #111;
    border: 2px solid var(--gold);
    border-radius: 12px;
    overflow: hidden;
    flex: 0 0 50%;
    max-width: calc(50% - 20px);
}
.genusstour-entry-content{
    padding:20px;
    border-bottom: 2px solid var(--gold);
}
.genusstour-entry-content button {
    background-color: #fff;
    color: #000;
    border: none;
    padding: 0.6rem 1.2rem;
    font-size: 1rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    width: auto;
    display: inline-block;
}
.genusstour-entry-content button:hover {
    background-color:var(--gold);
    color: #fff;
}
.genusstour-entry-content p{
    padding:20px 0;
}
.genusstour-entry-content h3{
    font-family: var(--font-bold-cond);
    padding-right:80px;
    font-size: 28px;
    line-height: 36px;
    cursor: pointer;
    position: relative;
}
.genusstour-entry-content h3:after{
    content:'▾';
    position:absolute;
    top:-20px;
    right:0px;
    font-size:80px;
    line-height:80px;
    transition: transform 0.3s ease;
    color:var(--gold);
}

.genusstour-entry.active .genusstour-entry-content h3:after{
   transform: rotate(-180deg);
}
.genusstour-center img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.genusstour-center {
    overflow: hidden;
}
.genusstour-center img {
    height: 100%;
    max-height: 100%;
}
.genusstour-right {
    background-color: #111;
    border: 2px solid var(--gold);
    border-radius: 12px;
    overflow: hidden;
}
.genusstour-left,
.genusstour-center,
.genusstour-right {
    flex: 0 0 calc(33.3333% - 25px);
    max-width: calc(33.3333% - 25px);
}

.genusstour-entry .genusstour-entry-content button,
.genusstour-entry .genusstour-entry-content p,
.genusstour-entry .tab-content,
.genusstour-entry .tab-content.active,
.genusstour-entry .tab-header{
    display:none;
}
.genusstour-entry-content{
    border:0;
}

.genusstour-entry.active .genusstour-entry-content button,
.genusstour-entry.active .genusstour-entry-content p,
.genusstour-entry.active .tab-content.active{
    display:block;
}
.genusstour-entry.active .genusstour-entry-content{
    border-bottom: 2px solid var(--gold);
}
.genusstour-entry.active .tab-header{
    display:flex;
}


.dm-product-bundle img{
    display:inline-block;
    max-height:160px;
    width:auto;
}


.tab-header {
    display: flex;
}

.tab-header button {
    flex: 1;
    padding: 1rem;
    background: transparent;
    border: none;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    border-right: 2px solid var(--gold);
    border-bottom: 2px solid var(--gold);
}

.tab-header button.active {
    border-bottom: 0 solid var(--gold);
}


.tab-header button:last-child {
    border-right: none;
}

.tab-header button.active {
    color: var(--gold);
}

.tab-content {
    display: none;
    padding: 1.5rem;
}

.tab-content.active {
    display: block;
}

.tab-content table {
    width: 100%;
    border-collapse: collapse;
}

.tab-content td {
    padding: 0.5rem 0;
    vertical-align: top;
}

.tab-content td:first-child {
    font-weight: bold;
    padding-right: 1rem;
}
.tab-content p{
    margin-bottom:20px;
}
.tab-content h4{
    margin-bottom:10px;
}
.tab-content p:last-child {
    margin-bottom:0px;
}
.tab-content ul{
    margin:0 0 20px 24px;
}

/* benefits */
.dm-benefits {
    background: #000;
    color: #fff;
    padding: 40px 40px;
    text-align: center;
}

.dm-benefits-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    font-size: 20px;
    margin-bottom: 40px;
    font-family: var(--font-bold-cond);
}

.dm-benefits-title hr {
    flex: 1;
    border: none;
    border-top: 1px solid #fff;
}

.dm-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
    margin: 0 auto;
}

.dm-benefit-item {
    background: #111;
    border: 2px solid #957D4A;
    border-radius: 10px;
    padding: 30px 20px;
    display: flex;
    align-items: center;
    height: 100%;
}

.dm-benefit-content {
    display: flex;
    align-items: center;
    width: 100%;
}

.dm-benefit-icon {
    flex: 0 0 33.33%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dm-benefit-icon img {
    height: 140px;
    width: auto;
    margin-right: 30px;
}

.dm-benefit-item p {
    font-size: 30px;
    font-family: var(--font-bold-cond);
    font-weight: bold;
    line-height: 1.4;
    margin: 0;
    text-align: left;
    flex: 1;
}

/* testimonial */
.dm-testimonial {
    background: #000;
    color: #fff;
    padding: 40px 40px;
    text-align: center;
}

.dm-testimonial-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    font-size: 20px;
    margin-bottom: 40px;
    font-family: var(--font-bold-cond);
}

.dm-testimonial-title hr {
    flex: 1;
    border: none;
    border-top: 1px solid #fff;
}

.dm-testimonial-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    margin: 0 auto;
    text-align: left;
    width: 100%;
}

.dm-testimonial-image {
    flex: 0 0 33%;
}

.dm-testimonial-image img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.dm-testimonial-text {
    flex: 1;
   /* display: flex; */
    flex-direction: column;
    gap: 80px;
    position: relative;
    padding-left: 80px;
    border:2px solid var(--gold);
    padding:60px;
    border-radius: 20px;
}
.dm-testimonial-right{
    padding-right:80px;
}
.dm-testimonial-left{
    padding-left:80px;
}

.dm-testimonial-left .dm-quote::before {
    left: -109px;
}

.dm-quote {
    margin: 0;
    position: relative;
    font-size:27px;
    line-height:30px;
    font-family: var(--font-bold-cond);
}

.dm-quote::before {
    content: "\201C";
    position: absolute;
    left: -87px;
    top: -188px;
    font-size: 200px;
    line-height: 1;
    color: #957D4A;
    font-family: var(--font-bold-cond);
    transform: rotate(180deg);
}

.dm-quote-author {
    font-size:27px;
    line-height:30px;
    color: #957D4A;
    margin: 0;
    font-family: var(--font-bold-cond);
    padding-top:20px;
}

/* FAQ */

.dm-faq {
    background: #000;
    color: #fff;
    padding: 60px 20px;
    text-align: center;
}

.dm-faq-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    font-size: 20px;
    margin-bottom: 40px;
    font-family: var(--font-bold-cond);
}

.dm-faq-title hr {
    flex: 1;
    border: none;
    border-top: 1px solid #fff;
}

.dm-faq-box {
    background: #111;
    border: 2px solid #957D4A;
    border-radius: 12px;
    max-width: 900px;
    margin: 0 auto;
    padding: 40px;
    text-align: left;
}

.dm-faq-box h3 {
    font-size: 48px;
    line-height: 48px;
    margin-bottom: 40px;
    font-family: var(--font-bold-cond);
}

.dm-faq-question {
    background: none;
    border: none;
    color: #fff;
    font-size: 22px;
    font-family: var(--font-bold-cond);
    padding: 10px 0;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.dm-faq-item.open .dm-faq-question {
    color: var(--gold);
}

.dm-faq-answer {
    padding: 10px 0 20px;
    font-size: 16px;
    line-height: 1.5;
    color: #ccc;
}

/* products */

.dm-products {
    background: #000;
    color: #fff;
    padding: 60px 20px;
}

.dm-product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
    margin: 0 auto;
}

/* Eine letzte Kachel -> in die mittlere (2.) Spalte */
.dm-product-grid > *:last-child:nth-child(3n + 1) {
    grid-column: 2;
    justify-self: center;
}

/* Zwei letzte Kacheln -> auf Spalte 1 und 3, damit sie zusammen zentriert wirken */
.dm-product-grid > *:nth-last-child(2):nth-child(3n + 1) {
    grid-column: 1;
    justify-self: end;
}
.dm-product-grid > *:nth-last-child(1):nth-child(3n + 2) {
    grid-column: 3;
    justify-self: start;
}

a.dm-product-card {
    position: relative;
    background: #333;
    border: 2px solid #957D4A;
    border-radius: 10px;
    padding: 20px;
    overflow: visible; /* wichtig, damit Flasche rauslaufen kann */
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: transform 0.3s ease;
    color:#fff;
    text-decoration: none;
}

.dm-product-content {
    max-width: 70%;
    z-index: 1;
}

.dm-product-card h3 {
    font-size: 72px;
    line-height: 72px;
    margin: 0 0 5px;
    font-family: var(--font-bold-cond);
}

.dm-product-card strong {
    display: block;
    color: #fff;
    margin-bottom: 5px;
    font-size: 27px;
    line-height: 27px;
    font-family: var(--font-bold-cond);
}

.dm-product-card p {
    margin: 0;
    font-size: 18px;
    line-height: 23px;
    color: #e0e0e0;
}

.dm-product-image {
    height: 180px;
    position: relative;
    z-index: 2;
    transition: transform 0.4s ease;
    right: 20px;
}

.dm-product-image img {
    width: auto;
    height: 100%;
    display: block;
    transition: transform 0.4s ease;
}

.dm-product-image.dm-product-image-2 img {
    display: inline-block;
}

.dm-product-image.dm-product-image-2 img:first-child {
    position: relative;
    right:-20px;
    z-index:1;
    height:85%;
}

.dm-product-card:hover .dm-product-image img {
    transform: rotate(15deg) translateX(20px) scale(1.5);
    z-index: 5;
}

.dm-product-card:hover .dm-product-image-2 img:first-child {
    transform: rotate(-15deg) translateX(-20px) scale(1.5);
    z-index: 5;
}

.dm-product-label {
    position: absolute;
    top: 10px;
    right: 60px;
    background: #000;
    color: #957D4A;
    font-weight: bold;
    width: 102px;
    height: 102px;
    border-radius: 50%;
    font-size: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1; /* hinter der Flasche */
    border:3px solid #957D4A;
    font-family: var(--font-bold-cond);
}
/* product details */

.dm-product-detail {
    background: linear-gradient(to bottom, #f4e456, #000);
    color: #fff;
    padding: 60px 20px;
    height:890px;
}
.dm-product-wrapper {
    position: relative;
    min-height: 1010px; /* Passe die Höhe an dein Design an */
    overflow: hidden;
}
.dm-product-wrapper section{
    max-width: 100%;
}

.dm-product-detail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
    z-index: 0;
}

.dm-product-detail.active {
    opacity: 1;
    visibility: visible;
    position: relative;
    z-index: 1;
}
.dm-product-detail-inner {
    display: flex;
    gap: 60px;
    padding:0 60px;
    margin: 0 auto;
    align-items: flex-start;
    max-width: 1980px;
}

.dm-product-detail-text {
    flex: 1 1 40%;
    padding-top:100px;
}

.dm-product-detail-image {
    flex: 1 1 60%;
    position: relative;
}

.dm-product-detail-text h2 {
    font-size: var(--font-size-headline);
    line-height: var(--line-height-headline);
    font-family: var(--font-bold-cond);
    margin-bottom: 10px;
}

.dm-product-detail-text h2 span {
    display: block;
    font-size: 40px;
}

.dm-product-detail-text h3 {
    font-size: 36px;
    line-height: 40px;
    font-family: var(--font-bold-cond);
    margin: 20px 0 10px;
}

.dm-product-detail-text p {
    font-size: 18px;
    line-height: 27px;
    max-width: 500px;
    margin-bottom:40px;
}

.dm-product-detail-table {
    background: #111;
    border: 1px solid #957D4A;
    border-radius: 12px;
    padding: 20px;
    margin-top: 30px;
    max-width: 500px;
}

.dm-product-detail-table .tab {
    font-weight: bold;
    margin-bottom: 10px;
    color: #957D4A;
}

.dm-bottle-floating {
    position: relative;
    width: fit-content;
    margin: 0 auto;
}

.dm-bottle-floating img {
    height: 740px;
    z-index: 1;
    position: relative;
}
.dm-bottle-floating img.dm-bottle-bg {
    height: 638px;
    top: 56px;
}
.dm-bottle-floating img.dm-bottle-bt {
    height: 536px;
    top: 134px;
}
.dm-bottle-floating-2{
    position: relative;
    right: -100px;
}

.dm-bottle-floating-2 .dm-bottle-cta{
    right: -160px;
}

.dm-bottle-floating-2 .dm-bottles-floating{
    position: relative;
    left:-150px;
}
.dm-bottle-floating-2 .dm-bottles-floating img:first-child{
    height:630px;
    position: relative;
    right:-85px;
    z-index:2;
}

.dm-bottle-floating-2 .dm-note-1 {
    left: 320px;
}

.dm-bottle-floating-2 .dm-note-2 {
    top: 256px;
    left: -275px;
}

.dm-bottle-floating-2 .dm-note-3 {
    left: -366px;
}

.dm-bottle-floating-2 .dm-note-4 {
    left: 449px;
}


.dm-bottle-cta{
    width:210px;
    height:210px;
    position:absolute;
    right:-360px;
    bottom:40px;
}
#dm-product-10 .dm-bottle-cta{
    bottom:-150px;
}
.dm-bottle-cta img{
    width: 100%;
    height:auto;
}



.dm-label-floating {
    position: absolute;
    background: #000;
    color: var(--gold);
    font-weight: bold;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 80px;
    line-height: 88px;
    font-family: var(--font-bold-cond);
    border:3px solid var(--gold);
    top: 149px;
    left: -96px;
}

.dm-note{
    font-size:27px;
    line-height:30px;
    font-family: var(--font-bold-cond);
}
.dm-note:after{
    content:'';
    width:154px;
    height:81px;
    position: absolute;
    background: transparent url('../images/product_arrow.png') no-repeat;
    background-size: contain;
}

.dm-note-1{
    top: 100px;
    left: 274px;
    animation: float-1 3s ease-in-out infinite;
}
.dm-note-1:after{
    transform: rotate(169deg);
    top: 71px;
    left: -99px;
}
.dm-note-2{
    top: 311px;
    left: -243px;
    animation: float-2 3s ease-in-out infinite;
}
.dm-note-2:after{
    transform: rotate(3deg) scaleY(-1);
    top: 74px;
    left: 81px;
}
.dm-note-3{
    top: 662px;
    left: -281px;
    animation: float-3 3s ease-in-out infinite;
}
.dm-note-3:after{
    transform: rotate(-46deg) scaleY(-1);
    top: -40px;
    left: 122px;
}
.dm-note-4{
    top: 300px;
    left: 395px;
    animation: float-4 3s ease-in-out infinite;
}
.dm-note-4:after{
    transform: rotate(191deg);
    top: 8px;
    left: -178px;
}
.dm-note-5{
    top: 712px;
    left: 333px;
    width: 200px;
    animation: float-5 3s ease-in-out infinite;
}
.dm-note-5:after{
    transform: rotate(188deg) scaleY(-1);
    top: -94px;
    left: -120px;

}



.dm-bottle-floating button{
    width:40px;
    height:40px;
    position:absolute;
    background:#fff;
    border-radius:5px;
    top: 467px;
    left: 300px;
    cursor: pointer;
}

.dm-bottle-floating button.dm-product-prev{
    left:-160px;
}


.dm-bottle-floating button::before {
    content: '';
    display: inline-block;
    width: 15px;
    height: 15px;
    border-right: 3px solid #000000;
    border-bottom: 3px solid #000000;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
}
.dm-bottle-floating button.dm-product-prev::before {
    transform: translateY(-50%) rotate(135deg);
    right: 10px;
}

.dm-float {
    position: absolute;
    text-align: center;
    pointer-events: none;
    max-width: 200px;
    font-family: var(--font-bold-cond);
}

@keyframes float {
    0% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
    100% { transform: translateY(0); }
}
@keyframes float-1 {
    0% { transform: translate(0, 0); }
    50% { transform: translate(3px, -5px); }
    100% { transform: translate(0, 0); }
}

@keyframes float-2 {
    0% { transform: translate(0, 0); }
    50% { transform: translate(-4px, -8px); }
    100% { transform: translate(0, 0); }
}

@keyframes float-3 {
    0% { transform: translate(0, 0); }
    50% { transform: translate(2px, -4px); }
    100% { transform: translate(0, 0); }
}

@keyframes float-4 {
    0% { transform: translate(0, 0); }
    50% { transform: translate(-3px, -6px); }
    100% { transform: translate(0, 0); }
}

@keyframes float-5 {
    0% { transform: translate(0, 0); }
    50% { transform: translate(4px, -7px); }
    100% { transform: translate(0, 0); }
}

@keyframes float-6 {
    0% { transform: translate(0, 0); }
    50% { transform: translate(-2px, -3px); }
    100% { transform: translate(0, 0); }
}

.taste-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width:280px;
    margin:0 auto 10px;
}

.taste-row span{
    font-family: var(--font-bold-cond);
    font-size:27px;
    line-height:30px;
}

.taste-row .dots {
    display: flex;
    gap: 6px;
}

.dot {
    width: 20px;
    height: 20px;
    border: 2px solid #957D4A;
    border-radius: 50%;
    display: inline-block;
}

.dot.filled {
    background-color: #957D4A;
}

.dm-nutrition-table {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 30px;
    position: relative;
    max-width: 500px;
    font-size:18px;
    line-height:27px;
}

.dm-nutrition-table::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: #957D4A;
    transform: translateX(-50%);
}

.dm-nutrition-table .row {
    display: contents; /* damit Grid-Spalten auf .span wirken */
}

.dm-nutrition-table span:first-child {
    color: #ccc;
    text-align: right;
    padding-right: 10px;
}

.dm-nutrition-table span:last-child {
    color: #fff;
    text-align: left;
    padding-left: 10px;
}

.dm-glasses-section {
    color: #000;
    padding: 40px;
}

.dm-glasses-section .dm-section-title hr {
    border-top: 2px solid #000;
}
.dm-biershop-section .dm-section-title hr {
    border-top: 2px solid #000;
}
.dm-fanshop h1{
    font-size: 60px;
    line-height:60px;
    font-family: var(--font-bold-cond);
    text-align: center;
    padding-top:60px;
    margin-top:0;
}


/* Neue Layoutstruktur für Glaskarten */

.dm-glass-card {
    display: flex;
    justify-content: space-between;
    align-items: stretch; /* wichtig für gleich hohe Spalten */
    gap: 20px;
    height: 100%; /* falls nötig */
    border: 0px solid #957D4A;
    border-radius: 10px;
    padding:20px;
    background:#eaeaea;
}
.basketFooter .dm-btn-primary,
.dm-glasses-section > div > .dm-btn-primary{
    border:2px solid #000;
}


/* Linke Spalte */
.dm-glass-info {
    flex: 1;
}

.dm-glass-info {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Standard: Inhalte oben */
    height: 100%;
}

.spacer {
    flex-grow: 1;
}

.dm-glass-info h3 {
    font-size: 36px;
    font-family: var(--font-bold-cond);
    margin-bottom: 10px;
}

.dm-glass-info p {
    font-size: 18px;
    line-height:24px;
    margin-bottom: 10px;
}

.dm-glass-info p  strong{
    font-size: 36px;
    line-height:36px;
    font-family: var(--font-bold-cond);
}

.dm-glass-selects {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.dm-glass-selects select {
    background-color: #fff;
    color: #000;
    font-size: 16px;
    padding: 6px 12px;
    border-radius: 5px;
    border: none;
    font-family: var(--font-bold-cond);
    appearance: none;
    font-weight:700;
}

.dm-glass-selects select:hover {
    background-color: var(--gold);
    color: #fff;
}

/* Rechte Spalte */
.dm-glass-image-cart {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    width: 250px;
}
.dm-glass-info .dm-btn-primary,
.dm-glass-image-cart .dm-btn-primary{
    font-size: 16px;
    padding: 6px 12px;
    border-radius: 5px;
}

.dm-glass-image img {
    max-height: 250px;
    width: auto;
    display: block;
    max-width:100%;
}

.dm-glass-info,
.dm-glass-image-cart {
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* → nach unten ausrichten */
    height: 100%;
}

/* basket */

/* ===== Warenkorbzeilen ================================================== */
.basketList{ width:100%; }
.basketList .basketRow{
    display:grid !important;
    width:100%;
    box-sizing:border-box;
    grid-template-columns: 84px minmax(0,1fr) 100px 36px !important; /* Bild | Titel/Qty | Preis | Entfernen */
    grid-template-areas:
    "img title price remove"
    "img qty   price remove" !important;
    align-items:center;
    column-gap:16px;
    row-gap:8px;
    padding:14px 0;
    border-bottom:1px solid #f0f0f0;
}
.basketRow:last-child{ border-bottom:0; }

/* Grid-Areas zuweisen */
.basketRow .basketImg    { grid-area:img; }
.basketRow .basketTitle  { grid-area:title; min-width:0; }
.basketRow .basketQty    { grid-area:qty;   min-width:0; }
.basketRow .basketPrice  { grid-area:price; min-width:0; justify-self:end; text-align:right; width:100px; }
.basketRow .basketRemove { grid-area:remove; justify-self:end; align-self:center; }

/* ===== Bild – niemals beschneiden ====================================== */
/* WICHTIG: keine feste Höhe, kein quadratisches Seitenverhältnis,
   kein overflow:hidden -> dadurch kein Cropping. */
.basketRow .basketImg{
    width:84px;                      /* Breite der Bildkachel */
    padding:6px;                     /* Innenabstand als "Passepartout" */
    border-radius:12px;
    background:#f7f7f8;
    display:flex; align-items:center; justify-content:center;
    box-shadow: inset 0 0 0 1px #eee;
    overflow: visible !important;    /* absolut nichts abschneiden */
}
.basketRow .basketImg img{
    max-width:100% !important;       /* breite nie über Kachel hinaus */
    max-height:84px !important;      /* hält die Zeile kompakt */
    width:auto !important;
    height:auto !important;
    object-fit:contain !important;   /* respektiert Seitenverhältnis */
    object-position:center !important;
    display:block;
    border-radius:10px;              /* runde Ecken direkt am Bild */
}

/* ===== Titel / Varianten =============================================== */
.basketRow .basketTitle{
    font-weight:700;
    line-height:1.15;
    writing-mode: horizontal-tb !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens:auto;
}
.basketRow .basketTitle small{
    display:block; font-weight:500; font-size:12px; opacity:.7; margin-top:2px;
}

/* ===== Menge unter dem Titel, kompakt ================================== */
.basketRow .basketQty{ margin-top:2px; }
.basketRow .basketQty select{
    height:30px;
    max-width:110px;
    padding:2px 8px;
    font-size:14px; font-weight:600;
    border:1px solid #e3e6ea; border-radius:10px; background:#fff; appearance:none;
}
.basketRow .basketQty select:focus{
    outline:none; border-color:#b7d8c6; box-shadow:0 0 0 3px rgba(26,170,102,.15);
}

/* ===== Preisbereich (100px fix) ======================================== */
.basketRow .basketPrice .unit{ font-size:12px; opacity:.65; }
.basketRow .basketPrice .line{ font-weight:800; margin-top:2px; }

/* ===== Entfernen-Button stabil rechts ================================== */
.basketRow .basketRemove{
    width:32px; height:32px;
    border-radius:8px;
    border:1px solid #e9ecef;
    background:#fff; cursor:pointer;
    display:grid; place-items:center;
    font-size:16px; line-height:1; color:#8a8f98;
    position:static !important; /* falls irgendwo absolute gesetzt wurde */
}
.basketRow .basketRemove:hover{
    border-color:#d0d5db; color:#444; box-shadow:0 1px 4px rgba(0,0,0,.06);
}

/* ===== Summenbereich =================================================== */
.basketSum{ margin-top:14px; }
.basketSum .sumRow{
    display:flex; justify-content:space-between; align-items:center;
    padding:8px 0; font-weight:600;
}
.basketSum .sumRow span{ color:#4b5563; font-weight:500; }
.basketSum hr{ border:0; border-top:1px solid #eee; margin:8px 0 10px; }
.basketSum .total{ font-size:18px; }
.basketSum .taxNote{ font-size:12px; color:#6b7280; margin-top:6px; }

/* Overlay */
.checkoutOverlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;z-index:9999}
.checkoutOverlay.show{display:block}
.checkoutContainer{background:#fff;max-width:1100px;margin:40px auto;padding:24px;border-radius:12px}

.checkoutHeader h2{
    margin:0;
    font-family: var(--font-bold-cond);
}
.checkoutGrid{display:grid;grid-template-columns:1fr 340px;gap:24px}

/* Header anpassen */
.checkoutHeader {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Headline links, Button rechts */
    margin-bottom: 16px;
}

.checkoutBack {
    background: none;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    margin-left:20px;
}
.checkoutBack:hover {
    background: #f0f0f0;
}


.checkoutForm .invalid { outline: 2px solid #c00; }
.checkoutContainer .formActions.twoButtons { display:flex; gap:12px; }
.checkoutContainer .dm-btn-secondary { background:#f3f3f3; color:#111; border:1px solid #ddd; padding:10px 16px; border-radius:6px; }
.checkoutContainer .paymentRow { display:flex; gap:16px; align-items:center; }
.checkoutContainer .billingFields { margin-top:10px; }
.checkoutContainer .paymentHint { margin:6px 0 14px; font-size:.95em; opacity:.9; }


/* === Basiscontainer === */
.checkoutForm .checkbox,
.checkoutForm .radio {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    cursor: pointer;
    user-select: none;
    line-height: 1.3;
}

/* Input real, aber optisch versteckt (nicht display:none -> bleibt fokussierbar!) */
.checkoutForm .checkbox input[type="checkbox"],
.checkoutForm .radio input[type="radio"] {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
}

/* Der sichtbare Kasten/Kreis */
.checkoutForm .checkbox .control,
.checkoutForm .radio .control {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid #cbd5e1;       /* slate-300 */
    background: #fff;
    border-radius: 4px;               /* Checkbox = eckig */
    flex: 0 0 18px;
    position: relative;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

/* Radio: runde Variante */
.checkoutForm .radio .control {
    border-radius: 999px;
}

/* Hover */
.checkoutForm .checkbox:hover .control,
.checkoutForm .radio:hover .control {
    border-color: #94a3b8;           /* slate-400 */
}

/* Fokus (über :focus-visible auf dem Input) */
.checkoutForm .checkbox input[type="checkbox"]:focus-visible + .control,
.checkoutForm .radio    input[type="radio"]:focus-visible + .control {
    box-shadow: 0 0 0 4px rgba(59,130,246,.25); /* blaues Focus-Glow */
    border-color: #2563eb;                      /* blue-600 */
}

/* Checked: Grundfarbe & Icon */
.checkoutForm .checkbox input[type="checkbox"]:checked + .control {
    background: #2563eb;             /* blue-600 */
    border-color: #2563eb;
}

/* Checkbox-Haken */
.checkoutForm .checkbox input[type="checkbox"]:checked + .control::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
            conic-gradient(from 45deg, #fff 0 25%, transparent 0) 55% 58% / 60% 60% no-repeat;
    /* kleiner Haken via conic-gradient */
}

/* Radio: innerer Punkt */
.checkoutForm .radio input[type="radio"]:checked + .control::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: #2563eb;
    border-radius: 999px;
}

/* Disabled */
.checkoutForm .checkbox input[disabled] + .control,
.checkoutForm .radio input[disabled] + .control {
    background: #f1f5f9;             /* slate-100 */
    border-color: #e2e8f0;           /* slate-200 */
    cursor: not-allowed;
}
.checkoutForm .checkbox input[disabled] ~ .label,
.checkoutForm .radio input[disabled] ~ .label {
    color: #94a3b8;                   /* slate-400 */
}

/* Text links daneben */
.checkoutForm .checkbox .label,
.checkoutForm .radio .label {
    display: inline-block;
}

/* Linkstil innerhalb der AGB-Checkbox-Texte */
.checkoutForm .checkbox .label a {
    color: #2563eb;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.checkoutForm .checkbox .label a:hover {
    text-decoration-thickness: 2px;
}

/* Zahlungsarten-Reihe hübsch anordnen */
.checkoutForm .paymentRow {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.checkoutForm .paymentRow .radio {
    padding: 8px 10px;
    border: 1px solid #e5e7eb;       /* neutraler Rahmen */
    border-radius: 8px;
    background: #fff;
    transition: box-shadow .15s ease, border-color .15s ease;
}
.checkoutForm .paymentRow .radio:hover {
    border-color: #d1d5db;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

/* aktives Radio-Kärtchen betonen */
.checkoutForm .paymentRow .radio input[type="radio"]:checked + .control + .label {
    font-weight: 600;
}

@media (max-width:980px){.checkoutGrid{grid-template-columns:1fr}}

.checkoutForm h3{margin:16px 0 8px;font-family: var(--font-bold-cond);}
.checkoutForm .row{display:grid;gap:12px;margin-bottom:12px}
.checkoutForm .row.two{grid-template-columns:1fr 1fr}
.checkoutForm label{display:flex;flex-direction:column;font-size:.95rem;gap:6px}
.checkoutForm input,.checkoutForm select{border:1px solid #d9d9d9;border-radius:8px;padding:10px}
.checkoutForm .checkbox{flex-direction:row;align-items:flex-start;gap:10px}
.formActions{margin-top:10px}
.formActions .dm-btn-primary{
    border: 2px solid #000;
}
.formActions .dm-btn-primary:hover{
    border: 2px solid var(--gold);
}

.checkoutSummary .summaryBox{background:#f7f8fb;border-radius:12px;padding:16px}
.checkoutSummary h4{margin:0 0 12px}
.summaryRow{display:flex;justify-content:space-between;margin:6px 0}
.summaryRow.total{font-size:1.1rem;font-weight:700}
.summaryMini{font-size:.9rem;color:#555;margin-top:8px}
.shippingDetails{margin-top:12px}
#checkoutItems .item{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid #eee}
#checkoutItems img{width:44px;height:44px;object-fit:contain;border-radius:6px}
.dm-btn-primary.fullwidth{width:100%;margin-top:12px}

/* Lightbox Shop */

.dm-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}
.dm-lightbox.hidden { display: none; }

.dm-lightbox-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    height:80%;
}
.dm-lightbox-image {
    max-width: 100%;
    max-height: 100%;
    border-radius: 8px;
    height:100%;
}

.dm-lightbox-close,
.dm-lightbox-prev,
.dm-lightbox-next {
    position: absolute;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border: none;
    font-size: 2rem;
    padding: 6px 12px;
    cursor: pointer;
    border-radius: 6px;
}
.dm-lightbox-close { top: 10px; right: 10px; }
.dm-lightbox-prev  { top: 50%; left: -50px; transform: translateY(-50%); }
.dm-lightbox-next  { top: 50%; right: -50px; transform: translateY(-50%); }



/* gallery */
.dm-gallery-section {
    background-color: #000;
    color: #fff;
    padding: 40px 40px;
    text-align: center;
}
.dm-gallery-carousel {
    display: flex;
    align-items: center;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.dm-gallery-track-wrapper {
    overflow: hidden;
    flex: 1;
}

.dm-gallery-track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);   /* 4 Spalten */
    grid-auto-rows: 200px;                   /* Einheitliche Höhe */
    gap: 20px;
    transition: transform 0.5s ease;
}

/* Vorschaubild */
.gallery-thumb {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #222;
    cursor: pointer;
}

.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    object-position: center;
}

.gallery-thumb.top-align img {
    object-position: top center; /* richtet Bild nach oben aus */
}

/* Pfeile */
.dm-gallery-prev,
.dm-gallery-next {
    background: #fff;
    color: #000;
    font-size: 28px;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
}

.dm-gallery-carousel button::before {
    content: '';
    display: inline-block;
    width: 15px;
    height: 15px;
    border-right: 3px solid #000000;
    border-bottom: 3px solid #000000;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
}

.dm-gallery-carousel button.dm-gallery-prev::before {
    transform: translateY(-50%) rotate(135deg);
    right: 10px;
}



/* Lightbox */
.dm-lightbox {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(255,255,255,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.dm-lightbox.hidden {
    display: none;
}

.dm-lightbox-image {
    max-width: 90%;
    max-height: 80%;
}

.dm-lightbox-close {
    position: absolute;
    top: 40px;
    right: 40px;
    font-size: 40px;
    color: #fff;
    cursor: pointer;
}
/*
.page-id-18 .dm-lightbox-close {
    top: -40px;
    right: -40px;
}*/

.dm-gallery-track-wrapper {
    position: relative;
}

.dm-gallery-page {
    display: none;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 200px);
    gap: 20px;
}

.dm-gallery-page.active {
    display: grid;
}

.gallery-thumb {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #222;
    cursor: pointer;
}

.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Booking form */
.booking-form-container {
    position: fixed; /* nimmt den gesamten Bildschirm ein */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.85); /* 50% schwarz */
    display: flex;
    align-items: center;  /* vertikal zentrieren */
    justify-content: center; /* horizontal zentrieren */
    z-index:999; /* über allen anderen Inhalten */
    display:none;
}


.booking-form {
    background: #000;
    padding: 20px;
    width: 600px;
    color:#fff;
    border:1px solid var(--gold);
    border-radius:20px;
    font-family: var(--font-bold-cond);
}

.booking-form-success {
    display:none;
    text-align:center;
    padding:20px 0;
}


.booking-form h2{
    font-family: var(--font-bold-cond);
    text-align:center;
    margin-bottom: 10px;
    padding-top:10px;
}

.booking-form h3{
    font-family: var(--font-bold-cond);
    text-align:center;
    margin-bottom: 30px;
}

.booking-form label{
    font-family: var(--font-bold-cond);
}

.booking-tour-headline{
    margin: -8px 0 20px;
}

.booking-form-row {
    display: flex;
    /* align-items: center; */
    margin-bottom: 15px;
    border:2px solid var(--gold);
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
    padding-left:20px;
}

.booking-form-row label {
    width: 200px; /* feste Breite */
    font-weight: bold;
    padding-top:5px;
}

.booking-form-row input,
.booking-form-row select,
.booking-form-row textarea {
    flex: 1; /* nimmt restliche Breite */
    padding: 8px 6px;
    font-size:16px;
    background:#fff;
}




.wpcf7-form .booking-form-row > p{
    display: flex;
    margin: 0;            /* CF7 setzt oft margin auf p */
    width: 100%;
    align-items: flex-start; /* bei textarea sinnvoll */
}

.wpcf7-form .booking-form-row label{
    width: 200px;
    font-weight: bold;
    padding-top: 5px;
    margin: 0;
}

/* Wrapper soll die restliche Breite nehmen */
.wpcf7-form .booking-form-row .wpcf7-form-control-wrap{
    flex: 1;
}

/* Das eigentliche Feld soll 100% im Wrapper füllen */
.wpcf7-form .booking-form-row .booking-form-date-field{
    flex: 1;
    width: 100%;
    min-width: 0;
}

.wpcf7-form .booking-form-row input,
.wpcf7-form .booking-form-row select,
.wpcf7-form .booking-form-row textarea{
    width: 100%;
    padding: 8px 6px;
    font-size: 16px;
    background: #fff;
    box-sizing: border-box;
    display: block;
}


.booking-form-row select option {
    background:#fff;
}

.booking-form-row textarea {
    height:100px;
}
.booking-form-row-buttons{
    text-align:right;
    padding:20px 0 30px;
}

.wpcf7-form .booking-form-row-buttons input.wpcf7-submit,
.booking-form-row-buttons button {
    background-color: #fff;
    color: #000;
    border: none;
    padding: 0.6rem 1.2rem;
    font-size: 1rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    width: auto;
    display: inline-block;
    margin-left:20px;
}
.wpcf7-form .booking-form-row-buttons input.wpcf7-submit{
    margin-left:0;
}
.booking-form-row-buttons button:hover {
    background-color: var(--gold);
    color: #fff;
}


.wpcf7-not-valid-tip {
    color: #dc3232;
    font-size: 1em;
    font-weight: normal;
    display: block;
    position: absolute;
    display: inline-block;
    background: #000;
    padding: 0px 10px;
    z-index: 10;
    border-radius: 5px;
    font-size: 12px!important;
    right: -9px;
    top: 16px;
    border: 1px solid #dc3232;
    opacity: 0.9;
}

/* basket */


.basketOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.15);
    opacity: 0;                 /* versteckt */
    pointer-events: none;       /* klicks blocken */
    transition: opacity 250ms ease;
    z-index: 9999;
}

.basketOverlay.open {
    opacity: 1;
    pointer-events: auto;
}

/* Panel */
.basketContainer {
    position: absolute;
    top: 0;
    right: 0;
    width: 400px;
    max-width: 90vw;
    height: 100%;
    background: #fff;
    box-shadow: -10px 0 30px rgba(0,0,0,0.2);

    transform: translateX(100%);              /* Start: draußen */
    transition: transform 800ms ease-in-out;  /* <- langsam + weich */
    will-change: transform;

    display: flex;
    flex-direction: column;
}

/* Wenn offen -> reinfahren */
.basketOverlay.open .basketContainer {
    transform: translateX(0);
}

.basketHeader, .basketFooter {
    padding: 16px;
    border-bottom: 1px solid #eee;
}

.basketHeader h2{
    font-family: var(--font-bold-cond);
}

.basketFooter { border-bottom: 0; border-top: 1px solid #eee; }

.basketContent { padding: 16px; overflow: auto; flex: 1; }

.closeBasket {
    cursor: pointer;
    font-size: 14px;
    margin-bottom:30px;
    line-height: 24px;
    display: block;
}

.closeBasket:before{
    content:'× ';
    font-size: 24px;
}



.jobs-none {
    display: grid;
    grid-template-columns: auto 1fr; /* links Bild, rechts Text */
    align-items: center;            /* Bild auf Texthöhe strecken */
    gap: 40px;
    max-width: 1090px;
    margin: auto;
}

.jobs-none a,
.jobs-none p{
    font-family: var(--font-bold-cond);
    font-size: 30px;
    line-height: 36px;
}
.jobs-none a{
    color: var(--gold);
    text-decoration: none;
}

.jobs-none-figure {
    height: 100%;       /* gleiche Höhe wie der Textblock */
    width: auto;        /* Breite ergibt sich aus Proportionen */
    object-fit: contain;/* Inhalt proportional einpassen */
    display: block;
}




.dm-lightbox { position: fixed; inset: 0; background: rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; z-index: 9999; }
.dm-lightbox{
    background: transparent url("https://dithmarscher.de/wp-content/themes/dithmarscher/images/shop_v2/zoom_bg.png") no-repeat center;
    background-size: 100%;
}


.dm-lightbox.hidden { display: none; }

.dm-lightbox-prev,
.dm-lightbox-next,
.dm-lightbox-close {
    position: absolute;
    border: none;
    background: rgba(0,0,0,.4);
    color: #000; font-size: 32px;
    background:#fff;
    width: 48px;
    height: 48px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    cursor: pointer;
}
.dm-lightbox-prev { left: 24px; }
.dm-lightbox-next { right: 24px; }
.dm-lightbox-close { top: 24px; right: 24px; font-size: 28px; }
.dm-lightbox-prev:hover,
.dm-lightbox-next:hover,
.dm-lightbox-close:hover { background: rgba(255,255,255,.85); }


.dm-lightbox button.dm-lightbox-prev:before,
.dm-lightbox button.dm-lightbox-next:before{
    content: '';
    display: inline-block;
    width: 15px;
    height: 15px;
    border-right: 3px solid #000000;
    border-bottom: 3px solid #000000;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
}

.dm-lightbox button.dm-lightbox-prev:before {
    transform: translateY(-50%) rotate(135deg);
    right: 15px;
}

.dm-page{
    color:#ffffff;
    padding:80px 0;
}

.dm-page-content{
    max-width: 980px;
    margin:auto;

}

.dm-page-content p{
    margin-bottom:20px;
}
.dm-page-content ul,
.dm-page-content ol{
    margin-left:24px;
    margin-bottom:20px;
}
.page-id-28 .dm-page-content ol li{
    margin-bottom:10px;
}
.page-id-28 h2{
    font-size:24px;
    font-weight:600;
    margin-bottom:10px;
}


    /* YEARS: 80% Höhe, mittig, mit Top/Bottom-Verlauf und eigenem Scroll */
.dm-timeline { position: relative; } /* für Sicherheit */

.dm-timeline-years{
    position: sticky;
    top: 5vh;                 /* damit der 80%-Block optisch mittig sitzt */
    height: calc(80vh - 291px);              /* Vorgabe: 80% Höhe */
    display: flex;
    align-items: center;       /* Jahresliste vertikal mittig im Block */
    justify-content: center;
    z-index: 3;                /* liegt über Content für Verläufe */
}

.dm-fanshop-item .dm-btn-primary.dm-btn-primary-mobile{
    display:none;
}

/* eigentliche scrollbare Liste */
.dm-timeline-years ul{
    max-height: 100%;
    overflow-y: auto;
    padding: 20px 0 20px 20px;
    scrollbar-width: none;           /* Firefox: ausblenden */
    -ms-overflow-style: none;        /* IE/Edge alt */
}
.dm-timeline-years ul::-webkit-scrollbar{ width:0; height:0; } /* WebKit: ausblenden */

/* transparente Verläufe oben/unten in Schwarz */
.dm-timeline-years::before,
.dm-timeline-years::after{
    content: "";
    position: absolute;
    left: 0; right: 0;
    height: 12%;                    /* Verlaufshöhe */
    pointer-events: none;
    z-index: 4;
}
.dm-timeline-years::before{
    top: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
}
.dm-timeline-years::after{
    bottom: 0;
    background: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));
}


/* Modal */
.dm-modal {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 9999;
}
.dm-modal.is-open { display: block; }

.dm-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.6);
}

.dm-modal__panel {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: min(720px, 100%);
    max-height: 85vh;
    background: #fff;
    border-radius: 16px 16px 0 0;
    overflow: auto;
    padding: 16px;
}

.dm-modal__close {
    position: sticky;
    top: 0;
    display: flex;
    justify-content: flex-end;
    padding-bottom: 8px;
    background: #fff;
}
.dm-modal__close button{
    font-size: 18px;
    background: transparent;
    color: #000;
}
.dm-modal__content{
    font-size:15px;
    line-height:21px;
}
.dm-modal__content h3{
    font-size:18px;
}

section.dm-biershop-section{
    width:100%;
    padding:40px 40px 80px;
}

section.dm-biershop-section .dm-biershop-button{
    margin-left:20px;
    float:right;
    max-width:90%;
}
section.dm-biershop-section .dm-biershop-content{
    width:100%;
    max-width:680px;
    margin:0 auto 0;
    padding:40px 20px 80px;
}

section.dm-biershop-section .dm-biershop-logo{
    margin-top:20px;
    max-width:90%;
    display:block;
}
#bookingFormContainer .booking-form-row-buttons br{
   display:none;
}

#bookingFormContainer .wpcf7-response-output{
    max-width: 580px;
    color: #fff;
    width:calc(100% - 40px);
    margin:20px auto;
}


/* Optional: Bildposition auf Mobile etwas nach oben/unten schieben */
@media (max-width: 900px){
    .dm-slide-image{ background-position: center; }
}

@media (max-width: 768px){
    .dm-timeline-text p.is-clamped {
        display: -webkit-box;
        -webkit-line-clamp: 12;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .dm-readmore {
        margin-top: .5rem;
        display: inline-block;
        text-decoration: underline;
        cursor: pointer;
        padding: 5px 10px;
        text-decoration: none;
        border-radius: 5px;
        font-size:14px;
    }
    .dm-team-card{
        display: flex;
        flex-direction: column-reverse; /* Bild oben, Text unten */
        align-items: center;
        text-align: center;
        gap: 16px;
        padding-top:20px;
    }

    .dm-team-image img{
        width: 100%;
        max-width: 260px;
        height: auto;
    }

    .dm-team-info{
        margin: 0;
        flex:none;
    }

    .dm-team-info h3{
        margin-top: 0;
    }


    .jobs-none{
        display: flex;
        flex-direction: column;     /* Bild oben */
        align-items: center;
        text-align: center;
        gap: 16px;
    }

    .jobs-none-figure{
        max-width: 100%;
        height: auto;
    }

    .jobs-none a,
    .jobs-none p{
        margin: 0;
        font-size: 16px;
        line-height: 1.5;
    }

    .page-id-18 .dm-lightbox-close{
        right:20px;
    }

    .dm-benefits-grid{
        display:block;
    }
    .dm-benefit-item{
        margin-bottom:20px;
    }

    .dm-benefit-content{
        display: flex;
        flex-direction: column;     /* Icon oben, Text unten */
        align-items: center;        /* horizontal zentriert */
        text-align: center;
        gap: 8px;
    }

    .dm-benefit-icon{
        margin: 0;                  /* falls Desktop-Margins stören */
    }

    .dm-benefit-content p{
        margin: 0;
        font-size: 20px;            /* optional: etwas größer lesbar */
        line-height: 1.3;
        text-align: center;
    }

    .dm-benefit-icon img {
        height: 100px;
        margin-right: 0px;
    }

    .dm-nutrition-table{
        font-size:14px;
    }


    .dm-slider{
        /* etwas weniger "Kanten" und bessere Touch-Performance */
        overflow: hidden;
    }

    /* Slides: nicht mehr 2-spaltig, sondern Bild + Overlay */
    .dm-slide,
    .dm-slide.first-slide{
        flex-direction: column; /* überschreibt row-reverse */
    }

    .dm-slide-image{
        flex: 1 1 auto;
        min-height: 58%;
    }

    /* Text als Overlay unten, damit das Bild nicht “wegdrückt” */
    .dm-slide-text-left{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;

        padding: 18px 16px calc(28px + env(safe-area-inset-bottom));
        z-index: 2;

        /* Lesbarkeit: dunklerer Verlauf von unten */
        background: linear-gradient(
                0deg,
                rgba(0,0,0,0.78) 0%,
                rgba(0,0,0,0.35) 55%,
                rgba(0,0,0,0.00) 100%
        );
    }
    #BorlabsCookieWidget{
        display:none!important;
    }

    /* Typo: groß, aber responsiv */
    .dm-slide-text-left h2{
        font-size: clamp(38px, 7vw, 54px);
        font-size:48px;
        line-height: 1.375;
        margin-bottom: 20px;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    }

    .dm-slide-text-left h2 + p{
        font-size: clamp(16px, 4.5vw, 22px);
        line-height: 1.25;
        margin-bottom: 14px;
        display: none;
    }

    /* CTA: volle Breite (leicht), besser zu treffen */
    .dm-slide-text-left .dm-btn-primary{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 14px 16px;
        font-size: 18px;
        line-height: 18px;
        border-radius: 10px;
    }

    .dm-slider-btn{
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
        width: 52px;
        height: 52px;
        border-radius: 12px;
        background: rgba(0,0,0,0.45);
        z-index: 10;
    }

    .dm-slider-btn.prev{ left: 12px; }
    .dm-slider-btn.next{ right: 12px; }

    /* Pfeil-Icon zentrieren */
    .dm-slider-btn::before{
        top: 50%;
        right: 18px;
    }

    .dm-slider-btn.prev::before{
        right: 14px;
    }




}

/* Optional: wenn du sehr kleine Geräte hast */
@media (max-width: 360px){
    .dm-slide-text-left{
        padding: 14px 12px calc(14px + env(safe-area-inset-bottom));
    }
}





/* Optional: Maxbreite fürs Bild, damit es nicht zu breit wird */
@media (min-width: 480px) {
    .jobs-none-figure { max-width: 280px; }
}

/* Auf sehr schmalen Screens untereinander stapeln */
@media (max-width: 480px) {
    .jobs-none {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        text-align: left;
    }
    .jobs-none-figure {
        height: 160px;     /* fixe, angenehme Höhe fürs Mobile */
        margin-bottom: 8px;
        justify-self: start;
    }
}




@media (max-width: 1800px) {
    .dm-bottle img {
        max-width: 120px;
    }
}

@media (max-width: 1640px) {
    .dm-bottle img {
        max-width: 100px;
    }
}

@media (max-width: 1500px) {
    .dm-bottle-floating-2 .dm-note-4{
        left: 320px;
    }
    .dm-note-4:after {
        top: 61px;
        left: -51px;
    }
    .dm-bottle-floating-2 .dm-bottle-cta {
        right: -80px;
        bottom: 0px;
    }
}

@media (max-width: 1440px) {
    .dm-bottle img {
        max-width: 80px;
    }
    .dm-benefits-grid,
    .dm-product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1280px) {
    .dm-bottle img {
        max-width: 60px;
    }
    .dm-bottle-pair .dm-bottle:first-child {
        left: -37px;
    }
    .dm-bottle-pair{
        padding-left:0;
        margin: 0 20px 0 30px;
    }
}


@media (max-width: 1600px) {
    :root {
        --font-size-headline: 72px;
        --line-height-headline: 72px;
    }
}

@media (max-width: 1200px) {
    .dm-footer-container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 40px;
        align-items: flex-start;
    }

    .dm-footer-logo {
        grid-column: 1;
    }

    .dm-footer-contact {
        grid-column: 2;
    }

    .dm-footer-links {
        grid-column: 3;
    }

    .dm-footer-socials {
        grid-column: 1;
        margin-top: 10px;
        justify-content: flex-start; /* oder center */
    }
}

@media (max-width: 1100px) {
    .genusstour-grid {
        display: flex;
        flex-wrap: wrap;
        /* falls es woanders auf column gestellt wurde */
        flex-direction: row !important;
        gap: 2rem;
    }

    /* Text immer in die erste Zeile, volle Breite */
    .genusstour-left {
        order: -1;                 /* nach vorne ziehen, falls im DOM später */
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Bild & Tabs teilen sich die zweite Zeile */
    .genusstour-center,
    .genusstour-right {
        order: 0;
        flex: 0 0 50%;
        max-width: calc(50% - 20px);
    }
}

@media (max-width: 768px) {
    .genusstour-grid {
        flex-direction: column;
    }
    .genusstour-grid {
        display: block;
    }

    .genusstour-left {
        order: 1;
    }

    .genusstour-center {
        order: 2;
    }

    .genusstour-right {
        order: 3;
    }

    .genusstour-entry{
        margin-bottom: 20px;
        max-width: 100%;
    }
    .wpcf7-form .booking-form-row label{
        width:100%;
        display:block;
    }
    .wpcf7-form .booking-form-row .wpcf7-form-control-wrap {
        width:100%;
        display:block;
    }
    .wpcf7-form .booking-form-row > p{
        display:block;
    }
    .dm-text-column p{
        font-size: 1rem;
    }
}

@media (max-width: 980px) {
    .dm-timeline-content{
        height: 100vh;
    }
    .dm-submenu-area {
        position: static;
        padding-top: 10px;
    }

    .genusstour-left {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 20px;
    }
    .genusstour-center{
        margin-bottom: 20px;
    }

    .dm-gallery-page {
        grid-template-columns: repeat(3, 1fr);  /* 3 Spalten */
        grid-template-rows: repeat(4, 120px);   /* 4 feste Zeilenhöhe à 200px */
        gap: 10px; /* etwas kleinerer Abstand für Mobile */
    }

    .genusstour-center,
    .genusstour-right {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .dm-section-news .dm-section-content,
    .dm-section-content {
        flex-direction: column;
        padding: 0; /* optional, falls gewünscht */
    }
    .dm-product-grid {
        grid-template-columns: repeat(1, 1fr);
    }
    .dm-benefits-grid {
        grid-template-columns: repeat(1, 1fr);
    }
    .dm-text-column {
        order: 1; /* Text nach dem Bild */
    }

    .dm-image-column {
        order: 0; /* Bild zuerst */
    }

    .dm-section-news .dm-text-column, .dm-section-news .dm-image-column,
    .dm-text-column,
    .dm-image-column {
        flex: 1 1 100%;
        max-width: 100%;
        width: 100%;
        padding: 0; /* falls du etwas Innenabstand willst */
        box-sizing: border-box;
    }

    .dm-image-column img {
        width: 100%;
        height: auto;
        object-fit: cover;
        display: block;
    }

    .dm-fanshop-grid {
        display: flex;
        flex-direction: column;
        gap: 40px; /* Abstand zwischen den Items */
    }

    .dm-fanshop-item {
        width: 100%;
    }


    .dm-nav {
        display: none;
        flex-direction: column;
        align-items: flex-end; /* rechtsbündig */
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        max-width: 100%;
        background-color: rgba(0,0,0,0.8);
        padding: 20px;
        z-index: 4;
    }

    .dm-nav.open {
        display: flex;
    }

    .dm-nav ul {
        width: 100%;
        flex-direction: column;
        gap: 15px;
    }

    .dm-nav li {
        text-align: right;
    }

    .dm-nav-toggle {
        display: block;
        background: none;
        border: none;
        color: #fff;
        font-size: 2rem;
        cursor: pointer;
        z-index: 1001;
    }



    .dm-submenu-area {
        display: none;
        padding-top: 10px;
    }

    .dm-submenu-wrapper.open .dm-submenu-area {
        display: block;
    }

    .dm-submenu-toggle {
        background: none;
        border: none;
        color: #fff;
        font-size: 1rem;
        text-align: right;
        width: 100%;
        cursor: pointer;
        padding: 10px 0;
    }

    .dm-submenu-toggle:after {
        content: '▾';
        margin-left: 8px;
    }

    .dm-submenu {
        padding: 0px;
        border: 0;
        width:100%;
        box-shadow:none;
        background: transparent;
    }
    .dm-submenu ul{
        display:block;
    }
    .dm-nav ul li{
        padding: 0;
    }
    .dm-nav ul{
        width:100%;
        max-width: 100%;
    }
    .dm-submenu ul li a {
        color: #fff;
        text-decoration: none;
        font-size: 0.9rem;
    }

    .dm-submenu ul li a:hover {
        color: #957D4A;
    }

    .dm-nav > ul > li > a{
        padding:2px 0;
        font-size: 20px;
    }
    .dm-submenu > ul > li > a{
        font-size: 15px;
        line-height:16px;
    }

    .dm-logo {
        width: 160px;
        height: 100px;
        top: 13px;
    }
    .dm-logo img {
        width: 100px;
    }
    .dm-team-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    :root {
        --font-size-headline: 48px;
        --line-height-headline: 48px;
    }


    .dm-team-info h3 {
        font-size: 36px;
        line-height: 36px;
    }

}


@media (max-width: 860px) {
    .dm-footer-container {
        flex-direction: column;
        display:flex;
    }

    .dm-footer-contact,
    .dm-footer-links,
    .dm-footer-socials,
    .dm-footer-logo {
        flex: 1 1 100%;
        margin:auto;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .dm-testimonial-content {
        flex-direction: column; /* Stapeln */
        text-align: center;
    }

    .dm-testimonial-image {
        order: -1; /* Bild immer zuerst */
    }

    .dm-testimonial-image img {
        max-width: 100%;
        height: auto;
    }

    /* Optional: Padding bei Mobile entfernen */
    .dm-testimonial-text {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .dm-fanshop-item h2{
        font-size:48px;
        line-height: 48px;
    }
    .genusstour-left h2{
        font-size:48px;
        line-height: 48px;
    }






}


@media (max-width: 768px) {
    .genusstour-grid {
        display: flex;
        flex-direction: column;
    }

    .genusstour-left,
    .genusstour-center,
    .genusstour-right {
        max-width: 100%;
        width: 100%;
    }

    .genusstour-left {
        order: 1;
    }

    .genusstour-center {
        order: 2;
    }

    .genusstour-right {
        order: 3;
    }
}


@media (max-width: 640px) {
    .dm-team-grid {
        grid-template-columns: 1fr;
    }

    .dm-gallery-page {
        grid-template-columns: repeat(2, 1fr);  /* 3 Spalten */
        grid-template-rows: repeat(6, 80px);   /* 4 feste Zeilenhöhe à 200px */
        gap: 10px; /* etwas kleinerer Abstand für Mobile */
    }
    section.dm-biershop-section .dm-biershop-button{
        margin:0 auto 20px;
        float:none;
        display: block;
    }
}

@media (max-width: 480px) {
    .dm-benefits-grid,
    .dm-product-grid{
        display:block;
    }
    .dm-benefit-item,
    a.dm-product-card{
        margin-bottom: 20px;
    }
    html,body{
        font-size:16px;
    }
    .dm-team-info h3 {
        font-size: 24px;
        line-height: 24px;
    }
    .dm-team-info .role {
        font-size: 16px;
    }
    .dm-gallery-page {
        grid-template-columns: repeat(1, 1fr);  /* 3 Spalten */
        grid-template-rows: repeat(2, 80px);   /* 4 feste Zeilenhöhe à 200px */
        gap: 10px; /* etwas kleinerer Abstand für Mobile */
    }
    .dm-header .dm-footer-socials{
        display:none;
    }
}

@media (max-width: 768px){

    .dm-bottle-grid{
        display: flex;
        flex-wrap: nowrap !important;   /* <-- entscheidend */
        justify-content: flex-start;
        align-items: flex-end;

        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;

        gap: 14px;
        padding: 8px 16px 18px;

        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
    }

    /* die großen Desktop-Margins sonst "ziehen" dir alles auseinander */
    .dm-bottle,
    .dm-bottle-pair{
        margin: 0 !important;
    }

    .dm-bottle-grid > .dm-bottle,
    .dm-bottle-grid > .dm-bottle-pair{
        flex: 0 0 auto;
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }

    /* Einzelflasche = ein Slide */
    .dm-bottle-grid > .dm-bottle-pair,
    .dm-bottle-grid > .dm-bottle{
        width: 64vw;
        max-width: 260px;
        min-width: 210px;
        justify-content: center;
    }
    .dm-bottle-grid .dm-bottle.dm-bottle-size-2 img,
    .dm-bottle-grid > .dm-bottle-pair .dm-bottle.dm-bottle-size-2 img{
        height: 34vh;
        max-height: 360px;
        width: auto;
    }
    .dm-page{
        padding: 80px 20px;
    }

    .dm-page .dm-page-content p {
        overflow-wrap: anywhere;   /* modern */
        word-break: break-word;    /* Fallback */
    }

    .dm-bottle-grid .dm-bottle.dm-bottle-size-1 img{
        height: 30vh;
        max-height: 300px;
        width: auto;
    }


    .dm-bottle-pair .dm-bottle:first-child {
        left: 30px;
    }
    .dm-bottle-pair .dm-bottle:last-child {
        right: -30px;
    }



    .table-wrap{
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
        border: 2px solid var(--gold);
        border-radius: 20px;
    }

    .table-wrap table{
        width: 100%;
        min-width: 900px; /* oder passend zur echten Breite */
        border-collapse: collapse;
    }

    .table-wrap th,
    .table-wrap td{
        white-space: normal;           /* Umbrüche erlauben */
        overflow-wrap: anywhere;       /* lange Strings/URLs brechen */
        word-break: break-word;
    }

    .booking-form-row {
        flex-direction: column;
        padding: 15px; /* optional */
    }

    .booking-form-row label {
        margin-bottom: 5px; /* Abstand zum Input */
    }

    .booking-form-row textarea {
        height: 150px;
        flex: none;
    }

    /* Paar = ein Slide */
    .dm-bottle-grid > .dm-bottle-pair2{
        width: 74vw;
        max-width: 320px;
        min-width: 240px;
        gap: 10px;
        justify-content: center;
    }

    /* Flaschenhöhe auf Mobile begrenzen */
    .dm-bottle img{
        height: 42vh;
        max-height: 360px;
        width: auto;
    }

    /* optisch sauberer Anfang/Ende */
    .dm-bottle-grid::before,
    .dm-bottle-grid::after{
        content:"";
        flex: 0 0 16px;
    }

    /* Scrollbar aus */
    .dm-bottle-grid{ scrollbar-width: none; }
    .dm-bottle-grid::-webkit-scrollbar{ display:none; }


    /* Layout von 2-spaltig auf 1-spaltig */
    .dm-product-detail-inner{
        display: flex;
        flex-direction: column;     /* untereinander */
        gap: 18px;
    }

    /* Bild/Flasche kommt nach oben */
    .dm-product-detail-image{
        order: 1;
        width: 100%;
    }

    /* Textblock kommt danach */
    .dm-product-detail-text{
        order: 2;
        width: 100%;
    }

    /* Tabs-Box soll gut sitzen */
    .dm-product-detail-text .genusstour-right{
        max-width: 100% !important;
    }

    /* Flasche zentrieren & Platz schaffen */
    .dm-bottle-floating{
        position: static;
        margin: 0 auto;
        width: 100%;
        max-width: 420px;
        display: flex;
        justify-content: center;
    }

    /* Pfeile mobil besser erreichbar */
    .dm-product-prev,
    .dm-product-next{
        top: 50%;
        transform: translateY(-50%);
        width: 52px;
        height: 52px;
        border-radius: 12px;
        z-index: 20;
    }

    .dm-product-prev{ left: 8px; }
    .dm-product-next{ right: 8px; }

    /* Notes/Badges: falls sie mobil zu wild sind -> etwas kompakter */
    .dm-float.dm-note{
        font-size: 14px;
        line-height: 1.15;
    }


    .dm-fanshop-item{
        display: flex;
        flex-direction: column-reverse; /* Bild/Button oben, Info darunter */
        gap: 16px;
        align-items: stretch;
    }

    .home .dm-fanshop-item{
        flex-direction: column;
    }


    .dm-glass-image-cart{
        width: 100%;
    }

    .dm-glass-image{
        display: flex;
        justify-content: center;
        align-items: flex-end;
    }

    .dm-glass-image img{
        max-width: 220px;
        width: auto;
        height: auto;
        max-height: 200px;
    }

    /* Button mobil full width */
    .dm-fanshop-item .dm-btn-primary{
        width: 100%;
        display: inline-flex;
        justify-content: center;
    }

    .dm-fanshop-item .dm-btn-primary.dm-btn-primary-mobile{
        width: 100%;
        display: inline-flex;
        justify-content: center;
        margin:20px auto 0;
    }

    /* Text zentrieren (optional – rausnehmen, wenn du linksbündig willst) */
    .dm-glass-info{
        text-align: center;
    }

    .dm-glass-selects select{
        margin:auto;
    }
    .dm-bottle-floating img{
        height:340px;
    }
    .dm-bottle-floating-2 .dm-bottles-floating img:first-child{
        height:300px;
    }
    .dm-bottle-floating img.dm-bottle-bt
    {
        height: 280px;
        top: 30px;
    }
    .dm-bottle-floating img.dm-bottle-bg {
        height: 300px;
        top: 20px;
    }
    .dm-product-detail{
        height:auto;
    }
    .dm-product-detail-inner {

        padding: 0 10px;
    }
    .dm-bottle-floating button {
        top: 167px;
        left: 165px;
    }
    .dm-bottle-floating button.dm-product-prev{
        left: -100px;
    }


    /* alle Thumbs standardmäßig aus */
    .dm-gallery-page .gallery-thumb{
        display: none;
    }

    /* nur der aktive Thumb wird gezeigt */
    .dm-gallery-page .gallery-thumb.is-active{
        display: block;
        width: 100%;
    }

    /* Bild schön groß & responsiv */
    .dm-gallery-page .gallery-thumb.is-active img{
        width: 100%;
        height: auto;
        display: block;
        border-radius: 10px; /* optional */
    }

    /* optional: etwas Luft links/rechts */
    .dm-gallery-track-wrapper{
        padding: 0 10px;
    }


    /* WICHTIG: Grid abschalten, sonst bleibt die große Raster-Fläche */
    .dm-gallery-page{
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;

        /* falls irgendwo grid-template gesetzt ist */
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        gap: 0 !important;
    }

    /* Optional: nur die aktive Seite überhaupt anzeigen (reduziert DOM-Fläche) */
    .dm-gallery-page{ display: none !important; }
    .dm-gallery-page.active{ display: block !important; }

    /* Thumb (das aktive) soll nicht “in einer Grid-Zelle” hängen */
    .dm-gallery-page .gallery-thumb.is-active{
        display: block !important;
        width: 100%;
        margin: 0 auto;
    }

    .dm-gallery-page .gallery-thumb.is-active img{
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
    }

    .dm-slider {
        height: calc(100vh - 150px);
    }
    .dm-bottle img {
        max-width: 110px;
    }

    .dm-lightbox-image{
        height:auto;
    }
    .dm-lightbox {
        background-size: cover;
    }

    .dm-team-info h3 br {
        display: none;
    }
    .dm-testimonial-right
    {
        padding-right: 20px;
    }
    .dm-testimonial {
        padding: 40px 20px;
    }
    .dm-testimonial-left .dm-quote::before {
        left: 0px;
    }
    .dm-testimonial-right .dm-quote::before {
        left: 0px;
    }

    .dm-product-card h3 {
        font-size: 54px;
        line-height: 54px;
    }

    .dm-timeline{
        padding: 20px;
        gap: 10px;
    }
    .dm-timeline-inner {
        flex-direction: column;   /* untereinander */
        gap: 20px;
        min-height: auto;         /* wichtig, sonst viel Leerraum */
        overflow: hidden;
    }

    .dm-timeline-text {
        padding: 0 0px;          /* weniger Rand mobil */
        max-width: 100%;
        font-size: 16px;
        line-height: 24px;
    }

    .dm-timeline-image {
        flex: none;
        width: 100%;
    }

    .dm-timeline-image img {
        width: 100%;
        height: auto;
        max-height:190px;
        display: block;
    }
    .dm-timeline-image { order: -1; }

    .dm-timeline-years li.active {
        font-size: 28px;
        line-height: 42px;
        transform: none;
    }
    .dm-timeline-years li{
        max-width:100%;
    }
    .dm-timeline-years ul{
        width:120px;
        padding: 20px 0 20px 10px
    }
    .dm-timeline-years {
        margin-right: 0px;
    }
    .dm-timeline-text p{
        font-size: 13px;
        line-height:17px;
    }
    .dm-product-detail-inner{
        display:block;
    }
    .dm-float.dm-note{
        display:none;
    }
    .dm-bottle-cta{
        display:none;
    }
    .dm-product-detail-inner {
        display: flex;
        flex-direction: row; /* Desktop: Text links, Bild rechts */
    }
    .dm-product-detail-inner {
        flex-direction: column; /* untereinander */
    }

    .dm-product-detail-text {
        order: 2; /* nach unten */
    }

    .dm-product-detail-image {
        order: 1; /* nach oben */
    }
    .dm-bottle-floating button{
        right:0;
        left:auto;
    }
    .dm-bottle-floating button.dm-product-prev {
        left: 0px;
    }
    .taste-row span {
        font-size: 22px;
        line-height: 25px;
    }
    .tab-header button {
        padding: 0.5rem;
        font-size:14px;
    }
    .dm-product-detail-text p {
        font-size: 14px;
        line-height: 22px;
        margin-bottom: 20px;
    }
    .dm-bottle-floating-2 .dm-bottles-floating{
        left: 0;
    }
    .dm-bottle-floating-2 .dm-bottles-floating img:first-child {
        right: 6px;
    }
    .dm-product-detail-text {
        padding-top: 20px;
    }
    #checkoutStepTitle{
        white-space: normal;
        min-width: 0;
    }

    .booking-form-container {
        padding-top: 120px;
        padding-bottom: 20px;
        overflow-y: scroll;
        align-items: start;
    }

    .booking-form {
        width: 95%;
    }

    .wpsr-ig-all-feed.wpsr-row > .wpsr-custom-info-tile{
        order: -1;
    }
    .dm-partner-grid{
        display:block;
    }
    .dm-partner-grid .dm-fanshop-item{
        margin-bottom:20px;
    }
    .dm-fanshop-item h3,
    .dm-glass-info h3 {
        font-size: 28px;
    }

    .dm-fanshop-item h3 {
        line-height: 32px;
    }

    .dm-partner h1 {
        font-size: 48px;
        line-height: 48px;
    }

}
@media (max-width: 400px) {
    .dm-product-content {
        max-width: 60%;
        z-index: 1;
    }
    .dm-product-card h3 {
        font-size: 44px;
        line-height: 44px;
    }
    .dm-product-card strong {
        font-size: 22px;
        line-height: 22px;
    }
    .dm-product-card p {
        font-size: 16px;
        line-height: 22px;
    }
}


/* AB 768px: Flaschen einheitlich mitskalieren */
@media (min-width: 768px) {

    .dm-bottle-grid{
        flex-wrap: nowrap;     /* verhindert 2. Reihe */
        justify-content: center;
    }

    /* Abstände leicht relativ machen */
    .dm-bottle{
        margin: 0 clamp(4px, 0.6vw, 14px);
    }

    /* Bilder skalieren mit Viewportbreite */
    .dm-bottle img{
        width: auto;
        height: auto;
    }

    /* Größenklassen relativ statt fixer px */
    .dm-bottle.dm-bottle-size-1 img{
        max-width: clamp(80px, 8vw, 155px);
    }
    .dm-bottle.dm-bottle-size-2 img{
        max-width: clamp(70px, 7.5vw, 140px);
        width: auto;
        height: auto;
    }
    .dm-bottle.dm-bottle-size-3 img{
        max-width: clamp(55px, 6.5vw, 122px);
    }

    /* Pair-Abstände ebenfalls relativ */
    .dm-bottle-pair{
        margin: 0 clamp(10px, 1.2vw, 24px) 0 clamp(20px, 3vw, 60px);
        padding-left: clamp(14px, 2vw, 26px);
    }

    .dm-bottle-pair .dm-bottle:first-child{
        left: calc(-1 * clamp(30px, 4vw, 54px));
    }


}


@media (max-width: 640px) {
    .basketContainer,
    .checkoutContainer{
        position: fixed;          /* wie Overlay */
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;

        width: 100vw;
        height: 100vh;

        max-width: none;          /* evtl. Limits aufheben */
        border-radius: 0;

        overflow-y: auto;         /* vertikal scrollen */
        overflow-x: hidden;

        -webkit-overflow-scrolling: touch; /* iOS smooth scroll */
        margin:0;
    }
    .dm-age-boxes {
        gap: 20px;
    }

    .dm-box button {
        font-size: 20px;
        line-height: 24px;
        padding: 10px 10px;
        width: 140px;
    }
    .dm-box button strong {
        font-size: 40px;
        line-height: 40px;
    }
    .dm-section-contact{
        padding:20px 10px;
    }
}

@media (max-width: 420px) {
    .dm-info-text {
        margin: 20px auto 40px;
    }
    .basketList .basketRow {
        display: grid !important;
        width: 100%;
        box-sizing: border-box;

        /* 4 Spalten */
        grid-template-columns: 84px minmax(0, 1fr) 100px 36px !important;

        /* IMG oben links, TITLE darunter.
           Rechts daneben bleiben price + remove über 2 Reihen */
        grid-template-areas:
        "img qty price remove"
        "title qty price remove" !important;

        column-gap: 16px;
        row-gap: 8px;
        padding: 14px 0;
        border-bottom: 1px solid #f0f0f0;
    }

    .basketRow .basketImg {
        grid-area: img;
        width: 84px;
    }

    .basketRow .basketTitle {
        grid-area: title;
        font-weight: 700;
        line-height: 1.15;
    }

    .basketRow .basketQty {
        grid-area: qty;
    }

    .basketRow .basketPrice {
        grid-area: price;
        justify-self: end;
        text-align: right;
        width: 100px;
    }

    .basketRow .basketRemove {
        grid-area: remove;
    }
    .checkoutForm .row {
        display: block;
        gap: 12px;
        margin-bottom: 12px;
    }

    .checkoutForm .row.two label:first-child {
        margin-bottom: 12px;
    }

}

@media (max-width: 360px) {
    .dm-product-content {
        max-width: 56%;
        z-index: 1;
    }
    .dm-product-card h3 {
        font-size: 38px;
        line-height: 38px;
    }
    .dm-product-card strong {
        font-size: 18px;
        line-height: 18px;
    }
    .dm-product-card p {
        font-size: 16px;
        line-height: 22px;
    }
    .dm-product-image {
        right: 0px;
    }
}