/* Clone-only polish on top of the bundled original CSS.
   Header (burger + .mobileNav) and footer (.mainFooter marquee) use the
   original theme CSS as-is; this only tidies the content area. */
:root {
    --ek-primary: #8DC977;
    --ek-accent: #004258;
}

/* Content area: readable width + page title styling for cloned pages. */
.main { max-width: 1200px; margin: 0 auto; }
.contentSection { padding: 2.5em 6vw 4em; }
.pageTitle {
    color: var(--ek-accent);
    font-size: 2.2em;
    font-weight: bold;
    margin: 0 0 .6em;
}
.mainContent { color: var(--ek-accent); }
.mainContent img { max-width: 100%; height: auto; }
.mainContent a { color: var(--ek-accent); }
.wp-block-image { margin: 1.5em 0; }


/* ============================================================
   Front-page grid tiles — brand polish
   Overrides the base .gridNav rules in nav.css (which loads
   earlier). Keeps the green base + petrol accent; adds rounded
   corners, a hover lift, a gradient reveal (same green->petrol
   as the badge and footer) and an arrow cue. Markup is unchanged
   (.gridNav li > a > .title + .note, see ek_render_nav_items()).
   ============================================================ */
.gridNav li {
    position: relative;
    background: var(--ek-primary);
    color: var(--ek-accent);
    border-radius: 8px;            /* set to 0 to keep sharp squares */
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 66, 88, .10);
    transition: transform .35s ease, box-shadow .35s ease;
}

/* Gradient layer that fades in on hover, sits behind the text. */
.gridNav li::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgb(116, 157, 101) 0%, var(--ek-accent) 100%);
    opacity: 0;
    transition: opacity .35s ease;
}

/* Keep the link (and its text) above the gradient layer. */
.gridNav li a {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    color: inherit;
    transition: color .35s ease;
}

/* Arrow cue, bottom-right, follows the current text colour. */
.gridNav li a::after {
    content: "";
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    width: .65rem;
    height: .65rem;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: .55;
    transition: transform .35s ease, opacity .35s ease;
}

/* Hover + keyboard-focus state. */
.gridNav li:hover,
.gridNav li:focus-within {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(0, 66, 88, .22);
}

.gridNav li:hover::before,
.gridNav li:focus-within::before {
    opacity: 1;
}

.gridNav li:hover a,
.gridNav li:focus-within a {
    color: #fff;
}

.gridNav li:hover a::after,
.gridNav li:focus-within a::after {
    opacity: 1;
    transform: rotate(45deg) translate(3px, -3px);
}


/* ============================================================
   "Add to calendar" badge menu (.overlaySticker.ek-atc)
   The badge stays the trigger; clicking it reveals a small menu
   of calendar services. Without JS it still opens on hover/focus.
   ============================================================ */
.ek-atc__toggle {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.ek-atc__toggle .sticker-image { display: block; width: 100%; height: auto; }

.ek-atc__menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin: .5rem 0 0;
    padding: .4rem;
    min-width: 230px;
    list-style: none;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0, 66, 88, .25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    z-index: 60;
}
.ek-atc.open .ek-atc__menu,
.ek-atc:hover .ek-atc__menu,
.ek-atc:focus-within .ek-atc__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.ek-atc__head {
    padding: .5rem .75rem;
    margin-bottom: .25rem;
    font-weight: bold;
    color: var(--ek-accent);
    border-bottom: 1px solid rgba(0, 66, 88, .12);
}
.ek-atc__menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .6rem .75rem;
    border-radius: 6px;
    color: var(--ek-accent);
    text-decoration: none;
    font-size: .95rem;
}
.ek-atc__menu a:hover,
.ek-atc__menu a:focus { background: var(--ek-primary); }

/* OS-recommended option: promoted to the top + highlighted with a badge. */
.ek-atc__rec a { font-weight: bold; }
.ek-atc__badge {
    flex: none;
    padding: .12rem .5rem;
    border-radius: 999px;
    background: var(--ek-accent);
    color: #fff;
    font-size: .7rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .02em;
}


/* ============================================================
   Impressionen — modern responsive gallery grid
   ============================================================ */
/* The gallery page breaks out of the 1200px content width to go full-bleed. */
.ek-impressionen .main { max-width: none; }
.ek-impressionen .contentSection { padding: 1.5em 2vw 3em; }
.ek-impressionen .mainContent {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 8px;
    align-items: start;
}
/* Headings / intro text span the full width above the photos. */
.ek-impressionen .mainContent > :not(figure.wp-block-image) {
    grid-column: 1 / -1;
}
.ek-impressionen .mainContent figure.wp-block-image {
    margin: 0;
    overflow: hidden;
    border-radius: 8px;
    aspect-ratio: 3 / 2;
    box-shadow: 0 2px 8px rgba(0, 66, 88, .12);
}
.ek-impressionen .mainContent figure.wp-block-image a { display: block; height: 100%; }
.ek-impressionen .mainContent figure.wp-block-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.ek-impressionen .mainContent figure.wp-block-image:hover img { transform: scale(1.06); }

/* Hide the calendar "Störer" badge the crawl embedded into page content (an
   .svg linking to the .ics). It's site chrome — already in the header widget. */
.mainContent figure.wp-block-image:has(a[href$=".ics"]),
.mainContent figure.wp-block-image:has(img[src$=".svg"]) {
    display: none;
}


/* ============================================================
   Lightbox (injected by nav.js for the gallery)
   ============================================================ */
.ek-lightbox {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 66, 88, .93);
    z-index: 1000;
}
.ek-lightbox.open { display: flex; }
.ek-lightbox__img {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    object-fit: contain;
}
.ek-lightbox__close,
.ek-lightbox__nav {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s ease;
}
.ek-lightbox__close:hover,
.ek-lightbox__nav:hover { background: rgba(255, 255, 255, .3); }
.ek-lightbox__close { top: 20px; right: 20px; }
.ek-lightbox__prev { left: 20px; top: 50%; transform: translateY(-50%); }
.ek-lightbox__next { right: 20px; top: 50%; transform: translateY(-50%); }
@media (max-width: 600px) {
    .ek-lightbox__nav { width: 40px; height: 40px; }
    .ek-lightbox__prev { left: 8px; }
    .ek-lightbox__next { right: 8px; }
}


/* ============================================================
   Responsive YouTube embed (Aftermovie)
   ============================================================ */
.ek-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 0 0 1.5em;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 66, 88, .18);
}
.ek-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}