/* Farben unseres Bauernhofs */
:root {
  --hof-gruen: #294936;
  --hof-creme: #f7f4ec;
  --hof-terrakotta: #b66a45;
}

/* Hintergrund der Website */
body {
  background-color: var(--hof-creme);
}

/* Überschriften */
h1, h2, h3 {
  color: var(--hof-gruen);
}

/* Großes Startseitenbild */
.hof-hero {
  min-height: 450px;
  background:
    linear-gradient(
      rgba(0, 0, 0, 0.35),
      rgba(0, 0, 0, 0.35)
    ),
    url('/images/headers/hof-startseite.jpg');

  background-size: cover;
  background-position: center;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 60px 20px;
  text-align: center;
}

/* Text auf dem Bild */
.hof-hero-inhalt {
  max-width: 800px;
}

.hof-hero h1 {
  color: white;
  font-size: clamp(2rem, 5vw, 3.5rem);
}

.hof-hero p {
  color: white;
  font-size: 1.3rem;
}

/* Button */
.hof-button {
  display: inline-block;
  background: var(--hof-terrakotta);
  color: white;
  padding: 14px 28px;
  margin-top: 20px;
  text-decoration: none;
  border-radius: 5px;
}

.hof-button:hover {
  background: var(--hof-gruen);
  color: white;
}

/* */

/* ===================================
   AKTUELLES ANGEBOT – HOFLADEN
   =================================== */

.hof-angebot {
  max-width: 1150px;
  margin: 50px auto;
  padding: 30px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}

/* Überschrift des Moduls */
.hof-angebot > h3 {
  color: #294936;
  font-size: 2rem;
  margin-bottom: 30px;
}

/* Angebotsinhalt */
.hof-angebot .mod-articlesnews__item {
  display: grid;
  grid-template-columns: 45% 55%;
  gap: 30px;
  align-items: center;
}

/* Angebotsbild */
.hof-angebot img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: 12px;
}

/* Angebotstitel */
.hof-angebot h4 {
  color: #294936;
  font-size: 1.8rem;
}

/* Beschreibung */
.hof-angebot p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: #444;
}

/* Links und Buttons */
.hof-angebot a {
  color: #b66a45;
  font-weight: 600;
}

/* Smartphone-Ansicht */
@media (max-width: 768px) {

  .hof-angebot {
    padding: 20px;
    margin: 25px 10px;
  }

  .hof-angebot .mod-articlesnews__item {
    grid-template-columns: 1fr;
  }

  .hof-angebot img {
    height: 240px;
  }

}

/* Hofladen-Angebot: Bild links, Text rechts */

@media (min-width: 769px) {

  .hof-angebot .mod-articlesnews__item,
  .hof-angebot .mod-articles-item {
    display: flow-root;
  }

  .hof-angebot .mod-articlesnews__item img,
  .hof-angebot .mod-articles-item img {
    float: left;
    width: 45%;
    height: 300px;
    object-fit: cover;
    margin: 0 30px 20px 0;
    border-radius: 12px;
  }

}

/* Smartphone-Ansicht */

@media (max-width: 768px) {

  .hof-angebot img {
    float: none;
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 20px;
  }

}

/* ==========================================
   BIOHOF WIDMANN
   Aktuelles Angebot – modernes Layout
   ========================================== */

/* Gesamter Angebotsbereich */
.blog-featured .blog-item {
    display: grid;
    grid-template-columns: 45% minmax(0, 1fr);
    gap: 35px;
    align-items: center;

    background-color: #ffffff;
    padding: 30px;
    border-radius: 16px;

    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    margin-bottom: 40px;
}

/* Angebotsbild links */
.blog-featured .blog-item .item-image {
    width: 100%;
    margin: 0;
    float: none;
}

/* Bildgestaltung */
.blog-featured .blog-item .item-image img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}

/* Angebotstext rechts */
.blog-featured .blog-item .item-content {
    min-width: 0;
}

/* Überschrift */
.blog-featured .blog-item .item-title {
    color: #294936;
    font-size: 2rem;
    margin-bottom: 20px;
}

/* Beschreibung */
.blog-featured .blog-item .item-content p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #444444;
}

/* Links */
.blog-featured .blog-item .item-content a {
    color: #b66a45;
    font-weight: 600;
}

/* ==========================================
   Smartphone-Ansicht
   ========================================== */

@media (max-width: 768px) {

    .blog-featured .blog-item {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 20px;
    }

    .blog-featured .blog-item .item-image img {
        height: 240px;
    }

    .blog-featured .blog-item .item-title {
        font-size: 1.6rem;
    }
}

/* =====================================
   BIOHOF WIDMANN – STARTSEITENBILD
   ===================================== */

.hof-hero {
    min-height: 520px;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
}

/* Dunkler Verlauf für bessere Lesbarkeit */
.hof-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.65),
        rgba(0, 0, 0, 0.15)
    );
}

/* Textbereich */
.hof-hero-inhalt {
    position: relative;
    z-index: 1;
    max-width: 750px;
    padding: 40px;
    text-align: left;
}

/* Hauptüberschrift */
.hof-hero h1 {
    color: #ffffff;
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 25px;
}

/* Beschreibung */
.hof-hero p {
    color: #ffffff;
    font-size: 1.25rem;
    line-height: 1.7;
}

/* Button */
.hof-hero .hof-button {
    display: inline-block;
    background-color: #b66a45;
    color: #ffffff;
    padding: 15px 30px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s;
}

.hof-hero .hof-button:hover {
    background-color: #294936;
    color: #ffffff;
}

/* Smartphone */
@media (max-width: 768px) {
    .hof-hero {
        min-height: 420px;
    }

    .hof-hero-inhalt {
        padding: 25px;
    }

    .hof-hero h1 {
        font-size: 2rem;
    }

    .hof-hero p {
        font-size: 1rem;
    }
}

/* =====================================
   BIOHOF WIDMANN – BILDKACHELN
   ===================================== */

.hof-entdecken {
    max-width: 1200px;
    margin: 70px auto;
    padding: 0 20px;
    text-align: center;
}

.hof-entdecken h2 {
    color: #294936;
    font-size: 2.3rem;
    margin-bottom: 15px;
}

.hof-untertitel {
    color: #666;
    font-size: 1.15rem;
    margin-bottom: 40px;
}

/* Drei Kacheln nebeneinander */
.hof-kacheln {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px;
}

/* Einzelne Kachel */
.hof-kachel {
    display: block;
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    text-align: left;
    box-shadow: 0 6px 25px rgba(0,0,0,0.08);
    transition: transform 0.3s, box-shadow 0.3s;
}

/* Animation beim Darüberfahren */
.hof-kachel:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 35px rgba(0,0,0,0.15);
}

/* Bilder */
.hof-kachel img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
}

/* Textbereich */
.hof-kachel-text {
    padding: 25px;
}

.hof-kachel h3 {
    color: #294936;
    font-size: 1.5rem;
    margin-bottom: 12px;
}

.hof-kachel p {
    color: #555;
    line-height: 1.6;
}

.hof-kachel span {
    color: #b66a45;
    font-weight: 600;
}

/* Smartphone */
@media (max-width: 768px) {
    .hof-kacheln {
        grid-template-columns: 1fr;
    }

    .hof-entdecken {
        margin: 40px auto;
    }

    .hof-kachel img {
        height: 220px;
    }
}

/* ==========================================
   BIOHOF WIDMANN – KOPFBEREICH
   Logo links, Navigation rechts, Sticky Header
   ========================================== */

.container-header.full-width {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #f7f4ec;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
}

/* Logo: weißer Bildhintergrund wirkt auf Creme transparent */
.container-header .navbar-brand img {
    width: 110px;
    height: 110px;
    object-fit: contain;
    mix-blend-mode: multiply;
}

/* Menüfarben */
.container-header .mod-menu > li > a {
    color: #294936;
    font-weight: 600;
    font-size: 1.05rem;
    text-decoration: none;
    transition: color 0.3s ease;
}

.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li.active > a {
    color: #b66a45;
}

/* Cassiopeia hat zwei direkte .grid-child-Elemente:
   Logo und Navigation. Wir richten diese als Grid-Kinder aus. */
@media (min-width: 992px) {
    .container-header.full-width {
        display: grid;
        grid-template-columns:
            minmax(20px, 1fr)
            150px
            minmax(0, 1050px)
            minmax(20px, 1fr);
        align-items: center;
        padding: 10px 0;
    }

    .container-header.full-width > .grid-child:first-child {
        grid-column: 2;
        display: flex;
        align-items: center;
        min-width: 0;
    }

    .container-header.full-width > .container-nav {
        grid-column: 3;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        min-width: 0;
    }

    .container-header .mod-menu {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 12px 25px;
    }
}

/* Kleinere Bildschirme: Cassiopeias Standardlayout beibehalten */
@media (max-width: 991px) {
    .container-header .navbar-brand img {
        width: 75px;
        height: 75px;
    }
}

html {
    scroll-padding-top: 130px;
}

@media (max-width: 991px) {
    html {
        scroll-padding-top: 100px;
    }
}

/* ==========================================
   BIOHOF WIDMANN – HOFLADEN
   ========================================== */

.hofladen-seite {
    max-width: 1200px;
    margin: 40px auto 70px;
}

/* Einleitung */
.hofladen-einleitung {
    max-width: 850px;
    margin: 0 auto 50px;
    text-align: center;
}

.hofladen-einleitung h2 {
    color: #294936;
    font-size: 2.3rem;
    margin-bottom: 25px;
}

.hofladen-einleitung p {
    color: #444;
    font-size: 1.15rem;
    line-height: 1.8;
}

/* Bildergalerie */
.hofladen-galerie {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 60px;
}

.hofladen-galerie img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    border-radius: 12px;
    display: block;

    transition: transform 0.3s ease;
}

.hofladen-galerie img:hover {
    transform: scale(1.02);
}

/* Öffnungszeiten und Adresse */
.hofladen-info {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
}

.hofladen-oeffnungszeiten,
.hofladen-adresse {
    background: #ffffff;
    padding: 35px;
    border-radius: 16px;
    box-shadow: 0 6px 25px rgba(0,0,0,0.07);
}

.hofladen-info h2 {
    color: #294936;
    font-size: 1.8rem;
    margin-bottom: 25px;
}

.hofladen-info p {
    color: #444;
    font-size: 1.1rem;
    line-height: 1.7;
}

/* Smartphone */
@media (max-width: 768px) {

    .hofladen-seite {
        margin: 25px auto 40px;
    }

    .hofladen-einleitung h2 {
        font-size: 1.8rem;
    }

    .hofladen-galerie {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .hofladen-galerie img {
        height: 250px;
    }

    .hofladen-info {
        grid-template-columns: 1fr;
    }

    .hofladen-oeffnungszeiten,
    .hofladen-adresse {
        padding: 25px;
    }
}

/* ==========================================
   BIOHOF WIDMANN – UNSERE TIERE
   ========================================== */

.tiere-seite {
    max-width: 1200px;
    margin: 40px auto 80px;
}

/* Einleitung */

.tiere-einleitung {
    max-width: 850px;
    margin: 0 auto 40px;
    text-align: center;
}

.tiere-einleitung h2 {
    color: #294936;
    font-size: 2.3rem;
    margin-bottom: 25px;
}

.tiere-einleitung p {
    font-size: 1.2rem;
    line-height: 1.8;
    color: #444;
}

/* Großes Titelbild */

.tiere-headerbild {
    margin-bottom: 70px;
}

.tiere-headerbild img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    border-radius: 16px;
    display: block;
}

/* Bild-Text-Bereiche */

.tiere-bereich {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
    margin-bottom: 80px;
}

/* Zweiten Bereich umkehren */

.tiere-umgekehrt .tiere-bild {
    order: 2;
}

.tiere-umgekehrt .tiere-text {
    order: 1;
}

/* Bilder */

.tiere-bild img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    border-radius: 14px;
    display: block;
}

/* Text */

.tiere-text h2 {
    color: #294936;
    font-size: 2rem;
    margin-bottom: 25px;
}

.tiere-text p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #444;
}

/* Galerie */

.tiere-galerie-bereich {
    margin-top: 60px;
    text-align: center;
}

.tiere-galerie-bereich h2 {
    color: #294936;
    font-size: 2.2rem;
    margin-bottom: 35px;
}

.tiere-galerie {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.tiere-galerie img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}

/* Smartphone */

@media (max-width: 768px) {

    .tiere-seite {
        margin: 25px auto 50px;
    }

    .tiere-einleitung h2 {
        font-size: 1.8rem;
    }

    .tiere-headerbild img {
        height: 280px;
    }

    .tiere-bereich {
        grid-template-columns: 1fr;
        gap: 25px;
        margin-bottom: 50px;
    }

    .tiere-umgekehrt .tiere-bild,
    .tiere-umgekehrt .tiere-text {
        order: initial;
    }

    .tiere-bild img {
        height: 280px;
    }

    .tiere-galerie {
        grid-template-columns: 1fr;
    }

    .tiere-galerie img {
        height: 250px;
    }
}

/* ==========================================
   BIOHOF WIDMANN – UNSER HOF
   ========================================== */

.unser-hof-seite {
    max-width: 1200px;
    margin: 40px auto 80px;
}

/* Einleitung */

.unser-hof-einleitung {
    max-width: 850px;
    margin: 0 auto 45px;
    text-align: center;
}

.unser-hof-einleitung h2 {
    color: #294936;
    font-size: 2.3rem;
    margin-bottom: 25px;
}

.unser-hof-einleitung p {
    font-size: 1.15rem;
    line-height: 1.8;
    color: #444;
}

/* Großes Hofbild */

.unser-hof-headerbild {
    margin-bottom: 70px;
}

.unser-hof-headerbild img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    border-radius: 16px;
    display: block;
}

/* Bild-Text-Bereiche */

.unser-hof-bereich {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 50px;
    align-items: center;
    margin-bottom: 80px;
}

.unser-hof-umgekehrt .unser-hof-bild {
    order: 2;
}

.unser-hof-umgekehrt .unser-hof-text {
    order: 1;
}

/* Bilder */

.unser-hof-bild img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    border-radius: 14px;
    display: block;
}

/* Texte */

.unser-hof-text h2 {
    color: #294936;
    font-size: 2rem;
    margin-bottom: 25px;
}

.unser-hof-text p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #444;
}

/* Bildergalerie */

.unser-hof-galerie-bereich {
    margin-top: 60px;
    text-align: center;
}

.unser-hof-galerie-bereich h2 {
    color: #294936;
    font-size: 2.2rem;
    margin-bottom: 35px;
}

.unser-hof-galerie {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.unser-hof-galerie img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}

/* Smartphone */

@media (max-width: 768px) {

    .unser-hof-seite {
        margin: 25px auto 50px;
    }

    .unser-hof-einleitung h2 {
        font-size: 1.8rem;
    }

    .unser-hof-headerbild img {
        height: 280px;
    }

    .unser-hof-bereich {
        grid-template-columns: 1fr;
        gap: 25px;
        margin-bottom: 50px;
    }

    .unser-hof-umgekehrt .unser-hof-bild,
    .unser-hof-umgekehrt .unser-hof-text {
        order: initial;
    }

    .unser-hof-bild img {
        height: 280px;
    }

    .unser-hof-galerie {
        grid-template-columns: 1fr;
    }

    .unser-hof-galerie img {
        height: 250px;
    }
}