/*
 Theme Name:  Astra Child – Hofmann
 Theme URI:   https://dieinternette.com
 Description: Child-Theme für Weinbau Hofmann (Astra + Elementor Pro)
 Author:      Vera Hartner
 Template:    astra
 Version:     1.0.0
*/


@keyframes buzz-out {
    10% { transform: translateX(3px) rotate(2deg); }
    20% { transform: translateX(-3px) rotate(-2deg); }
    30% { transform: translateX(3px) rotate(2deg); }
    40% { transform: translateX(-3px) rotate(-2deg); }
    50% { transform: translateX(2px) rotate(1deg); }
    60% { transform: translateX(-2px) rotate(-1deg); }
    70% { transform: translateX(2px) rotate(1deg); }
    80% { transform: translateX(-2px) rotate(-1deg); }
    90% { transform: translateX(1px) rotate(0deg); }
    100% { transform: translateX(-1px) rotate(0deg); }
}


/* Titel – Basis für Inhaltstyp "Aktuelles" */
.vp-event-title {
    font-family: "Cormorant Garamond", serif;
    font-size: 26px;
    line-height: 1.25;
    margin: 0 0 0.4rem;      /* Abstand nach unten zum Datum */
}

.vp-event-title a {
    text-decoration: none !important;
    border-bottom: none !important;
}

.vp-event-title a:hover,
.vp-event-title a:focus {
    text-decoration: none !important;
}

/* =========================================
   AKTUELLES – Grid & Karten
   ========================================= */

/* AKTUELLES – Grid: gleiche Breakpoints wie bei Weinen */
.vp-events-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px;
  max-width: 1100px;
  margin: 0 auto 3rem;
}

/* ab ca. Tablet quer nur noch 2 Spalten */
@media (max-width: 1200px) {
  .vp-events-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }
}

/* Handy / kleinere Tablets: 1 Spalte (≈ 900px und kleiner) */
@media (max-width: 900px) {
  .vp-events-grid {
    grid-template-columns: 1fr;
  }
}



/* =========================================
   Wein-Grid: letzte einzelne Karte zentrieren
   im 2-Spalten-Layout (Tablets, ~900–1200px)
   ========================================= */
@media (min-width: 901px) and (max-width: 1200px) {

  /* 2 Spalten bleiben wie gehabt */
  .whm-wine-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Wenn im 2er-Grid in der letzten Reihe nur 1 Karte steht,
     soll sie über beide Spalten laufen (= mittig wirken) */
  .whm-wine-grid > .whm-wine-card:nth-child(2n+1):nth-last-child(1) {
    grid-column: 1 / -1;     /* über beide Spalten */
    justify-self: center;    /* falls der Grid-Track breiter ist */
    max-width: 720px;        /* optional, damit sie nicht zu breit wird */
  }
}



/* Karte – Grundlayout */
.vp-event-teaser {
  background-color: #262626;           /* dezentes Dunkelgrau */
  border-radius: 8px;                  /* Ecken */
  border: none;                        /* KEIN sichtbarer Rahmen */
  overflow: hidden;                    /* Bild folgt den abgerundeten Ecken */
  display: flex;
  flex-direction: column;
  height: 100%;
  color: #ffffff;
}

/* zukünftige Veranstaltungen: Flaschengrün */
.vp-event-teaser.is-future-event {
  background-color: #2F4A36 !important;
}

/* Bildbereich oben, immer gleich hoch */
.vp-event-thumb {
  width: 100%;
  height: 260px;                       /* fixe Höhe – hier nach Geschmack ändern */
  overflow: hidden;
}

.vp-event-thumb a,
.vp-event-thumb img {
  display: block;
  width: 100%;
  height: 100%;
}

.vp-event-thumb img {
  object-fit: cover;                   /* egal ob Hoch- oder Querformat */
  object-position: center center;      /* Mitte-Mitte */
}

/* Textkörper der Karte */
.vp-event-body {
  padding: 24px 22px 28px;
}

/* =========================================
   AKTUELLES – Titel & Meta-Abstände (Grid)
   ========================================= */

/* Aktuelles – Kartentitel im Grid: gut lesbar */
.vp-events-grid .vp-event-title {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.35;
    margin: 0 0 8px;
    text-align: left;
    letter-spacing: 0.02em;
}


.vp-events-grid .vp-event-title a {
    color: #ffffff !important;
    text-decoration: none !important;
}


.vp-event-title a {
  /* color: #ffffff !important; */
  text-decoration: none !important;
  border-bottom: none !important;
}

.vp-event-title a:hover,
.vp-event-title a:focus {
  /* color: #ffffff !important; */
  text-decoration: none !important;
}

/* Event-Datum (nur bei Veranstaltungen) */
.vp-event-date {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: #ffffff;
  opacity: 0.95;
}

/* "Veröffentlicht am …" (nur bei Artikeln ohne Eventdatum) */
.vp-event-published {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  margin-bottom: 0.9rem;
  opacity: 0.85;
}

/* Vorschautext */
.vp-event-excerpt {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
}


/* „Mehr laden“ / Mehr Beiträge-Button */
.js-vp-ev-item.is-hidden {
    display: none;
}

.vp-ev-more-wrap {
    text-align: center;
    margin-top: 1.5rem;
}

.vp-ev-more {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
    font-size: 18px;
    padding: 0.6rem 1.4rem;
    border-radius: 5px;
    border: none;
    background: #6A5648;
    color: #ffffff;
    cursor: pointer;
}

.vp-ev-more:hover,
.vp-ev-more:focus {
    background: #2F4A36;
    color: #ffffff;
}


/* Einheitliche Bildhöhe für Aktuelles */
.vp-event-thumb {
    width: 100%;
    height: 240px;          /* Höhe für Desktop – kannst du anpassen */
    overflow: hidden;
    border-radius: 8px 8px 0 0; /* oben Rundecken */
}

/* Bilder selbst */
.vp-event-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;      /* füllt Rahmen, schneidet sauber */
    object-position: center center;
    display: block;
}

/* Mobile kleinere Höhe */
@media (max-width: 767px) {
    .vp-event-thumb {
        height: 180px;
    }
}


/* =========================================
   AKTUELLES – Bildhöhe im Grid vereinheitlichen
   ========================================= */

/* Rahmen für das Bild oben in der Karte */
.vp-events-grid .vp-event-thumb {
    width: 100%;
    height: 260px;          /* hier kannst du bei Bedarf nur diese Zahl ändern */
    margin: 0 0 16px 0;
    overflow: hidden;
    position: relative;
}

/* Bild füllt den Rahmen vollständig, egal ob Hoch- oder Querformat */
.vp-events-grid .vp-event-thumb img,
.vp-events-grid .vp-event-thumb-img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;          /* füllt, schneidet überstehendes ab */
    object-position: center;    /* Mitte-Mitte */
}

/* =========================================
   AKTUELLES – Einzelansicht (Detailseite)
   ========================================= */

/* Gesamtseite wie gewohnt dunkel */
.single-aktuelles .site {
    background: #1a1a1a;   /* Header + Footer bleiben dunkel */
    color: #ffffff;
}

/* GANZER Inhaltsbereich flaschengrün + zentriertes Layout */
.single-aktuelles .site-content,
.single-aktuelles .ast-container,
.single-aktuelles .content-area,
.single-aktuelles .site-main {
    background-color: #2f4a36;
    color: #ffffff;
    border: none !important;
    box-shadow: none !important;

    /* REDUZIERTES Padding */
    padding-top: 10px;
    padding-bottom: 30px;
    padding-left: 20px;
    padding-right: 20px;
}


/* Flex-Layout, damit der Artikel wirklich in der Mitte sitzt */
.single-aktuelles .site-main {
    display: flex;
    justify-content: center;    /* horizontal zentrieren */
}

/* Deine Detailbox innen */
.single-aktuelles .vp-event-single-wrap {
    background-color: transparent; /* kein zusätzlicher weißer Block */
    color: #FFFFFF;
    text-align: center;
    padding: 0;
    max-width: 900px;
    width: 100%;
    margin: 0;                  /* Flex kümmert sich ums Zentrieren */
}

/* Rest wie gehabt */
.vp-event-single-title {
    font-size: 42px;
    font-weight: 700;
    text-transform: none;
    margin-bottom: 0.25em;
    color: #FFFFFF;
}

.vp-event-single-meta {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.vp-event-single-gallery,
.vp-event-gallery {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 2.5rem;
}

/* Gemeinsame Basis für alle Bilder */
.vp-event-single-figure,
.vp-event-gallery-item,
.vp-event-single-thumb {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 0 auto 40px;
}

/* Bild selbst */
.vp-event-single-figure img,
.vp-event-gallery-item img,
.vp-event-single-thumb img {
    width: auto;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    border: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
}

/* =========================================
   AKTUELLES – Hintergrund endgültig fixen
   ========================================= */

/* Nur der Inhalt von "Aktuelles"-Einzelansichten */
body.single-aktuelles #content,
body.single-aktuelles #content .ast-container,
body.single-aktuelles #content .content-area,
body.single-aktuelles #content .site-main,
body.single-aktuelles #content article.vp-event-single-wrap {
    background-color: #2f4a36 !important; /* Flaschengrün */
    box-shadow: none !important;
    border: 0 !important;
}


/* =========================================
   AKTUELLES – Startseiten-Teaser breiter
   ========================================= */

/* Nur auf der Startseite, nur der Teaser-Shortcode */
.home .vp-events-grid.vp-events-grid--teaser {
    max-width: 1400px;     /* kannst du anpassen oder auf none setzen */
    width: 100%;
    padding: 0 5vw;        /* seitliches Padding, auch nach Gefühl  */
}

/* =========================================
   AKTUELLES – letzte Karte im 2-Spalten-Grid zentrieren
   (Breakpoint ~900–1200px)
   ========================================= */
@media (min-width: 900px) and (max-width: 1200px) {

  /* Sicherstellen: 2-Spalten-Layout bleibt aktiv */
  .vp-events-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Wenn im 2-Spalten-Grid nur noch 1 Karte in der letzten Reihe ist → zentrieren */
  .vp-events-grid > .vp-event-teaser:nth-child(2n+1):nth-last-child(1) {
    grid-column: 1 / -1;     /* über beide Spalten */
    justify-self: center;    /* Mitte */
    max-width: 720px;        /* optional für schönes Layout */
  }
}


/* =========================================
   AKTUELLES – Zurück-Button in der Einzelansicht
   ========================================= */

.vp-event-single-back {
    margin-top: 3rem;
    text-align: center;
}

.vp-btn-back {
    display: inline-block;
    background-color: #e7e7e7;
    color: #1a1a1a !important;
    padding: 0.7rem 1.8rem;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 18px;
    font-weight: 500;
    border-radius: 5px;
    border: 0;
    text-decoration: none;
    cursor: pointer;
    transition: all .2s ease-in-out;
}

.vp-btn-back:hover,
.vp-btn-back:focus {
    background-color: #c68F7C;
    color: #ffffff !important;
    text-decoration: none;
    animation: buzz-out 0.75s both;
}


/* ==========================
   WEINE – Frontend Styling
   ========================== */

.whm-wine-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3rem;
}

/* Wenn in der letzten Reihe nur 1 Karte steht (3-Spalten-Grid),
   schiebe sie in die mittlere Spalte */
.whm-wine-grid > .whm-wine-card:nth-child(3n+1):nth-last-child(1) {
    grid-column: 2;
}



/* ab ca. Tablet nur noch 2 Spalten */
@media (max-width: 1200px) {
    .whm-wine-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Handy: 1 Spalte */
@media (max-width: 900px) {
    .whm-wine-grid {
        grid-template-columns: 1fr;
    }
}

/* Karte insgesamt */
.whm-wine-card-inner {
    display: flex;
    background: #f3e9dc;               /* Beigeton */
    border-radius: 5px;
    overflow: hidden;
}

/* Spalte Bild: ca. 40 %, Flasche unten auf weißem Grund */
.whm-wine-image {
    flex: 0 0 32%;
    background: #ffffff;
    padding: 0rem 0rem 0rem;
    display: flex;
    align-items: flex-end;             /* Flasche nach unten */
    justify-content: center;
    position: relative;                /* für Badges & Medaillen */
}

.whm-wine-image img {
    width: 100%;
    height: auto;
    max-height: 380px;
    object-fit: contain;
}

/* Flasche soll 100% breit sein, Medaille NICHT */
.whm-wine-image img.whm-awc-medal {
    width: auto;
    max-width: 80px;
}


/* Textspalte */
.whm-wine-content {
    flex: 1;
    padding: 2.5rem 2.5rem 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    color: #1a1a1a;
}

/* Flaschengrün – Hauptfarbe */
:root {
    --whm-flaschengruen: #284832;
}

/* Titelblock: Hauptname, Lage, Jahrgang & Geschmack */

.whm-wine-title {
    margin: 0 0 0.5rem;
    line-height: 1.1;
}

/* Hauptname */
.whm-wine-title-main {
    display: block;
    font-family: "Photograph Signature", sans-serif !important;
    font-size: 48px !important;
    font-weight: 500 !important;
    color: var(--whm-flaschengruen);
}

/* Lage (Subtitel) + Jahrgang kommen hintereinander */
.whm-wine-title-sub {
    display: inline-block;
    margin: 0;
    margin-right: 0.8rem; /* Platz für Jahrgang */
    font-family: "Photograph Signature", sans-serif !important;
    font-size: 34px !important;
    font-weight: 400 !important;
    color: var(--whm-flaschengruen);
}

/* Jahrgang steht rechts daneben */
.whm-wine-year-num {
    display: inline-block;
    font-family: "Photograph Signature", sans-serif !important;
    color: var(--whm-flaschengruen);
	font-size: 24px;
    font-weight: 600;
    line-height: 1.1;
    margin: 0;
}

/* Zeile für Geschmack */
.whm-wine-yearline {
    margin-top: 0.15rem;
    margin-bottom: 0.9rem;	
}

/* Geschmack (trocken) unter Lage/Jahrgang */
.whm-wine-year-style {
    display: block;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 0.85rem;
    line-height: 1.2;
    margin: 0 0 0 0;
}


/* Weinangaben – nur Text, #1a1a1a */
.whm-wine-meta {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 0.85rem;
    line-height: 1.2;
    margin-bottom: 1rem;
    color: #1a1a1a;
}

.whm-wine-text {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 0.85rem;
    line-height: 1.2;
    margin: 0 0 1.2rem;
}

/* Preis + Button unten ausrichten */
.whm-wine-footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;    /* Preis oben, Button darunter */
    align-items: flex-start;
    gap: 0.75rem;
}
.whm-wine-button {
    margin-left: 0;                /* nicht mehr nach rechts schieben */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.0rem;
    border-radius: 5px;
    background: var(--whm-flaschengruen);
    color: #fff !important;
    text-decoration: none;
    font-size: 1.15rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: "Neo Latina", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-weight: 500;
    white-space: nowrap;           /* kein Umbruch im Button */
}

/* Link-Farbe Button hart auf Weiß fixen */
.whm-wine-button:link,
.whm-wine-button:visited,
.whm-wine-button:hover,
.whm-wine-button:active {
    color: #ffffff !important;
}


/* Preis: Euro normal, Zahl in Script */
.whm-wine-price {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 0.6rem;                     /* mehr Luft nach dem € */
    color: var(--whm-flaschengruen);
}

.whm-wine-price-num {
    font-family: "Photograph Signature", sans-serif !important;
    font-size: 26px;                 /* etwas kleiner */
    line-height: 1;
    font-weight: 600;                /* optisch „dicker“ */
}



/* Flaschengröße dezent */
.whm-wine-volume {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 0.8rem;
    font-weight: 400;
    margin-left: 0.35rem;
    color: #1a1a1a;
}


/* ==========================
   BADGE – Aktion / Highlight
   ========================== */
/* Aktion-Badge schöner + größer + Neo Latina */
.whm-badge-aktion {
    position: absolute;
    top: 2.0rem;
    right: 0rem;
    
    background: #c68f7c;                     /* Rosé-Ton */
    color: #fff;
    padding: 0.3rem 0.8rem;                 /* größer */
    border-radius: 6px 0 0px 6px;            /* rechts eckig, links rund */
    
    font-family: "Neo Latina", sans-serif;   /* Schrift */
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0.04em;

    z-index: 6;
}


/* ==========================
   BADGE – AWC-Medaillen
   ========================== */
.whm-awc-medals {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 10;
}

/* Medaille – kleine, feste Größe */
.whm-awc-medal {
    display: block;
    width: 80px;
    max-width: 80px;
    height: auto;
}

/* Handy: noch etwas kleiner */
@media (max-width: 768px) {
    .whm-awc-medal {
        width: 68px;
        max-width: 68px;
    }
}


/* ==========================
   Wein-Shop – Filter
   ========================== */

/* Wrapper: Filter + Reset-Button zentriert */
.whm-shop-filters {
    max-width: 960px;
    margin: 0 auto 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
}

/* Formular nimmt die volle Breite, Inhalt zentrieren wir über die Row */
.whm-wine-filters {
    width: 100%;
}

/* die eigentliche Filterzeile */
.whm-shop-filters-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;          /* Zentriert */
    gap: 1rem 2rem;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.whm-filter-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.whm-filter-item label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #f3e9dc;
}

.whm-filter-item select {
    min-width: 160px;
    padding: 0.35rem 0.6rem;
    border-radius: 4px;
    border: 1px solid #ccc;
    font-size: 0.9rem;
}

/* Alten "Filtern"-Button sicherheitshalber ausblenden, falls noch wo im Markup */
.whm-filter-actions button {
    display: none;
}

/* alter Textlink .whm-filter-reset wird nicht mehr verwendet, kann aber bleiben */


/* ==========================
   Zurücksetzen-Button
   ========================== */

.whm-filter-reset-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--e-global-color-accent, #d8d8d8) !important;
    color: #2F4A36 !important;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    border: none;
    text-decoration: none;
    font-family: "Neo Latina", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 1.25rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all 0.25s ease;
	margin-top: 0,8em;
}

/* Hover: Hintergrund auf Accent, Text bleibt weiß + Buzz-Out-Effekt */
.whm-filter-reset-btn:hover,
.whm-filter-reset-btn:focus {
    background: #c68f7c !important;
    color: #ffffff !important;
    outline: none;
    animation: buzz-out 0.75s both;
}

/* Mobile: Filter untereinander */
@media (max-width: 768px) {
    .whm-shop-filters-row {
        justify-content: center;
    }

    .whm-filter-item select {
        min-width: 140px;
    }
}


/* ============================================
   KAUFEN-BUTTON – Rosé + Buzz-Out
   ============================================ */

/* Grundzustand */
.whm-wine-button {
    transition: background-color 0.25s ease, color 0.25s ease;
}

/* Hover: Rosé-Farbe + Buzz-Out-Wackeln */
.whm-wine-button:hover {
    background-color: #c68f7c !important;
    color: #ffffff !important;
    animation: whm-buzz-out 0.7s linear 1;
}

/* kleines „Einschnappen“ beim Klick (optional) */
.whm-wine-button:active {
    animation: none;
    transform: scale(0.97);
}

/* Buzz-Out-Animation (leichtes Wackeln nach außen) */
@keyframes whm-buzz-out {
    10% { transform: translateX(2px)  rotate(2deg); }
    20% { transform: translateX(-2px) rotate(-2deg); }
    30% { transform: translateX(2px)  rotate(2deg); }
    40% { transform: translateX(-2px) rotate(-1deg); }
    50% { transform: translateX(1px)  rotate(1deg); }
    60% { transform: translateX(-1px) rotate(0deg); }
    100%{ transform: translateX(0)   rotate(0deg); }
}

/* =========================================
   AB-HOF-WIDGET – rechter Rand, aufklappbar
   ========================================= */

/* Grundcontainer – kleine Badge rechts am Rand */
.whm-abhof-toggle {
    position: fixed;
    right: 0;
    bottom: 10rem;                       /* Höhe anpassen, z.B. 8–12rem */
    z-index: 60;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;

    padding: 0.75rem 1.4rem 0.85rem;
    background: #c68f7c;                 /* Rosé-Farbe */
    color: #ffffff;
    font-family: "Neo Latina", sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;

    border-radius: 5px 0 0 5px;          /* links rund, rechts bündig */
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    cursor: pointer;

    overflow: hidden;
    transition: all 0.25s ease;
}

/* Innerer Bereich mit Icon + Text (kompakte Form) */
.whm-abhof-toggle__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

/* Icon – weißes Häuschen */
.whm-abhof-toggle-icon svg {
    display: block;
    width: 22px;
    height: 22px;
    stroke: #ffffff;
}

/* Zwei Zeilen: AB-HOF / VERKAUF */
.whm-abhof-toggle-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    text-align: center;
}

/* Hover: leicht heller + Buzz-Out (Animation hast du weiter oben) */
.whm-abhof-toggle:hover {
    filter: brightness(1.06);
    animation: whm-buzz-out 0.75s linear 1;
}

/* ––– Ausgeklappter Bereich – Detailinfos ––– */

.whm-abhof-toggle__content {
    display: none !important;             /* im Normalzustand WIRKLICH unsichtbar */
    margin-top: 0.9rem;
    text-align: left;
    ...
}

/* Überschrift im Widget */
.whm-abhof-toggle__headline {
    margin: 0 0 0.4rem;
    font-family: "Neo Latina", "Inter", sans-serif;
    font-size: 0.95rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* Textblöcke (Ab-Hof-Zeiten, Adresse, Kontakt) */
.whm-abhof-toggle__body {
    margin: 0 0 0.4rem;
}

/* Links im Widget: weiß + underline */
.whm-abhof-toggle__content a {
    color: #ffffff;
    text-decoration: underline;
}

/* ––– Zustand: geöffnet ––– */

.whm-abhof-toggle.is-open {
    align-items: flex-start;
    padding: 1rem 1.6rem 1.1rem;
    max-width: 280px;                     /* aufgeklappt, aber nicht übertrieben breit */
}

/* Inhalt nur anzeigen, wenn offen */
.whm-abhof-toggle.is-open .whm-abhof-toggle__content {
    display: block !important;
}

/* Mobil – etwas kleiner & höher setzen */
@media (max-width: 600px) {
    .whm-abhof-toggle {
        bottom: 7rem;
        padding: 0.6rem 1.2rem 0.7rem;
        font-size: 0.75rem;
    }

    .whm-abhof-toggle.is-open {
        max-width: 240px;
    }
}

/* Icon oben größer & eingerückt */
.whm-abhof-toggle.is-open .whm-abhof-toggle-icon svg {
    width: 28px;
    height: 28px;
    stroke: #ffffff;
}

/* AB-HOF / VERKAUF größer + leicht eingerückt */
.whm-abhof-toggle.is-open .whm-abhof-toggle-text {
    font-size: 1rem;
    letter-spacing: 0.16em;
    text-align: left;
    align-items: flex-start;
    margin-left: 0.2rem;
}

/* Headline im Panel */
.whm-abhof-toggle__headline {
    margin-top: 0.8rem;
    margin-bottom: 0.4rem;
    font-family: "Inter", sans-serif !important;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: #ffffff;
}

/* Unterzeilen */
.whm-abhof-toggle__body {
    font-family: "Inter", sans-serif !important;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    margin-bottom: 0.4rem;
    color: #ffffff;
}

/* Blocktitel wie "Adresse", "Telefon", "E-Mail" */
.whm-abhof-toggle__label {
    font-family: "Inter", sans-serif !important;
    font-weight: 600;
    text-transform: none;
    font-size: 0.95rem;
    margin-top: 0.7rem;
    margin-bottom: 0.15rem;
    color: #ffffff;
}

/* Inhalt: Straße, PLZ, Ort, Zeiten, usw. */
.whm-abhof-toggle__text {
    font-family: "Inter", sans-serif !important;
    font-weight: 400;
    text-transform: none;
    font-size: 0.9rem;
    line-height: 1.4;
    color: #ffffff;
}

.whm-abhof-toggle__content a {
    color: #1a1a1a !important;        /* besser sichtbar */
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 400;
}

.whm-abhof-toggle__content a:hover {
    color: var(--whm-flaschengruen, #284832) !important;
}


/* =========================================
   MODAL „Direkt bei Hofmann bestellen“
   (für Button "Anfragen >" in der Weinbox)
   ========================================= */

.whm-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
}

/* Sichtbar-Zustand */
.whm-modal.is-open {
    display: block;
}

/* Verdunkelung */
.whm-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
}

/* Dialogbox */
.whm-modal__dialog {
    position: relative;
    max-width: 480px;
    margin: 4rem auto;
    padding: 1.75rem 2.1rem 1.9rem;
    background: #f7f2ea;                  /* leichtes Beige passend zur Website */
    border-radius: 10px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.45);
}

/* Titel "Direkt bei Hofmann bestellen" */
.whm-modal__title {
    margin: 0 0 0.75rem;
    font-family: "Neo Latina", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 1.4rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--whm-flaschengruen, #284832);
}

/* Fließtext im Modal */
.whm-modal__text {
    margin: 0 0 0.9rem;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 0.9rem;
}

/* Liste der Kontaktdaten */
.whm-modal__list {
    margin: 0 0 0.8rem;
    padding-left: 1.1rem;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 0.9rem;
}

/* gewähltes Produkt */
.whm-modal__wein {
    margin: 0;
    font-size: 0.85rem;
    font-style: italic;
}

/* X-Button oben rechts */
.whm-modal__close {
    position: absolute;
    top: 0.7rem;
    right: 0.9rem;
    background: var(--whm-flaschengruen, #284832);
    border: none;
    border-radius: 4px;
    padding: 0.25rem 0.65rem;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    color: #ffffff !important;
}

.whm-modal__close:hover {
    background: #c68f7c;
    color: #ffffff;
}

/* Links im Modal */
.whm-modal__dialog a {
    color: var(--whm-flaschengruen, #284832);
    text-decoration: underline;
}

/* Body mit offenem Modal nicht scrollen */
body.whm-modal-open {
    overflow: hidden;
}

/* Mobile Anpassung Modal */
@media (max-width: 600px) {
    .whm-modal__dialog {
        margin: 3rem 1.2rem;
        padding: 1.4rem 1.5rem 1.6rem;
    }

    .whm-modal__title {
        font-size: 1.2rem;
        letter-spacing: 0.10em;
    }
}

/* Icon + AB-HOF VERKAUF deutlich größer im aufgeklappten Zustand */
.whm-abhof-toggle.is-open .whm-abhof-toggle-icon svg {
    width: 32px;
    height: 32px;
}

/* Text AB-HOF / VERKAUF größer, ohne extra Laufweite */
.whm-abhof-toggle.is-open .whm-abhof-toggle-text {
    font-size: 1.15rem;
    letter-spacing: 0;              /* keine zusätzliche Laufweite */
    line-height: 1.1;
    text-align: left;
    align-items: flex-start;
    margin-left: 0.2rem;
}

/* Label-Zeilen: "Adresse", "Telefon", "E-Mail" */
.whm-abhof-toggle__label {
    font-family: "Inter", sans-serif !important;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    margin-top: 0.6rem;
    margin-bottom: 0.1rem;
    color: #ffffff;
}

/* normale Textzeilen (Zeit, Straße, Ort, etc.) */
.whm-abhof-toggle__text {
    font-family: "Inter", sans-serif !important;
    font-size: 0.9rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.3;               /* etwas enger */
    margin-bottom: 0.2rem;
    color: #ffffff;
}

/* Links im Panel: etwas dicker, kein Underline, gut sichtbar */
.whm-abhof-toggle__content a {
    color: #1a1a1a !important;
    font-weight: 500;               /* eine Stufe dicker als normal */
    text-decoration: none;
}

/* Hover: Flaschengrün */
.whm-abhof-toggle__content a:hover {
    color: var(--whm-flaschengruen, #284832) !important;
}

/* =========================================
   AB-HOF-WIDGET – Links Styling
   ========================================= */

.whm-abhof-toggle__text a {
    color: #1a1a1a;          /* dunkles Grau / fast Schwarz */
    text-decoration: none;   /* keine Unterstreichung */
    font-weight: 500;        /* leicht dicker */
    line-height: 1.4;
}

.whm-abhof-toggle__text a:hover {
    color: var(--whm-flaschengruen, #284832);
}


/* ============
  ==== Feinschliff Diverses WEINBAU HOFMANN ===
  ============= */
#ast-scroll-top {
    display: none !important;
}


/* ============
============ Einheitlicher Button für Kaufen & Anfragen 
============*/
.whm-wine-button,
.whm-wine-buy-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px; /* gleiche Grundhöhe */
    padding: 10px 24px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 4px;
}

/* Falls Hintergrundfarben unterschiedlich bleiben sollen */
.whm-wine-button {
    background-color: #345136; /* dein Hofmann-Grün */
    color: #fff;
}

.whm-wine-buy-button {
    background-color: #345136;
    color: #fff;
}


/* ============
============ 404 – echte volle Breite 
============*/
body.error404 .site-content,
body.error404 .ast-container,
body.error404 .site-main,
body.error404 .content-area,
body.error404 .entry-content {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
}


/* ============
============ Suchseite – echte volle Breite 
============*/
body.search .site-content,
body.search .ast-container,
body.search .site-main,
body.search .content-area,
body.search .entry-content {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}



/* =========================================
   Footer – Partner-Logos (Wagram, Falstaff, AWC)
   ========================================= */

/* Reihe mit Logos */
.whm-footer-logos {
 display: flex;
    align-items: center;
    justify-content: space-between;  /* links / mitte / rechts */
    flex-wrap: nowrap;
}

/* Einzelne Logo-Container */
.whm-footer-logo {
     flex: 0 1 auto;
}

/* Ausrichtung pro Logo-Container */
.whm-footer-logo:nth-child(1) { text-align: right; }   /* Wagram */
.whm-footer-logo:nth-child(2) { text-align: center; }  /* Falstaff */
.whm-footer-logo:nth-child(3) { text-align: left; }    /* AWC-Medaille */

/* Die Logos selbst: gleiche Höhe */
.whm-footer-logo img {
    height: 90px;      /* fixe Höhe für alle Logos */
    width: auto;
    object-fit: contain;
    display: inline-block;
}


/* Tablet: ggf. etwas kleiner */
@media (max-width: 1024px) {
    .whm-footer-logo img {
        max-height: 80px;
    }
}

/* Smartphone: untereinander, alle mittig */
@media (max-width: 767px) {
    .whm-footer-logos {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 24px;
    }
    .whm-footer-logo {
        text-align: center !important;
        width: 100%;
    }
    .whm-footer-logo img {
        max-height: 70px;
    }
}

/* =========================================
   Footer-Logos – Fix für große Screens
   ========================================= */
@media (min-width: 1025px) {
    body .whm-footer-logo img {
        height: 70px !important;   /* Größe nach Gefühl anpassen */
        width: auto;
        object-fit: contain;
    }
}

/* =========================================
   WHM – Globale Buttons auf normale Laufweite setzen 
   =========================================*/
.elementor-button,
.elementor-button .elementor-button-text {
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
}


/* =========================================
   WHM – Premium-Button (Anfragen/Kaufen im Weinbereich) 
   =========================================*/
.whm-premium-btn .elementor-button,
.whm-premium-btn.elementor-button,
.whm-premium-btn .elementor-button-text {
    letter-spacing: 0.12em !important;
}


/* =========================================
   Wein-Karten Mobile (1 statt 2 Spalten)
   ========================================= */

/* Premium-Button (Anfragen/Kaufen im Weinbereich) */
.whm-premium-btn .elementor-button,
.whm-premium-btn.elementor-button,
.whm-premium-btn .elementor-button-text {
    letter-spacing: 0.12em !important;
}

/* Wein-Karten: auf kleinen Screens Bild über Text statt 2 Spalten */
@media (max-width: 590px) {
  .whm-wine-card-inner {
    flex-direction: column !important;
  }

  .whm-wine-image {
    flex: 0 0 auto;
    width: 100%;
    max-width: 260px;
    margin: 1.5rem auto 0;
    padding: 0;
  }

  .whm-wine-content {
    padding: 1.5rem 1.5rem 2rem;
  }
}

/* Mobile – oberer Bereich der Wein-Karte wieder weiß + weniger Höhe */
@media (max-width: 480px) {

/* ganze Karte: 1 Spalte + weißer Hintergrund im oberen Bereich */
  .whm-wine-card-inner {
    flex-direction: column !important;
    background-color: #ffffff !important;   /* hinter der Flasche weiß */
  }

  /* Flaschenbild: wenig Abstand nach oben & unten */
  .whm-wine-image {
    flex: 0 0 auto;
    width: 100%;
    max-width: 260px;
    margin-top: 0 !important;
    margin-bottom: 16px !important;
    padding-top: 5px !important;           /* ganz wenig Luft oben */
  }

  /* Textblock unten wieder beige */
  .whm-wine-content {
    background-color: #f3e9dc !important;  /* dein Beigeton */
    padding: 1.5rem 1.5rem 2rem;
  }
}
	

/* =========================================
   Mobile – Titel auf single-aktuelles korrigieren
   ========================================= */
@media (max-width: 600px) {

  .single-aktuelles h1,
  .single-aktuelles .entry-title {
      font-size: 42px !important;     /* nicht zu groß */
      line-height: 1.15em !important;  /* genügend Luft zwischen Zeilen */
      text-align: center !important;   /* zentriert */
      margin-bottom: 20px !important;  /* etwas Abstand nach unten */
      letter-spacing: 0 !important;    /* sicherheitshalber */
      word-spacing: 0 !important;      /* verhindert auseinanderziehen */
  }

  /* Container drumherum etwas atmen lassen */
  .single-aktuelles-header,
  .single-aktuelles .entry-header {
      padding: 20px 16px !important;
  }
}


/* =========================================
   SINGLE AKTUELLES – Mobile Überschrift kleiner
   ========================================= */

/* Tablets hochkant & kleine Devices (max 600px) */
@media (max-width: 600px) {
  .vp-single-event h1.elementor-heading-title {
    font-size: 32px !important;
    line-height: 1.15 !important;
    letter-spacing: 0.03em;
    text-align: center;
  }
}

/* =========================================
   Einzel-„Aktuelles“ – Titel auf Handy kleiner
   ========================================= */
@media (max-width: 480px) {

  /* H1-Titel im Einzelbeitrag */
  .whm-aktuelles-single-title .elementor-heading-title,
  .whm-aktuelles-single-title {
    font-size: 26px !important;
    line-height: 1.1 !important;
  }
}