@import url(reset.css);
html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

:target {
  scroll-margin-top: 100px;
}

.dsa-secure-plugin iframe {
    height: 870px;
}

/*-----------FONTS-----------*/

/* montserrat-alternates - latin */
/* montserrat-alternates-100 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat Alternates';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/montserrat-alternates-v18-latin-100.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/montserrat-alternates-v18-latin-100.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* montserrat-alternates-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat Alternates';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/montserrat-alternates-v18-latin-200.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/montserrat-alternates-v18-latin-200.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* montserrat-alternates-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat Alternates';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/montserrat-alternates-v18-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/montserrat-alternates-v18-latin-300.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* montserrat-alternates-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat Alternates';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/montserrat-alternates-v18-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/montserrat-alternates-v18-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* montserrat-alternates-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat Alternates';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/montserrat-alternates-v18-latin-500.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/montserrat-alternates-v18-latin-500.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* montserrat-alternates-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat Alternates';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/montserrat-alternates-v18-latin-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/montserrat-alternates-v18-latin-600.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* montserrat-alternates-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat Alternates';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/montserrat-alternates-v18-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/montserrat-alternates-v18-latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* montserrat-alternates-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat Alternates';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/montserrat-alternates-v18-latin-800.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/montserrat-alternates-v18-latin-800.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* montserrat-alternates-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat Alternates';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/montserrat-alternates-v18-latin-900.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/montserrat-alternates-v18-latin-900.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* forum-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Forum';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/forum-v19-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/forum-v19-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/*-----------FONTGESTALTUNG-----------*/


body {
  font-family: 'Montserrat Alternates', sans-serif;
  color: #1A0303;
  overflow-x:visible;
}

p {
  font-size: 16px; 
  font-weight: 300; 
  margin-bottom: 32px;
  line-height: 22px;
}

a {
  font-weight: 300;
  text-decoration: none; 
  cursor: pointer;
  color: #1A0303;
}

a:hover {
  color: #5D0806;
}

h1 {
  font-family: "Forum";
  font-weight: 400;
  color: #fff;
  font-size: 65px; 
   margin-bottom: 24px;
}

h1 b {
  font-size: 30px;
}

h2 {
  font-family: "Forum";
  font-weight: 400;
  font-size: 50px;
  color: #5C0806;
  margin: 0;
  
}

h3 {
  font-family: "Forum";
  font-size: 28px; 
  font-weight: 500;
  color: #fff;
}

h4 {
  font-size: 25px;
  font-weight: 600;
  color: #676C32;
}

h5 {
  font-size: 20px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 16px;
}

li {
  font-size: 14px; 
  list-style: disc;
}

strong {
  font-weight: 500; font-weight: 600;}


/*-----------NAVI-----------*/


.logo {
  background: url("../images/logo.png") no-repeat; 
  background-size: contain;
  height: 70px; 
  width: 312px; 
  position: fixed;
  top: 8px;
  left: 5%;
  z-index: 3;
} 

nav {
  position: fixed;
  top: 0;
  background: #FFFDF5; 
  border-radius: 2px;
  width: 100%; 
  text-align: right; 
  padding: 22px 0; 
  z-index: 100;
}

nav ul {
  margin: 12px 5%;
}

nav ul li {
  display: inline-block; 
  margin: 0 1%; 
}

nav ul li a {
  text-decoration: none; 
  font-size: 18px; 
  color: #676C32; 
  font-weight: 600;
  padding: 12px 24px;
  border-bottom: none;
}

nav ul li a:hover {
  background-color: #676C31;
  padding: 12px 24px;
  color: #fff;
  border-radius: 62px;

  transition: 0.5s;
}

nav ul li strong {
  color: #432C1A; 
  font-weight: 600;
}

.navi {
  display: none;
}

.burger-nav {
  position: fixed; right: 0; 
  top: -10px; 
  color: #5C0806; 
  z-index: 9999; 
  -webkit-transform: rotate(-90deg); 
  transform: rotate(-90deg); 
  font-size: 40px; 
  cursor: pointer; 
  transition: all .4s ease-in-out; 
  background-color: #FFFDF5;
  /* padding: 16px 21px 21px 19px; */
  padding: 15px 30px 20px 20px;
}

.burger-nav b {
  transition: all .4s ease-in-out; 
  float: left; 
  margin-left: 0; 
  font-family: 'Poppins'; 
  font-style: normal;
}

.burger-nav-anim {
  top: -5px; 
  color: #5C0806;
  padding: 18px 25px 18px 30px;
}

.burger-nav-anim b:first-of-type {
  -webkit-transform: rotate(45deg); 
  transform: rotate(45deg);
}

.burger-nav-anim b:nth-of-type(2) {
  opacity: 0;
}

.burger-nav-anim b:last-of-type {
  -webkit-transform: rotate(-45deg); 
  transform: rotate(-45deg); 
  margin-left: -63%;
}

.full-screen-nav {
  position: fixed; 
  z-index: 9998; 
  width: 100%; 
  height: 80vh; 
  background: #fff; 
  display: table; visibility: 
  hidden; transition: all .4s ease-in-out; 
  opacity: 0;
}

.full-screen-nav ul {
  text-align: center; 
  display: table-cell; 
  vertical-align: middle; 
  width: 100%;
  background-color: #FFFDF5;
}

.full-screen-nav ul li a {
  padding: 20px; 
  display: block; 
  font-size: 30px; 
  color: #5C0806; 
  transition: all .4s ease-in-out; 
  text-decoration: none;
}

.fadeIn {
  opacity: 1 !important; 
  visibility: visible !important;
  transform: translateY(-70px);
}

.fadeUp {
  opacity: 1 !important; 
  margin-top: 0 !important;
}

/*----------- HERO SLIDER-----------*/

.hero {
  margin-top: 70px;
  width: 100%;
  height: clamp(600px, 80vh, 900px);
  overflow: hidden;
  position: relative;
}

.hero-slides {
  display: flex;
  width: 300%;
  height: clamp(600px, 80vh, 900px);
  transition: transform 1s ease;
}

.hero-slides img {
  width: 100%;
  height: clamp(600px, 80vh, 900px);
  display: block;
  object-fit: cover;
  object-position: center;
}

.slide--1 img { 
  object-position: 70% 60%; 
}

.hero-slides > * {
  flex: 0 0 33.3333%;
  height: clamp(600px, 80vh, 900px); 
}

#hero1:checked ~ .hero-slides { transform: translateX(0%); }
#hero2:checked ~ .hero-slides { transform: translateX(-33.333%); }
#hero3:checked ~ .hero-slides { transform: translateX(-66.666%); }

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.stoerer {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 10%;
  transform: translateY(-50%);
  width: min(90vw, 770px);
  color: #fff;
  line-height: 1.0;
}

.stoerer .weinglass{
  background: url(../images/weinglass.png) no-repeat center / contain;
  width: 340px; height: 200px; margin-bottom: 16px;
}

.stoerer h1{ font-size: clamp(32px, 5vw, 65px); margin-bottom: 16px; font-family: "Forum"; font-weight: 400; }
.stoerer h3{ font-size: clamp(20px, 3vw, 28px); margin-bottom: 8px; font-family: "Forum"; font-weight: 500; }
.stoerer p { max-width: 600px; line-height: 1.5; margin-bottom: 60px; }


.btn { 
  background-color: #fff; 
  text-align: center; 
  color: #676C32; 
  border-radius: 62px; 
  padding: 24px 32px; 
  transition: 0.5s; 
  font-size: 21px; 
} 
  
.btn:hover { 
  background-color: #676C32; 
  color: #fff; 
}


.hero-arrows label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 38px;
  color: #fff8;
  cursor: pointer;
  user-select: none;
  z-index: 3;
  display: none;
  transition: color .3s;
}
.hero-arrows label:hover { color: #fff; }
.hero-arrows .prev { left: 24px; }
.hero-arrows .next { right: 24px; }

#hero1:checked ~ .hero-arrows .prev1,
#hero1:checked ~ .hero-arrows .next1,
#hero2:checked ~ .hero-arrows .prev2,
#hero2:checked ~ .hero-arrows .next2,
#hero3:checked ~ .hero-arrows .prev3,
#hero3:checked ~ .hero-arrows .next3 {
  display: block;
}

.hero-nav {
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 3;
}
.hero-nav label {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin: 0 6px;
  background: #fff7;
  cursor: pointer;
  transition: background 0.3s;
}

#hero1:checked ~ .hero-nav label[for="hero1"],
#hero2:checked ~ .hero-nav label[for="hero2"],
#hero3:checked ~ .hero-nav label[for="hero3"] {
  background: #fff;
}

.hero-slider input {
  display: none;
}



/*  ÜBER UNS */


.about {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  background-color: #fff;
  position: relative;
  margin-top: 100px;
  margin-bottom: 100px;
}

.about-wrapper {
  display: flex;
  width: 80%;
  margin: 0 auto;
  align-items: center;
  gap: 100px;
  z-index: 1;
}

.about-left {
  flex: 1 1 50%;
}

.about .headline {
  display: flex;
  gap: 32px;
  margin-bottom: 44px;
  justify-content: flex-start;
}

.icon {
  display: block;
  background-image: url(../images/trauben.svg);
  background-size: cover;
  width: 36px;
  height: 50px;
}

.about-right {
  text-align: center;
}

.about-right img {
  width: 100%;  
  max-width: 500px;
  height: auto;
  border-radius: 32px;
}

.about-left-text p:last-child {
  margin-bottom: 0;
}

.expander {
  display: inline-block;
  border: 2px #676C32 solid;
  border-radius: 24px;
  padding: 10px 28px;
  background-color: #fff;
  color: #676C32;
  font-weight: 600;
  font-size: 18px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.expander:hover {
  border: 2px #676C32 solid;
  background-color: #676C32;
  color: #fff;
}

.expander__panel{
  overflow: hidden;
  max-height: 0;
  transition: max-height .35s ease;
}

.expander[aria-expanded="true"] + .expander__panel{
  max-height:600px; 
}

.about-footer {
  background-image: url(../images/dekorative-weinlinie.svg);
  background-size: contain;
  background-position: right;
  background-repeat: no-repeat;
  width: 100%;
  height: clamp(150px, 25vw, 400px);
  z-index: 0;
  position: absolute;
  top: 465px;
}



/*---------- SORTIMENT -----------*/
.sortiment {
  background-image: url(../images/sortiment-bg.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-top: 100px;
  padding-bottom: 100px;
  margin-top: 100px;
}

.sortiment-wrapper .icon {
  background-image: url(../images/trauben-fff.svg);
}

.sortiment-wrapper h2{
  color: #fff;
}

.headline {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin: 0 0 44px 0;
}

.sortiment-block-1 {
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 24px;
  border-radius: 32px;
  width: 80%;
  margin: 0 auto;
  margin-bottom: 44px;
}


.wein-left{
  border-radius: 32px;
  overflow: hidden;        
}

.wein-left img{
  width: 100%;
  height: 100%;
  aspect-ratio: 16/13;      
}

.wein-right h2{
  color: #fff;
  margin: 2px 0 10px;
  font-size: clamp(22px, 3.2vw, 34px);
  line-height: 1.15;
}
.wein-right p{
  color: #fff;
  margin: 0 0 32px 0;
  line-height: 1.55;
  max-width: 60ch;
}

.thumbs{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.thumbs img{
  width: 100%;
  height: 100%;
  aspect-ratio: 3/4;
  display: block;
}

.thumbs img:nth-child(1) {
  border-radius: 16px 0 0 16px; 
}

.thumbs img:nth-child(2) {
  border-radius: 0 0 0 0; 
}

.thumbs img:nth-child(3) {
  border-radius: 0 16px 16px 0; 
}

.fit-cover{  object-fit: cover;   object-position: center; } 
.fit-contain{object-fit: contain; object-position: center; }  


.sortiment-block-2 {
  display: grid;
  grid-template-columns: 60% 40%;
  gap: 24px;
  border-radius: 32px;
  width: 80%;
  margin: 0 auto;
  margin-bottom: 44px;
}

.feinkost-right{
  border-radius: 32px;
  overflow: hidden;        
}

.feinkost-right img{
  width: 100%;
  height: 100%;
  aspect-ratio: 16/13;      
}


.feinkost-left h2{
  color: #fff;
  margin: 2px 0 10px;
  font-size: clamp(22px, 3.2vw, 34px);
  line-height: 1.15;
}
.feinkost-left p{
  color: #fff;
  margin: 0 0 32px 0;
  line-height: 1.55;
  max-width: 60ch;
}

.sortiment-block-3 {
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 24px;
  border-radius: 32px;
  width: 80%;
  margin: 0 auto;
  margin-bottom: 44px;
}


.praesente-left{
  border-radius: 32px;
  overflow: hidden;        
}

.praesente-left img{
  width: 100%;
  height: 100%;
  aspect-ratio: 16/13;      
}

.praesente-right h2{
  color: #fff;
  margin: 2px 0 10px;
  font-size: clamp(22px, 3.2vw, 34px);
  line-height: 1.15;
}
.praesente-right p{
  color: #fff;
  margin: 0 0 32px 0;
  line-height: 1.55;
  max-width: 60ch;
}


/*---------- NEWS -----------*/

.news {
  margin-top: 100px;
  margin-bottom: 100px;
}

.news .headline {
  margin-bottom: 16px;
}

.news .icon {
  background-image: url(../images/nachricht-icon.svg);
  width: 44px;
}

.news > p {
  display: flex;
  justify-content: center;
  width: 30%;
  margin: 0 auto;
  margin-bottom: 44px;
  text-align: center;
}

.news-cards{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 80%;
  height: auto;
  margin: 0 auto;
  gap: 44px;
}

.news-cards > .card,
.news-cards > .last-card{
  display: grid;
  grid-template-columns: minmax(220px, 35%) 1fr; 
  align-items: stretch;
  gap: 0;
  border: 1px #D8D4D2 solid ;
  border-radius: 32px;
  background: #fff;
  overflow: hidden;
  min-height: clamp(200px, 26vw, 260px);
}

.news-cards .left{
  position: relative;
  overflow: hidden;
}
.news-cards .left img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.news-cards .right{
  padding: 24px;
  display: grid;
  align-content: center;
  gap: 16px;
}

.news-cards .right h4{
  margin: 0;
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.25;
}
.right p{
  margin: 0;
  line-height: 1.55;
}

.news-cards a{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  max-width: 340px;
  background: #5C0806;
  color: #fff;
  border-radius: 9999px;
  font-weight: 500;
  border: solid #fff 1px;
  transition: all 0.3s ease;
  font-size: 18px;
}

.news-cards a:hover {
  background:#fff; 
  color: #5C0806;
  border: solid #5C0806 1px;
}


/*---------- TERMINE -----------*/
.termine {
  background-color: #4B0209;
  margin: 100px 0;
  padding: 100px 0;
}

.termine-slider{
  width: 80%;
  border-radius: 32px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

.termine-track{
  display: flex;
  gap: 24px;
  width: 5796px;
  animation: termine-scroll 50s linear infinite;
}

.termine-slider:hover .termine-track{
  animation-play-state: paused;
}

@keyframes termine-scroll{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-2898px); }
}

.termine .headline {
  margin-bottom: 44px;
}

.termine .icon {
  background-image: url(../images/termine.svg);
  background-size: contain;
  background-repeat: no-repeat;
  width: 46px;
  height: 46px;
}

.termine .headline h2 {
  color: #fff;
}

.termine > p {
  color: #fff;
  display: flex;
  justify-content: center;
  width: 30%;
  margin: 0 auto;
  margin-bottom: 44px;
  text-align: center;
}

.termine-cards {
  align-items: center;
	display: flex;
	justify-content: center;
  gap: 24px;
} 

.termine-card {
  display: flex;
  width: 390px;
  height: 205px;
  background-color: #fff;
  border-radius: 16px;
  overflow: hidden;
}

.termine-left {
  display: block;
  width: 160px;
  height: 205px;
}

.termine-left img{
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
  width: 160px;
  height: 205px;
}

.termine-right {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 16px;
}

h5 {
  font-size: 16px;
  font-weight: 600;
  color: #5C0806;
  margin-bottom: 24px;
}

h6 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 24px;
}

/*---------- GALERIE -----------*/
.galerie {
  margin-top: 100px;
  margin-bottom: 100px;
}

.galerie .headline {
  margin-bottom: 16px;
}

.galerie .icon {
  background-image: url(../images/galerie-icon.svg);
  background-size: contain;
  background-repeat: no-repeat;
  width: 46px;
  height: 46px;
}

.galerie > p {
  display: flex;
  justify-content: center;
  width: 30%;
  margin: 0 auto;
  margin-bottom: 44px;
  text-align: center;
}

.gallery-container { 
  width:80%; 
  margin:0 auto; 
}

.gallery-viewport{
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  height: 60vh;
}

.gallery-container input {
  display:none;
}

.gallery-slides { 
  display: flex;
  width:400%; 
  height:100%; 
  transition:transform 1s ease; 
}

.gallery-slides .slide {
  width: 25%;
}

.gallery-slides img { 
  width:100%; 
  height:100%; 
  object-fit:cover; 
}

#slide1:checked ~ .gallery-viewport .gallery-slides{ transform:translateX(0%); }
#slide2:checked ~ .gallery-viewport .gallery-slides{ transform:translateX(-25%); }
#slide3:checked ~ .gallery-viewport .gallery-slides{ transform:translateX(-50%); }
#slide4:checked ~ .gallery-viewport .gallery-slides{ transform:translateX(-75%); }

.gallery-arrows label {
  position:absolute; 
  top:50%; 
  transform:translateY(-50%);
  font-size:32px; 
  color:#aaa; 
  cursor:pointer; 
  user-select:none;
  transition:color .3s;
  display:none; 
}

.gallery-arrows .prev { 
  left:16px; 
}

.gallery-arrows .next { 
  right:16px; 
}

.gallery-arrows label:hover { 
  color:#5C0806; 
}

#slide1:checked ~ .gallery-viewport .gallery-arrows .prev1,
#slide1:checked ~ .gallery-viewport .gallery-arrows .next1 { 
  display:block; 
}

#slide2:checked ~ .gallery-viewport .gallery-arrows .prev2,
#slide2:checked ~ .gallery-viewport .gallery-arrows .next2 { 
  display:block;
}

#slide3:checked ~ .gallery-viewport .gallery-arrows .prev3,
#slide3:checked ~ .gallery-viewport .gallery-arrows .next3 { 
  display:block; 
}

#slide4:checked ~ .gallery-viewport .gallery-arrows .prev4,
#slide4:checked ~ .gallery-viewport .gallery-arrows .next4 { 
  display:block; 
}

.gallery-nav{
  display:flex; justify-content:center; gap:10px;
  margin-top:12px;
}
.gallery-nav label{
  width:12px; height:12px; border-radius:50%; background:#bbb; cursor:pointer; transition:background .3s;
}

#slide1:checked ~ .gallery-nav label[for="slide1"],
#slide2:checked ~ .gallery-nav label[for="slide2"],
#slide3:checked ~ .gallery-nav label[for="slide3"],
#slide4:checked ~ .gallery-nav label[for="slide4"]{ background:#5C0806; }

.gallery-container:has(#slide1:checked) .gallery-nav label[for="slide1"],
.gallery-container:has(#slide2:checked) .gallery-nav label[for="slide2"],
.gallery-container:has(#slide3:checked) .gallery-nav label[for="slide3"],
.gallery-container:has(#slide4:checked) .gallery-nav label[for="slide4"]{
  background:#5C0806;}





/*---------- KONTAKT -----------*/
.kontakt {
  margin-top: 100px;
  margin-bottom: 100px;
}

.kontakt .headline {
  margin-bottom: 44px;
}

.kontakt .icon {
  background-image: url(../images/kontakt-icon.svg);
  background-size: contain;
  background-repeat: no-repeat;
  width: 46px;
  height: 46px;
}

.kontakt-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 80%;
  margin: 0 auto;
  gap: 44px;
  z-index: 1;
}

.kontakt-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.kontakt-left {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.adresse p {
  line-height: 24px;
  margin-bottom: 0;
}


.dsa-secure-plugin {
  border-radius: 0 0 32px 32px !important;
  border: solid #D8D4D2 1px;
  overflow: hidden;
  width: 100% !important;
  height: 868px !important;
}



.card-left, .card-right{
  display: flex;
  gap: 30px;
  padding: 32px;
  border: solid #D8D4D2 1px;
}

.card-left {
  border-radius: 32px 0 0;
}

.card-right{
  border-radius: 0 32px 0 0;
}


.card-left .kontakt-icon {
  background-image: url(../images/adresse.svg);
  background-size: contain;
  background-repeat: no-repeat;
  width: 25px;
  height: 25px;
}

.card-right .kontakt-icon {
  background-image: url(../images/telefon.svg);
  background-size: contain;
  background-repeat: no-repeat;
  width: 25px;
  height: 25px;
}

.adresse > p {
  line-height: 32px;
}

.contact > a {
  margin-bottom: 14px;
  line-height: 32px;
  color: #1A0303;
}

.contact > a:hover {
  color: #b4211e;
}

.kontakt-right {
  width: 100%;
  height: auto;
  border: solid #D8D4D2 1px;
  border-radius: 32px;
  overflow: hidden;
}

/*---------- FOOTER -----------*/
.footer {
  display: flex;
  flex-direction: column;
  background-color: #1A0303;
  width: 100%;
  padding-top: 100px;
  padding-bottom: 100px;
  margin-top: 100px;
}

.footer-wrapper {
  display: flex;
  width: 80%;
  margin: 0 auto;
  gap: 84px;
  margin-bottom: 24px;
}

 .footer h4 {
  width: 80%;
  margin: 0 auto;
  color: #E3E3E3;
  margin-bottom: 44px;
}

.footer-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer > p, .footer-left > p, .footer-right > p, .footer-kontaktieren > a {
  color: #E3E3E3;
  margin-bottom: 16px;
}


.footer > p {
  width: 80%;
  margin: 0 auto;
  margin-bottom: 44px;
}

.footer-kontaktieren {
  display: flex;
  gap: 6px;
}

.footer-kontaktieren > a:hover{
  color: #fff;
}

.bold, .pink {
  font-weight: 600;
  color: #BC9F9F;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  width: 80%;
  margin: 0 auto;
  margin-top: 44px;
}

.footer-bottom-left, .footer-bottom-right {
  display: flex;
  gap: 44px;
}

.footer-bottom-left > p {
  color: #896262;
  margin-bottom: 0;
}

.line {border-bottom: solid #8C8181 1px;}

.footer-bottom-right a {
  color: #896262;
}

.footer-bottom-right a:hover {
  color: #fff;
}


/*---------- IMPRESSUM -----------*/

.small {
  background-image: url(../images/genussvolle-momente-mit-freunden-und-wein.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 90vh;
}

.content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 80%;
  margin: 0 auto;
  gap: 150px;
  margin-top: 44px;
  margin-bottom: 100px;
}

.col1 {display: flex; flex-direction: column; gap: 32px;}

.impressum-title {
  width: 80%;
  margin: 0 auto;
  margin-top: 44px;
}


.col2 > p {
  margin-bottom: 8px;
}

.col2 .bold {
  color: #5C0806;
}

.col2 > h3{
  font-size: 25px;
  margin-top: 32px; 
  color: #5C0806;
  margin-bottom: 8px;
}

.col2 > h3:last-child {
  margin-top: 0px; 
}

.col2 > h2 {
  font-size: 34px;
}

.col2 a {
  color: #1A0303;
  margin-bottom: 0;
  border-bottom: solid #fff 1px;
}

.col2 a:hover {
  color: #b6221f;
}

.col2 {
  display: flex;
  flex-direction: column;
}

.cookie-overlay-dsa {
  width: 80%;
  margin: 100px auto;
}

fieldset{
  margin: 24px 0;
}

.dsa-cookie-button, .dsa-save-button, .cookie-end-links{
  margin-bottom: 32px;
}

.dsa-cookie-notice-form > a, .cookie-end-links > a {
  font-weight: 600;
  color: #5C0806;
  border-radius: 40px;
}

.dsa-cookie-notice-form > a:hover, .cookie-end-links > a:hover {
  font-weight: 600;
  color: #1A0303;
}


.impressum-kontakten {
  display: flex;
  flex-direction: column;
  gap: 8px;
}


/* --------- ! Min-Width ! --------- */
@media (min-width: 1820px) {
  /* über uns */
  .expander { display: none; }
  .expander__panel { max-height: none !important; overflow: visible; }
  .about-wrapper {display: grid; grid-template-columns: 25% 75%; column-gap: 120px; align-items: start; }
  .about-left-text { display: grid; grid-template-rows: repeat(4, auto); row-gap: 24px;}
  .about-left-text p:nth-of-type(1) { grid-row: 1; }
  .about-left-text p:nth-of-type(2) { grid-row: 2; }
  .expander__panel p:nth-of-type(1) { grid-row: 3; }
  .expander__panel p:nth-of-type(2) { grid-row: 4; }
  .about-right { grid-row: 1 / -1; align-self: start; }
  .about-right img { width: 100%; max-width: 520px; height: auto; border-radius: 32px;}
  .about-left-text p { max-width: 75ch; line-height: 1.6; }
}

/* ---- ! 1440 ! --- */
@media (min-width: 1440px){
  /* hero */
  .stoerer { max-width: 840px; }                
  .hero-arrows label { font-size: 44px; }
  .hero-nav label { width: 14px; height: 14px; }
}



/*---------- ! MAX-WIDTH ! -----------*/


/* ---- ! 1820 ! --- */
@media (max-width: 1820px){
  .about-footer {background-image: url(../images/dekorative-wein.svg); width: 15%; height: 50%; position:absolute; right: 0; top: 300px; }
}


/* ---- ! 1735 ! --- */
@media (max-width: 1735px) {
  /* über uns */
  .about-wrapper { gap: 44px; }

  /* news */
  .news > p {width: 40%;}
  /* galery */
  .galerie > p {width: 40%;}
}


/* ---- ! 1680 ! --- */
@media (max-width: 1680px) {
  /* news */
  .news-cards .right h4 { margin: 0; font-size: 20px; line-height: 1.25; }

  /* galery */
  .news-cards{ height: auto; }
}


/* ---- ! 1600 ! --- */
@media (max-width: 1600px) {
  /* kontakt */
  .card-left, .card-right {padding: 16px;}
  .dsa-secure-plugin { height: 898px !important;}
  .content { gap: 70px;}
}


/* ---- ! 1440 ! --- */
@media (max-width: 1440px){
  .slide--1 img { object-position: 72% 54%; }
  .stoerer { width: min(92vw, 760px); }
  .hero-arrows label { font-size: 36px; }

  .about-footer { height: 50%; opacity: 0.5; }

  .news > p {width: 50%;}
  .news-cards { grid-template-columns: 1fr; gap: 32px; }
  .news-cards { grid-template-columns: 1fr; height: auto;}
  .news-cards .left img { aspect-ratio: 16/9; }

  .galerie > p {width: 50%;}

  .dsa-secure-plugin { height: 702px !important;  }
  .kontakt-right { height: 1018px; }
  .kontakt-block { display: flex; flex-direction: column; }
  .card-left { border-radius: 32px 32px 0 0; }
  .card-right { border-radius: 0; }
  .content { gap: 44px;}
}


/* ---- ! 1262 ! --- */
@media (max-width: 1262px) {

  /* nav */
  .logo { left: 0 !important; width: 255px !important; }
  nav ul li {margin: 0;}
  /* hero */
  .hero, .hero-slides, .hero-slides > *, .hero-slides img { height: 70vh; }
  .hero-slides { width: 300%; }
  .hero-slides img { object-fit: cover; object-position: center; }
  .hero-slides > img, .hero-slides > div { min-width: 100vw; }
  .stoerer { left: 5% }

  /* über uns */
  .about-wrapper { width: 90%}

  /* sortiment */
  .sortiment-block-1 {width: 90%;}
  .sortiment-block-2 {width: 90%;}
  .sortiment-block-3 {width: 90%;}

  /* news */
  .news-cards { width: 90%;}
  .news > p { width: 65%; }

  /* termine */
  .termine-slider { width: 90%;}

  /* galery */
  .gallery-container { width: 100%; }
  .galerie > p {width: 65%;}
  .gallery-viewport {border-radius: 0;}

  /* kontakt */
  .kontakt-wrapper {width: 90%;}

  /* footer */
  .footer-bottom-left, .footer-bottom-right {display: flex; flex-direction: column; gap: 24px;}
  .footer-bottom-left > p {margin-bottom: 0;}
}


/* ---- ! 1024 ! --- */
@media (max-width: 1024px){
  /* burger-nav */
  .logo {left: 0; top: 0;}
  nav {background: #FFFDF5; box-shadow: none; width: 100%; height: 70px; padding: 0;}
  nav ul{display: none;}
  .navi {display: block;}

  /* hero */
  .hero, .hero-slides, .hero-slides > *, .hero-slides img { height: 72vh;}
  .slide--1 img { object-position: 74% 56%; }                 
  .stoerer { left: 6%; width: min(92vw, 680px);}
  .stoerer .weinglass { width: 260px; height: 160px; margin-bottom: 12px; }
  .stoerer h1 { margin-bottom: 12px; }
  .stoerer p  { max-width: 520px; margin-bottom: 44px; line-height: 1.45; }
  .btn { padding: 12px 4px; font-size: 19px; }
  .hero-arrows label { font-size: 32px; }
  .hero-nav { bottom: 16px; }

  /* sortiment */
  .sortiment-block-1, .sortiment-block-2, .sortiment-block-3 { grid-template-columns: 1fr; gap: 16px; margin-bottom: 60px;} 
  .wein-left, .feinkost-right, .praesente-left {display: none;}
  .thumbs{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .thumbs img { width: 100%; aspect-ratio: 3 / 4; height: auto; object-fit: cover; display: block; }

  /* news */
  .news > p {width: 80%;}

  /* galery */
  .galerie > p {width: 80%;}
}


/* ---- ! 980 ! --- */
@media (max-width: 980px){
  h2 {font-size: 38px;}
  .about .headline { gap: 18px; width: 100%; margin: 0 auto; margin-bottom: 32px;}
  .headline { gap: 18px; width: 90%; margin: 0 auto; margin-bottom: 32px;}
  
  /* burger-navi */
  .logo {left: 0 !important; width: 255px !important; height: 70px; }
  nav ul li { display: none;}
  .navi {display: flex !important; width: 100%; position: fixed; top: 0; z-index: 100; }

  /* hero */
  .stoerer .weinglass { width: 200px; height: 112px; margin-bottom: 0;}

  /* sortiment */
  .icon { background-size: contain; width: 28px; background-repeat: no-repeat; height: auto; }
  .sortiment-block { grid-template-columns: 1fr; }
  .wein-right p { max-width: none; }

  /* termine */
  .termine .icon { background-size: contain; width: 38px; background-repeat: no-repeat; height: auto; }
  .termine-slider { width: 100%; border-radius: 0; }

  /* galery */
  .galerie .icon { background-size: contain; width: 36px; background-repeat: no-repeat; height: auto; }
  .gallery-container { width: 100%;}
  .gallery-viewport {border-radius: 0;}
  .card-left, .card-right { padding: 32px; }

  /* kontakt */
  .kontakt .icon { background-size: contain; width: 38px; background-repeat: no-repeat; height: auto; }
  .kontakt-wrapper {display: flex; flex-direction: column; gap: 44px;}

  .dsa-secure-plugin {
    height: 420px !important;
  }
}


/* ---- ! 800 ! --- */
@media (max-width: 800px){
  /* fontgestaltung */
  p {font-size: 15px;}

  /* footer */
  .footer-wrapper  {display: flex; flex-direction: column; gap: 32px;}
  .footer-bottom {display: flex; flex-direction: column; gap: 32px;}
}


/* ---- ! 768 ! --- */
@media (max-width:768px){
  /* hero */
  .hero, .hero-slides, .hero-slides > *, .hero-slides img { height: 66vh;}
  .slide--1 img { object-position: 76% 58%; }                    
  .stoerer { display: flex; flex-direction: column; align-items: center; position: absolute !important; transform: translateY(-35%); text-align: left; }
  .stoerer h1 { font-size: 32px; }
  .stoerer > p {max-width: 60%; text-align: center;}
  .hero-arrows label { font-size: 28px; }
  .hero-slides img { object-position: center 30%; }

  .stoerer .weinglass { width: 320px; height: 120px; margin-bottom: 8px; }
  .stoerer h3 { margin-bottom: 6px; }
  .stoerer h1 { margin-bottom: 10px; }
  .stoerer p  { max-width: 100%; margin-bottom: 16px; line-height: 1.45; }
  .btn { padding: 14px 24px; font-size: 18px; width: fit-content; }

  .hero-arrows label { font-size: 26px; }
  .hero-nav label { width: 10px; height: 10px; margin: 0 5px; }

  /* über uns */
  .about-wrapper { flex-direction: column; }
  .about-footer { top: 680px;}

  /* gallery */
  .gallery-viewport{ height:40vh; }
  .gallery-arrows label{ font-size:26px; }

  .small {
    height: 60vh;
  }
}


/* ---- ! 640 ! --- */
@media (max-width: 640px) {
  .stoerer {position: absolute; top: 210px;}

  /* sortiment */
  .news-cards a {padding: 8px 16px; text-align: center;}
  /* sortiment */
  .wein-thumbs{ grid-template-columns: 1fr 1fr; }
}


/* ---- ! 480 ! --- */
@media (max-width: 480px) {
  .logo { height: 70px; transform: translateY(10px) }

  nav { height: 80px; }

  .hero, .hero-slides, .hero-slides > *, .hero-slides img { height: 450px; }
  .hero { margin-top: 80px; }
  .hero-slides img { object-fit: cover; object-position: center 18% !important; }
  .about { margin-top: 40px; }
  .news-cards > .card, .news-cards > .last-card { grid-template-columns: minmax(60px, 35%) 1fr; }
  .stoerer .weinglass { width: 170px; height: 95px; margin-bottom: 0; }
  .stoerer { transform: translateY(-60%); }
  .stoerer h1 { text-align: center; }
  .stoerer h3 { margin-bottom: 0; }
  .hero-nav { bottom: 12px; }

  .about-footer { display: none;}

  .gallery-viewport { height: 300px; }
  .gallery-slides > * { max-width: 100vw; }

  .dsa-secure-plugin { height: 350px !important;}

  .small .stoerer {transform: translateY(-38%);}
}

/* ---- ! 380 ! --- */
@media (max-width: 380px) {
  .news-cards .right h4, .news-cards a { font-size: 16px; }
  .news-cards p { font-size: 14px; }
}


/* ---- ! 320 ! --- */
@media (max-width: 320px) {

  h2 {font-size: 30px;}
  .logo { height: 62px; }

  .stoerer { transform: translateY(-47%); }

  .news-cards .right h4, .news-cards a { font-size: 16px; }
  .news-cards p { font-size: 13px; }
  .news-cards .right{ padding: 15px; }

  .termine .icon {
    width: 24px;}
}




@supports (padding: max(0px)) {
/* hero */
  .hero { padding-left: max(0px, env(safe-area-inset-left)); padding-right: max(0px, env(safe-area-inset-right)); }
  .hero-nav { margin-bottom: max(0px, env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce){
/* hero */
  .hero-slides { transition: none; }
}




/* COOKIE */
.cookie-page1,.cookie-page2,.cookie-page2.show-page{transition:visibility,opacity .5s linear}
.cookie-overlay-headline,.dsa-cookie-notice-form fieldset p{margin-bottom:15px;text-align:center}
.clear{clear:both}
.cookie-overlay-dsa.show-cookie{display:block}
.cookie-overlay-dsa{display:none;background-color:rgba(0,0,0,.6);position:fixed;z-index:99999999;top:-100px;left:0;height:100vh;width:100vw;line-height:20px}
.dsa-cookie-notice-form{min-height:300px;width:500px;position:absolute;top:40%;left:50%;transform:translateX(-50%);background:#4B0209 url(../images/bildmarke-dunkel.svg) left bottom -70px/400px no-repeat;color:#fff;padding:2%; border-radius: 32px;}
.dsa-cookie-notice-form .cookie-item{width:33.33%;float:left;text-align:center}
.cookie-overlay-headline{display:block;font-size:24px;font-weight:600}
.dsa-cookie-button{display:block;margin:0 50px 5px;background:#f8f8f8;padding:10px 20px;text-align:center;text-decoration:none;color:#000}
#dsa-check-all.dsa-cookie-button{background:#fff;margin-top:15px; border-radius: 40px;}
.dsa-cookie-notice-form input[type=checkbox]{display:none}
.dsa-cookie-notice-form input[type=checkbox]+label::before{width: 15px; height: 15px; border: 1px solid #D8D4D2; background: #fff; display: block; content: ""; margin: 10px auto; border-radius: 50%;}
.dsa-cookie-notice-form input[type=checkbox]:checked+label::before,
.dsa-cookie-notice-form input[type=checkbox]:disabled+label::before{box-shadow:inset 0 0 0 3px #fff;background:#4B0209}
.cookie-end-links{width:80%;margin:auto;text-align:center}
.cookie-notice-link{display:inline-block;text-align:center;margin:10px auto 0;color:#fff !important;text-decoration:none}

@media (max-width:550px){
  .dsa-cookie-notice-form{width:85%;padding:5%}
}
@media (max-height:570px){
  .dsa-cookie-notice-form{top:20%}
}
/* COOKIE ENDE */

#formular > iframe {
  width: 100%;
  height: 1060px;
  border: unset;
}



.unterschtrich {
  text-decoration-line: underline;
  text-underline-offset: 1px;
}

#impressum-map {
    height: 300px !important;
    width: 80% !important;
    margin: 0 auto;
    border-radius: 0 !important;
}