/* ============================================================
   ERWACHE — Dezente Design-Angleichung der Hauptwebsite
   an die Verkaufsseiten. Ändert NUR Schrift, Farbverläufe und
   Button-Verhalten — keine Anordnung, keine Abstände.
   Die Klassen werden von site-theme.js gesetzt.
   ============================================================ */

:root {
  --et-gold: #cfa649;
  --et-gold-grad: linear-gradient(120deg, #9c7729 0%, #cfa649 22%, #f6e6bb 50%, #cfa649 78%, #9c7729 100%);
  --et-ease: cubic-bezier(.22, 1, .36, 1);
}

html { scroll-behavior: smooth; }
::selection { background: var(--et-gold); color: #fff; }

/* ---------- Goldene Schrift als Verlauf ---------- */
.et-goldtext {
  color: var(--et-gold) !important;
  -webkit-text-fill-color: var(--et-gold) !important;
}

/* ---------- Gold-Buttons: Verlauf, Shimmer, Lift ---------- */
.et-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-image: var(--et-gold-grad) !important;
  background-size: 200% 100% !important;
  background-position: 0% 50% !important;
  box-shadow: 0 10px 30px -12px rgba(207, 166, 73, .65), inset 0 1px 0 rgba(255, 255, 255, .45);
  transition: transform .45s var(--et-ease), box-shadow .45s var(--et-ease),
              background-position 1.1s var(--et-ease) !important;
  will-change: transform;
}
.et-btn::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .8) 48%, transparent 76%);
  transform: translateX(-120%);
  transition: transform .95s var(--et-ease);
}
.et-btn:hover {
  transform: translateY(-3px);
  background-position: 100% 50% !important;
  box-shadow: 0 20px 44px -14px rgba(207, 166, 73, .8), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.et-btn:hover::after { transform: translateX(120%); }
.et-btn:active { transform: translateY(1px) scale(.995); }

/* Helle Buttons (weiß auf Gold-Sektionen): dezenter Lift + Goldrand */
.et-btn--light {
  position: relative;
  transition: transform .45s var(--et-ease), box-shadow .45s var(--et-ease) !important;
}
.et-btn--light:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -16px rgba(0, 47, 75, .45);
}

/* ---------- Bilder & Karten: sanfter Hover wie auf den Verkaufsseiten ---------- */
.et-card {
  transition: transform .55s var(--et-ease), box-shadow .55s var(--et-ease) !important;
}
.et-card:hover { transform: translateY(-5px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .et-btn, .et-btn--light, .et-card, .et-btn::after { transition: none !important; }
  .et-btn:hover, .et-btn--light:hover, .et-card:hover { transform: none; }
}


/* ============================================================
   KUNDENSTIMMEN auf der Startseite
   Aufbau und Optik wie die Stimmen-Sektion der Verkaufsseiten.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600&display=swap");

.ev-sektion { background: #f7f5f0; padding: clamp(64px, 8vw, 120px) 0; }
.ev-inner { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.ev-kopf { text-align: center; margin-bottom: 42px; }

.ev-eyebrow {
  font-family: "Raleway", sans-serif; font-weight: 700;
  font-size: clamp(11px, 1.1vw, 12.5px);
  letter-spacing: .34em; text-transform: uppercase;
  color: var(--et-gold);
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 20px;
}
.ev-eyebrow::before, .ev-eyebrow::after {
  content: ""; width: 26px; height: 1px; background: currentColor; opacity: .55;
}

.ev-titel {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  font-size: clamp(26px, 3.6vw, 44px);
  line-height: 1.14; letter-spacing: -.015em;
  color: #002f4b;
  margin: 0 0 14px;
  text-transform: none;
}
.ev-zahl {
  font-family: "Raleway", sans-serif; font-weight: 700;
  font-size: clamp(12.5px, 1.25vw, 14px);
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--et-gold);
  margin: 0; line-height: 1.6;
}

.ev-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ev-karte {
  background: #fff;
  border: 1px solid rgba(0, 47, 75, .1);
  border-radius: 14px;
  padding: 34px 30px;
  margin: 0;
  transition: transform .5s var(--et-ease), box-shadow .5s var(--et-ease), border-color .5s var(--et-ease);
}
.ev-karte:hover {
  transform: translateY(-6px);
  border-color: rgba(207, 166, 73, .4);
  box-shadow: 0 30px 60px -34px rgba(0, 47, 75, .5);
}
.ev-marke {
  display: block;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 54px; line-height: .6;
  color: rgba(207, 166, 73, .35);
  margin-bottom: 14px;
}
.ev-karte p {
  font-family: "Roboto", sans-serif;
  font-size: 16px; line-height: 1.68; font-weight: 300;
  color: #002f4b; margin: 0;
}
.ev-karte p b { font-weight: 500; }
.ev-karte cite {
  display: block; margin-top: 20px; font-style: normal;
  font-family: "Raleway", sans-serif; font-weight: 700; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--et-gold);
}

/* Einblenden beim Scrollen */
.ev-sektion [data-ev-reveal] {
  opacity: 0; transform: translateY(26px);
  transition: opacity .9s var(--et-ease), transform .9s var(--et-ease);
  transition-delay: var(--d, 0ms);
}
.ev-sektion [data-ev-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .ev-sektion [data-ev-reveal] { opacity: 1 !important; transform: none !important; }
}
@media (max-width: 1000px) { .ev-raster { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .ev-inner { padding: 0 20px; } .ev-karte { padding: 28px 24px; } }