/* Typo */
/*  Montserrat  */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat/static/Montserrat-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat/static/Montserrat-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat/static/Montserrat-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}
/*  Lato  */
@font-face {
  font-family: "Lato";
  src: url("../fonts/Lato/Lato-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Lato";
  src: url("../fonts/Lato/Lato-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}
/* Schriftarten von https://fonts.google.com – lokal eingebunden */

/* farbe */
:root {
--anthrazit: #2C2C2C;      
--salbei: #75A394;        
--apricot-cream: #FDECD6;
--mint-pastell: #D1FFDA;
--color-white: #fff;
}
/*  typografie  */
h1 {
font-family: 'Montserrat', sans-serif;
font-size: 44px;
font-weight: 700;
margin-bottom: 16px;
color: var(--anthrazit);
}
h2 {
font-family: 'Montserrat', sans-serif;
font-size: 35px;
font-weight: 700;
margin-bottom: 20px;
color: var(--anthrazit);
}
h3 {
font-family: 'Montserrat', sans-serif;
font-size: 25px;
font-weight: 600;
margin-bottom: 16px;
color: var(--anthrazit);
}
h4 {
font-family: 'Montserrat', sans-serif;
font-size: 20px;
font-weight: 600;
margin-bottom: 16px;
color: var(--anthrazit);
}
h5{
font-family: 'Lato', sans-serif;
font-size: 25px;
font-weight: 600;
line-height: 33px;
color: var(--anthrazit);
}
p {
font-family: 'Lato', sans-serif;
font-size: 20px;
font-weight: 400;
line-height: 33px;
color: var(--anthrazit);
} 
a {
text-decoration: none;
color: inherit;
}

/* basis-styles Anfang  */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
main {
flex: 1;
} 
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
justify-content: flex-start;
min-height: 100vh;
}

/* basis-styles ende*/

/* header (Logo) */
.site-header {
margin-top: 18px;
margin-bottom: 48px;
text-align: center;
}
.logo {
width: 146.9px;
height: 139.03px;
}

/* zurück */
.btn-zurueck {
display: inline-block;
font-family: 'Montserrat', sans-serif;
font-size: 20px;
font-weight: 500;
color: #2b6cb0;
text-decoration: none;
padding: 0 0 24px;
border-radius: 20px;
}
/*  Startseite Anfang  */
.main-grid {
display: grid;
grid-template-columns: repeat(3, 360px);
grid-template-rows: repeat(2, 334px);
gap: 24px;
width: calc(3 * 360px + 2 * 24px);
margin: 0 auto 60px;
}
.tile {
position: relative;
width: 360px;
height: 334px;
border-radius: 20px;
overflow: hidden;
}
.tile img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: brightness(0.65);
}
.tile-title {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: var(--color-white);
margin-bottom: 0 !important;
}
/*  Startseite Ende  */

/* Lovestory-Seite Anfang */
.lovestory-main {
padding: 0 85px;
margin-bottom: 78px;
}
.lovestory-wrapper {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 60px;
max-width: 1366px;
margin: 0 auto;
}
.lovestory-text p {
flex: 1;
max-width: 620px;
font-family: 'Lato', sans-serif;
font-size: 20px;
line-height: 33px;
font-weight: 400;
text-align: left;
}
.lovestory-image img {
width: 455px;
height: 657px;
object-fit: cover;
border-radius: 16px;
}
/* Lovestory-Seite Ende  */

/* Angebote Anfang */
.angebote-main {
display: flex;
justify-content: center;
padding: 0 123px;
margin-bottom: 78px;
}
.angebote-wrapper {
display: flex;
flex-direction: column;
align-items: center;
gap: 50px;
max-width: 1120px;
width: 100%;
}
.angebote-header {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 50px;
width: 100%;
box-sizing: border-box;
}
.angebote-text {
flex: 1;
font-family: 'Lato', sans-serif;
font-size: 20px;
line-height: 33px;
}
.angebote-image img {
width: 534px;
height: 378px;
object-fit: cover;
border-radius: 16px;
}
/* Produktboxen */
.angebot-box-left{
display: grid;
grid-template-columns: 1fr 455px;
width: 1120px;
height: 378px;
padding-left: 30px;
box-sizing: border-box;
border-radius: 20px;
gap: 30px;
align-items: center;
line-height: 33px;
}
.angebot-box-right {
display: grid;
grid-template-columns: 1fr 455px;
width: 1120px;
height: 378px;
padding-right: 30px;
box-sizing: border-box;
border-radius: 20px;
gap: 30px;
align-items: center;
line-height: 33px;
}
.angebot-box-left {
background-color: var(--mint-pastell);
}
.angebot-box-right {
background-color: var(--apricot-cream);
}
.angebot-bild img {
width: 455px;
height: 378px;
object-fit: cover;
display: block; 
border-radius: 20px;
}
/* Angebote Ende */

/* events  */
.events-main {
max-width: 1120px;
margin: 0 auto;
padding: 0 0 80px;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 80px;
}
.events-intro {
display: flex;
gap: 56px;
align-items: flex-start;
}
.event-text h3{
font-family: 'Montserrat', sans-serif;
font-size: 30px;
font-weight: 600;
margin-bottom: 16px;
color: var(--anthrazit);
}
.events-image img {
width: 553px;
height: 245px;
object-fit: cover;
border-radius: 16px;
display: block;
}
.event-box-right{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 75px;
height: 610px;
padding: 22px 75px;
padding-right: 0px;
box-sizing: border-box;
border-radius: 20px;
background-color: var(--apricot-cream);
}
.event-box-left {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 75px;
height: 610px;
padding: 22px 75px;
padding: 22px 75px;
padding-left: 0px;
box-sizing: border-box;
border-radius: 20px;
background-color: var(--mint-pastell);
}
.event-box-right .event-image img{
width: 360px;
height: 610px;
object-fit: cover;
border-radius: 20px;
display: block;
}
.event-box-left  .event-image img {
width: 360px;
height: 610px;
object-fit: cover;
border-radius: 20px;
display: block;
}
.event-box-left .event-text {
max-width: 640px;
}
/* impressum / datenschutz */
.legal {
  max-width: 900px;
  margin: 80px auto;
  padding: 0 40px;
  font-family: 'Lato', sans-serif;
  font-size: 20px;
  line-height: 1.7;
  color: #333;
}

.legal h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 44px;
  font-weight: bold;
  margin-bottom: 40px;
  color: #1a1a1a;
}

.legal h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 30px;
  font-weight: 600;
  margin-top: 40px;
  margin-bottom: 15px;
  color: #222;
}

.legal p {
  margin-bottom: 20px;
}

.legal strong {
  font-weight: 600;
}

/* footer */
.site-footer {
position: relative; 
background-color: var(--salbei);
color: var(--color-white);
height: 68px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
gap: 32px;
padding: 40px 0; 
}
.site-footer p {
color: var(--color-white);
font-weight: 600;
text-decoration: none;
}
.btn-zurueck-footer {
display: inline-block;
font-family: 'Montserrat', sans-serif;
font-size: 20px;
font-weight: 500;
color: #2b6cb0;
text-decoration: none;
padding: 0 0 24px;
border-radius: 20px;
text-align: center;
}
.back-wrapper {
  width: 100%;
  max-width: 1128px;
  margin: 40px auto 60px;
  padding-left: 0;
}

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border: 1px solid rgba(31, 47, 43, 0.16);
  border-radius: 999px;
  background: linear-gradient(135deg, #18332C 0%, #24443B 100%);
  color: #fff;
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 10px 24px rgba(24, 51, 44, 0.16);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.back-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(24, 51, 44, 0.22);
}