:root {
    --gate-primary: #2f6f3e;
    --gate-accent: #96b852;
    --gate-dark: #102015;
    --gate-muted: #f3f6ef;
    --gate-white: #ffffff;
    --gate-text: #27312a;
    --gate-border: rgba(16, 32, 21, 0.14);
    --gate-shadow: 0 18px 48px rgba(16, 32, 21, 0.12);
    --gate-radius: 22px;
    --gate-radius-small: 14px;
    --gate-max: 1180px;
    --gate-narrow: 780px;
    --gate-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--gate-text);
    background: var(--gate-white);
    font-family: var(--gate-font);
    font-size: 18px;
    line-height: 1.65;
}

img,
svg,
video {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--gate-primary);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
}

a:hover,
a:focus {
    color: var(--gate-dark);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--gate-dark);
    line-height: 1.15;
    margin: 0 0 0.7em;
}

h1 {
    font-size: clamp(2.35rem, 6vw, 4.8rem);
    letter-spacing: -0.055em;
}

h2 {
    font-size: clamp(1.85rem, 4vw, 3rem);
    letter-spacing: -0.035em;
}

h3 {
    font-size: clamp(1.25rem, 2vw, 1.55rem);
}

p {
    margin: 0 0 1.2em;
}

.gate-container {
    width: min(var(--gate-max), calc(100% - 40px));
    margin-inline: auto;
}

.narrow-content {
    max-width: var(--gate-narrow);
    margin-inline: auto;
}

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background: var(--gate-white);
    border-radius: 6px;
    box-shadow: var(--gate-shadow);
    clip: auto !important;
    clip-path: none;
    color: var(--gate-dark);
    display: block;
    font-weight: 700;
    height: auto;
    left: 16px;
    padding: 12px 16px;
    top: 16px;
    width: auto;
    z-index: 100000;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--gate-border);
}

.site-header__inner {
    min-height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.site-branding__link {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--gate-dark);
    text-decoration: none;
}

.site-branding__logo {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.site-branding__logo img,
.custom-logo {
    display: block;
    max-height: 58px;
    max-width: 120px;
    width: auto;
    object-fit: contain;
}

.site-branding__mark {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--gate-primary), var(--gate-accent));
    color: var(--gate-white);
    font-weight: 800;
    letter-spacing: -0.08em;
}

.site-branding__text {
    display: grid;
    min-width: 0;
    line-height: 1.2;
}

.site-branding__title {
    font-weight: 800;
    letter-spacing: -0.03em;
}

.site-branding__description {
    color: rgba(39, 49, 42, 0.68);
    font-size: 0.88rem;
}

.main-navigation {
    display: flex;
    align-items: center;
}

.main-navigation__menu {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
}

.main-navigation__menu a {
    display: block;
    color: var(--gate-dark);
    font-size: 0.96rem;
    font-weight: 650;
    padding: 10px 13px;
    border-radius: 999px;
    text-decoration: none;
}

.main-navigation__menu a:hover,
.main-navigation__menu a:focus,
.main-navigation__menu .current-menu-item > a {
    background: var(--gate-muted);
    color: var(--gate-primary);
}

.main-navigation__toggle {
    display: none;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--gate-border);
    border-radius: 999px;
    background: var(--gate-white);
    color: var(--gate-dark);
    padding: 10px 14px;
    font-weight: 700;
}

.main-navigation__toggle-icon,
.main-navigation__toggle-icon::before,
.main-navigation__toggle-icon::after {
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
}

.main-navigation__toggle-icon {
    position: relative;
}

.main-navigation__toggle-icon::before,
.main-navigation__toggle-icon::after {
    content: "";
    position: absolute;
    left: 0;
}

.main-navigation__toggle-icon::before {
    top: -6px;
}

.main-navigation__toggle-icon::after {
    top: 6px;
}

.hero-section {
    padding: clamp(70px, 10vw, 130px) 0;
    background:
        radial-gradient(circle at 10% 20%, rgba(150, 184, 82, 0.20), transparent 36%),
        linear-gradient(135deg, var(--gate-muted), #ffffff 68%);
}

.hero-section__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
    align-items: center;
    gap: clamp(32px, 6vw, 80px);
}

.lead {
    color: rgba(39, 49, 42, 0.80);
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    max-width: 720px;
}

.eyebrow {
    color: var(--gate-primary);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    margin-bottom: 0.9em;
    text-transform: uppercase;
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.gate-button,
.wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--gate-primary);
    color: var(--gate-white) !important;
    font-weight: 750;
    padding: 0.8em 1.25em;
    text-decoration: none;
    box-shadow: 0 12px 28px rgba(47, 111, 62, 0.22);
}

.gate-button:hover,
.gate-button:focus,
.wp-block-button__link:hover,
.wp-block-button__link:focus {
    background: var(--gate-dark);
    color: var(--gate-white) !important;
}

.gate-button--secondary,
.is-style-gate-outline .wp-block-button__link {
    background: transparent;
    border: 1px solid var(--gate-border);
    color: var(--gate-dark) !important;
    box-shadow: none;
}

.hero-card,
.info-card,
.post-card,
.is-style-gate-card {
    background: var(--gate-white);
    border: 1px solid var(--gate-border);
    border-radius: var(--gate-radius);
    box-shadow: var(--gate-shadow);
}

.hero-card {
    padding: clamp(28px, 4vw, 40px);
}

.hero-card__label {
    display: inline-flex;
    border-radius: 999px;
    background: var(--gate-muted);
    color: var(--gate-primary);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 6px 11px;
    text-transform: uppercase;
}

.gate-section {
    padding: clamp(58px, 8vw, 96px) 0;
}

.gate-section--muted {
    background: var(--gate-muted);
}

.section-heading {
    max-width: 800px;
    margin-bottom: 34px;
}

.card-grid,
.post-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.info-card,
.is-style-gate-card {
    padding: clamp(24px, 4vw, 34px);
}

.is-style-gate-highlight {
    background: linear-gradient(135deg, var(--gate-primary), var(--gate-dark));
    color: var(--gate-white);
    border-radius: var(--gate-radius);
    padding: clamp(28px, 4vw, 42px);
}

.is-style-gate-highlight h1,
.is-style-gate-highlight h2,
.is-style-gate-highlight h3,
.is-style-gate-highlight p,
.is-style-gate-highlight a {
    color: var(--gate-white);
}

.is-style-gate-checklist {
    list-style: none;
    padding-left: 0;
}

.is-style-gate-checklist li {
    position: relative;
    padding-left: 1.8em;
    margin-bottom: 0.6em;
}

.is-style-gate-checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.56em;
    width: 0.72em;
    height: 0.72em;
    border-radius: 999px;
    background: var(--gate-accent);
}

.page-hero {
    padding-top: clamp(56px, 8vw, 96px);
    padding-bottom: clamp(24px, 5vw, 48px);
}

.entry-content {
    padding-bottom: clamp(60px, 8vw, 96px);
}

.entry-content > * {
    max-width: var(--gate-narrow);
    margin-left: auto;
    margin-right: auto;
}

.entry-content > .alignwide {
    max-width: var(--gate-max);
}

.entry-content > .alignfull {
    max-width: none;
    width: 100%;
}

.entry-content .wp-block-columns,
.entry-content .wp-block-group.alignwide,
.entry-content .wp-block-query.alignwide {
    max-width: var(--gate-max);
}

.featured-media img {
    width: 100%;
    border-radius: var(--gate-radius);
    box-shadow: var(--gate-shadow);
}

.post-card {
    overflow: hidden;
}

.post-card__media img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
}

.post-card__body {
    padding: 24px;
}

.post-card__meta {
    color: rgba(39, 49, 42, 0.62);
    font-size: 0.86rem;
    margin-bottom: 10px;
}

.post-card__title {
    font-size: 1.25rem;
    margin-bottom: 0.5em;
}

.post-card__title a {
    color: var(--gate-dark);
    text-decoration: none;
}

.read-more {
    font-weight: 800;
    text-decoration: none;
}

.site-footer {
    background: var(--gate-dark);
    color: rgba(255, 255, 255, 0.78);
    padding: 48px 0;
}

.site-footer a,
.site-footer strong {
    color: var(--gate-white);
}

.site-footer__inner {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) auto;
    gap: 28px;
    align-items: start;
}

.site-footer__brand {
    display: grid;
    gap: 6px;
}

.site-footer__menu {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer__menu a {
    text-decoration: none;
}

.site-footer__meta {
    grid-column: 1 / -1;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    margin: 8px 0 0;
    padding-top: 22px;
    font-size: 0.88rem;
}

.wp-block-table table {
    border-collapse: collapse;
    width: 100%;
}

.wp-block-table th,
.wp-block-table td {
    border: 1px solid var(--gate-border);
    padding: 12px 14px;
}

.wp-block-table th {
    background: var(--gate-muted);
    color: var(--gate-dark);
    text-align: left;
}

@media (max-width: 980px) {
    .hero-section__grid,
    .card-grid,
    .post-grid,
    .site-footer__inner {
        grid-template-columns: 1fr;
    }

    .main-navigation__toggle {
        display: inline-flex;
    }

    .main-navigation__menu {
        position: absolute;
        inset: 82px 20px auto 20px;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--gate-white);
        border: 1px solid var(--gate-border);
        border-radius: var(--gate-radius-small);
        box-shadow: var(--gate-shadow);
        padding: 10px;
    }

    .main-navigation.is-open .main-navigation__menu {
        display: flex;
    }

    .main-navigation__menu a {
        border-radius: 10px;
    }
}

@media (max-width: 620px) {
    body {
        font-size: 16px;
    }

    .gate-container {
        width: min(var(--gate-max), calc(100% - 28px));
    }

    .site-header__inner {
        min-height: 74px;
    }

    .site-branding__description {
        display: none;
    }
}


/* v0.3.0 layout refinement -------------------------------------------------
   The first staging test showed that WordPress core layout classes can shrink
   block patterns unexpectedly in classic themes. These stronger rules make the
   homepage sections robust: centered, wide, and aligned consistently. */

.gate-frontpage .entry-content {
    padding-bottom: 0;
}

.gate-frontpage .entry-content > * + * {
    margin-block-start: 0;
}

.gate-frontpage .entry-content > .alignfull,
.entry-content > .wp-block-group.alignfull.hero-section {
    max-width: none;
    width: 100%;
}

.entry-content > .wp-block-group.alignwide,
.entry-content > .wp-block-columns.alignwide,
.entry-content > .wp-block-query.alignwide,
.entry-content .wp-block-group.alignwide,
.entry-content .wp-block-columns.alignwide,
.entry-content .wp-block-query.alignwide {
    max-width: var(--gate-max);
    width: min(var(--gate-max), calc(100% - 40px));
    margin-left: auto;
    margin-right: auto;
}

.entry-content .hero-section {
    min-height: clamp(520px, 58vh, 720px);
    display: flex;
    align-items: center;
}

.entry-content .hero-section > .hero-section__grid,
.entry-content .hero-section .hero-section__grid,
.hero-section .hero-section__grid {
    width: min(var(--gate-max), calc(100% - 40px)) !important;
    max-width: var(--gate-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.72fr) !important;
    align-items: center;
    gap: clamp(42px, 7vw, 96px);
}

.hero-section .wp-block-column {
    min-width: 0;
}

.hero-section h1 {
    max-width: 720px;
}

.hero-section .lead {
    max-width: 660px;
}

.hero-card {
    max-width: 460px;
    justify-self: end;
}

.entry-content .card-grid,
.entry-content .post-grid {
    width: min(var(--gate-max), calc(100% - 40px)) !important;
    max-width: var(--gate-max) !important;
    margin: clamp(70px, 8vw, 110px) auto !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(20px, 3vw, 28px) !important;
    align-items: stretch;
}

.entry-content .card-grid > *,
.entry-content .post-grid > * {
    min-width: 0;
}

.entry-content .card-grid .info-card {
    height: 100%;
    box-shadow: 0 14px 36px rgba(16, 32, 21, 0.09);
}

.entry-content .is-style-gate-highlight.alignwide,
.entry-content > .is-style-gate-highlight.alignwide,
.entry-content .wp-block-group.is-style-gate-highlight {
    width: min(var(--gate-max), calc(100% - 40px)) !important;
    max-width: var(--gate-max) !important;
    margin: clamp(36px, 6vw, 70px) auto clamp(70px, 8vw, 110px) !important;
    padding: clamp(36px, 5vw, 64px);
}

.entry-content .is-style-gate-highlight .wp-block-columns {
    display: flex;
    align-items: center;
    gap: 32px;
}

.entry-content .is-style-gate-highlight .wp-block-button__link {
    background: var(--gate-white);
    color: var(--gate-primary) !important;
    box-shadow: none;
}

.entry-content .is-style-gate-highlight .wp-block-button__link:hover,
.entry-content .is-style-gate-highlight .wp-block-button__link:focus {
    background: rgba(255, 255, 255, 0.88);
    color: var(--gate-dark) !important;
}

.site-header__inner {
    width: min(var(--gate-max), calc(100% - 40px));
}

.site-footer__inner {
    width: min(var(--gate-max), calc(100% - 40px));
}

@media (max-width: 980px) {
    .entry-content .hero-section > .hero-section__grid,
    .entry-content .hero-section .hero-section__grid,
    .hero-section .hero-section__grid,
    .entry-content .card-grid,
    .entry-content .post-grid {
        grid-template-columns: 1fr !important;
    }

    .hero-card {
        max-width: none;
        justify-self: stretch;
    }

    .entry-content .is-style-gate-highlight .wp-block-columns {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 620px) {
    .entry-content > .wp-block-group.alignwide,
    .entry-content > .wp-block-columns.alignwide,
    .entry-content > .wp-block-query.alignwide,
    .entry-content .wp-block-group.alignwide,
    .entry-content .wp-block-columns.alignwide,
    .entry-content .wp-block-query.alignwide,
    .entry-content .hero-section > .hero-section__grid,
    .entry-content .hero-section .hero-section__grid,
    .hero-section .hero-section__grid,
    .entry-content .card-grid,
    .entry-content .post-grid,
    .entry-content .is-style-gate-highlight.alignwide,
    .entry-content > .is-style-gate-highlight.alignwide,
    .entry-content .wp-block-group.is-style-gate-highlight {
        width: min(var(--gate-max), calc(100% - 28px)) !important;
    }
}

/* v0.4.0 compact desktop scale --------------------------------------------
   Feedback from the first real staging view showed that the layout felt like
   a browser zoom of 125-150% on 1920x1200 and 2560x1440 displays. The design
   below keeps the same visual direction but reduces type, header, hero height,
   card spacing, and CTA dimensions so the site is comfortable at 100% zoom. */
:root {
    --gate-max: 1080px;
    --gate-narrow: 720px;
    --gate-radius: 18px;
    --gate-radius-small: 12px;
    --gate-shadow: 0 12px 34px rgba(16, 32, 21, 0.10);
}

body {
    font-size: 16px;
    line-height: 1.58;
}

h1 {
    font-size: clamp(2.45rem, 4.2vw, 3.55rem);
    line-height: 1.04;
    letter-spacing: -0.05em;
}

h2 {
    font-size: clamp(1.65rem, 2.6vw, 2.35rem);
    line-height: 1.12;
    letter-spacing: -0.035em;
}

h3 {
    font-size: clamp(1.08rem, 1.55vw, 1.28rem);
}

.site-header__inner {
    min-height: 68px;
    gap: 26px;
}

.site-branding__link {
    gap: 11px;
}

.site-branding__mark {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    font-size: 0.98rem;
}

.site-branding__title {
    font-size: 0.96rem;
}

.site-branding__description {
    font-size: 0.78rem;
}

.site-branding__logo img,
.custom-logo {
    max-height: 46px;
    max-width: 106px;
}

.main-navigation__menu a {
    font-size: 0.88rem;
    padding: 8px 12px;
}

.hero-section {
    padding: clamp(46px, 5.2vw, 78px) 0;
}

.entry-content .hero-section {
    min-height: auto;
}

.entry-content .hero-section > .hero-section__grid,
.entry-content .hero-section .hero-section__grid,
.hero-section .hero-section__grid {
    width: min(var(--gate-max), calc(100% - 48px)) !important;
    max-width: var(--gate-max) !important;
    grid-template-columns: minmax(0, 1.02fr) minmax(280px, 0.78fr) !important;
    gap: clamp(34px, 5vw, 70px) !important;
}

.eyebrow {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    margin-bottom: 0.8em;
}

.lead,
.hero-section .lead {
    font-size: clamp(1rem, 1.35vw, 1.15rem);
    line-height: 1.62;
    max-width: 580px;
}

.button-row {
    gap: 10px;
    margin-top: 22px;
}

.gate-button,
.wp-block-button__link {
    font-size: 0.88rem;
    padding: 0.68em 1.05em;
    box-shadow: 0 8px 20px rgba(47, 111, 62, 0.18);
}

.hero-card {
    max-width: 390px;
    padding: clamp(22px, 3vw, 30px);
}

.hero-card__label {
    font-size: 0.68rem;
    padding: 5px 9px;
}

.hero-card p:last-child,
.info-card p:last-child,
.is-style-gate-highlight p:last-child {
    margin-bottom: 0;
}

.gate-section {
    padding: clamp(42px, 5.5vw, 70px) 0;
}

.entry-content .card-grid,
.entry-content .post-grid {
    width: min(var(--gate-max), calc(100% - 48px)) !important;
    max-width: var(--gate-max) !important;
    margin: clamp(42px, 5vw, 64px) auto !important;
    gap: clamp(16px, 2vw, 22px) !important;
}

.info-card,
.is-style-gate-card {
    padding: clamp(20px, 2.4vw, 26px);
}

.info-card h3,
.is-style-gate-card h3 {
    margin-bottom: 0.45em;
}

.info-card p,
.is-style-gate-card p {
    font-size: 0.92rem;
    line-height: 1.55;
}

.entry-content .is-style-gate-highlight.alignwide,
.entry-content > .is-style-gate-highlight.alignwide,
.entry-content .wp-block-group.is-style-gate-highlight {
    width: min(var(--gate-max), calc(100% - 48px)) !important;
    max-width: var(--gate-max) !important;
    margin: clamp(24px, 3.5vw, 42px) auto clamp(44px, 5.5vw, 72px) !important;
    padding: clamp(26px, 3.4vw, 42px);
}

.entry-content .is-style-gate-highlight .wp-block-columns {
    gap: 24px;
}

.entry-content .is-style-gate-highlight .eyebrow {
    margin-bottom: 0.65em;
}

.entry-content .is-style-gate-highlight h2 {
    max-width: 680px;
    margin-bottom: 0;
}

.site-footer {
    padding: 34px 0;
    font-size: 0.9rem;
}

.site-footer__inner {
    gap: 22px;
}

.site-footer__meta {
    padding-top: 16px;
    font-size: 0.82rem;
}

@media (min-width: 1180px) {
    .hero-section {
        padding-top: 64px;
        padding-bottom: 70px;
    }

    .entry-content .card-grid,
    .entry-content .post-grid {
        margin-top: 52px !important;
        margin-bottom: 54px !important;
    }
}

@media (max-width: 980px) {
    h1 {
        font-size: clamp(2.25rem, 7vw, 3.2rem);
    }

    .entry-content .hero-section > .hero-section__grid,
    .entry-content .hero-section .hero-section__grid,
    .hero-section .hero-section__grid {
        grid-template-columns: 1fr !important;
    }

    .hero-section {
        padding: 44px 0 54px;
    }

    .hero-card {
        max-width: none;
    }
}

@media (max-width: 620px) {
    h1 {
        font-size: clamp(2rem, 12vw, 2.75rem);
    }

    .site-header__inner {
        min-height: 64px;
    }

    .site-branding__mark {
        width: 40px;
        height: 40px;
    }

    .entry-content .hero-section > .hero-section__grid,
    .entry-content .hero-section .hero-section__grid,
    .hero-section .hero-section__grid,
    .entry-content .card-grid,
    .entry-content .post-grid,
    .entry-content .is-style-gate-highlight.alignwide,
    .entry-content > .is-style-gate-highlight.alignwide,
    .entry-content .wp-block-group.is-style-gate-highlight {
        width: min(var(--gate-max), calc(100% - 28px)) !important;
    }
}

/* v0.5.0 laptop-first scale -----------------------------------------------
   Target: make the staging page comfortable at 100% browser zoom on common
   laptop viewports such as 1366x768, 1440x900 and effective 1536x864.
   Large monitors remain centered and calm, but they are no longer the design
   baseline. */
:root {
    --gate-max: 1040px;
    --gate-narrow: 680px;
    --gate-radius: 16px;
    --gate-radius-small: 11px;
    --gate-shadow: 0 10px 28px rgba(16, 32, 21, 0.09);
}

body {
    font-size: 15.5px;
    line-height: 1.54;
}

h1 {
    font-size: clamp(2.15rem, 3.05vw, 3rem);
    line-height: 1.03;
    letter-spacing: -0.048em;
}

h2 {
    font-size: clamp(1.45rem, 2.1vw, 2rem);
    line-height: 1.1;
}

h3 {
    font-size: clamp(1rem, 1.25vw, 1.15rem);
}

.site-header__inner {
    min-height: 58px;
    gap: 22px;
}

.site-branding__link {
    gap: 10px;
}

.site-branding__mark {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    font-size: 0.86rem;
}

.site-branding__title {
    font-size: 0.88rem;
}

.site-branding__description {
    font-size: 0.72rem;
}

.site-branding__logo img,
.custom-logo {
    max-height: 40px;
    max-width: 96px;
}

.main-navigation__menu a {
    font-size: 0.82rem;
    padding: 7px 10px;
}

.hero-section {
    padding: clamp(34px, 4.4vw, 58px) 0 clamp(38px, 4.8vw, 62px);
}

.entry-content .hero-section > .hero-section__grid,
.entry-content .hero-section .hero-section__grid,
.hero-section .hero-section__grid {
    width: min(var(--gate-max), calc(100% - 48px)) !important;
    max-width: var(--gate-max) !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(270px, 0.78fr) !important;
    gap: clamp(30px, 4vw, 56px) !important;
}

.eyebrow {
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    margin-bottom: 0.7em;
}

.lead,
.hero-section .lead {
    font-size: clamp(0.94rem, 1.12vw, 1.04rem);
    line-height: 1.55;
    max-width: 540px;
}

.button-row {
    gap: 9px;
    margin-top: 18px;
}

.gate-button,
.wp-block-button__link {
    font-size: 0.8rem;
    padding: 0.62em 0.98em;
    box-shadow: 0 7px 17px rgba(47, 111, 62, 0.16);
}

.hero-card {
    max-width: 350px;
    padding: clamp(19px, 2.4vw, 26px);
}

.hero-card__label {
    font-size: 0.63rem;
    padding: 4px 8px;
}

.hero-card h2 {
    margin-bottom: 0.45em;
}

.hero-card p {
    line-height: 1.48;
}

.gate-section {
    padding: clamp(36px, 4.8vw, 60px) 0;
}

.entry-content .card-grid,
.entry-content .post-grid {
    width: min(var(--gate-max), calc(100% - 48px)) !important;
    max-width: var(--gate-max) !important;
    margin: clamp(30px, 4.1vw, 48px) auto !important;
    gap: clamp(14px, 1.8vw, 18px) !important;
}

.info-card,
.is-style-gate-card {
    padding: clamp(17px, 2vw, 22px);
}

.info-card h3,
.is-style-gate-card h3 {
    margin-bottom: 0.4em;
}

.info-card p,
.is-style-gate-card p {
    font-size: 0.86rem;
    line-height: 1.5;
}

.entry-content .is-style-gate-highlight.alignwide,
.entry-content > .is-style-gate-highlight.alignwide,
.entry-content .wp-block-group.is-style-gate-highlight {
    width: min(var(--gate-max), calc(100% - 48px)) !important;
    max-width: var(--gate-max) !important;
    margin: clamp(20px, 3vw, 34px) auto clamp(36px, 4.8vw, 58px) !important;
    padding: clamp(22px, 2.8vw, 34px);
}

.entry-content .is-style-gate-highlight .wp-block-columns {
    gap: 20px;
}

.entry-content .is-style-gate-highlight h2 {
    max-width: 600px;
}

.site-footer {
    padding: 28px 0;
    font-size: 0.84rem;
}

.site-footer__inner {
    gap: 18px;
}

.site-footer__meta {
    margin-top: 4px;
    padding-top: 14px;
    font-size: 0.78rem;
}

@media (min-width: 981px) and (max-width: 1536px), (min-width: 981px) and (max-height: 900px) {
    :root {
        --gate-max: 980px;
        --gate-narrow: 650px;
    }

    body {
        font-size: 15px;
    }

    h1 {
        font-size: clamp(2.05rem, 3vw, 2.75rem);
    }

    h2 {
        font-size: clamp(1.35rem, 2vw, 1.82rem);
    }

    .site-header__inner {
        min-height: 56px;
    }

    .site-branding__mark {
        width: 36px;
        height: 36px;
    }

    .hero-section {
        padding: 30px 0 38px;
    }

    .entry-content .hero-section > .hero-section__grid,
    .entry-content .hero-section .hero-section__grid,
    .hero-section .hero-section__grid {
        grid-template-columns: minmax(0, 1.05fr) minmax(255px, 0.74fr) !important;
        gap: clamp(26px, 3.4vw, 44px) !important;
    }

    .lead,
    .hero-section .lead {
        font-size: 0.92rem;
        line-height: 1.5;
        max-width: 500px;
    }

    .hero-card {
        max-width: 318px;
        padding: 19px 21px;
    }

    .hero-card h2 {
        font-size: clamp(1.35rem, 2vw, 1.65rem);
    }

    .hero-card p {
        font-size: 0.86rem;
    }

    .button-row {
        margin-top: 16px;
    }

    .entry-content .card-grid,
    .entry-content .post-grid {
        margin-top: 30px !important;
        margin-bottom: 34px !important;
    }

    .info-card,
    .is-style-gate-card {
        padding: 17px 19px;
    }

    .entry-content .is-style-gate-highlight.alignwide,
    .entry-content > .is-style-gate-highlight.alignwide,
    .entry-content .wp-block-group.is-style-gate-highlight {
        margin-top: 18px !important;
        margin-bottom: 38px !important;
        padding: 22px 28px;
    }

    .site-footer {
        padding: 26px 0;
    }
}

@media (min-width: 981px) and (max-height: 760px) {
    .site-header__inner {
        min-height: 52px;
    }

    .site-branding__mark {
        width: 34px;
        height: 34px;
        border-radius: 10px;
    }

    .site-branding__description {
        display: none;
    }

    .main-navigation__menu a {
        font-size: 0.78rem;
        padding: 6px 9px;
    }

    .hero-section {
        padding: 24px 0 30px;
    }

    h1 {
        font-size: clamp(1.95rem, 2.7vw, 2.45rem);
    }

    .lead,
    .hero-section .lead {
        font-size: 0.88rem;
        line-height: 1.46;
    }

    .hero-card {
        padding: 17px 19px;
    }

    .hero-card h2 {
        font-size: 1.42rem;
    }

    .entry-content .card-grid,
    .entry-content .post-grid {
        margin-top: 24px !important;
        margin-bottom: 26px !important;
    }

    .entry-content .is-style-gate-highlight.alignwide,
    .entry-content > .is-style-gate-highlight.alignwide,
    .entry-content .wp-block-group.is-style-gate-highlight {
        margin-top: 14px !important;
        margin-bottom: 30px !important;
        padding: 20px 24px;
    }

    .site-footer {
        padding: 22px 0;
    }
}

@media (max-width: 980px) {
    h1 {
        font-size: clamp(2rem, 6.2vw, 2.75rem);
    }

    .hero-section {
        padding: 34px 0 42px;
    }

    .entry-content .hero-section > .hero-section__grid,
    .entry-content .hero-section .hero-section__grid,
    .hero-section .hero-section__grid,
    .entry-content .card-grid,
    .entry-content .post-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 620px) {
    body {
        font-size: 15px;
    }

    h1 {
        font-size: clamp(1.85rem, 10.5vw, 2.45rem);
    }

    .hero-section {
        padding: 28px 0 34px;
    }

    .entry-content .card-grid,
    .entry-content .post-grid {
        margin-top: 24px !important;
        margin-bottom: 28px !important;
    }
}

/* v0.5.1: keep custom logo and site title next to each other in the header. */
.site-branding__link {
    flex-direction: row;
    flex-wrap: nowrap;
}

@media (max-width: 620px) {
    .site-branding__logo img,
    .custom-logo {
        max-height: 36px;
        max-width: 82px;
    }
}

/* v0.5.1 header logo alignment --------------------------------------------
   WordPress renders the custom logo as its own link. The previous header
   wrapped that logo link inside another header link, which browsers corrected
   by breaking the layout. The header now uses a neutral flex container so the
   custom logo/mark and title sit next to each other reliably. */
.site-branding {
    min-width: 0;
}

.site-branding__link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--gate-dark);
    text-decoration: none;
    min-width: 0;
}

.site-branding__logo,
.site-branding__logo .custom-logo-link {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    line-height: 0;
}

.site-branding__logo img,
.site-branding__logo .custom-logo,
.custom-logo {
    display: block;
    max-height: 42px;
    max-width: 86px;
    width: auto;
    object-fit: contain;
}

.site-branding__mark {
    flex: 0 0 auto;
    text-decoration: none;
}

.site-branding__text {
    display: grid;
    align-content: center;
    min-width: 0;
    line-height: 1.15;
}

.site-branding__title {
    display: block;
    color: var(--gate-dark);
    font-weight: 800;
    letter-spacing: -0.03em;
    text-decoration: none;
    white-space: nowrap;
}

.site-branding__title:hover,
.site-branding__title:focus {
    color: var(--gate-primary);
}

.site-branding__description {
    white-space: nowrap;
}

@media (max-width: 620px) {
    .site-branding__logo img,
    .site-branding__logo .custom-logo,
    .custom-logo {
        max-height: 36px;
        max-width: 74px;
    }

    .site-branding__link {
        gap: 9px;
    }
}


/* v0.5.2 clickable information cards --------------------------------------
   If an information card contains exactly one link, JavaScript makes the
   whole card clickable. The CSS below gives these cards a clear interaction
   state without changing the editorial block structure. */
.info-card.is-clickable-card,
.is-style-gate-card.is-clickable-card {
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.info-card.is-clickable-card:hover,
.info-card.is-clickable-card:focus-visible,
.is-style-gate-card.is-clickable-card:hover,
.is-style-gate-card.is-clickable-card:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(47, 111, 62, 0.36);
    box-shadow: 0 18px 42px rgba(16, 32, 21, 0.13);
    outline: none;
}

.info-card h3 a,
.is-style-gate-card h3 a {
    color: var(--gate-dark);
    text-decoration: none;
}

.info-card h3 a:hover,
.info-card h3 a:focus,
.is-style-gate-card h3 a:hover,
.is-style-gate-card h3 a:focus {
    color: var(--gate-primary);
}

.info-card h3 a::after,
.is-style-gate-card h3 a::after {
    content: "  \2192";
    color: var(--gate-primary);
    font-weight: 800;
    opacity: 0.75;
}

.info-card .card-link,
.is-style-gate-card .card-link,
.info-card p > a:only-child,
.is-style-gate-card p > a:only-child {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    margin-top: 0.35rem;
    color: var(--gate-primary);
    font-weight: 800;
    text-decoration: none;
}

.info-card .card-link:hover,
.info-card .card-link:focus,
.is-style-gate-card .card-link:hover,
.is-style-gate-card .card-link:focus,
.info-card p > a:only-child:hover,
.info-card p > a:only-child:focus,
.is-style-gate-card p > a:only-child:hover,
.is-style-gate-card p > a:only-child:focus {
    color: var(--gate-dark);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}


/* v0.5.3 Green Gate hero image --------------------------------------------
   Adds the selected greenhouse/campus photo as a subtle hero background. The
   overlays keep the text readable on laptop and desktop viewports while still
   bringing the site closer to the original Green Gate visual identity. */
.hero-section {
    position: relative;
    overflow: hidden;
    background-image:
        linear-gradient(90deg,
            rgba(243, 246, 239, 0.96) 0%,
            rgba(243, 246, 239, 0.93) 36%,
            rgba(255, 255, 255, 0.82) 63%,
            rgba(255, 255, 255, 0.74) 100%),
        radial-gradient(circle at 10% 22%, rgba(150, 184, 82, 0.28), transparent 34%),
        url('../images/hero-greenhouse.jpg');
    background-size: cover, cover, cover;
    background-position: center, center, center 52%;
    background-repeat: no-repeat;
}

.hero-section::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 1px;
    background: rgba(16, 32, 21, 0.08);
    pointer-events: none;
}

.hero-section .hero-section__grid {
    position: relative;
    z-index: 1;
}

.hero-card {
    background: rgba(255, 255, 255, 0.90);
    backdrop-filter: blur(10px);
}

@media (max-width: 980px) {
    .hero-section {
        background-image:
            linear-gradient(180deg,
                rgba(243, 246, 239, 0.97) 0%,
                rgba(243, 246, 239, 0.94) 52%,
                rgba(255, 255, 255, 0.88) 100%),
            radial-gradient(circle at 8% 15%, rgba(150, 184, 82, 0.26), transparent 34%),
            url('../images/hero-greenhouse.jpg');
        background-position: center, center, center center;
    }
}

@media (max-width: 620px) {
    .hero-section {
        background-image:
            linear-gradient(180deg,
                rgba(243, 246, 239, 0.985) 0%,
                rgba(243, 246, 239, 0.96) 58%,
                rgba(255, 255, 255, 0.92) 100%),
            url('../images/hero-greenhouse.jpg');
        background-position: center, center;
    }
}

/* v0.5.4 subpage and location page patterns -------------------------------
   Adds reusable building blocks for the Standort page: a compact subpage hero,
   fact cards, image/text sections, and a final CTA. */
.subpage-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(54px, 7vw, 86px) 0 clamp(42px, 6vw, 68px);
    background:
        linear-gradient(90deg, rgba(243, 246, 239, 0.96), rgba(255, 255, 255, 0.90)),
        radial-gradient(circle at 10% 18%, rgba(150, 184, 82, 0.22), transparent 34%);
    border-bottom: 1px solid rgba(16, 32, 21, 0.08);
}

.subpage-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.62fr);
    align-items: center;
    gap: clamp(30px, 5vw, 58px);
}

.subpage-hero h1 {
    font-size: clamp(2.1rem, 3vw, 3.05rem);
    letter-spacing: -0.045em;
}

.subpage-hero .lead {
    font-size: clamp(1.02rem, 1.25vw, 1.18rem);
    max-width: 760px;
}

.subpage-hero__image-card,
.fact-card {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--gate-border);
    border-radius: var(--gate-radius);
    box-shadow: var(--gate-shadow);
}

.subpage-hero__image-card {
    padding: clamp(24px, 3.2vw, 34px);
}

.location-facts-section {
    padding-top: clamp(48px, 6vw, 76px);
    padding-bottom: clamp(42px, 6vw, 68px);
}

.location-facts-section .section-heading {
    margin-bottom: 26px;
}

.fact-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 18px;
    max-width: var(--gate-max);
}

.fact-card {
    grid-column: span 2;
    padding: clamp(20px, 2.8vw, 28px);
}

.fact-card--large {
    grid-column: span 3;
}

.fact-card__value {
    color: var(--gate-primary);
    font-size: clamp(2rem, 3.4vw, 3.1rem);
    font-weight: 850;
    letter-spacing: -0.055em;
    line-height: 0.95;
    margin-bottom: 0.35em;
}

.fact-card h3 {
    margin-bottom: 0.45em;
}

.fact-card p:last-child {
    margin-bottom: 0;
}

.media-text-section {
    padding-top: clamp(36px, 5vw, 62px);
    padding-bottom: clamp(44px, 6vw, 74px);
}

.media-text {
    gap: clamp(26px, 5vw, 56px);
}

.gate-image-frame {
    margin: 0;
}

.gate-image-frame img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--gate-radius);
    box-shadow: var(--gate-shadow);
}

.location-final-cta {
    margin-top: 0 !important;
    margin-bottom: clamp(54px, 7vw, 86px) !important;
}

@media (max-width: 980px) {
    .subpage-hero__grid,
    .media-text {
        grid-template-columns: 1fr;
    }

    .fact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fact-card,
    .fact-card--large {
        grid-column: span 1;
    }
}

@media (max-width: 620px) {
    .subpage-hero {
        padding: 34px 0 38px;
    }

    .fact-grid {
        grid-template-columns: 1fr;
    }
}

/* v0.5.5 Unterseiten-Skalierung ------------------------------------------
   The Standort page now uses the same width and rhythm logic as the homepage.
   Pages that contain the custom subpage/location patterns suppress the default
   page headline and allow full/wide blocks to define their own layout. */
.gate-page--custom-layout .entry-content {
    padding-bottom: 0;
}

.gate-page--custom-layout .entry-content > * + * {
    margin-block-start: 0;
}

.gate-page--custom-layout .entry-content > .alignfull,
.gate-page--custom-layout .entry-content > .subpage-hero,
.entry-content > .wp-block-group.alignfull.subpage-hero {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

.gate-page--custom-layout .entry-content > .alignwide,
.gate-page--custom-layout .entry-content > .wp-block-group.alignwide,
.gate-page--custom-layout .entry-content > .wp-block-columns.alignwide,
.gate-page--custom-layout .entry-content .wp-block-group.alignwide,
.gate-page--custom-layout .entry-content .wp-block-columns.alignwide {
    width: min(var(--gate-max), calc(100% - 40px));
    max-width: var(--gate-max);
    margin-left: auto;
    margin-right: auto;
}

.gate-page--custom-layout .subpage-hero {
    min-height: clamp(320px, 42vh, 460px);
    display: flex;
    align-items: center;
    padding: clamp(44px, 5vw, 66px) 0;
}

.gate-page--custom-layout .subpage-hero__grid {
    width: min(var(--gate-max), calc(100% - 40px)) !important;
    max-width: var(--gate-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.62fr) !important;
    align-items: center;
    gap: clamp(34px, 5vw, 72px);
}

.gate-page--custom-layout .subpage-hero h1 {
    font-size: clamp(2.05rem, 3.1vw, 3.1rem);
    max-width: 780px;
}

.gate-page--custom-layout .subpage-hero .lead {
    max-width: 720px;
    font-size: clamp(0.98rem, 1.1vw, 1.08rem);
}

.gate-page--custom-layout .subpage-hero__image-card {
    max-width: 410px;
    justify-self: end;
    padding: clamp(20px, 2.4vw, 28px);
}

.gate-page--custom-layout .location-facts-section {
    width: min(var(--gate-max), calc(100% - 40px)) !important;
    max-width: var(--gate-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: clamp(42px, 5vw, 64px);
    padding-bottom: clamp(34px, 4.5vw, 56px);
}

.gate-page--custom-layout .location-facts-section .section-heading {
    max-width: 760px;
    margin-left: 0;
    margin-right: auto;
    margin-bottom: clamp(22px, 3vw, 32px);
}

.gate-page--custom-layout .fact-grid {
    width: 100% !important;
    max-width: none !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(18px, 2vw, 24px) !important;
}

.gate-page--custom-layout .fact-card,
.gate-page--custom-layout .fact-card--large {
    grid-column: auto;
    min-width: 0;
    padding: clamp(22px, 2.4vw, 30px);
}

.gate-page--custom-layout .fact-card__value {
    font-size: clamp(2.1rem, 3vw, 3.0rem);
}

.gate-page--custom-layout .media-text-section {
    width: min(var(--gate-max), calc(100% - 40px)) !important;
    max-width: var(--gate-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: clamp(26px, 4vw, 48px);
    padding-bottom: clamp(40px, 5vw, 66px);
}

.gate-page--custom-layout .media-text {
    gap: clamp(28px, 4.5vw, 58px);
}

.gate-page--custom-layout .location-final-cta {
    width: min(var(--gate-max), calc(100% - 40px)) !important;
    max-width: var(--gate-max) !important;
    margin: clamp(24px, 4vw, 48px) auto clamp(54px, 6vw, 84px) !important;
}

@media (max-width: 980px) {
    .gate-page--custom-layout .subpage-hero__grid,
    .gate-page--custom-layout .media-text {
        grid-template-columns: 1fr !important;
    }

    .gate-page--custom-layout .subpage-hero__image-card {
        justify-self: stretch;
        max-width: none;
    }

    .gate-page--custom-layout .fact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 680px) {
    .gate-page--custom-layout .subpage-hero {
        min-height: 0;
        padding: 34px 0 38px;
    }

    .gate-page--custom-layout .fact-grid {
        grid-template-columns: 1fr !important;
    }
}


/* v0.5.6 Standort hero alignment -----------------------------------------
   The Standort subpage hero now follows the same visual rhythm as the
   homepage hero: identical outer width, similar vertical starting point,
   stronger campus image connection, and no isolated "shifted down" feeling
   on laptop and desktop viewports. */
.gate-page--custom-layout .subpage-hero {
    min-height: clamp(340px, 39vh, 430px);
    padding: clamp(34px, 4.2vw, 50px) 0 clamp(34px, 4.5vw, 56px);
    background-image:
        linear-gradient(90deg,
            rgba(243, 246, 239, 0.965) 0%,
            rgba(255, 255, 255, 0.90) 52%,
            rgba(255, 255, 255, 0.72) 100%),
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.14) 0%,
            rgba(255, 255, 255, 0.28) 100%),
        url('../images/hero-greenhouse.jpg');
    background-size: cover, cover, cover;
    background-position: center, center, center 42%;
    background-repeat: no-repeat;
}

.gate-page--custom-layout .subpage-hero__grid {
    grid-template-columns: minmax(0, 1.03fr) minmax(300px, 0.62fr) !important;
    gap: clamp(34px, 6vw, 78px);
}

.gate-page--custom-layout .subpage-hero h1 {
    font-size: clamp(2.0rem, 2.75vw, 2.85rem);
    max-width: 760px;
}

.gate-page--custom-layout .subpage-hero .lead {
    max-width: 690px;
}

.gate-page--custom-layout .subpage-hero__image-card {
    background: rgba(255, 255, 255, 0.91);
    backdrop-filter: blur(8px);
}

.gate-page--custom-layout .location-facts-section {
    padding-top: clamp(34px, 4.5vw, 54px);
}

@media (max-width: 980px) {
    .gate-page--custom-layout .subpage-hero {
        min-height: 0;
        padding: 34px 0 38px;
        background-image:
            linear-gradient(180deg,
                rgba(243, 246, 239, 0.985) 0%,
                rgba(255, 255, 255, 0.91) 100%),
            url('../images/hero-greenhouse.jpg');
        background-position: center, center center;
    }
}


/* v0.5.7 Standort facts background band ----------------------------------
   Variant A: The facts section directly below the hero gets a broad aerial
   background image with a soft bright overlay. White cards remain clearly
   readable above the image and the section uses the same width rhythm as
   the homepage. */
.gate-page--custom-layout .location-facts-section {
    position: relative;
    overflow: hidden;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: clamp(46px, 5.4vw, 74px) 0 clamp(48px, 5.8vw, 78px);
    background-color: #eef3e8;
    background-image:
        linear-gradient(180deg,
            rgba(248, 250, 246, 0.93) 0%,
            rgba(248, 250, 246, 0.86) 28%,
            rgba(248, 250, 246, 0.80) 100%),
        radial-gradient(circle at 16% 20%, rgba(150, 184, 82, 0.12), transparent 30%),
        url('../images/location-aerial.jpg');
    background-size: cover, auto, cover;
    background-position: center, center, center 46%;
    background-repeat: no-repeat;
    border-top: 1px solid rgba(16, 32, 21, 0.06);
    border-bottom: 1px solid rgba(16, 32, 21, 0.06);
}

.gate-page--custom-layout .location-facts-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.24) 0%,
        rgba(255, 255, 255, 0.08) 36%,
        rgba(255, 255, 255, 0.18) 100%);
    pointer-events: none;
}

.gate-page--custom-layout .location-facts-section > * {
    position: relative;
    z-index: 1;
}

.gate-page--custom-layout .location-facts-section .section-heading,
.gate-page--custom-layout .location-facts-section .fact-grid {
    width: min(var(--gate-max), calc(100% - 40px)) !important;
    max-width: var(--gate-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.gate-page--custom-layout .location-facts-section .section-heading {
    margin-bottom: clamp(22px, 3vw, 34px);
}

.gate-page--custom-layout .fact-card,
.gate-page--custom-layout .fact-card--large {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(8px);
    box-shadow: 0 14px 34px rgba(22, 39, 25, 0.10);
}

@media (max-width: 980px) {
    .gate-page--custom-layout .location-facts-section {
        padding: 38px 0 44px;
        background-image:
            linear-gradient(180deg,
                rgba(248, 250, 246, 0.96) 0%,
                rgba(248, 250, 246, 0.90) 100%),
            url('../images/location-aerial.jpg');
        background-position: center, center 50%;
    }
}

@media (max-width: 680px) {
    .gate-page--custom-layout .location-facts-section .section-heading,
    .gate-page--custom-layout .location-facts-section .fact-grid {
        width: min(var(--gate-max), calc(100% - 28px)) !important;
    }
}


/* v0.5.9 Standort hero image removal ------------------------------------
   The greenhouse/startpage image was too much when combined with the aerial
   facts background. Keep the Standort hero calm and text-focused; the aerial
   image remains only in the facts section below. */
.gate-page--custom-layout .subpage-hero {
    background-image:
        linear-gradient(90deg,
            rgba(243, 246, 239, 0.965) 0%,
            rgba(255, 255, 255, 0.93) 55%,
            rgba(255, 255, 255, 0.88) 100%),
        radial-gradient(circle at 12% 22%, rgba(150, 184, 82, 0.22), transparent 34%);
    background-size: auto, auto;
    background-position: center, center;
    background-repeat: no-repeat;
}

@media (max-width: 980px) {
    .gate-page--custom-layout .subpage-hero {
        background-image:
            linear-gradient(180deg,
                rgba(243, 246, 239, 0.985) 0%,
                rgba(255, 255, 255, 0.94) 100%),
            radial-gradient(circle at 12% 18%, rgba(150, 184, 82, 0.18), transparent 36%);
        background-size: auto, auto;
        background-position: center, center;
    }
}

/* v0.6.0 Standort alignment and scale correction --------------------------
   Aligns the Standort subpage hero with the homepage rhythm. The previous
   subpage hero used a centered min-height layout, which pushed the content
   too far down and made the page feel larger than the homepage. */
.gate-page--custom-layout .subpage-hero {
    min-height: 0 !important;
    display: block !important;
    align-items: initial !important;
    padding: clamp(34px, 4.4vw, 58px) 0 clamp(38px, 4.8vw, 62px) !important;
    border-bottom: none;
}

.gate-page--custom-layout .subpage-hero__grid {
    width: min(var(--gate-max), calc(100% - 48px)) !important;
    max-width: var(--gate-max) !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(270px, 0.78fr) !important;
    gap: clamp(30px, 4vw, 56px) !important;
    align-items: center !important;
}

.gate-page--custom-layout .subpage-hero h1 {
    font-size: clamp(2.05rem, 2.85vw, 2.8rem) !important;
    line-height: 1.03;
    max-width: 720px;
    margin-bottom: 0.18em;
}

.gate-page--custom-layout .subpage-hero .lead {
    font-size: clamp(0.94rem, 1.12vw, 1.04rem) !important;
    line-height: 1.55;
    max-width: 620px;
}

.gate-page--custom-layout .subpage-hero__image-card {
    max-width: 360px;
    padding: clamp(18px, 2.1vw, 24px);
}

.gate-page--custom-layout .location-facts-section {
    padding-top: clamp(38px, 4.7vw, 60px);
}

@media (max-width: 980px) {
    .gate-page--custom-layout .subpage-hero {
        padding: 30px 0 34px !important;
    }

    .gate-page--custom-layout .subpage-hero__grid {
        grid-template-columns: 1fr !important;
        gap: 22px !important;
    }

    .gate-page--custom-layout .subpage-hero__image-card {
        max-width: none;
    }
}

@media (max-width: 680px) {
    .gate-page--custom-layout .subpage-hero__grid {
        width: min(var(--gate-max), calc(100% - 28px)) !important;
    }
}

/* v0.6.1 Partner page -----------------------------------------------------
   Editable two-column partner grid. Cards can be duplicated or removed in
   the block editor. Odd numbers leave the last card in the left column. */
.gate-page--custom-layout .partner-hero {
    min-height: 0 !important;
    display: block !important;
    align-items: initial !important;
    padding: clamp(34px, 4.4vw, 58px) 0 clamp(38px, 4.8vw, 62px) !important;
    background-image:
        linear-gradient(90deg,
            rgba(243, 246, 239, 0.965) 0%,
            rgba(255, 255, 255, 0.93) 55%,
            rgba(255, 255, 255, 0.88) 100%),
        radial-gradient(circle at 12% 22%, rgba(150, 184, 82, 0.22), transparent 34%);
    border-bottom: 1px solid rgba(16, 32, 21, 0.06);
}

.gate-page--custom-layout .partner-hero .subpage-hero__grid {
    width: min(var(--gate-max), calc(100% - 48px)) !important;
    max-width: var(--gate-max) !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(270px, 0.78fr) !important;
    gap: clamp(30px, 4vw, 56px) !important;
    align-items: center !important;
}

.gate-page--custom-layout .partner-hero h1 {
    font-size: clamp(2.05rem, 2.85vw, 2.8rem) !important;
    line-height: 1.03;
    max-width: 720px;
    margin-bottom: 0.18em;
}

.gate-page--custom-layout .partner-hero .lead {
    font-size: clamp(0.94rem, 1.12vw, 1.04rem) !important;
    line-height: 1.55;
    max-width: 620px;
}

.partner-grid-section {
    padding-top: clamp(44px, 5vw, 72px);
    padding-bottom: clamp(44px, 5vw, 72px);
}

.gate-page--custom-layout .partner-grid-section {
    width: min(var(--gate-max), calc(100% - 40px)) !important;
    max-width: var(--gate-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.partner-grid-section .section-heading {
    max-width: 760px;
    margin-bottom: clamp(24px, 3vw, 34px);
}

.partner-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(18px, 2vw, 24px);
    width: 100% !important;
    max-width: none !important;
}

.partner-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: clamp(22px, 2.5vw, 30px);
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--gate-border);
    border-radius: var(--gate-radius);
    box-shadow: var(--gate-shadow);
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.partner-card:hover,
.partner-card:focus-within {
    transform: translateY(-2px);
    border-color: rgba(42, 126, 59, 0.28);
    box-shadow: 0 18px 42px rgba(16, 32, 21, 0.12);
}

.partner-card__top {
    gap: 12px !important;
    margin-bottom: 16px;
}

.partner-card__logo-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    min-width: 78px;
    height: 46px;
    margin: 0;
    border-radius: 12px;
    background: rgba(42, 126, 59, 0.08);
    color: var(--gate-primary);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.partner-card__tag {
    display: inline-flex;
    width: fit-content;
    margin: 0;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(42, 126, 59, 0.08);
    color: var(--gate-primary);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.partner-card h3 {
    margin-bottom: 0.45em;
}

.partner-card p {
    color: rgba(39, 49, 42, 0.82);
}

.partner-card__action {
    margin-top: auto;
    padding-top: 14px;
    font-weight: 800;
}

.partner-card__action a {
    text-decoration: none;
}

.partner-final-cta {
    margin-top: 0 !important;
    margin-bottom: clamp(54px, 6vw, 84px) !important;
}

@media (max-width: 820px) {
    .partner-grid {
        grid-template-columns: 1fr;
    }

    .gate-page--custom-layout .partner-hero .subpage-hero__grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 680px) {
    .gate-page--custom-layout .partner-grid-section,
    .gate-page--custom-layout .partner-hero .subpage-hero__grid {
        width: min(var(--gate-max), calc(100% - 28px)) !important;
    }
}

/* v0.6.2 Partner cards simplified ----------------------------------------
   Partner cards now focus on approved content only: logo centered at the top
   and the full partner name underneath. Existing placeholder descriptions and
   category tags from earlier pattern versions are hidden on the frontend. */
.partner-card {
    justify-content: center;
    text-align: center;
    min-height: 180px;
}

.partner-card__top {
    justify-content: center !important;
    margin-bottom: 14px !important;
}

/* Hide earlier category tags, description paragraphs and action links if an
   older partner pattern is already inserted into the page content. */
.partner-card__tag,
.partner-card__action {
    display: none !important;
}

.partner-card > p:not(.partner-card__logo-placeholder):not(.partner-card__tag):not(.partner-card__action) {
    display: none !important;
}

.partner-card__logo-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 72px;
    margin-bottom: 16px;
}

.partner-card__logo-placeholder {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 128px;
    min-width: 128px;
    height: 64px;
    margin: 0 auto !important;
    border-radius: 14px;
    background: rgba(42, 126, 59, 0.08);
    color: var(--gate-primary);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

/* When a real logo image is placed into the logo area later. */
.partner-card__logo-wrap img,
.partner-card figure img,
.partner-card .wp-block-image img {
    display: block;
    max-width: 190px;
    max-height: 82px;
    width: auto;
    height: auto;
    object-fit: contain;
    margin-left: auto;
    margin-right: auto;
}

.partner-card h3,
.partner-card__name {
    margin: 0 auto !important;
    max-width: 34rem;
    font-size: clamp(1.05rem, 1.45vw, 1.28rem);
    line-height: 1.2;
    text-align: center;
}

.partner-card h3 a {
    color: var(--gate-dark);
    text-decoration: none;
}

.partner-card h3 a:hover,
.partner-card h3 a:focus {
    color: var(--gate-primary);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.partner-card--logo-only {
    padding-top: clamp(26px, 3vw, 36px);
    padding-bottom: clamp(26px, 3vw, 36px);
}

@media (max-width: 820px) {
    .partner-card {
        min-height: 150px;
    }
}

/* v0.6.3 Partner card click behavior -------------------------------------
   Partner cards follow the homepage card behavior: if exactly one link exists
   inside the card, JavaScript makes the whole card clickable. For the partner
   overview no hover lift/animation is used, so the page stays calm and neutral. */
.partner-card.is-clickable-card {
    cursor: pointer;
}

.partner-card.is-clickable-card:hover,
.partner-card.is-clickable-card:focus-within,
.partner-card:hover,
.partner-card:focus-within {
    transform: none !important;
    border-color: var(--gate-border) !important;
    box-shadow: var(--gate-shadow) !important;
}

.partner-card.is-clickable-card:focus {
    outline: 2px solid rgba(42, 126, 59, 0.35);
    outline-offset: 4px;
}

/* Keep linked names/logos visually calm in the partner grid. */
.partner-card h3 a,
.partner-card .partner-card__name a,
.partner-card .wp-block-image a {
    color: inherit;
    text-decoration: none;
}

.partner-card h3 a:hover,
.partner-card h3 a:focus,
.partner-card .partner-card__name a:hover,
.partner-card .partner-card__name a:focus {
    color: inherit;
    text-decoration: none;
}

/* v0.6.4 Partner card equal sizing ---------------------------------------
   Force the partner grid to use two equal columns and make every partner card
   stretch to the full column width with a consistent minimum height. This
   avoids shorter names such as "BMD GmbH" creating visually smaller cards. */
.gate-page--custom-layout .partner-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(18px, 2vw, 24px) !important;
    width: 100% !important;
    max-width: none !important;
    justify-items: stretch !important;
    align-items: stretch !important;
}

.gate-page--custom-layout .partner-grid > *,
.gate-page--custom-layout .partner-grid > .wp-block-group,
.gate-page--custom-layout .partner-grid > .partner-card {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
}

.gate-page--custom-layout .partner-card {
    width: 100% !important;
    max-width: none !important;
    min-height: clamp(190px, 15vw, 230px);
    height: 100%;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.gate-page--custom-layout .partner-card__logo-wrap {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.gate-page--custom-layout .partner-card h3,
.gate-page--custom-layout .partner-card__name {
    width: 100%;
}

@media (max-width: 820px) {
    .gate-page--custom-layout .partner-grid {
        grid-template-columns: 1fr !important;
    }

    .gate-page--custom-layout .partner-card {
        min-height: 160px;
    }
}

/* v0.6.5 Partner logo normalization --------------------------------------
   Partner logos have very different aspect ratios. This version reserves a
   fixed logo zone in every partner card and constrains all uploaded images
   into that zone with object-fit: contain. The partner name starts at the same
   vertical position across the grid. */
.gate-page--custom-layout .partner-card {
    display: grid !important;
    grid-template-rows: 92px minmax(2.7em, auto);
    align-content: center;
    justify-items: center;
    row-gap: 18px;
    min-height: clamp(190px, 15vw, 230px);
    padding: clamp(24px, 2.7vw, 34px);
}

/* Explicit logo placeholder wrapper from the pattern. */
.gate-page--custom-layout .partner-card__logo-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100%;
    height: 92px;
    min-height: 92px;
    margin: 0 auto !important;
}

/* WordPress image blocks that may replace the placeholder. */
.gate-page--custom-layout .partner-card > .wp-block-image,
.gate-page--custom-layout .partner-card figure.wp-block-image,
.gate-page--custom-layout .partner-card .wp-block-image,
.gate-page--custom-layout .partner-card__logo-wrap figure,
.gate-page--custom-layout .partner-card__logo-wrap .wp-block-image {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 92px !important;
    min-height: 92px !important;
    margin: 0 auto !important;
}

/* Linked logos need the same centering as plain images. */
.gate-page--custom-layout .partner-card .wp-block-image a,
.gate-page--custom-layout .partner-card figure a,
.gate-page--custom-layout .partner-card__logo-wrap a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100%;
    height: 100%;
}

/* All partner logos are normalized inside the fixed logo field. */
.gate-page--custom-layout .partner-card img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: min(230px, 82%) !important;
    max-height: 78px !important;
    object-fit: contain !important;
    margin: 0 auto !important;
}

/* The placeholder uses the same reserved area. */
.gate-page--custom-layout .partner-card__logo-placeholder {
    width: 150px;
    min-width: 150px;
    height: 64px;
    margin: 0 auto !important;
}

/* Name row: same start position and calm multi-line wrapping. */
.gate-page--custom-layout .partner-card h3,
.gate-page--custom-layout .partner-card__name {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.7em;
    width: 100%;
    margin: 0 auto !important;
    text-align: center;
}

/* If an older partner-card__top wrapper still exists, force it into the logo zone. */
.gate-page--custom-layout .partner-card__top {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100%;
    height: 92px;
    min-height: 92px;
    margin: 0 !important;
}

@media (max-width: 820px) {
    .gate-page--custom-layout .partner-card {
        grid-template-rows: 82px minmax(2.5em, auto);
        min-height: 170px;
    }

    .gate-page--custom-layout .partner-card__logo-wrap,
    .gate-page--custom-layout .partner-card > .wp-block-image,
    .gate-page--custom-layout .partner-card figure.wp-block-image,
    .gate-page--custom-layout .partner-card .wp-block-image,
    .gate-page--custom-layout .partner-card__top {
        height: 82px !important;
        min-height: 82px !important;
    }

    .gate-page--custom-layout .partner-card img {
        max-height: 68px !important;
        max-width: min(210px, 84%) !important;
    }
}

/* v0.6.6 Partner logo visual alignment -----------------------------------
   Stronger normalization for mixed real logos and placeholders. Every partner
   card receives a fixed logo stage. Real WordPress image blocks, linked logos,
   and placeholder blocks are centered in that stage. Partner names therefore
   start on the same vertical line even with very different logo aspect ratios. */
.gate-page--custom-layout .partner-card {
    display: grid !important;
    grid-template-rows: 104px minmax(3.0em, auto) !important;
    align-content: center !important;
    justify-items: center !important;
    row-gap: 16px !important;
    min-height: 220px !important;
    padding-top: 30px !important;
    padding-bottom: 30px !important;
}

/* All possible logo containers get the exact same reserved height. */
.gate-page--custom-layout .partner-card__logo-wrap,
.gate-page--custom-layout .partner-card__top,
.gate-page--custom-layout .partner-card > figure.wp-block-image,
.gate-page--custom-layout .partner-card > .wp-block-image,
.gate-page--custom-layout .partner-card figure.wp-block-image,
.gate-page--custom-layout .partner-card .wp-block-image {
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 104px !important;
    min-height: 104px !important;
    max-height: 104px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* Linked images keep the same alignment field. */
.gate-page--custom-layout .partner-card__logo-wrap a,
.gate-page--custom-layout .partner-card__top a,
.gate-page--custom-layout .partner-card .wp-block-image a,
.gate-page--custom-layout .partner-card figure.wp-block-image a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}

/* Normalize the visible logo size. Wide logos and tall logos stay inside
   the same optical box and are never cropped. */
.gate-page--custom-layout .partner-card img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: min(240px, 78%) !important;
    max-height: 72px !important;
    object-fit: contain !important;
    margin: 0 auto !important;
}

/* Placeholder behaves like a real logo inside the same fixed stage. */
.gate-page--custom-layout .partner-card__logo-placeholder {
    width: 150px !important;
    min-width: 150px !important;
    height: 64px !important;
    margin: 0 auto !important;
}

/* Partner name is always row 2. */
.gate-page--custom-layout .partner-card h3,
.gate-page--custom-layout .partner-card__name {
    grid-row: 2 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    min-height: 3.0em !important;
    width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
}

/* Remove possible auto margins that WordPress may put around image blocks. */
.gate-page--custom-layout .partner-card .wp-block-image.aligncenter,
.gate-page--custom-layout .partner-card figure.aligncenter {
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (max-width: 820px) {
    .gate-page--custom-layout .partner-card {
        grid-template-rows: 92px minmax(2.8em, auto) !important;
        min-height: 190px !important;
    }

    .gate-page--custom-layout .partner-card__logo-wrap,
    .gate-page--custom-layout .partner-card__top,
    .gate-page--custom-layout .partner-card > figure.wp-block-image,
    .gate-page--custom-layout .partner-card > .wp-block-image,
    .gate-page--custom-layout .partner-card figure.wp-block-image,
    .gate-page--custom-layout .partner-card .wp-block-image {
        height: 92px !important;
        min-height: 92px !important;
        max-height: 92px !important;
    }

    .gate-page--custom-layout .partner-card img {
        max-height: 64px !important;
        max-width: min(220px, 80%) !important;
    }
}

/* v0.6.7 Partner cards clickable in new tab -------------------------------
   Partner cards now ignore hidden old placeholder links and use the first real
   logo/name link as target. The whole card opens in a new browser tab, while
   hover effects remain disabled. */
.gate-page--custom-layout .partner-card.is-clickable-card {
    cursor: pointer;
}

.gate-page--custom-layout .partner-card.is-clickable-card:hover,
.gate-page--custom-layout .partner-card.is-clickable-card:focus-within,
.gate-page--custom-layout .partner-card:hover,
.gate-page--custom-layout .partner-card:focus-within {
    transform: none !important;
    border-color: var(--gate-border) !important;
    box-shadow: var(--gate-shadow) !important;
}

.gate-page--custom-layout .partner-card.is-clickable-card:focus {
    outline: 2px solid rgba(42, 126, 59, 0.35);
    outline-offset: 4px;
}

/* v0.6.8 Hero card link styling ------------------------------------------
   The right hero card may contain a link to the contact page. Long linked
   text should not become visually noisy with full paragraph underlining.
   Links in hero cards therefore look like calm card text; focus remains
   visible for keyboard users. */
.subpage-hero__image-card a,
.hero-card a,
.partner-hero__card a {
    color: inherit;
    text-decoration: none;
}

.subpage-hero__image-card a:hover,
.subpage-hero__image-card a:focus,
.hero-card a:hover,
.hero-card a:focus,
.partner-hero__card a:hover,
.partner-hero__card a:focus {
    color: var(--gate-primary);
    text-decoration: none;
}

.subpage-hero__image-card a:focus-visible,
.hero-card a:focus-visible,
.partner-hero__card a:focus-visible {
    outline: 2px solid rgba(42, 126, 59, 0.35);
    outline-offset: 3px;
    border-radius: 6px;
}


/* v0.6.9 Contact page without form ---------------------------------------
   Static contact page using cards and direct mail/tel links instead of an
   input form. The contact hero uses a soft background image treatment in the
   visual language of the existing site. */
.gate-page--custom-layout .contact-hero {
    min-height: 0 !important;
    display: block !important;
    align-items: initial !important;
    padding: clamp(34px, 4.4vw, 58px) 0 clamp(38px, 4.8vw, 62px) !important;
    background-image:
        linear-gradient(90deg,
            rgba(244, 247, 241, 0.96) 0%,
            rgba(255, 255, 255, 0.91) 48%,
            rgba(255, 255, 255, 0.84) 100%),
        url('assets/images/hero-greenhouse.jpg');
    background-size: cover;
    background-position: center center;
    border-bottom: 1px solid rgba(16, 32, 21, 0.06);
}

.gate-page--custom-layout .contact-hero .subpage-hero__grid {
    width: min(var(--gate-max), calc(100% - 48px)) !important;
    max-width: var(--gate-max) !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(270px, 0.78fr) !important;
    gap: clamp(30px, 4vw, 56px) !important;
    align-items: center !important;
}

.gate-page--custom-layout .contact-hero h1 {
    font-size: clamp(2.05rem, 2.85vw, 2.8rem) !important;
    line-height: 1.03;
    max-width: 720px;
    margin-bottom: 0.18em;
}

.gate-page--custom-layout .contact-hero .lead {
    font-size: clamp(0.94rem, 1.12vw, 1.04rem) !important;
    line-height: 1.55;
    max-width: 620px;
}

.gate-page--custom-layout .contact-hero__card {
    background: rgba(255,255,255,0.86);
    backdrop-filter: blur(6px);
}

.gate-page--custom-layout .contact-hero__linkline {
    margin-top: 0.9rem;
    font-weight: 800;
}

.gate-page--custom-layout .contact-hero__linkline a {
    text-decoration: none;
}

.gate-page--custom-layout .contact-hero__linkline a:hover,
.gate-page--custom-layout .contact-hero__linkline a:focus {
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.gate-page--custom-layout .contact-info-section {
    width: min(var(--gate-max), calc(100% - 40px)) !important;
    max-width: var(--gate-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: clamp(44px, 5vw, 72px);
    padding-bottom: clamp(44px, 5vw, 72px);
}

.contact-card-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(18px, 2vw, 24px);
    width: 100% !important;
    max-width: none !important;
}

.contact-card {
    padding: clamp(24px, 2.7vw, 34px);
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--gate-border);
    border-radius: var(--gate-radius);
    box-shadow: var(--gate-shadow);
    min-height: 100%;
}

.contact-card__label {
    display: inline-flex;
    width: fit-content;
    margin: 0 0 12px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(42, 126, 59, 0.08);
    color: var(--gate-primary);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.contact-card--primary {
    background: linear-gradient(135deg, rgba(42, 126, 59, 0.98), rgba(10, 35, 18, 0.98));
    color: #fff;
}

.contact-card--primary h3,
.contact-card--primary p,
.contact-card--primary a,
.contact-card--primary .contact-card__label {
    color: #fff;
}

.contact-card--primary .contact-card__label {
    background: rgba(255,255,255,0.14);
}

.contact-card--image {
    background-image:
        linear-gradient(135deg, rgba(245, 248, 242, 0.92), rgba(255,255,255,0.86)),
        url('assets/images/location-aerial.jpg');
    background-size: cover;
    background-position: center center;
}

.contact-card a {
    font-weight: 800;
    text-decoration: none;
}

.contact-card a:hover,
.contact-card a:focus {
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.contact-final-cta {
    margin-top: 0 !important;
    margin-bottom: clamp(54px, 6vw, 84px) !important;
}

@media (max-width: 820px) {
    .contact-card-grid {
        grid-template-columns: 1fr;
    }

    .gate-page--custom-layout .contact-hero .subpage-hero__grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 680px) {
    .gate-page--custom-layout .contact-info-section,
    .gate-page--custom-layout .contact-hero .subpage-hero__grid {
        width: min(var(--gate-max), calc(100% - 28px)) !important;
    }
}


/* v0.7.0 Contact page visual correction ----------------------------------
   Fixes relative image URLs from the CSS file, makes the background images
   visible, tightens the vertical rhythm, and arranges the contact cards in a
   calmer editorial grid. */
.gate-page--custom-layout .contact-hero {
    padding: clamp(30px, 3.4vw, 46px) 0 clamp(34px, 3.8vw, 52px) !important;
    background-image:
        linear-gradient(90deg,
            rgba(244, 247, 241, 0.94) 0%,
            rgba(255, 255, 255, 0.88) 47%,
            rgba(255, 255, 255, 0.74) 100%),
        url('../images/hero-greenhouse.jpg') !important;
    background-size: cover !important;
    background-position: center 46% !important;
}

.gate-page--custom-layout .contact-hero .subpage-hero__grid {
    width: min(1080px, calc(100% - 48px)) !important;
    gap: clamp(34px, 4vw, 58px) !important;
}

.gate-page--custom-layout .contact-hero__card {
    max-width: 390px;
    margin-left: auto;
}

.gate-page--custom-layout .contact-info-section {
    width: min(1080px, calc(100% - 48px)) !important;
    padding-top: clamp(34px, 3.8vw, 52px) !important;
    padding-bottom: clamp(40px, 4.5vw, 64px) !important;
}

.gate-page--custom-layout .contact-info-section .section-heading {
    max-width: 720px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    margin-bottom: clamp(22px, 2.6vw, 34px) !important;
}

/* Override WordPress constrained child widths inside the contact grid. */
.gate-page--custom-layout .contact-card-grid,
.gate-page--custom-layout .contact-card-grid.wp-block-group {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(18px, 1.8vw, 24px) !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    align-items: stretch !important;
}

.gate-page--custom-layout .contact-card-grid > .wp-block-group,
.gate-page--custom-layout .contact-card-grid > .contact-card,
.gate-page--custom-layout .contact-card-grid > * {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.gate-page--custom-layout .contact-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-height: 172px !important;
    padding: clamp(22px, 2.2vw, 30px) !important;
}

/* Existing card order: Adresse, Kontakt, Geschäftsstelle, Vorstand, Register, Standort. */
.gate-page--custom-layout .contact-card-grid > .contact-card:nth-child(1) {
    grid-column: span 1;
}

.gate-page--custom-layout .contact-card-grid > .contact-card:nth-child(2) {
    grid-column: span 2;
}

.gate-page--custom-layout .contact-card-grid > .contact-card:nth-child(3) {
    grid-column: span 1;
}

.gate-page--custom-layout .contact-card-grid > .contact-card:nth-child(4) {
    grid-column: span 2;
}

.gate-page--custom-layout .contact-card-grid > .contact-card:nth-child(5) {
    grid-column: span 1;
}

.gate-page--custom-layout .contact-card-grid > .contact-card:nth-child(6) {
    grid-column: span 2;
}

.gate-page--custom-layout .contact-card--primary {
    min-height: 172px !important;
}

.gate-page--custom-layout .contact-card--primary p {
    font-size: clamp(1.0rem, 1.2vw, 1.12rem);
    line-height: 1.55;
}

.gate-page--custom-layout .contact-card--image {
    background-image:
        linear-gradient(135deg, rgba(245, 248, 242, 0.90), rgba(255,255,255,0.78)),
        url('../images/location-aerial.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
}

.gate-page--custom-layout .contact-card h3 {
    margin-bottom: 0.35rem !important;
}

.gate-page--custom-layout .contact-card p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.gate-page--custom-layout .contact-final-cta {
    width: min(1080px, calc(100% - 48px)) !important;
}

@media (max-width: 980px) {
    .gate-page--custom-layout .contact-card-grid,
    .gate-page--custom-layout .contact-card-grid.wp-block-group {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .gate-page--custom-layout .contact-card-grid > .contact-card:nth-child(n) {
        grid-column: span 1;
    }

    .gate-page--custom-layout .contact-card-grid > .contact-card:nth-child(2),
    .gate-page--custom-layout .contact-card-grid > .contact-card:nth-child(6) {
        grid-column: span 2;
    }
}

@media (max-width: 720px) {
    .gate-page--custom-layout .contact-hero .subpage-hero__grid,
    .gate-page--custom-layout .contact-info-section,
    .gate-page--custom-layout .contact-final-cta {
        width: min(100% - 28px, 1080px) !important;
    }

    .gate-page--custom-layout .contact-hero__card {
        max-width: none;
        margin-left: 0;
    }

    .gate-page--custom-layout .contact-card-grid,
    .gate-page--custom-layout .contact-card-grid.wp-block-group {
        grid-template-columns: 1fr !important;
    }

    .gate-page--custom-layout .contact-card-grid > .contact-card:nth-child(n) {
        grid-column: span 1 !important;
    }
}

/* v0.7.1 Contact page fine tuning ----------------------------------------
   The contact page now uses the available width more calmly on large screens:
   - slightly wider content column
   - less dominant hero image
   - more balanced contact card grid
   - left column cards no longer look squeezed
   - primary contact card no longer overpowers the page */
.gate-page--custom-layout .contact-hero {
    padding: clamp(40px, 4.2vw, 62px) 0 clamp(42px, 4.4vw, 66px) !important;
    background-position: center 52% !important;
}

.gate-page--custom-layout .contact-hero::after {
    content: "";
    display: block;
    position: absolute;
    inset: auto 0 0 0;
    height: 1px;
    background: rgba(42, 126, 59, 0.09);
}

.gate-page--custom-layout .contact-hero .subpage-hero__grid,
.gate-page--custom-layout .contact-info-section {
    width: min(1080px, calc(100% - 64px)) !important;
    max-width: 1080px !important;
}

.gate-page--custom-layout .contact-hero .subpage-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 390px) !important;
    gap: clamp(44px, 5vw, 72px) !important;
}

.gate-page--custom-layout .contact-hero h1 {
    max-width: 620px;
}

.gate-page--custom-layout .contact-hero .lead {
    max-width: 610px;
}

.gate-page--custom-layout .contact-hero__card {
    max-width: 390px;
    padding: clamp(24px, 2.6vw, 32px) !important;
}

.gate-page--custom-layout .contact-info-section {
    padding-top: clamp(42px, 4.2vw, 62px) !important;
    padding-bottom: clamp(36px, 4vw, 58px) !important;
}

.gate-page--custom-layout .contact-info-section .section-heading {
    max-width: 700px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    margin-bottom: clamp(22px, 2.8vw, 34px) !important;
}

.gate-page--custom-layout .contact-info-section .section-heading h2 {
    margin-bottom: 0.2em;
}

.gate-page--custom-layout .contact-info-section .section-heading p:not(.eyebrow) {
    max-width: 680px;
}

.contact-card-grid {
    grid-template-columns: minmax(250px, 0.86fr) minmax(420px, 1.44fr) !important;
    gap: clamp(18px, 2.2vw, 26px) !important;
    align-items: stretch !important;
}

.contact-card {
    min-height: 148px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.contact-card h3 {
    margin-top: 0;
    margin-bottom: 0.38em;
}

.contact-card p {
    margin-bottom: 0;
}

.contact-card--primary {
    min-height: 148px;
    align-items: center;
    text-align: center;
    padding-top: clamp(22px, 2.4vw, 30px) !important;
    padding-bottom: clamp(22px, 2.4vw, 30px) !important;
}

.contact-card--primary .contact-card__label {
    margin-left: auto;
    margin-right: auto;
}

.contact-card--primary h3 {
    font-size: clamp(1.15rem, 1.45vw, 1.42rem);
}

.contact-card--primary p {
    font-size: clamp(0.95rem, 1.05vw, 1.05rem);
    line-height: 1.55;
}

.contact-card--image {
    min-height: 148px;
    background-position: center 42%;
}

.contact-final-cta {
    width: min(1080px, calc(100% - 64px)) !important;
    max-width: 1080px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Avoid extremely stretched page rhythm on very wide displays. */
@media (min-width: 1700px) {
    .gate-page--custom-layout .contact-hero .subpage-hero__grid,
    .gate-page--custom-layout .contact-info-section,
    .contact-final-cta {
        width: 1040px !important;
        max-width: 1040px !important;
    }

    .gate-page--custom-layout .contact-hero {
        padding-top: 54px !important;
        padding-bottom: 58px !important;
    }

    .gate-page--custom-layout .contact-info-section {
        padding-top: 54px !important;
    }
}

@media (max-width: 980px) {
    .contact-card-grid {
        grid-template-columns: 1fr !important;
    }

    .gate-page--custom-layout .contact-hero .subpage-hero__grid,
    .gate-page--custom-layout .contact-info-section,
    .contact-final-cta {
        width: min(var(--gate-max), calc(100% - 40px)) !important;
        max-width: var(--gate-max) !important;
    }

    .contact-card,
    .contact-card--primary,
    .contact-card--image {
        min-height: auto;
        align-items: flex-start;
        text-align: left;
    }

    .contact-card--primary .contact-card__label {
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 680px) {
    .gate-page--custom-layout .contact-hero .subpage-hero__grid,
    .gate-page--custom-layout .contact-info-section,
    .contact-final-cta {
        width: min(var(--gate-max), calc(100% - 28px)) !important;
    }

    .gate-page--custom-layout .contact-hero {
        padding-top: 34px !important;
        padding-bottom: 38px !important;
    }
}


/* v0.7.2 Contact page balancing -----------------------------------------
   Reduce visual imbalance on desktop:
   - right column cards no longer oversized
   - both columns use comparable widths
   - primary green card stays prominent but less dominant
   - hero side card is slightly narrower */
.gate-page--custom-layout .contact-hero .subpage-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 350px) !important;
    gap: clamp(36px, 4.2vw, 60px) !important;
}

.gate-page--custom-layout .contact-hero__card {
    max-width: 350px !important;
    padding: clamp(22px, 2.3vw, 28px) !important;
}

.gate-page--custom-layout .contact-info-section {
    width: min(1000px, calc(100% - 64px)) !important;
    max-width: 1000px !important;
}

.gate-page--custom-layout .contact-info-section .section-heading {
    max-width: 640px !important;
}

.gate-page--custom-layout .contact-card-grid,
.gate-page--custom-layout .contact-card-grid.wp-block-group,
.contact-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(18px, 2vw, 24px) !important;
}

.gate-page--custom-layout .contact-card-grid > .contact-card:nth-child(n) {
    grid-column: span 1 !important;
}

.gate-page--custom-layout .contact-card,
.contact-card {
    min-height: 156px !important;
    padding: clamp(20px, 2vw, 26px) !important;
}

.gate-page--custom-layout .contact-card--primary,
.contact-card--primary {
    min-height: 156px !important;
    background: linear-gradient(135deg, rgba(49, 139, 67, 0.96), rgba(22, 74, 37, 0.96)) !important;
    box-shadow: 0 14px 28px rgba(18, 53, 28, 0.16) !important;
}

.gate-page--custom-layout .contact-card--primary h3,
.contact-card--primary h3 {
    font-size: clamp(1.06rem, 1.15vw, 1.22rem) !important;
    margin-bottom: 0.3rem !important;
}

.gate-page--custom-layout .contact-card--primary p,
.contact-card--primary p {
    font-size: clamp(0.92rem, 0.98vw, 1rem) !important;
    line-height: 1.48 !important;
}

.gate-page--custom-layout .contact-card--image,
.contact-card--image {
    min-height: 156px !important;
}

.gate-page--custom-layout .contact-card h3,
.contact-card h3 {
    font-size: clamp(1.0rem, 1.08vw, 1.18rem) !important;
}

@media (min-width: 1700px) {
    .gate-page--custom-layout .contact-info-section,
    .contact-final-cta {
        width: min(980px, calc(100% - 72px)) !important;
        max-width: 980px !important;
    }
}

@media (max-width: 980px) {
    .gate-page--custom-layout .contact-info-section,
    .contact-final-cta {
        width: min(var(--gate-max), calc(100% - 40px)) !important;
        max-width: var(--gate-max) !important;
    }

    .gate-page--custom-layout .contact-card-grid,
    .gate-page--custom-layout .contact-card-grid.wp-block-group,
    .contact-card-grid {
        grid-template-columns: 1fr !important;
    }

    .gate-page--custom-layout .contact-card-grid > .contact-card:nth-child(n) {
        grid-column: span 1 !important;
    }

    .gate-page--custom-layout .contact-card,
    .gate-page--custom-layout .contact-card--primary,
    .gate-page--custom-layout .contact-card--image {
        min-height: auto !important;
    }
}

/* v0.7.3 Contact content refinement --------------------------------------
   Contact page content is simplified:
   - hero card contains direct contact data
   - section intro paragraph is removed
   - green card combines address and direct contact
   - register card is no longer part of the contact page
   - location card gets a clearer text and a link to Standort
   - four visible cards create an even layout */
.gate-page--custom-layout .contact-hero__card h2 {
    font-size: clamp(1.34rem, 1.75vw, 1.72rem) !important;
}

.gate-page--custom-layout .contact-hero__linkline {
    font-size: clamp(0.93rem, 1.02vw, 1rem) !important;
    line-height: 1.62 !important;
}

.gate-page--custom-layout .contact-info-section .section-heading {
    margin-bottom: clamp(18px, 2.2vw, 28px) !important;
}

.gate-page--custom-layout .contact-info-section .section-heading p:not(.eyebrow) {
    display: none !important;
}

.gate-page--custom-layout .contact-card-grid,
.gate-page--custom-layout .contact-card-grid.wp-block-group,
.contact-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(18px, 1.9vw, 24px) !important;
}

.gate-page--custom-layout .contact-card-grid > .contact-card:nth-child(n) {
    grid-column: span 1 !important;
}

.gate-page--custom-layout .contact-card,
.contact-card {
    min-height: 168px !important;
    align-items: flex-start !important;
    text-align: left !important;
    justify-content: center !important;
}

.gate-page--custom-layout .contact-card--primary,
.contact-card--primary {
    min-height: 196px !important;
    background: linear-gradient(135deg, rgba(47, 133, 62, 0.96), rgba(25, 86, 41, 0.96)) !important;
    color: #fff !important;
}

.gate-page--custom-layout .contact-card--primary .contact-card__label,
.contact-card--primary .contact-card__label {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.gate-page--custom-layout .contact-card--primary p + p,
.contact-card--primary p + p {
    margin-top: 0.85rem !important;
}

.gate-page--custom-layout .contact-card--primary a,
.contact-card--primary a {
    color: #fff !important;
    text-decoration: none !important;
}

.gate-page--custom-layout .contact-card--primary a:hover,
.gate-page--custom-layout .contact-card--primary a:focus,
.contact-card--primary a:hover,
.contact-card--primary a:focus {
    text-decoration: underline !important;
    text-underline-offset: 0.18em;
}

.gate-page--custom-layout .contact-card--location {
    min-height: 196px !important;
}

.gate-page--custom-layout .contact-card--location .contact-card__link {
    margin-top: 0.85rem !important;
    font-weight: 800;
}

.gate-page--custom-layout .contact-card--location .contact-card__link a {
    text-decoration: none;
}

.gate-page--custom-layout .contact-card--location .contact-card__link a:hover,
.gate-page--custom-layout .contact-card--location .contact-card__link a:focus {
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

@media (max-width: 980px) {
    .gate-page--custom-layout .contact-card-grid,
    .gate-page--custom-layout .contact-card-grid.wp-block-group,
    .contact-card-grid {
        grid-template-columns: 1fr !important;
    }

    .gate-page--custom-layout .contact-card,
    .gate-page--custom-layout .contact-card--primary,
    .gate-page--custom-layout .contact-card--location {
        min-height: auto !important;
    }
}

/* v0.7.4 Contact card order and primary alignment ------------------------
   Standort card is shown on the left and the green contact/address card on
   the right. These rules also fix existing pages where the older pattern was
   already inserted. The green card content is centered again. */
.gate-page--custom-layout .contact-card-grid,
.gate-page--custom-layout .contact-card-grid.wp-block-group,
.contact-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.gate-page--custom-layout .contact-card-grid > .contact-card--location,
.contact-card-grid > .contact-card--location {
    order: 1 !important;
}

.gate-page--custom-layout .contact-card-grid > .contact-card--primary,
.contact-card-grid > .contact-card--primary {
    order: 2 !important;
}

.gate-page--custom-layout .contact-card-grid > .contact-card:nth-child(3),
.contact-card-grid > .contact-card:nth-child(3) {
    order: 3 !important;
}

.gate-page--custom-layout .contact-card-grid > .contact-card:nth-child(4),
.contact-card-grid > .contact-card:nth-child(4) {
    order: 4 !important;
}

.gate-page--custom-layout .contact-card--primary,
.contact-card--primary {
    align-items: center !important;
    text-align: center !important;
}

.gate-page--custom-layout .contact-card--primary .contact-card__label,
.contact-card--primary .contact-card__label {
    margin-left: auto !important;
    margin-right: auto !important;
}

.gate-page--custom-layout .contact-card--primary h3,
.gate-page--custom-layout .contact-card--primary p,
.contact-card--primary h3,
.contact-card--primary p {
    text-align: center !important;
    width: 100%;
}

@media (max-width: 980px) {
    .gate-page--custom-layout .contact-card-grid,
    .gate-page--custom-layout .contact-card-grid.wp-block-group,
    .contact-card-grid {
        grid-template-columns: 1fr !important;
    }
}

/* v0.7.5 Contact primary label centering ---------------------------------
   The label inside the green contact/address card was stretched by generic
   paragraph rules. This override restores a compact pill and centers it. */
.gate-page--custom-layout .contact-card--primary .contact-card__label,
.contact-card--primary .contact-card__label {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    max-width: max-content !important;
    min-width: 0 !important;
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    text-align: center !important;
    white-space: nowrap !important;
}

.gate-page--custom-layout .contact-card--primary .contact-card__label + h3,
.contact-card--primary .contact-card__label + h3 {
    margin-top: 0.28rem !important;
}

/* Keep the rest of the green card centered, but do not stretch the label. */
.gate-page--custom-layout .contact-card--primary > p:not(.contact-card__label),
.contact-card--primary > p:not(.contact-card__label),
.gate-page--custom-layout .contact-card--primary h3,
.contact-card--primary h3 {
    width: 100% !important;
    text-align: center !important;
}

/* v0.7.6 Aktuelles page ---------------------------------------------------
   Flexible news page with card-based editorial layout. News cards can be
   duplicated in the WordPress editor without requiring old news migration. */
.gate-page--custom-layout .news-hero {
    min-height: 0 !important;
    display: block !important;
    padding: clamp(42px, 4.5vw, 66px) 0 clamp(44px, 4.8vw, 70px) !important;
    background-image:
        linear-gradient(90deg,
            rgba(244, 247, 241, 0.965) 0%,
            rgba(255, 255, 255, 0.93) 54%,
            rgba(255, 255, 255, 0.86) 100%),
        url('../images/location-aerial.jpg') !important;
    background-size: cover !important;
    background-position: center 42% !important;
    border-bottom: 1px solid rgba(42, 126, 59, 0.10);
}

.gate-page--custom-layout .news-hero .subpage-hero__grid,
.gate-page--custom-layout .news-card-section,
.gate-page--custom-layout .news-final-cta {
    width: min(1040px, calc(100% - 64px)) !important;
    max-width: 1040px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.gate-page--custom-layout .news-hero .subpage-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px) !important;
    gap: clamp(36px, 4.2vw, 62px) !important;
    align-items: center !important;
}

.gate-page--custom-layout .news-hero h1 {
    max-width: 680px;
    font-size: clamp(2.1rem, 2.85vw, 2.85rem) !important;
    line-height: 1.04;
}

.gate-page--custom-layout .news-hero .lead {
    max-width: 620px;
}

.gate-page--custom-layout .news-hero__card {
    max-width: 360px;
    background: rgba(255,255,255,0.88);
    backdrop-filter: blur(6px);
}

.gate-page--custom-layout .news-card-section {
    padding-top: clamp(44px, 4.8vw, 68px);
    padding-bottom: clamp(42px, 4.6vw, 64px);
}

.gate-page--custom-layout .news-card-section .section-heading {
    max-width: 720px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    margin-bottom: clamp(24px, 3vw, 36px) !important;
}

.gate-page--custom-layout .news-card-grid,
.gate-page--custom-layout .news-card-grid.wp-block-group,
.news-card-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(18px, 2vw, 24px) !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.gate-page--custom-layout .news-card-grid > *,
.news-card-grid > * {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.gate-page--custom-layout .news-card,
.news-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    min-height: 235px;
    padding: clamp(24px, 2.5vw, 32px);
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--gate-border);
    border-radius: var(--gate-radius);
    box-shadow: var(--gate-shadow);
}

.gate-page--custom-layout .news-card--featured,
.news-card--featured {
    border-top: 5px solid var(--gate-primary);
}

.gate-page--custom-layout .news-card--empty,
.news-card--empty {
    background:
        linear-gradient(135deg, rgba(246, 249, 244, 0.96), rgba(255,255,255,0.96));
    border-style: dashed;
}

.gate-page--custom-layout .news-card__meta,
.news-card__meta {
    display: inline-flex;
    width: fit-content;
    margin: 0 0 14px !important;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(42, 126, 59, 0.08);
    color: var(--gate-primary);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.gate-page--custom-layout .news-card h3,
.news-card h3 {
    margin-top: 0 !important;
    margin-bottom: 0.45rem !important;
    font-size: clamp(1.18rem, 1.35vw, 1.42rem);
    line-height: 1.18;
}

.gate-page--custom-layout .news-card p,
.news-card p {
    margin-top: 0 !important;
}

.gate-page--custom-layout .news-card__note,
.news-card__note {
    margin-top: auto !important;
    padding-top: 1rem;
    color: var(--gate-muted);
    font-weight: 700;
}

.gate-page--custom-layout .news-final-cta {
    margin-top: 0 !important;
    margin-bottom: clamp(54px, 6vw, 84px) !important;
}

@media (max-width: 980px) {
    .gate-page--custom-layout .news-hero .subpage-hero__grid,
    .gate-page--custom-layout .news-card-section,
    .gate-page--custom-layout .news-final-cta {
        width: min(var(--gate-max), calc(100% - 40px)) !important;
        max-width: var(--gate-max) !important;
    }

    .gate-page--custom-layout .news-card-grid,
    .gate-page--custom-layout .news-card-grid.wp-block-group,
    .news-card-grid {
        grid-template-columns: 1fr !important;
    }

    .gate-page--custom-layout .news-card,
    .news-card {
        min-height: auto;
    }
}

@media (max-width: 680px) {
    .gate-page--custom-layout .news-hero .subpage-hero__grid,
    .gate-page--custom-layout .news-card-section,
    .gate-page--custom-layout .news-final-cta {
        width: min(var(--gate-max), calc(100% - 28px)) !important;
    }

    .gate-page--custom-layout .news-hero {
        padding-top: 34px !important;
        padding-bottom: 40px !important;
    }
}

/* v0.7.7 Aktuelles card hover and full-card links -------------------------
   News cards receive a calm hover effect. If a news card contains a link, the
   whole card becomes clickable through the existing card-link script. */
.gate-page--custom-layout .news-card,
.news-card {
    position: relative;
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease;
}

.gate-page--custom-layout .news-card:hover,
.gate-page--custom-layout .news-card:focus-within,
.news-card:hover,
.news-card:focus-within {
    transform: translateY(-3px);
    border-color: rgba(42, 126, 59, 0.24);
    box-shadow: 0 22px 42px rgba(18, 53, 28, 0.13);
}

.gate-page--custom-layout .news-card.is-clickable-card,
.news-card.is-clickable-card {
    cursor: pointer;
}

.gate-page--custom-layout .news-card.is-clickable-card:focus,
.news-card.is-clickable-card:focus {
    outline: 2px solid rgba(42, 126, 59, 0.35);
    outline-offset: 4px;
}

.gate-page--custom-layout .news-card a,
.news-card a {
    position: relative;
    z-index: 2;
}

/* Make a linked news card visually understandable without making every text
   link look underlined by default. */
.gate-page--custom-layout .news-card__link,
.news-card__link {
    margin-top: auto !important;
    padding-top: 1rem;
    font-weight: 800;
}

.gate-page--custom-layout .news-card__link a,
.news-card__link a {
    text-decoration: none;
}

.gate-page--custom-layout .news-card__link a:hover,
.gate-page--custom-layout .news-card__link a:focus,
.news-card__link a:hover,
.news-card__link a:focus {
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

@media (prefers-reduced-motion: reduce) {
    .gate-page--custom-layout .news-card,
    .news-card {
        transition: none;
    }

    .gate-page--custom-layout .news-card:hover,
    .gate-page--custom-layout .news-card:focus-within,
    .news-card:hover,
    .news-card:focus-within {
        transform: none;
    }
}

/* v0.7.8 Aktuelles heading links -----------------------------------------
   When a news heading is linked, avoid the default underline and use a small
   arrow marker instead, matching the visual language of the start page cards. */
.gate-page--custom-layout .news-card h3 a,
.news-card h3 a {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 0.34em;
    color: inherit !important;
    text-decoration: none !important;
}

.gate-page--custom-layout .news-card h3 a::after,
.news-card h3 a::after {
    content: "→";
    display: inline-block;
    font-size: 0.82em;
    line-height: 1;
    color: var(--gate-primary);
    transform: translateY(-0.02em);
    transition: transform 180ms ease;
}

.gate-page--custom-layout .news-card:hover h3 a::after,
.gate-page--custom-layout .news-card:focus-within h3 a::after,
.news-card:hover h3 a::after,
.news-card:focus-within h3 a::after {
    transform: translate(0.16em, -0.02em);
}

/* Do not underline linked headings on hover. Keep the focus visible by using
   an outline instead of changing the title typography. */
.gate-page--custom-layout .news-card h3 a:hover,
.gate-page--custom-layout .news-card h3 a:focus,
.news-card h3 a:hover,
.news-card h3 a:focus {
    text-decoration: none !important;
}

.gate-page--custom-layout .news-card h3 a:focus-visible,
.news-card h3 a:focus-visible {
    outline: 2px solid rgba(42, 126, 59, 0.35);
    outline-offset: 4px;
    border-radius: 6px;
}

/* Optional regular text links inside news cards stay calm as well. */
.gate-page--custom-layout .news-card p a:not(.wp-block-button__link),
.news-card p a:not(.wp-block-button__link) {
    text-decoration: none;
    font-weight: 800;
}

.gate-page--custom-layout .news-card p a:not(.wp-block-button__link):hover,
.gate-page--custom-layout .news-card p a:not(.wp-block-button__link):focus,
.news-card p a:not(.wp-block-button__link):hover,
.news-card p a:not(.wp-block-button__link):focus {
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

/* v0.7.9 Legal pages ------------------------------------------------------
   Simple, readable layout for Impressum and Datenschutz. No cards, no large
   visual effects; the focus is on clean typography and legal readability. */
.gate-page--custom-layout .legal-hero {
    min-height: 0 !important;
    display: block !important;
    padding: clamp(34px, 4vw, 54px) 0 clamp(30px, 3.6vw, 46px) !important;
    background:
        linear-gradient(90deg,
            rgba(244, 247, 241, 0.98) 0%,
            rgba(255, 255, 255, 0.94) 64%,
            rgba(255, 255, 255, 0.90) 100%);
    border-bottom: 1px solid rgba(42, 126, 59, 0.10);
}

.gate-page--custom-layout .legal-hero__inner,
.gate-page--custom-layout .legal-content {
    width: min(860px, calc(100% - 64px)) !important;
    max-width: 860px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.gate-page--custom-layout .legal-hero h1 {
    margin-bottom: 0.18em;
    font-size: clamp(2.0rem, 2.6vw, 2.65rem) !important;
    line-height: 1.04;
}

.gate-page--custom-layout .legal-hero .lead {
    max-width: 640px;
    font-size: clamp(0.94rem, 1.05vw, 1.02rem);
    line-height: 1.55;
}

.gate-page--custom-layout .legal-content {
    padding-top: clamp(38px, 4.5vw, 62px);
    padding-bottom: clamp(56px, 6vw, 90px);
}

.gate-page--custom-layout .legal-content h2 {
    margin-top: clamp(1.55rem, 2.5vw, 2.2rem);
    margin-bottom: 0.45rem;
    font-size: clamp(1.22rem, 1.55vw, 1.48rem);
    line-height: 1.18;
}

.gate-page--custom-layout .legal-content h2:first-child {
    margin-top: 0;
}

.gate-page--custom-layout .legal-content p,
.gate-page--custom-layout .legal-content li {
    font-size: 0.96rem;
    line-height: 1.72;
}

.gate-page--custom-layout .legal-content ul {
    margin-top: 0.4rem;
    margin-bottom: 1.2rem;
    padding-left: 1.35rem;
}

.gate-page--custom-layout .legal-content a {
    font-weight: 800;
    text-decoration: none;
}

.gate-page--custom-layout .legal-content a:hover,
.gate-page--custom-layout .legal-content a:focus {
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.gate-page--custom-layout .legal-note {
    margin-top: clamp(2rem, 3vw, 2.8rem) !important;
    padding: 16px 18px;
    border-left: 4px solid var(--gate-primary);
    background: rgba(42, 126, 59, 0.06);
    border-radius: 0 12px 12px 0;
    color: var(--gate-muted);
    font-weight: 700;
}

@media (max-width: 680px) {
    .gate-page--custom-layout .legal-hero__inner,
    .gate-page--custom-layout .legal-content {
        width: min(100% - 28px, 860px) !important;
    }

    .gate-page--custom-layout .legal-content p,
    .gate-page--custom-layout .legal-content li {
        font-size: 0.94rem;
        line-height: 1.65;
    }
}


/* v0.8.0 Mobile release candidate ----------------------------------------
   Final mobile fixes after review on a real smartphone:
   - force Contact and Aktuelles hero columns into a true one-column layout
   - prevent WordPress column flex-basis values from squeezing the text column
   - slightly reduce the Startseite hero headline so long German words wrap
     naturally instead of breaking in the middle */
@media (max-width: 720px) {
    .gate-page--custom-layout .contact-hero .subpage-hero__grid,
    .gate-page--custom-layout .news-hero .subpage-hero__grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 22px !important;
        width: min(100% - 28px, var(--gate-max)) !important;
        max-width: var(--gate-max) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .gate-page--custom-layout .contact-hero .subpage-hero__grid > .wp-block-column,
    .gate-page--custom-layout .news-hero .subpage-hero__grid > .wp-block-column {
        flex: none !important;
        flex-basis: auto !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .gate-page--custom-layout .contact-hero__card,
    .gate-page--custom-layout .news-hero__card {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        justify-self: stretch !important;
        box-sizing: border-box !important;
    }

    .gate-page--custom-layout .contact-hero h1,
    .gate-page--custom-layout .contact-hero .lead,
    .gate-page--custom-layout .news-hero h1,
    .gate-page--custom-layout .news-hero .lead {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    .gate-page--custom-layout .contact-hero,
    .gate-page--custom-layout .news-hero {
        padding-top: 32px !important;
        padding-bottom: 36px !important;
    }
}

@media (max-width: 620px) {
    .hero-section h1 {
        font-size: clamp(1.85rem, 8vw, 2.12rem) !important;
        line-height: 1.04 !important;
        letter-spacing: -0.035em !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }

    .hero-section .lead {
        font-size: 0.94rem !important;
        line-height: 1.5 !important;
    }
}