/* igelinnot – Verbesserungen */

/* Desktop-Button ausblenden */
[class*="view-switcher"], [id*="view-switch"] { display: none !important; }

/* Hero-Bild */
.hero-banksy { opacity: 1 !important; }
.hero-banksy img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; border-radius: 20px !important;
}

/* ===== 3-FARB-SCHEMA ===== */

/* FARBE 1 – Goldgelb (#FBE5A8 / #F5C13C) */
.hero-split { background-color: #FBE5A8 !important; color: #2B1F12 !important; }
.ursula-first { background-color: #F5C13C !important; color: #2B1F12 !important; }
.ursula-first h1, .ursula-first h2, .ursula-first h3 { color: #2B1F12 !important; }
.entstehung-bold { background-color: #F5C13C !important; color: #2B1F12 !important; }
.entstehung-bold h2, .entstehung-bold p { color: #2B1F12 !important; }
.wissen-band { background-color: #FBE5A8 !important; color: #2B1F12 !important; }
section.compact:last-of-type { background-color: #F5C13C !important; color: #2B1F12 !important; }

/* FARBE 2 – Dunkelbraun (#2B1F12) */
.steps-bold-section { background-color: #2B1F12 !important; color: #FDF6E3 !important; }
.steps-bold-section h1, .steps-bold-section h2, .steps-bold-section h3,
.steps-bold-section h4, .steps-bold-section p, .steps-bold-section li { color: #FDF6E3 !important; }
.steps-bold-section .pill { background: #F5C13C !important; color: #2B1F12 !important; }
.wq-section { background-color: #2B1F12 !important; color: #FDF6E3 !important; }
.wq-section h2, .wq-section h3, .wq-section p { color: #FDF6E3 !important; }
.danke { background-color: #2B1F12 !important; color: #FDF6E3 !important; }
.danke h2, .danke h3, .danke p { color: #FDF6E3 !important; }

/* FARBE 3 – Waldgrün (#4A5D2E) */
.diamond-section { background-color: #4A5D2E !important; color: #FDF6E3 !important; }
.diamond-section h2, .diamond-section h3, .diamond-section p,
.diamond-section .eyebrow { color: #FDF6E3 !important; }
.diamond-section [class*="card"] {
  background: rgba(255,255,255,0.1) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
}
.diamond-section [class*="card"] * { color: #FDF6E3 !important; }
.lehrpfad-band { background-color: #4A5D2E !important; color: #FDF6E3 !important; }
.lehrpfad-band h2, .lehrpfad-band h3, .lehrpfad-band p { color: #FDF6E3 !important; }
.naturgarten-band { background-color: #4A5D2E !important; color: #FDF6E3 !important; }
.naturgarten-band h2, .naturgarten-band h3,
.naturgarten-band p, .naturgarten-band li { color: #FDF6E3 !important; }
.naturgarten-band .ng-tip h4,
.naturgarten-band .ng-tip p,
.naturgarten-band .ng-tip li { color: #2B1F12 !important; }
.kampagne-bold { background-color: #4A5D2E !important; color: #FDF6E3 !important; }
.kampagne-bold h2, .kampagne-bold h3, .kampagne-bold p { color: #FDF6E3 !important; }

/* Ursula-Foto Fix */
.ursula-photo-block .photo {
  width: auto !important; height: auto !important;
  background-image: url("/cdn-img/cropped/ursula-ertl.jpg") !important;
  background-size: cover !important; background-position: top center !important;
  border-radius: 20px !important; border: 4px solid #2B1F12 !important; display: block !important;
}

@media (max-width: 600px) {
  .ursula-grid-new {
    grid-template-columns: 1fr !important;
  }

  .ursula-photo-block {
    width: min(100%, 300px) !important;
    max-width: 300px !important;
    margin: 0 auto 24px !important;
  }

  .ursula-photo-block .photo {
    inset: 7px !important;
  }
}

/* Quiz-Buttons: größer & besser lesbar */
.wq-section button[type="button"] {
  background: rgba(255,255,255,0.12) !important; color: #FDF6E3 !important;
  border: 2px solid rgba(255,255,255,0.4) !important; border-radius: 12px !important;
  padding: 14px 20px !important; font-size: 1rem !important; font-weight: 700 !important;
  cursor: pointer !important; display: block !important; width: 100% !important;
  text-align: left !important; margin: 6px 0 !important;
}
.wq-section button[type="button"]:hover { background: rgba(245,193,60,0.2) !important; }

/* Shop-Banner */
.hero-split a[href*="shop"] {
  background: #2B1F12 !important; color: #F5C13C !important;
  border-radius: 999px !important; font-weight: 800 !important;
}

/* ===== SANFTERE FARBÜBERGÄNGE ===== */
/* Jede Sektion behält in der Mitte ihre Vollfarbe, blendet aber an den
   Rändern in die Farbe der Nachbarsektion über. Dadurch entstehen weiche
   Übergänge statt harter Farbkanten. Die Mischfarben an den Kanten sind so
   gewählt, dass die Unterseite einer Sektion exakt der Oberseite der
   folgenden Sektion entspricht – der Farbfluss ist über die ganze Seite
   durchgehend. Text bleibt im 20–80%-Bereich auf Vollfarbe gut lesbar. */

/* 1 – Hero (Goldgelb) → Dunkelbraun */
.hero-split {
  background: linear-gradient(to bottom,
    #FBE5A8 0%, #FBE5A8 82%, #93825D 100%) !important;
}
/* 2 – Notfall-Schritte (Dunkelbraun) */
.steps-bold-section {
  background: linear-gradient(to bottom,
    #93825D 0%, #2B1F12 20%, #2B1F12 80%, #3A3E20 100%) !important;
}
/* 3 – Was wir machen (Waldgrün) */
.diamond-section {
  background: linear-gradient(to bottom,
    #3A3E20 0%, #4A5D2E 20%, #4A5D2E 80%, #9F8F35 100%) !important;
}
/* 3.5 – Drohnenaufnahmen (dunkle Galerie als Brücke zwischen
   diamond-section (Grün, Unterkante #9F8F35) und ursula-first (Gold, Oberkante #9F8F35) */
.drone-showcase {
  background: linear-gradient(to bottom,
    #9F8F35 0%, #2B1F12 16%, #2B1F12 84%, #9F8F35 100%) !important;
  color: #FDF6E3 !important;
  padding: 80px 0 90px !important;
  position: relative;
}
.drone-showcase .section-header h2,
.drone-showcase .section-header p,
.drone-showcase .eyebrow { color: #FDF6E3 !important; }
.drone-showcase .section-header h2 em { color: #F5C13C !important; font-style: normal; }
.drone-showcase .eyebrow { color: #F5C13C !important; }
.drone-showcase-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
  gap: 22px;
  max-width: 960px;
  margin: 30px auto 0;
  align-items: start;
}
.drone-showcase-shot {
  margin: 0;
  overflow: hidden;
  border: 3px solid #F5C13C;
  border-radius: 20px;
  background: #FDF6E3;
  box-shadow: 0 18px 50px rgba(0,0,0,0.42);
}
.drone-showcase-shot-secondary { margin-top: 58px; }
.drone-showcase-shot img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.drone-showcase-shot:hover img { transform: scale(1.03); }
.drone-showcase-shot figcaption {
  padding: 14px 18px 16px;
  color: #2B1F12;
  font-weight: 800;
  line-height: 1.4;
}
.drone-showcase-link {
  display: table;
  margin: 28px auto 0;
  color: #F5C13C !important;
  font-weight: 900;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.drone-showcase-link:hover { color: #FDF6E3 !important; }

@media (max-width: 600px) {
  .drone-showcase { padding: 60px 0 70px !important; }
  .drone-showcase-grid { grid-template-columns: 1fr; margin-top: 22px; }
  .drone-showcase-shot { border-radius: 16px; }
  .drone-showcase-shot-secondary { margin-top: 0; }
}

/* 4 – Ursula (Goldgelb) */
.ursula-first {
  background: linear-gradient(to bottom,
    #9F8F35 0%, #F5C13C 20%, #F5C13C 80%, #9F8F35 100%) !important;
}
/* 5 – Lehrpfad-Band (Waldgrün) */
.lehrpfad-band {
  background: linear-gradient(to bottom,
    #9F8F35 0%, #4A5D2E 20%, #4A5D2E 80%, #A2A16B 100%) !important;
}
/* 6 – Wissen (Goldgelb hell) */
.wissen-band {
  background: linear-gradient(to bottom,
    #A2A16B 0%, #FBE5A8 20%, #FBE5A8 80%, #A2A16B 100%) !important;
}
/* 7 – Naturgarten (Waldgrün) */
.naturgarten-band {
  background: linear-gradient(to bottom,
    #A2A16B 0%, #4A5D2E 20%, #4A5D2E 80%, #3A3E20 100%) !important;
}
/* 8 – Quiz (Dunkelbraun) */
.wq-section {
  background: linear-gradient(to bottom,
    #3A3E20 0%, #2B1F12 20%, #2B1F12 80%, #907027 100%) !important;
}
/* 9 – Entstehung (Goldgelb) */
.entstehung-bold {
  background: linear-gradient(to bottom,
    #907027 0%, #F5C13C 20%, #F5C13C 80%, #9F8F35 100%) !important;
}
/* 10 – Kampagne (Waldgrün) */
.kampagne-bold {
  background: linear-gradient(to bottom,
    #9F8F35 0%, #4A5D2E 20%, #4A5D2E 80%, #3A3E20 100%) !important;
}
/* 11 – Danke (Dunkelbraun) */
.danke {
  background: linear-gradient(to bottom,
    #3A3E20 0%, #2B1F12 20%, #2B1F12 80%, #907027 100%) !important;
}
/* 12 – CTA-Abschluss (Goldgelb) */
section.compact:last-of-type {
  background: linear-gradient(to bottom,
    #907027 0%, #F5C13C 18%, #F5C13C 100%) !important;
}