/* -----------------------------------
   ROOT / VARIABLEN
----------------------------------- */
:root {
  --marroni-dark: #4b2e05;
  --marroni-medium: #8b5e34;
  --marroni-light: #d6a86c;
  --marroni-link: #c1a186;
  --marroni-bg: #fcf5ed;
}

body {
   font-family: 'Lato', sans-serif;  
}

 .header {
  box-shadow: 0 1px 3px rgba(0,0,0,.11)
  }

/* Thin */
@font-face {
  font-family: 'Lato';
  src: url('fonts/Lato-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'Lato';
  src: url('fonts/Lato-ThinItalic.ttf') format('truetype');
  font-weight: 100;
  font-style: italic;
}

/* Light */
@font-face {
  font-family: 'Lato';
  src: url('fonts/Lato-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Lato';
  src: url('fonts/Lato-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
}

/* Regular */
@font-face {
  font-family: 'Lato';
  src: url('fonts/Lato-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Lato';
  src: url('fonts/Lato-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}

/* Bold */
@font-face {
  font-family: 'Lato';
  src: url('fonts/Lato-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Lato';
  src: url('fonts/Lato-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}

/* Black */
@font-face {
  font-family: 'Lato';
  src: url('fonts/Lato-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: 'Lato';
  src: url('fonts/Lato-BlackItalic.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;
}

h1 {
  color: #432218;
  font-family: 'Cormorant Garamond', sans-serif;
  font-size: 90px;
  line-height: 80px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: -2px;
  text-transform: none;
}
h2 {
  color: #432218;
  font-family: 'Cormorant Garamond', sans-serif;
  font-size: 30px;
  line-height: 35px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.1px;
  text-transform: none;
}

h3 {
  color: #432218;
  font-family: 'Cormorant Garamond', sans-serif;
  font-size: 30px;
  line-height: 35px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.1px;
  text-transform: none;
}

h4 {
font-family: 'Lato', sans-serif;
  font-size: 21px;
  line-height: 32px;
  font-weight: 300;
  letter-spacing: 0px;
}

p {
	color: #383838;
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  line-height: 27px;
  font-style: normal;
  font-weight: 300;
}

a {
	color: --marroni-link;
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  font-style: normal;
  letter-spacing: 2.5px;
}


/* -----------------------------------
   HERO / BACKGROUND
----------------------------------- */
.welcome {
    background-image: url("./Key_Visual.jpg");
  background-size: cover;   
  background-position: center center;
  background-repeat: no-repeat;
}

.verkaufspunkte { 
  
    background-image: url("./background7.jpg");
  background-size: cover;   
  background-position: center center;
  background-repeat: no-repeat;
}

/* -----------------------------------
   HERO LAYERS – Slider Revolution Logik
----------------------------------- */
.hero-layers {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

/* DAS Grid (entspricht Slider Revolution) */
.hero-grid {
  position: relative;
  width: min(1920px, 100vw);
  height: min(868px, 100vh);
  perspective: 1200px;
}

/* -----------------------------------
   BASIS LAYER
----------------------------------- */
.layer {
  position: absolute;
  opacity: 0;
  animation-fill-mode: forwards;
  will-change: transform, opacity;
}

/* -----------------------------------
   LAYER 1 – Hauptlogo
   Rev: center + (-157px), top -60px
----------------------------------- */
.layer-logo {
  top: -60px;
  left: 50%;
  width: clamp(270px, 35vw, 406px);

  transform: translateX(-50%) translateX(-157px) translateY(20px);
}

.layer-logo.animate {
  animation: fadeUp 1.2s ease-in-out forwards;
}

/* -----------------------------------
   LAYER 2 – Slogan
   Rev: left 1014px, top -60px
----------------------------------- */
.layer-slogan {
  top: -60px;
  left: 1014px;
  width: clamp(180px, 25vw, 291px);

  transform: translateY(20px);
}

.layer-slogan.animate {
  animation: fadeUp 1.5s ease-in-out forwards;
}

/* -----------------------------------
   LAYER 3 – Instagram
   Rev: left 1032px, top 139px
----------------------------------- */
.layer-insta {
  top: 139px;
  left: 1032px;
  width: 165px;

  transform: translateY(20px);
}

.layer-insta.animate {
  animation: fadeUp 1.5s ease-in-out forwards;
}

/* -----------------------------------
   LAYER 4 – Patch
   Rev: left 1054px, top 412px
   → kommt von hinten nach vorne
----------------------------------- */
.layer-patch {
  top: 412px;
  left: 1054px;
  width: clamp(150px, 18vw, 200px);

  transform:
    translateZ(-600px)
    scale(0.3);
}

.layer-patch.animate {
  animation: depthIn 1.5s cubic-bezier(.4,0,.2,1) forwards;
}

/* -----------------------------------
   KEYFRAMES
----------------------------------- */
@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateX(-50%) translateX(-157px) translateY(0);
  }
}

@keyframes depthIn {
  to {
    opacity: 1;
    transform: translateZ(0) scale(1);
  }
}

/* -----------------------------------
   RESPONSIVE – wie Slider Revolution
----------------------------------- */
@media (max-width: 1240px) {
  .hero-grid {
    transform: scale(0.85);
    transform-origin: top center;
  }
}

@media (max-width: 1024px) {
  .hero-grid {
    transform: scale(0.75);
  }
}

@media (max-width: 768px) {
  .hero-grid {
    transform: scale(0.65);
  }
}

@media (max-width: 480px) {
  .hero-grid {
    transform: scale(0.55);
  }
}

a.rezeptlink {
	color: rgb(193, 161, 134);
	text-decoration: underline;
}