/**
 * Styling for the two dynamic Hochgefühl blocks only. The page itself is
 * Elementor, so headings, spacing and container widths come from the page.
 *
 * Every value below is taken from the live site rather than invented:
 *   card radius 16px, 1px #D9DEE8 border, padding 32/48/32/32 (24 mobile)
 *   hover shadow 0 48px 96px -16px rgba(0,0,0,.16)
 *   icon / accent  #AF8894      (site icon-list colour)
 *   button hover   #CCB8BE      (site button hover)
 *   ink #1E1810, body #62615C
 * Source: post 726 containers f450476 / 992f688, plus the site button and
 * icon-list widgets.
 *
 * Contrast (WCAG AA):
 *   #1E1810 on #FFFFFF ...... 16.9:1
 *   #62615C on #FFFFFF ......  6.1:1
 *   #1E1810 on #CCB8BE ......  7.5:1   (button hover)
 * #AF8894 is 3.1:1 and is used only for non-text marks, never for copy.
 */

.hgf-block {
    --hgf-ink:    #1E1810;
    --hgf-body:   #62615C;
    --hgf-line:   #D9DEE8;
    /* Forest green from the printed flyer, used as this page's accent. */
    --hgf-accent: #243B29;
    --hgf-hover:  #243B29;
    --hgf-radius: 16px;

    color: var(--hgf-body);
    text-align: left;
}

.hgf-block * { box-sizing: border-box; }

/* ----------------------------------------------------------------------
 * Split-section photos.
 *
 * The image column already stretches to the height of the text column next
 * to it (the section sets flex_align_items: stretch), but Elementor's image
 * widget renders at the file's own aspect ratio, so a 16:9 photo left a tall
 * gap underneath. These rules let the photo fill the column it is given.
 *
 * min-height keeps it from collapsing when the text beside it is short;
 * max-height stops a very long text column from stretching it into a strip.
 * ------------------------------------------------------------------- */
.hgf-media,
.hgf-media > .e-con-inner,
.hgf-media .elementor-widget-image,
.hgf-media .elementor-widget-image > .elementor-widget-container,
.hgf-media .elementor-image,
.hgf-media figure,
.hgf-media figure > a {
    height: 100%;
    display: block;
}

.hgf-media .elementor-widget-image { display: flex; }
.hgf-media .elementor-widget-image > .elementor-widget-container { width: 100%; }

.hgf-media img {
    width: 100%;
    height: 100%;
    min-height: 360px;
    max-height: 820px;
    object-fit: cover;
    object-position: center;
}

/* Stacked from tablet down: the column no longer has a text block beside it to
 * match, so fill-height would turn the photo into a full-width band. Go back to
 * a natural crop instead, a little wider on tablet than on a phone. */
@media (max-width: 1024px) {
    .hgf-media,
    .hgf-media > .e-con-inner,
    .hgf-media .elementor-widget-image,
    .hgf-media .elementor-widget-image > .elementor-widget-container,
    .hgf-media .elementor-image,
    .hgf-media figure,
    .hgf-media figure > a { height: auto; }

    .hgf-media img {
        height: auto;
        min-height: 0;
        max-height: none;
        aspect-ratio: 3 / 2;
    }
}

@media (max-width: 767px) {
    .hgf-media img { aspect-ratio: 4 / 3; }
}

/* ----------------------------------------------------------------------
 * Bullet list inside an Elementor text-editor.
 *
 * Browsers give <ul> a 40px default padding-left, which pushed the markers
 * well right of the heading above them. Trimming it to 1.15em puts the marker
 * at the container edge, level with the heading, while wrapped lines still
 * hang-indent under the text rather than under the bullet.
 * ------------------------------------------------------------------- */
.hgf-list ul {
    padding-left: 1.15em;
    margin-left: 0;
    list-style-position: outside;
}
.hgf-list ul li { padding-left: .15em; }
.hgf-list ul li::marker { color: var(--hgf-accent, #243B29); }

/* The "Hochgefühl ist das Richtige für dich, wenn du …" list sits under a
 * centred heading in a full-width shell rather than beside an image, so the
 * list is centred as a block while the items themselves stay left-aligned —
 * centred list text with bullets is unreadable once a line wraps. */
.hgf-list--centered ul {
    display: inline-block;
    text-align: left;
    max-width: 46em;
}
.hgf-list--centered { text-align: center; }

/* ----------------------------------------------------------------------
 * Statement cards ("Kennst du das …?").
 *
 * These reuse the card container from the facts row, but carry prose instead
 * of an icon-box. The icon-box set its own 15px description size; a plain
 * text-editor would otherwise inherit full body size and make the three cards
 * noticeably heavier than the row above them.
 * ------------------------------------------------------------------- */
.hgf-statement p {
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 1024px) {
    /* The row wraps to one card per line on tablet; prose at 15px in a
     * full-width card reads too small once it is no longer in a 33% column. */
    .hgf-statement p { font-size: 16px; }
}

/* Dates ---------------------------------------------------------------- */
.hgf-dates {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 16px;
}

.hgf-date {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 24px;
    background: #fff;
    border: 1px solid var(--hgf-line);
    border-radius: var(--hgf-radius);
    padding: 32px;
    transition: box-shadow .3s ease;
}
.hgf-date:hover { box-shadow: 0 48px 96px -16px rgba(0, 0, 0, .16); }
.hgf-date.is-sold_out { opacity: .65; }
.hgf-date.is-sold_out:hover { box-shadow: none; }

.hgf-date__value {
    flex: 1 1 auto;
    font-size: 22px;
    line-height: 1.4;
    color: var(--hgf-ink);
}

.hgf-date__status {
    flex: 0 0 auto;
    font-size: 15px;
    color: var(--hgf-body);
}
.hgf-date__status::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--hgf-accent);
    margin-right: 10px;
    vertical-align: middle;
}
.hgf-date.is-sold_out .hgf-date__status::before { background: var(--hgf-line); }

.hgf-date__closed {
    flex: 0 0 auto;
    font-size: 15px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--hgf-body);
}

.hgf-note {
    margin: 24px 0 0;
    font-size: 15px;
    color: var(--hgf-body);
}
.hgf-cta { margin: 24px 0 0; }

/* Operator's participation terms (PDF) ---------------------------------
 * A footnote, not a call to action: it must not compete with "Platz
 * sichern" one line above it. Underlined rather than coloured, because the
 * accent green on white is reserved for the buttons on this page.
 */
.hgf-terms {
    margin: 8px 0 0;
    font-size: 15px;
    color: var(--hgf-body);
}

.hgf-terms__link,
.hgf-faq__a .hgf-terms__link {
    color: var(--hgf-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hgf-terms__link:hover,
.hgf-terms__link:focus-visible {
    color: var(--hgf-accent);
}

.hgf-faq__a .hgf-terms__link { font-size: 16px; }
.hgf-faq__a p + p { margin-top: 12px; }

/* Button: the site's outlined style ------------------------------------ */
.hgf-btn {
    flex: 0 0 auto;
    display: inline-block;
    font-size: 15px;
    letter-spacing: 2px;
    text-transform: uppercase;
    line-height: 1.2;
    padding: 14px 24px;
    background: transparent;
    color: var(--hgf-ink);
    border: 1px solid var(--hgf-ink);
    border-radius: 4px;
    text-decoration: none;
    transition: background-color .3s ease, border-color .3s ease;
}
.hgf-btn:hover,
.hgf-btn:focus-visible {
    background: var(--hgf-hover);
    border-color: var(--hgf-hover);
    color: #fff;               /* white on #243B29 is 12.1:1 */
    text-decoration: none;
}
.hgf-btn:focus-visible { outline: 3px solid var(--hgf-accent); outline-offset: 3px; }

/* FAQ ------------------------------------------------------------------ */
.hgf-faq { border-top: 1px solid var(--hgf-line); }
.hgf-faq__item { border-bottom: 1px solid var(--hgf-line); }

.hgf-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 0;
    cursor: pointer;
    list-style: none;
    font-size: 20px;
    line-height: 1.4;
    color: var(--hgf-ink);
}
.hgf-faq__q::-webkit-details-marker { display: none; }
.hgf-faq__q:focus-visible { outline: 3px solid var(--hgf-accent); outline-offset: 2px; }

/* Plus / minus mark.
 *
 * Both bars are drawn as background gradients on a single pseudo-element so
 * they overlap into one glyph. Drawing them as two pseudo-elements made them
 * separate flex children, which is why the vertical bar drifted to the far
 * right of the row. Open state simply drops the vertical bar. */
.hgf-faq__q::after {
    content: "";
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: var(--hgf-accent);
    background:
        linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
        linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
    transition: background-size .25s ease;
}
.hgf-faq__item[open] .hgf-faq__q::after {
    background:
        linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
        linear-gradient(currentColor, currentColor) center / 2px 0 no-repeat;
}

.hgf-faq__a { padding: 0 0 24px; }
.hgf-faq__a p { margin: 0; font-size: 16px; color: var(--hgf-body); }

@media (max-width: 767px) {
    .hgf-date { padding: 24px; gap: 12px; }
    .hgf-date__value { flex: 1 1 100%; font-size: 20px; }
    .hgf-btn { width: 100%; text-align: center; }
    .hgf-faq__q { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .hgf-block *, .hgf-block *::before, .hgf-block *::after {
        transition-duration: .01ms !important;
    }
}

/* ======================================================================
 * Overrides for Pflugtopia Seminars
 *
 * These target the seminars plugin's own markup rather than this plugin's.
 * They live here, not in seminars.css, so the plugin that processes live
 * bookings is never modified: deactivating this plugin removes every override
 * cleanly. This stylesheet declares `pflugtopia-seminars` as a dependency, so
 * it always loads after and wins on source order without needing !important.
 * ==================================================================== */

/* ----------------------------------------------------------------------
 * Booking form, small screens.
 *
 * The form sits inside a container card, inside a padded wrapper. On a phone
 * their paddings stacked to 60px a side (16 + 20 + 24), leaving 270px of
 * usable width on a 390px screen. The form does not need a second card once
 * it is already inside one. Mobile only; tablet and desktop untouched.
 * ------------------------------------------------------------------- */
@media (max-width: 600px) {
    .pflugtopia-booking-form-wrapper {
        padding: 40px 12px;
    }

    .pflugtopia-booking-form-container {
        padding: 24px 16px;
        border-radius: 16px;
    }

    .pflugtopia-booking-form-container .pflugtopia-booking-form {
        padding: 0;
        background: transparent;
        box-shadow: none;
        border-radius: 0;
    }
}

/* ----------------------------------------------------------------------
 * Booking summary strip, phone and tablet.
 *
 * The strip is flex-nowrap with four items, which squeezed each to about 82px
 * on a 390px screen and still left the venue address on four-plus lines at
 * tablet width. Wrap it two by two instead, for the whole range the base
 * stylesheet treats as small (it drops padding and font size at <= 768px).
 * ------------------------------------------------------------------- */
@media (max-width: 768px) {
    .pflugtopia-summary-details {
        flex-wrap: wrap;
    }

    .pflugtopia-summary-details .pflugtopia-detail-item {
        flex: 1 1 50%;
        max-width: 50%;
        padding: 20px 12px;
    }

    .pflugtopia-summary-details .pflugtopia-detail-item:nth-child(2n)::after {
        display: none;
    }

    .pflugtopia-summary-details .pflugtopia-detail-item:nth-child(n+3) {
        border-top: 1px solid rgba(0, 0, 0, .08);
    }
}

/* ----------------------------------------------------------------------
 * Booking summary strip, tablet and up.
 *
 * The strip is capped at 600px and gives all four items an equal share
 * (`flex: 1 1 0`), so each gets ~110px of text width no matter how much text it
 * holds. A one-line value like "220 €" wasted its column while the venue
 * address wrapped onto five lines and stretched the whole card.
 *
 * Widening the cap and switching the items to content-based sizing lets each
 * column take the width its own value needs. No item is singled out by
 * position, so this keeps working whichever of duration / dates / location /
 * price a given seminar happens to fill in.
 *
 * Desktop only. The rule above still owns everything up to 768px, where the
 * strip wraps two by two and the base stylesheet shrinks type and padding.
 * ------------------------------------------------------------------- */
@media (min-width: 769px) {
    .pflugtopia-summary-details {
        max-width: 980px;
    }

    .pflugtopia-detail-item {
        flex: 0 1 auto;
        min-width: 132px;
        padding: 28px 22px;
    }

    /* Should a longer value than the current venue address ever have to wrap,
     * balance the lines instead of leaving one orphaned word on the last. */
    .pflugtopia-detail-value {
        text-wrap: balance;
    }
}