/* 1. Grundvariablen */
:root {
 --color-primary: #0f1f27;
 --color-accent: #800818;
 --color-lightaccent: #ff676f;
 --color-bg: #f5f5f5;
 --color-text: #333;
 --text-background: #e0e0e0;
 --font-main: 'Montserrat', sans-serif;
 --font-secondary: 'julius', serif;
 --transition: 0.3s ease-in-out;
}

@font-face { font-family: 'julius';
             src: url('./fonts/JuliusSansOne-Regular.ttf') format('truetype');
}
@font-face { font-family: 'Montserrat';
             src: url('./fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
}


/* 2. Reset & Basis */
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
ll}
html {
 scroll-behavior: smooth;
}
body {
 background: var(--color-bg);
 color: var(--color-text);
 font-family: var(--font-main);
 line-height: 1.6;
}
p {
  margin-bottom: .4rem;
}
h1, h2 {
  font-family: var(--font-secondary);
}
td {
 padding-right: .5em;
}


/* 3. Container */
.container {
 width: 90%;
 max-width: 1200px;
 margin: 0 auto;
}

/* 4. Header & Navigation */
.site-header {
 background: var(--color-primary);
 color: #fff;
}
.site-header .container {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 1rem 0;
}
.logo {
 font-family: var(--font-secondary);
 font-weight: 600;
 font-size: 1.4rem;
 text-decoration: none;
 color: #fff;
}
.main-nav {
 display: flex;
 gap: 1.5rem;
}
.main-nav a {
 color: #fff;
 text-decoration: none;
 font-weight: 500;
 transition: color var(--transition);
}
.main-nav a:hover {
 color: var(--color-accent);
}
.nav-toggle {
 background: none;
 border: none;
 color: #fff;
 font-size: 1.6rem;
 cursor: pointer;
 display: none;
}

/* 5. Hero */
.hero {
 background: url('./header.jpg') center top/cover no-repeat;
 color: #fff;
 text-align: center;
 padding: 10rem 0 2rem 0;
 margin: 0 auto;
/* max-width: 1920px;*/
}
.hero h1 {
 font-size: 2.5rem;
 margin-bottom: 1rem;
 font-family: var(--font-secondary);
 text-shadow: 3px 3px 5px #515151;
 padding-top: 1ex;
}
.hero p {
 font-size: 1.1rem;
/* margin-bottom: 2rem;*/
 text-shadow: 3px 3px 5px #515151;
 padding: 0 2ex 3ex 2ex;
}
.btn {
 background: var(--color-accent);
 color: #fff;
 padding: 0.8rem 1.8rem;
 text-decoration: none;
 border-radius: 4px;
 transition: background var(--transition);
}
.hero .btn {
 margin-left: 70%;
}
.btn:hover {
 background: #14917a;
}
.hero-backdrop {
 color: white;
 margin-left: 70%;
 background-color: rgba(128,8,24,.85);
 border: 2px solid var(--color-accent);
 border-radius: 6px;
}



/* center second button */
.btn {
  display: inline-block;
  margin: 0 auto;
}
.btn-div {
  text-align: center;
  margin-top: 2em;
}



/* 6. Galerie */
.section {
 padding: 2rem 0;
}
.section h2 {
 text-align: center;
 margin-bottom: 2rem;
 font-size: 2rem;
 color: var(--color-primary);
}
.gallery {
 padding: 4rem 0;
}
.gallery-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 gap: 1rem;
}
.gallery-grid img {
 width: 100%;
 height: auto;
 border-radius: 6px;
 transition: transform var(--transition);
}
.gallery-grid img:hover {
 transform: scale(1.05);
}
.gallery-item {
  background: #e0e0e0;
  padding: 1rem;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  transition: transform var(--transition);
}


/* 6. Galerie */
.section h2 {
 text-align: center;
 margin-bottom: 2rem;
 font-size: 2rem;
 color: var(--color-primary);
}
.gallery-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 gap: 1rem;
}
.gallery-grid img {
 width: 100%;
 height: auto;
 border-radius: 6px;
 transition: transform var(--transition);
}
.gallery-grid img:hover {
 transform: scale(1.05);
}
.gallery-item {
  background: #e0e0e0;
  padding: 1rem;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  transition: transform var(--transition);
}


/* 6.5 about grid */
.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  align-items: start;
  justify-content: left;
}
.about-image img {
  width: 100%;
  height: auto;
  border-radius: 6px;
}
.about-text {
  justify-content: left;
  font-size: 1rem;
  line-height: 1.6;
    transform: translate(-5em, 0px);
    background-color: rgba(255, 255, 255, .85);
    margin-top: 20px;
    padding: 10px;
    border-radius: 6px;
    width: 115%;
}

/* 6.7 products grid */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  align-items: start;
  justify-content: left;
}
.product-image img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  padding-bottom:2em;
}
.product-text {
  justify-content: left;
  font-size: 1rem;
  line-height: 1.6;
    transform: translate(-5em, 0px);
    background-color: rgba(255, 255, 255, .85);
    margin-top: 20px;
    padding: 10px;
    border-radius: 6px;
    width: 115%;
}

 
/* 7. Ãœber & Cookie */
.product ul {
 list-style: disc inside;
/* margin-top: 1rem;*/
 margin-bottom: .5rem;
}
.about ul {
 list-style: disc inside;
/* margin-top: 1rem;*/
 margin-bottom: .5rem;
}
.cookie p {
 text-align: left;
/* font-style: italic;*/
}

/* 8. Footer */
.site-footer {
 background: var(--color-primary);
 color: #fff;
 text-align: center;
 padding: 2rem 0;
}
.site-footer a {
 color: var(--color-lightaccent);
 text-decoration: none;
}
.site-footer li {
	display: inline-block;
	margin-left: .5em;
	margin-right: .5em;
}

/* Impresum */
.impressum {

}

.container h2 {
	text-align: center;
	margin-bottom: 2rem;
	margin-top: 1rem;
}


/* 9. Media Queries */
@media (max-width: 768px) {
  .main-nav {
    display: none;
    flex-direction: column;
    background: var(--color-primary);
    position: absolute;
    top: 100%;
    right: 0;
    width: 180px;
    padding: 1rem;
    transform: translateX(17%);
    transition: transform var(--transition);
  }
  .hero {
    background: url('./header.jpg') center top/cover no-repeat;
  }
 .hero-backdrop {
 margin-left: 0%;
}
  .main-nav.active {
    display: flex;
  }
  .nav-toggle {
    display: block;
  }
  .site-header .container {
    position: relative;
  }
 .main-nav.nav-open {
  transform: translateX(0);
 }
 .nav-toggle {
  display: block;
 }
 .product-text {
    transform: translate(0em, 0px);
    margin-top: 0em;
    margin-bottom: 2em;
    width: 100%;
}
 .product-image img {
 padding-bottom: 0em;
}
 .about-text {
    transform: translate(0px, 0px);
    /* border: 1px solid; */
    background-color: var(--text-background);
    margin-top: 20px;
    padding: 10px;
    border-radius: 6px;
    width: 100%;
 }
}

@media (max-width: 1000px) {
  .hero {
    background: url('./header.jpg') center top/cover no-repeat;
  } 
  .hero h1 {
    margin: 0 auto;
    margin-bottom: 1rem;
  }
  .hero p {
    margin: 0 auto;
    margin-bottom: 2rem;
  }
  .hero .btn {
    margin: 0 auto;
  }
}