/* Design "creme" – baut auf modern.css und edel.css auf.
   Warmes Creme statt Braun, dunkle Schrift, Grün als Akzent, goldene Ähren.
   Die Rundungen (Bogen und gekrümmte Leiste) bleiben. */
:root {
  --cream: #f5efe6;
  --cream-deep: #ece3d6;
  --ink: #2f2620;
  --ink-soft: #5a4b40;
}

/* ---------- Kopfleiste ---------- */
.m-header { background: var(--cream); }
.m-header.is-scrolled { filter: drop-shadow(0 3px 10px rgba(47, 38, 32, .12)); }
.m-header::after {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1280 140' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23f5efe6' d='M0 0h1280v140C573.08 140 0 0 0 0z'/%3E%3C/svg%3E");
}
.m-header .main-nav > ul > li > a { color: var(--ink); }
.m-header .main-nav > ul > li > a:hover { color: var(--green-dark); opacity: 1; }
.m-header .main-nav > ul > li.active > a { color: var(--green-dark); }
.main-nav .has-children > a::after { border-color: currentColor; }
.nav-newsletter a { border-color: var(--green-dark) !important; color: var(--green-dark) !important; }
.nav-newsletter a:hover { background: var(--green-dark) !important; color: #fff !important; }
.search-toggle { color: var(--ink); }
.search-toggle:hover, .search-toggle[aria-expanded="true"] { background: var(--cream-deep); }
.m-header .menu-toggle span { background: var(--ink); }
.sub-menu { background: #fff; }
.sub-menu a { color: var(--ink) !important; }
.sub-menu a:hover { background: var(--cream) !important; }

/* Streifen unter der Leiste auf Unterseiten: Creme mit Bogen */
.m-band { background: var(--cream); height: 90px; }
.m-band::after {
  content: ""; position: absolute; right: 6%; bottom: 8px; width: 92px; height: 76px;
  background: url(/img/aehren.png) center bottom / contain no-repeat;
}

/* ---------- Begrüssung auf der Startseite ---------- */
.hero { background: var(--cream); color: var(--ink); }
.hero-quote p { color: var(--ink); }
.hero-quote figcaption { color: var(--ink-soft); }
.hero-quote figcaption a { color: var(--green-dark); text-decoration-color: rgba(58, 130, 51, .4); }
.hero-quote figcaption a:hover { text-decoration-color: var(--green-dark); }
.hero-more { background: var(--green-dark); color: #fff; box-shadow: 0 6px 18px rgba(58, 130, 51, .25); }
.hero-more:hover { background: var(--green); box-shadow: 0 8px 22px rgba(58, 130, 51, .3); }
.hero-more:focus-visible { outline-color: var(--green-dark); }
.hero-birds { opacity: .55; }
.hero-portrait img { filter: drop-shadow(0 12px 22px rgba(47, 38, 32, .14)); }

/* Ähren links unten auf Creme */
.hero-aehren-links {
  display: block; position: absolute; z-index: 1; pointer-events: none;
  left: 7vw; bottom: 0; width: 23vw; max-width: 440px; height: auto;
  transform-origin: bottom center;
}
/* Ähren rechts neben Jens: grösser, mehr im Bild */
.hero-portrait .hero-aehren { width: clamp(110px, 10.5vw, 205px); }
@media (max-width: 1500px) {
  .hero-portrait .hero-aehren { width: clamp(90px, 8.6vw, 150px); }
}
/* Beim Laden wachsen die Ähren sanft aus dem Boden */
@media (prefers-reduced-motion: no-preference) {
  .hero-aehren-links, .hero-portrait .hero-aehren { animation: aehren-wachsen 1.6s cubic-bezier(.16, 1, .3, 1) .3s both; transform-origin: bottom center; }
}
@keyframes aehren-wachsen { from { transform: scaleY(.55); opacity: 0; } }

/* ---------- Fussbereich: dunkles Espresso statt Braun ---------- */
.footer-main { background: var(--ink); }
.footer-bottom { background: #221b16; }

@media (max-width: 980px) {
  .m-band { height: 64px; }
  .m-band::after { width: 60px; height: 50px; bottom: 4px; }
  .hero-aehren-links { width: 42vw; left: 2vw; }
  .hero-portrait .hero-aehren { width: 84px; }
}

/* Startseite: Jens näher an Logo und Text, Ähren unten nicht über dem Knopf */
.hero-aehren-links { z-index: 0; }
@media (min-width: 981px) {
  .hero-inner {
    grid-template-columns: minmax(0, 600px) auto;
    justify-content: center;
    column-gap: clamp(0px, 1.5vw, 30px);
  }
  .hero-text { padding-bottom: clamp(150px, 13vw, 210px); }
  .hero-aehren-links { width: min(21vw, 360px); }
}
/* Handy: Jens deutlich kleiner */
@media (max-width: 980px) {
  .hero { min-height: 0; }
  .hero-portrait { margin-top: 28px; }
  .hero-portrait img { height: min(30svh, 250px); }
  .hero-portrait .hero-aehren { width: 60px; right: -12px; }
}