/* ========================================================================
   OSCHWALD Seiten – CSS der Vorlagen in seiten/, referenzen/ und ueber-uns/
   Eingebunden von seiten/teile/kopf.php (wp_enqueue_style), haengt ab von
   vorlagen-privat.css -> vorlagen-sektionen.css -> vorlagen-basis.css
   (Child-Theme-Hauptordner). Hier stehen nur die Abweichungen dieser
   Vorlagengruppe, gescopet auf .oschwald-seite.
   ======================================================================== */

/* Hero-Bild, falls die Seite kein eigenes --hero-bild setzt */
.oschwald-seite {
    --hero-bild-standard: url('/wp-content/uploads/2026/04/Deko-Team-eingang-v2-opt.jpg');
}

/* ========================================================================
   SEITEN: Ergaenzungen nur fuer seiten/ (Referenzen, Ueber uns, weitere)
   ======================================================================== */

/* ===== BROTKRUMEN (Rank Math) im Hero =====
   Ausgabe ueber oschwald_seite_brotkrumen() aus teile/kopf.php. */
.oschwald-seite .brotkrumen {
    font-size: 14px;
    color: rgba(255,255,255,0.85);
    margin-bottom: 18px;
}

.oschwald-seite .brotkrumen p {
    margin: 0;
    color: inherit;
}

.oschwald-seite .brotkrumen a {
    color: var(--white);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.oschwald-seite .brotkrumen .separator,
.oschwald-seite .brotkrumen .last {
    color: rgba(255,255,255,0.85);
}

.oschwald-seite .brotkrumen .separator {
    margin: 0 4px;
}

/* ===== ZEITSTRAHL (Historie) =====
   <section class="zeitstrahl [zeitstrahl--grau]"><div class="zeitstrahl-inner">
   <div class="section-header">…</div>
   <div class="zeitstrahl-liste">
     <article class="zeitstrahl-item">
       <div class="zeitstrahl-jahr">1897</div>
       <div class="zeitstrahl-inhalt rich">
         <figure class="zeitstrahl-bild"><img …><figcaption>…</figcaption></figure>
         <h3>…</h3><p>…</p>
       </div>
     </article> … */
.oschwald-seite .zeitstrahl {
    padding: clamp(48px, 8vw, 96px) 24px;
    background: var(--white);
}

.oschwald-seite .zeitstrahl--grau {
    background: var(--bg-light);
}

.oschwald-seite .zeitstrahl-inner {
    max-width: 1000px;
    margin: 0 auto;
}

.oschwald-seite .zeitstrahl-liste {
    position: relative;
    margin-top: 40px;
}

.oschwald-seite .zeitstrahl-liste::before {
    content: '';
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 59px;
    width: 3px;
    background: var(--oschwald-green-light);
    border-radius: 2px;
}

.oschwald-seite .zeitstrahl-item {
    position: relative;
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 32px;
    padding-bottom: 48px;
}

.oschwald-seite .zeitstrahl-item:last-child {
    padding-bottom: 0;
}

.oschwald-seite .zeitstrahl-jahr {
    position: relative;
    z-index: 1;
    align-self: start;
    justify-self: center;
    background: var(--oschwald-green);
    color: var(--white);
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.2;
    text-align: center;
    padding: 10px 14px;
    border-radius: 999px;
    min-width: 88px;
}

.oschwald-seite .zeitstrahl-inhalt {
    background: var(--white);
    border-radius: 16px;
    padding: clamp(20px, 3vw, 32px);
    box-shadow: 0 6px 24px rgba(0,0,0,0.06);
}

.oschwald-seite .zeitstrahl--grau .zeitstrahl-inhalt {
    background: var(--white);
}

.oschwald-seite .zeitstrahl:not(.zeitstrahl--grau) .zeitstrahl-inhalt {
    background: var(--bg-light);
    box-shadow: none;
}

.oschwald-seite .zeitstrahl-bild {
    margin: 0 0 20px;
}

.oschwald-seite .zeitstrahl-bild img {
    display: block;
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: 12px;
}

.oschwald-seite .zeitstrahl-bild--klein img {
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.oschwald-seite .zeitstrahl-bild figcaption {
    font-size: 14px;
    font-style: normal;
    color: var(--text-medium);
    margin-top: 8px;
}

@media (max-width: 600px) {
    .oschwald-seite .zeitstrahl-liste::before {
        left: 20px;
    }

    .oschwald-seite .zeitstrahl-item {
        grid-template-columns: 1fr;
        gap: 12px;
        padding-left: 44px;
    }

    .oschwald-seite .zeitstrahl-jahr {
        justify-self: start;
        margin-left: -44px;
    }
}

/* ===== WOOCOMMERCE-PRODUKTLISTEN (Marken, Pflege, Pflegemittel) =====
   <div class="produkte"><?php echo do_shortcode( '[products ids="…" columns="4"]' ); ?></div>
   Eigenes Raster, damit die Liste auch ohne WooCommerce-CSS (z. B. wenn ein
   Optimierungs-Plugin es auf Nicht-Shop-Seiten entfernt) sauber aussieht.
   auto-fill sorgt dafuer, dass einzelne Produkte nicht die volle Breite fuellen. */
.oschwald-seite .produkte {
    margin-top: 24px;
}

.oschwald-seite .produkte ul.products {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 24px;
}

.oschwald-seite .produkte ul.products::before,
.oschwald-seite .produkte ul.products::after {
    display: none;
}

.oschwald-seite .produkte ul.products li.product {
    float: none;
    width: auto;
    margin: 0;
    padding: 16px;
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    text-align: left;
}

.oschwald-seite .produkte ul.products li.product img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    margin: 0 0 12px;
}

.oschwald-seite .produkte ul.products li.product .woocommerce-loop-product__title {
    font-size: 1rem;
    line-height: 1.35;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 8px;
    padding: 0;
}

.oschwald-seite .produkte ul.products li.product .price {
    display: block;
    color: var(--oschwald-green-dark);
    font-weight: 700;
    margin-bottom: 4px;
}

.oschwald-seite .produkte ul.products li.product .wc-gzd-additional-info,
.oschwald-seite .produkte ul.products li.product .woocommerce-price-suffix {
    font-size: 12px;
    color: var(--text-medium);
}

.oschwald-seite .produkte ul.products li.product .button {
    margin-top: auto;
    align-self: flex-start;
    display: inline-block;
    background: var(--oschwald-green);
    color: var(--white);
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.oschwald-seite .produkte ul.products li.product .button:hover {
    background: var(--oschwald-green-dark);
    color: var(--white);
}

.oschwald-seite .bodenarten--grau .produkte ul.products li.product,
.oschwald-seite .inhalt--grau .produkte ul.products li.product {
    background: var(--white);
}

.oschwald-seite .faq-body .produkte ul.products {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 16px;
}