/* =========================================================
   TRENDURIO – Gemeinsames Stylesheet
   Wird von index.html, agb.html und datenschutz.html genutzt.
   ========================================================= */


/* =========================================================
   1. DESIGN-VARIABLEN
   Hier zentral Farben, Rundungen und Abstände anpassen.
   ========================================================= */
:root {
  /* Erdtöne / Kaffee-Look */
  --espresso:    #3B2A20;  /* Dunkelstes Braun – Text, Footer */
  --kaffee:      #6F4E37;  /* Mittelbraun – Überschriften */
  --latte:       #C8A27C;  /* Helles Braun – Akzente */
  --milchschaum: #EADBC8;  /* Beige – Platzhalter, Flächen */
  --creme:       #F7F0E6;  /* Creme – Seiten-Hintergrund */
  --weiss:       #FFFDF9;

  /* Knallige Button-Farbe */
  --akzent:       #FF5A1F;
  --akzent-hover: #E64A12;

  /* Rundungen (weiches Design) */
  --radius-s:    12px;
  --radius-m:    20px;
  --radius-l:    32px;
  --radius-pill: 999px;

  /* Abstände & Layout */
  --abstand-section: clamp(64px, 9vw, 120px);
  --max-breite: 1200px;
  --header-hoehe: 80px;
  --grid-abstand: 28px;

  /* Schatten */
  --schatten: 0 8px 24px rgba(59, 42, 32, 0.10);
}


/* =========================================================
   2. GRUNDEINSTELLUNGEN (Reset & Basis)
   ========================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth; /* Weiches Scrollen für den Hero-Button */
}

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--espresso);
  background-color: var(--creme);
}

img {
  max-width: 100%;
  display: block;
}

/* Zentrierter Inhaltsbereich */
.container {
  width: 100%;
  max-width: var(--max-breite);
  margin: 0 auto;
  padding: 0 20px;
}

/* Einheitliche Section-Überschriften */
.section-titel {
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.2;
  color: var(--kaffee);
  text-align: center;
  margin-bottom: 16px;
  /* Abstand beim Scrollen, damit der Sticky-Header nichts verdeckt */
  scroll-margin-top: calc(var(--header-hoehe) + 24px);
}

.section-untertitel {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 48px;
  color: var(--kaffee);
}

/* Kleine Zeile über Überschriften */
.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--akzent);
  margin-bottom: 12px;
}


/* =========================================================
   3. BUTTONS
   ========================================================= */
.button {
  display: inline-block;
  padding: 16px 36px;
  border: none;
  border-radius: var(--radius-pill);
  background-color: var(--akzent);
  color: var(--weiss);
  font-family: inherit;
  font-size: 17px;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.button:hover {
  background-color: var(--akzent-hover);
  transform: translateY(-2px);
}

/* Deaktivierter Button ("Bald verfügbar") */
.button--disabled {
  width: 100%;
  padding: 12px 16px;
  font-size: 15px;
  opacity: 0.85;
  cursor: not-allowed;
}

.button--disabled:hover {
  background-color: var(--akzent);
  transform: none;
}


/* =========================================================
   4. HEADER (Logo mittig, bleibt beim Scrollen oben)
   ========================================================= */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-hoehe);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--creme);
  border-bottom: 1px solid var(--milchschaum);
}

/* Text-Logo – kann später durch <img> ersetzt werden */
.logo {
  font-size: 28px;
  font-weight: bold;
  letter-spacing: 1px;
  color: var(--espresso);
  text-decoration: none;
}

.logo img {
  height: 48px;
  width: auto;
}


/* =========================================================
   5. HERO (volle Breite: Bild + Headline + Button)
   ========================================================= */
.hero {
  position: relative;
  width: 100%;
  min-height: clamp(460px, 75vh, 720px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  /* PLATZHALTER: Hintergrundbild hier eintragen, z.B.
     background-image: url("bilder/hero.jpg");            */
  background: linear-gradient(135deg, var(--kaffee) 0%, var(--espresso) 100%);
  background-size: cover;
  background-position: center;
}

/* Dunkle Überlagerung, damit Text auf jedem Bild lesbar bleibt */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(59, 42, 32, 0.35);
}

.hero__inhalt {
  position: relative; /* liegt über der Überlagerung */
  padding: 40px 24px;
  max-width: 760px;
}

.hero__headline {
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1.15;
  color: var(--creme);
  margin-bottom: 16px;
}

.hero__text {
  font-size: clamp(17px, 2vw, 20px);
  color: var(--milchschaum);
  margin-bottom: 32px;
}


/* =========================================================
   6. ÜBER UNS (zweispaltig: Bild links, Text rechts)
   ========================================================= */
.ueber-uns {
  padding: var(--abstand-section) 0;
}

.ueber-uns__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}

/* Bild mit versetztem Farbblock dahinter */
.ueber-uns__bild-wrapper {
  position: relative;
  padding: 0 24px 24px 0; /* Platz für den versetzten Block */
}

.ueber-uns__bild-wrapper::before {
  content: "";
  position: absolute;
  top: 24px;
  left: 24px;
  right: 0;
  bottom: 0;
  background-color: var(--latte);
  border-radius: var(--radius-l);
}

.ueber-uns__bild {
  position: relative; /* liegt über dem Farbblock */
  aspect-ratio: 4 / 5;
  width: 100%;
  border-radius: var(--radius-l);
  background-color: var(--milchschaum);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--latte);
  font-size: 14px;
  overflow: hidden;
}

.ueber-uns__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ueber-uns__headline {
  font-size: clamp(30px, 4.2vw, 46px);
  line-height: 1.15;
  color: var(--espresso);
  margin-bottom: 24px;
}

.ueber-uns__text p {
  color: var(--kaffee);
}

.ueber-uns__text p + p {
  margin-top: 16px;
}

/* Drei Merkmale unter dem Text */
.merkmale {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.merkmale li {
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background-color: var(--milchschaum);
  color: var(--espresso);
  font-size: 15px;
  font-weight: bold;
}


/* =========================================================
   7. PRODUKTE (Desktop 4 pro Reihe, Mobil 2 pro Reihe)
   Flexbox statt Grid, damit die letzte Reihe zentriert ist.
   ========================================================= */
.produkte {
  padding: 0 0 var(--abstand-section);
}

.produkte__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* zentriert die unvollständige letzte Reihe */
  gap: var(--grid-abstand);
}

.produkt {
  /* 4 pro Reihe: Breite = (100% - 3 Abstände) / 4 */
  flex: 0 0 calc((100% - 3 * var(--grid-abstand)) / 4);
  display: flex;
  flex-direction: column;
  padding: 14px;
  background-color: var(--weiss);
  border-radius: var(--radius-m);
  box-shadow: var(--schatten);
  transition: transform 0.2s ease;
}

.produkt:hover {
  transform: translateY(-4px);
}

/* Bild-Platzhalter im Format 4:5 */
.produkt__bild {
  aspect-ratio: 4 / 5;
  width: 100%;
  border-radius: var(--radius-s);
  background-color: var(--milchschaum);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--latte);
  font-size: 14px;
  overflow: hidden;
}

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

.produkt__titel {
  font-size: 18px;
  color: var(--espresso);
  margin: 14px 0;
  flex-grow: 1; /* Buttons bleiben auf einer Linie */
}


/* =========================================================
   8. FOOTER / IMPRESSUM
   ========================================================= */
.footer {
  padding: var(--abstand-section) 0 40px;
  background-color: var(--espresso);
  color: var(--milchschaum);
}

.footer .section-titel {
  color: var(--creme);
}

.impressum__inhalt {
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
}

.impressum__inhalt p + p {
  margin-top: 16px;
}

.footer a {
  color: var(--latte);
}

/* Links zu AGB & Datenschutz */
.footer__links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid rgba(234, 219, 200, 0.2);
}

.footer__links a {
  text-decoration: none;
  font-weight: bold;
}

.footer__links a:hover {
  color: var(--akzent);
}

.copyright {
  margin-top: 24px;
  text-align: center;
  font-size: 14px;
  color: var(--latte);
}


/* =========================================================
   9. RECHTSTEXT-SEITEN (AGB, Datenschutz)
   ========================================================= */
.rechtstext {
  max-width: 820px;
  margin: 0 auto;
  padding: var(--abstand-section) 20px;
}

.zurueck {
  display: inline-block;
  margin-bottom: 32px;
  color: var(--kaffee);
  font-weight: bold;
  text-decoration: none;
}

.zurueck:hover {
  color: var(--akzent);
}

.rechtstext h1 {
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.15;
  color: var(--espresso);
  margin-bottom: 12px;
}

.rechtstext__stand {
  color: var(--kaffee);
  font-size: 15px;
  margin-bottom: 40px;
}

.rechtstext h2 {
  font-size: 22px;
  color: var(--kaffee);
  margin: 40px 0 12px;
}

.rechtstext p,
.rechtstext ul {
  margin-bottom: 12px;
}

.rechtstext ul {
  padding-left: 22px;
}

.rechtstext a {
  color: var(--kaffee);
}

/* Hinweis-Box für Muster-Texte */
.hinweis {
  padding: 18px 22px;
  border-radius: var(--radius-m);
  background-color: var(--milchschaum);
  border-left: 5px solid var(--akzent);
  font-size: 15px;
}


/* =========================================================
   10. RESPONSIVE ANPASSUNGEN
   ========================================================= */

/* Tablet: 3 Produkte pro Reihe */
@media (max-width: 1024px) {
  .produkt {
    flex-basis: calc((100% - 2 * var(--grid-abstand)) / 3);
  }
}

/* Mobil */
@media (max-width: 768px) {
  :root {
    --header-hoehe: 68px;
    --grid-abstand: 16px;
  }

  body {
    font-size: 16px;
  }

  .logo {
    font-size: 24px;
  }

  /* Über uns: Bild oben, Text darunter */
  .ueber-uns__grid {
    grid-template-columns: 1fr;
  }

  .ueber-uns__bild-wrapper {
    padding: 0 16px 16px 0;
  }

  .ueber-uns__bild-wrapper::before {
    top: 16px;
    left: 16px;
  }

  /* 2 Produkte pro Reihe */
  .produkt {
    flex-basis: calc((100% - var(--grid-abstand)) / 2);
    padding: 10px;
  }

  .produkt__titel {
    font-size: 16px;
  }

  .button--disabled {
    font-size: 14px;
    padding: 10px 12px;
  }
}