/*
 * =============================================================
 *  International Club Berlin — CI Override Stylesheet
 *  Version 3.0 | April 2026  —  British Country Club Edition
 *
 *  CI Color Palette:
 *    Heritage Green  #2F3D2C  (primary background, headers)
 *    Ivory Beige     #FEF9F3  (primary light background)
 *    Alpine Ochre    #F8D794  (accents, CTAs, highlights)
 *    Warm Limestone  #73351C  (secondary buttons, overlays)
 *
 *  Typography:
 *    H1, H2  → Charter (Regular 400 / replaces NunitoSans)
 *    H3      → Inter Medium 500
 *    Body    → Inter Light 300
 * =============================================================
 */

/* ─────────────────────────────────────────
   FONT FACES
───────────────────────────────────────── */

@font-face {
    font-family: 'Charter';
    src: url('./Fonts/charter/webfonts/charter_regular-webfont.woff') format('woff'),
         url('./Fonts/charter/ttf/Charter Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Charter';
    src: url('./Fonts/charter/webfonts/charter_italic-webfont.woff') format('woff'),
         url('./Fonts/charter/ttf/Charter Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Charter';
    src: url('./Fonts/charter/webfonts/charter_bold-webfont.woff') format('woff'),
         url('./Fonts/charter/ttf/Charter Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('./Fonts/Inter/web/Inter-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('./Fonts/Inter/web/Inter-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('./Fonts/Inter/web/Inter-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* ─────────────────────────────────────────
   CSS CUSTOM PROPERTIES
───────────────────────────────────────── */

:root {
    --icb-green:       #2F3D2C;
    --icb-beige:       #FEF9F3;
    --icb-ochre:       #F8D794;
    --icb-brown:       #73351C;
    --icb-green-hover: #3d5239;
    --icb-brown-hover: #5a2a15;
    --font-serif:      'Charter', Georgia, 'Times New Roman', serif;
    --font-sans:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ─────────────────────────────────────────
   BASE  — generous spacing, refined feel
───────────────────────────────────────── */

html, body {
    background-color: var(--icb-beige) !important;
    color:            var(--icb-green) !important;
    font-family:      var(--font-sans)  !important;
    font-weight:      300               !important;
    scroll-behavior:  smooth            !important;
}

/* Smooth fade-in for page content */
.wrapper {
    animation: ccFadeIn 0.6s ease-out !important;
}
@keyframes ccFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Remove WP emoji images */
img.wp-smiley,
img.emoji {
    display: none !important;
}

/* ─────────────────────────────────────────
   TYPOGRAPHY — British club elegance
───────────────────────────────────────── */

h1, h2 {
    font-family:    var(--font-serif) !important;
    font-weight:    400               !important;
    text-transform: none              !important;
    color:          var(--icb-green)  !important;
    letter-spacing: 0.04em            !important;
    line-height:    1.25              !important;
}

h3 {
    font-family:    var(--font-sans)  !important;
    font-weight:    500               !important;
    color:          var(--icb-green)  !important;
    letter-spacing: 0.03em            !important;
}

h4, h5, h6 {
    font-family: var(--font-sans) !important;
    font-weight: 500              !important;
}

p {
    font-family: var(--font-sans) !important;
    font-weight: 300              !important;
    color:       var(--icb-green) !important;
    font-size:   1rem             !important;
    line-height: 1.85             !important;
}

p strong {
    font-family: var(--font-sans) !important;
    font-weight: 500              !important;
}

a {
    color: var(--icb-green) !important;
}
a:hover {
    color: var(--icb-brown) !important;
}

/* Remove headline decoration ornament (CI uses clean Charter headings) */
.textBox_whithIconHead h2::after,
.pageIntroHead.membersIntroHead h1::after,
.pageIntro.pageIntroSmall h1::after,
h1.withDec::after {
    display: none !important;
}

/* Elegant gold divider line below section headings */
.textBox_whithIconHead h2 {
    margin-bottom:  36px              !important;
    padding-bottom: 20px              !important;
    position:       relative          !important;
}
.textBox_whithIconHead h2::before {
    content:    ''                     !important;
    display:    block                  !important;
    position:   absolute               !important;
    bottom:     0                      !important;
    left:       50%                    !important;
    transform:  translateX(-50%)       !important;
    width:      60px                   !important;
    height:     1px                    !important;
    background: var(--icb-ochre)      !important;
}

/* Generous section spacing — hallmark of premium club sites */
.panel-grid {
    /* extra breathing room between major sections */
}
.so-panel {
    /* refined inner spacing */
}
.textBox_whithIconHead.container.w-60 {
    max-width: 780px !important;
}

/* ─────────────────────────────────────────
   HEADER — slim, refined club bar
───────────────────────────────────────── */

.header {
    background:    var(--icb-green) !important;
    height:        80px            !important;
    border-bottom: none            !important;
    box-shadow:    0 1px 0 rgba(248, 215, 148, 0.12) !important;
}

.menuHeader {
    height:     80px             !important;
    background: var(--icb-green) !important;
}

a.mainHeadLogoLink img,
a.subHeadLogoLink  img {
    /* No filter — SVG already has white circle + dark green monogram, correct on green header */
}

/* ─────────────────────────────────────────
   HAMBURGER BUTTON
───────────────────────────────────────── */

.outer-menu .hamburger > div,
.outer-menu .hamburger > div::before,
.outer-menu .hamburger > div::after {
    background: var(--icb-beige) !important;
}

.outer-menu.sticky .hamburger > div,
.outer-menu.sticky .hamburger > div::before,
.outer-menu.sticky .hamburger > div::after {
    background: var(--icb-beige) !important;
}

.outer-menu .checkbox-toggle:checked + .hamburger > div {
    background: var(--icb-beige) !important;
}
.outer-menu .checkbox-toggle:checked + .hamburger > div::before,
.outer-menu .checkbox-toggle:checked + .hamburger > div::after {
    background: var(--icb-beige) !important;
}

/* ─────────────────────────────────────────
   SIDEBAR NAVIGATION (V2 — replaces overlay)
───────────────────────────────────────── */

/* --- Backdrop --- */
.outer-menu .menu {
    position: fixed  !important;
    top:    0        !important;
    left:   0        !important;
    width:  100vw    !important;
    height: 100vh    !important;
    display: block   !important;
    z-index: 999     !important;
}
/* Dim backdrop when open */
.outer-menu .checkbox-toggle:checked ~ .menu {
    background: rgba(0, 0, 0, 0.45) !important;
}

/* --- Sidebar panel --- */
.outer-menu .menu > div {
    position:    fixed           !important;
    top:         0               !important;
    left:        0               !important;
    width:       340px           !important;
    max-width:   85vw            !important;
    height:      100vh           !important;
    background:  var(--icb-green) !important;
    border-bottom: none          !important;
    border-right: 3px solid var(--icb-ochre) !important;
    overflow-y:  auto            !important;
    overflow-x:  hidden          !important;
    transform:   translateX(-100%) !important;
    transition:  transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    z-index:     1000            !important;
    display:     flex            !important;
    flex-direction: column       !important;
}
/* Slide in when open */
.outer-menu .checkbox-toggle:checked ~ .menu > div {
    transform: translateX(0) !important;
    top:       0             !important;
}

/* --- Inner content wrapper --- */
.outer-menu .menu > div > div {
    display:        flex            !important;
    flex-direction: column          !important;
    height:         100%            !important;
    text-align:     left            !important;
}

/* --- Sidebar header (logo area) --- */
.outer-menu .menu .menuHeader {
    height:     auto             !important;
    min-height: 80px             !important;
    flex-shrink: 0               !important;
    border-bottom: 1px solid rgba(248, 215, 148, 0.15) !important;
    padding: 0                   !important;
}
/* Hide redundant logo columns in sidebar header */
.outer-menu .menu .menuHeader .col-3 {
    display: none !important;
}
.outer-menu .menu .menuHeader .col-6 {
    flex:       0 0 100%   !important;
    max-width:  100%       !important;
    padding:    16px 24px  !important;
}
.outer-menu .menu .menuHeader .col-6 img.logo-img {
    max-height: 48px !important;
}

/* --- Menu body: stack columns vertically --- */
.outer-menu .menu .container.pt-5.pb-5 {
    padding:    0 !important;
    flex:       1 1 auto    !important;
    overflow-y: auto        !important;
}
.outer-menu .menu .container.pt-5.pb-5 > .row,
.outer-menu .menu .container.pt-5.pb-5 > .row.d-flex.flex-row {
    display:         block  !important;
    margin:          0      !important;
    padding:         16px 0 !important;
}
/* Each menu column: full width, stacked */
.outer-menu .menu .container.pt-5.pb-5 > .row > .col-12,
.outer-menu .menu .container.pt-5.pb-5 > .row > [class*="col-"] {
    flex:       none       !important;
    max-width:  100%       !important;
    width:      100%       !important;
    padding:    0          !important;
    margin:     0          !important;
    display:    block      !important;
}

/* --- Top-level menu items --- */
ul.headerMenu {
    padding:       0       !important;
    margin:        0       !important;
    list-style:    none    !important;
}
ul.headerMenu > li {
    border-bottom: 1px solid rgba(254, 249, 243, 0.08) !important;
}
ul.headerMenu > li > a,
.outer-menu .menu > div > div > ul > li > a {
    color:          var(--icb-beige)  !important;
    font-family:    var(--font-sans)  !important;
    font-weight:    500               !important;
    text-transform: uppercase         !important;
    font-size:      0.85rem           !important;
    letter-spacing: 0.08em            !important;
    display:        block             !important;
    padding:        14px 28px         !important;
    text-decoration: none             !important;
    transition:     background 0.2s ease, color 0.2s ease !important;
}
ul.headerMenu > li > a:hover,
.outer-menu .menu > div > div > ul > li > a:hover {
    color:      var(--icb-ochre) !important;
    background: rgba(254, 249, 243, 0.05) !important;
}

/* --- Sub-menu items --- */
ul.headerMenu .sub-menu {
    padding:    0 0 8px 0  !important;
    margin:     0          !important;
    list-style: none       !important;
}
ul.headerMenu li li a {
    color:          rgba(254, 249, 243, 0.7) !important;
    font-family:    var(--font-sans)         !important;
    font-weight:    300                      !important;
    text-transform: none                     !important;
    font-size:      0.82rem                  !important;
    display:        block                    !important;
    padding:        6px 28px 6px 42px        !important;
    text-decoration: none                    !important;
    transition:     color 0.2s ease          !important;
}
ul.headerMenu li li a:hover {
    color: var(--icb-ochre) !important;
}

/* --- Footer links (Kontakt, Impressum, etc.) --- */
.headerDark {
    background:  rgba(0, 0, 0, 0.25)  !important;
    margin-top:  auto                  !important;
    flex-shrink: 0                     !important;
    border-top:  1px solid rgba(254, 249, 243, 0.1) !important;
}
ul.headerMenuDark {
    padding:     0          !important;
    margin:      0          !important;
    list-style:  none       !important;
    display:     flex       !important;
    flex-wrap:   wrap       !important;
    gap:         0          !important;
}
ul.headerMenuDark li {
    flex: 0 0 50%           !important;
}
ul.headerMenuDark li a {
    color:          rgba(254, 249, 243, 0.6) !important;
    font-family:    var(--font-sans)         !important;
    font-weight:    300                      !important;
    text-transform: none                     !important;
    font-size:      0.78rem                  !important;
    display:        block                    !important;
    padding:        8px 20px                 !important;
    text-decoration: none                    !important;
}
ul.headerMenuDark li a:hover {
    color: var(--icb-beige) !important;
}

/* --- Scrollbar styling for sidebar --- */
.outer-menu .menu > div::-webkit-scrollbar {
    width: 4px;
}
.outer-menu .menu > div::-webkit-scrollbar-track {
    background: transparent;
}
.outer-menu .menu > div::-webkit-scrollbar-thumb {
    background: rgba(248, 215, 148, 0.25);
    border-radius: 2px;
}

/* --- Mobile adjustments --- */
@media (max-width: 768px) {
    .outer-menu .menu > div {
        width: 300px !important;
    }
    ul.headerMenu > li > a {
        padding: 12px 20px !important;
        font-size: 0.82rem !important;
    }
    ul.headerMenu li li a {
        padding: 5px 20px 5px 36px !important;
    }
}

/* ─────────────────────────────────────────
   HERO SECTION — grand country club entrance
───────────────────────────────────────── */

.pageIntro::after {
    background: linear-gradient(
        to bottom,
        rgba(47, 61, 44, 0.25) 0%,
        rgba(47, 61, 44, 0.45) 50%,
        rgba(47, 61, 44, 0.6)  100%
    ) !important;
}

.pageIntroHead h1 {
    font-family:    var(--font-serif)  !important;
    font-weight:    400                !important;
    text-transform: uppercase          !important;
    font-size:      clamp(2.2rem, 5vw, 4rem) !important;
    letter-spacing: 0.14em             !important;
    color:          var(--icb-beige)   !important;
    text-shadow:    0 2px 20px rgba(0, 0, 0, 0.15) !important;
}

.pageIntroHead h2 {
    font-family:    var(--font-serif)  !important;
    font-weight:    400                !important;
    font-style:     italic             !important;
    text-transform: none               !important;
    font-size:      clamp(1rem, 2.2vw, 1.5rem) !important;
    letter-spacing: 0.06em             !important;
    color:          var(--icb-beige)   !important;
    opacity:        0.9;
    margin-top:     12px               !important;
}

/* Gold accent line between H1 and H2 in hero */
.pageIntroHead h1::after {
    content:    ''                      !important;
    display:    block                   !important;
    width:      80px                    !important;
    height:     1px                     !important;
    background: var(--icb-ochre)       !important;
    margin:     20px auto 0            !important;
    opacity:    0.7                     !important;
}

/* ─────────────────────────────────────────
   BUTTONS
───────────────────────────────────────── */

/* Gold button — refined club CTA */
.goldButton .ow-button-base a {
    background:     var(--icb-ochre)   !important;
    color:          var(--icb-green)   !important;
    font-family:    var(--font-sans)   !important;
    font-size:      0.78rem            !important;
    font-weight:    500                !important;
    letter-spacing: 0.14em             !important;
    text-transform: uppercase          !important;
    border-radius:  0                  !important;
    border:         none               !important;
    text-shadow:    none               !important;
    padding:        16px 48px          !important;
    transition:     all 0.35s ease     !important;
}
.goldButton .ow-button-base a:hover {
    background:  var(--icb-brown)  !important;
    color:       var(--icb-beige)  !important;
    box-shadow:  0 4px 16px rgba(115, 53, 28, 0.2) !important;
}

/* Outlined button — default: dark scheme (visible on Ivory Beige backgrounds) */
.darkGreyButton .ow-button-base a {
    background:     transparent                       !important;
    color:          var(--icb-green)                  !important;
    border:         1px solid rgba(47, 61, 44, 0.65)  !important;
    font-family:    var(--font-sans)                  !important;
    font-size:      0.82rem                           !important;
    font-weight:    500                               !important;
    letter-spacing: 0.12em                            !important;
    text-transform: uppercase                         !important;
    border-radius:  0                                 !important;
    text-shadow:    none                              !important;
    padding:        14px 38px                         !important;
    transition:     background 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}
.darkGreyButton .ow-button-base a:hover {
    background:   var(--icb-green)  !important;
    color:        var(--icb-beige)  !important;
    border-color: var(--icb-green)  !important;
}

/* Override: light scheme when inside a dark section */
.darkGreenBG .darkGreyButton .ow-button-base a,
.darkGreenWithBackgoundBG .darkGreyButton .ow-button-base a,
.innerIntro .darkGreyButton .ow-button-base a,
.HomeBoxAbsolute .darkGreyButton .ow-button-base a,
.pageIntroAktuell .darkGreyButton .ow-button-base a {
    color:  var(--icb-beige)                    !important;
    border: 1px solid rgba(254,249,243,0.55)    !important;
}
.darkGreenBG .darkGreyButton .ow-button-base a:hover,
.darkGreenWithBackgoundBG .darkGreyButton .ow-button-base a:hover,
.innerIntro .darkGreyButton .ow-button-base a:hover,
.HomeBoxAbsolute .darkGreyButton .ow-button-base a:hover,
.pageIntroAktuell .darkGreyButton .ow-button-base a:hover {
    background:   var(--icb-beige)  !important;
    color:        var(--icb-green)  !important;
    border-color: var(--icb-beige)  !important;
}

/* Dark / Eat & Drink button */
.blackButton .ow-button-base a {
    background:     var(--icb-brown) !important;
    color:          var(--icb-beige) !important;
    font-family:    var(--font-sans) !important;
    font-size:      0.82rem          !important;
    font-weight:    500              !important;
    letter-spacing: 0.12em           !important;
    text-transform: uppercase        !important;
    border-radius:  0                !important;
    border:         none             !important;
    text-shadow:    none             !important;
    padding:        14px 38px        !important;
    transition:     background 0.3s ease !important;
}
.blackButton .ow-button-base a:hover {
    background: var(--icb-brown-hover) !important;
}

/* Bootstrap primary button */
.btn-primary {
    background:     var(--icb-ochre) !important;
    color:          var(--icb-green) !important;
    border:         none             !important;
    border-radius:  0                !important;
    font-family:    var(--font-sans) !important;
    font-weight:    500              !important;
    font-size:      0.82rem          !important;
    letter-spacing: 0.12em           !important;
    text-transform: uppercase        !important;
    padding:        12px 32px        !important;
    transition:     background 0.3s ease !important;
}
.btn-primary:hover,
.btn-primary:focus {
    background: var(--icb-brown)  !important;
    color:      var(--icb-beige)  !important;
}

/* ─────────────────────────────────────────
   Sub-page nav icon buttons (.subPageLine / .subPageButton)
   Replace absolute-positioning hack with clean flex column layout
───────────────────────────────────────── */

/* Section background — CI green instead of original grey */
.subPageLine,
.subPageLine.withBorders {
    background-color: var(--icb-green) !important;
}
.subPageLine.withBorders:before,
.subPageLine.withBorders:after {
    background-color: var(--icb-green) !important;
}

/* Outer wrapper — use flex so content centres vertically */
.subPageButton {
    width:       90%   !important;
    margin-left:  auto !important;
    margin-right: auto !important;
    padding:      20px 0 20px !important;
}

/* The <a> element: flex column, icon on top, label below */
.subPageButton a.ow-icon-placement-top {
    display:         flex            !important;
    flex-direction:  column          !important;
    align-items:     center          !important;
    justify-content: flex-start      !important;
    /* reset absolute-positioning artefacts from theme */
    position:        static          !important;
    margin:          0 auto          !important;
    width:           95%             !important;
    background:      transparent     !important;
    border:          none            !important;
    border-radius:   0               !important;
    text-decoration: none            !important;
    color:           var(--icb-beige) !important;
    font-family:     var(--font-sans) !important;
    font-weight:     500              !important;
    font-size:       1.1rem           !important;
    text-transform:  uppercase        !important;
    letter-spacing:  0.06em           !important;
}

/* The <span> wrapper inside the <a>: also flex column */
.subPageButton a.ow-icon-placement-top > span {
    display:        flex         !important;
    flex-direction: column       !important;
    align-items:    center       !important;
    gap:            14px         !important;
    width:          100%         !important;
}

/* The icon box: in-flow block, sits above the label */
.subPageButton a.ow-icon-placement-top .sow-icon-image {
    position:             static        !important;
    float:                none          !important;
    display:              block         !important;
    width:                80px          !important;
    height:               60px          !important;
    margin:               0 auto        !important;
    background-color:     transparent   !important;
    background-size:      contain        !important;
    background-position:  center center !important;
    background-repeat:    no-repeat     !important;
    /* Icon fill is already near-white (#f0f7f6) — no filter needed */
}

/* ─────────────────────────────────────────
   DARK GREEN SECTIONS — classic clubhouse panels
───────────────────────────────────────── */

.darkGreenBG {
    background: var(--icb-green)  !important;
}

/* Mission Statement section — dark green + background SVG watermark */
.darkGreenWithBackgoundBG {
    background-color: var(--icb-green) !important;
}

.darkGreenBG h1,
.darkGreenBG h2,
.darkGreenBG h3,
.darkGreenWithBackgoundBG h1,
.darkGreenWithBackgoundBG h2,
.darkGreenWithBackgoundBG h3 {
    color: var(--icb-beige) !important;
}
.darkGreenBG p,
.darkGreenWithBackgoundBG p {
    color: rgba(254, 249, 243, 0.88) !important;
}

/* ─────────────────────────────────────────
   GREEN-GREY TEASER BOXES
───────────────────────────────────────── */

.greenGreyBoxHolder {
    background:    #ddd7cc !important;   /* warm stone grey */
    border-top:    none    !important;
    border-bottom: none    !important;
}
.greenGreyBoxHolder h3 {
    color:       var(--icb-beige)  !important;
    font-family: var(--font-sans)  !important;
    font-weight: 500               !important;
    font-size:   1rem              !important;
    letter-spacing: 0.08em         !important;
    text-transform: uppercase      !important;
}
.greenGreyBoxHolder p {
    color:     rgba(254, 249, 243, 0.8) !important;
    font-size: 0.88rem                  !important;
}
.greenGreyBoxHolder a {
    color:      var(--icb-beige) !important;
    text-decoration: none        !important;
}
.greenGreyTeaserInner {
    background:    var(--icb-green)  !important;
    border-bottom: 2px solid var(--icb-ochre) !important;
    transition:    all 0.4s ease     !important;
    padding:       28px 20px         !important;
}
.greenGreyTeaserInner:hover {
    transform:  translateY(-4px)                           !important;
    box-shadow: 0 8px 24px rgba(47, 61, 44, 0.25)         !important;
}

/* Vertical separators between teasers → ochre */
@media only screen and (min-width: 768px) {
    .greenGreyBoxesInnerHolder .col-12 {
        border-left:  1px solid rgba(248, 215, 148, 0.25) !important;
        border-right: 1px solid rgba(248, 215, 148, 0.25) !important;
    }
}

/* ─────────────────────────────────────────
   EVENTS / PROGRAMM SECTION
───────────────────────────────────────── */

.row.eventsListLoop {
    background-color: var(--icb-beige)                    !important;
    border-bottom:    none                                !important;
    box-shadow:       0 1px 0 rgba(47, 61, 44, 0.08)     !important;
    margin-bottom:    32px                                !important;
    transition:       box-shadow 0.3s ease                !important;
}
.row.eventsListLoop:hover {
    box-shadow: 0 4px 20px rgba(47, 61, 44, 0.08) !important;
}

.eventsListLoop h3 {
    color:          var(--icb-green) !important;
    font-family:    var(--font-sans) !important;
    font-weight:    500              !important;
    font-size:      1.05rem          !important;
    text-transform: none             !important;
}
.eventsListLoop h3 a {
    color: var(--icb-green) !important;
}
.eventsListLoop h3 a:hover {
    color: var(--icb-brown) !important;
}
.eventsListLoop p {
    color:     rgba(47, 61, 44, 0.8) !important;
    font-size: 0.9rem                !important;
}
.eventsListLoop .event-excerpt {
    color:     rgba(47, 61, 44, 0.72) !important;
    font-size: 0.88rem                !important;
}

.eventFooterLine {
    background:   var(--icb-green)  !important;
    color:        var(--icb-beige)  !important;
    font-family:  var(--font-sans)  !important;
    font-weight:  300               !important;
    font-size:    0.78rem           !important;
    text-transform: uppercase       !important;
    letter-spacing: 0.06em          !important;
}
.eventFooterLine a {
    color: var(--icb-ochre) !important;
}

/* ─────────────────────────────────────────
   GALLERY (Räume mieten)
───────────────────────────────────────── */

.galDescr {
    background:     rgba(47, 61, 44, 0.82) !important;
    color:          var(--icb-beige)        !important;
    font-family:    var(--font-sans)        !important;
    font-weight:    500                     !important;
    font-size:      0.78rem                 !important;
    letter-spacing: 0.1em                   !important;
    text-transform: uppercase               !important;
}
.galBigDesc {
    background: var(--icb-green) !important;
    color:      var(--icb-beige) !important;
    font-family: var(--font-sans) !important;
    font-weight: 300 !important;
    font-size:   0.85rem !important;
}

/* Modal */
#galModal .modal-content {
    background:    var(--icb-green) !important;
    border-radius: 0                !important;
    border:        none             !important;
}
#galModal .modal-header,
#galModal .modal-footer {
    border-color: rgba(254, 249, 243, 0.15) !important;
}
#galModal .btn-close {
    filter: invert(1) !important;
}
#galModal .carousel-control-prev,
#galModal .carousel-control-next {
    color:            var(--icb-ochre) !important;
    opacity:          0.85             !important;
}

/* ─────────────────────────────────────────
   ICON FEATURE BOXES (.lightGreyBg)
───────────────────────────────────────── */

.lightGreyBg {
    background: #d8d2c8 !important;   /* warm pebble grey */
}

.greenBoxesHolder .greenTeaserInner.greenBoxWithIcon {
    background:    var(--icb-green)     !important;
    transition:    all 0.4s ease        !important;
    border-bottom: 2px solid var(--icb-ochre) !important;
    padding:       32px 18px            !important;
}
.greenBG a:hover .greenTeaserInner.greenBoxWithIcon,
.greenBoxesHolder .greenBG:hover .greenTeaserInner {
    background: var(--icb-green-hover)                     !important;
    transform:  translateY(-4px)                           !important;
    box-shadow: 0 8px 24px rgba(47, 61, 44, 0.3)          !important;
}

.greenBoxesHolder .greenTeaserInner h3 {
    color:          var(--icb-ochre) !important;
    font-family:    var(--font-sans) !important;
    font-weight:    500              !important;
    font-size:      0.9rem           !important;
    letter-spacing: 0.1em            !important;
    text-transform: uppercase        !important;
}
.greenBoxesHolder .greenTeaserInner p {
    color:     rgba(254, 249, 243, 0.78) !important;
    font-size: 0.87rem                   !important;
}

.teaserIcon {
    background: rgba(248, 215, 148, 0.15) !important;
    border: 1px solid rgba(248, 215, 148, 0.2) !important;
}

/* Borders between icon boxes */
@media only screen and (min-width: 768px) {
    .greenBoxesHolder .col-12.col-md-3 + .col-12.col-md-3 {
        border-left: 1px solid rgba(248, 215, 148, 0.15) !important;
    }
}

/* ─────────────────────────────────────────
   SPORT & FREIZEIT SECTION (.innerIntro)
───────────────────────────────────────── */

.innerIntro::after {
    background: linear-gradient(
        to bottom,
        rgba(47, 61, 44, 0.5) 0%,
        rgba(47, 61, 44, 0.72) 100%
    ) !important;
}
.innerIntro h2 {
    color: var(--icb-beige) !important;
}
.innerIntro p {
    color: rgba(254, 249, 243, 0.9) !important;
}

/* ─────────────────────────────────────────
   EAT & DRINK SECTION (.HomeBoxAbsolute.brighterGreen)
───────────────────────────────────────── */

.HomeBoxAbsolute.brighterGreen {
    background: rgba(47, 61, 44, 0.92)  !important;
    padding:    40px 32px                !important;
    backdrop-filter: blur(2px)           !important;
}
.HomeBoxAbsolute.brighterGreen h2 {
    color: var(--icb-beige) !important;
}
.HomeBoxAbsolute.brighterGreen p {
    color:     rgba(254, 249, 243, 0.88) !important;
    font-size: 0.95rem                   !important;
}
/* Remove the h2 after-decoration in the overlay box too */
.HomeBoxAbsolute.brighterGreen .textBox_whithIconHead h2::after {
    display: none !important;
}

/* ─────────────────────────────────────────
   SUBPAGE ELEMENTS
───────────────────────────────────────── */

/* Subpage line dividers */
.subPageLine,
.subPageLine.withBorders {
    background: var(--icb-green) !important;
}
@media only screen and (min-width: 768px) {
    .subPageLine.withBorders .panel-grid-cell,
    .subPageLine.withBorders .panel-grid-cell:last-child,
    .subPageLine.withBorders .panel-grid-cell:first-child,
    .subPageLine.withBorders.onlyTwo .panel-grid-cell:first-child {
        border-color: rgba(248, 215, 148, 0.25) !important;
    }
}

/* Event carousel intro */
.pageIntroAktuell {
    background: var(--icb-green) !important;
}
.pageIntroAktuell h3 {
    color:       var(--icb-beige) !important;
    font-family: var(--font-sans) !important;
    font-weight: 500              !important;
}
.pageIntroAktuell p {
    color: rgba(254, 249, 243, 0.88) !important;
}
.pageIntroAktuell .carousel-indicators [data-bs-target] {
    background-color: rgba(47, 61, 44, 0.45) !important;
    border-color:     rgba(248, 215, 148, 0.4) !important;
}
.pageIntroAktuell .carousel-indicators .active {
    background-color: var(--icb-ochre) !important;
}
span.ank_date {
    color: var(--icb-ochre) !important;
}

/* Sub-page list headings */
.subPageListLoop h3 {
    color:       var(--icb-green) !important;
    font-family: var(--font-serif) !important;
    font-weight: 400               !important;
    text-transform: uppercase      !important;
}
.subPageListLoop h3 a {
    color: var(--icb-green) !important;
}
.subPageListLoop h3 a:hover {
    color: var(--icb-brown) !important;
}
.subPageListLoop p {
    color:     var(--icb-green) !important;
    font-size: 1rem             !important;
}

/* Sub-page read-more arrow: darken the SVG background-image to Heritage Green */
a.subPageReadMore {
    filter:     brightness(0.42) saturate(1.1) !important;
    opacity:    0.85                           !important;
    transition: opacity 0.25s ease, filter 0.25s ease !important;
}
a.subPageReadMore:hover {
    filter:  brightness(0.55) saturate(1.2) !important;
    opacity: 1                              !important;
}

/* ─────────────────────────────────────────
   SMALL PAGE INTROS (subpages)
───────────────────────────────────────── */

.pageIntro.pageIntroSmall h1,
.pageIntroHead.membersIntroHead h1 {
    font-family:    var(--font-serif) !important;
    font-weight:    400               !important;
    color:          var(--icb-beige)  !important;
    text-transform: uppercase         !important;
    letter-spacing: 0.08em            !important;
}
.pageIntroHead.membersIntroHead h2 {
    font-family:    var(--font-sans)  !important;
    font-weight:    300               !important;
    font-style:     normal            !important;
    text-transform: none              !important;
    color:          var(--icb-beige)  !important;
    font-size:      1.1rem            !important;
}

/* ─────────────────────────────────────────
   FOOTER
───────────────────────────────────────── */

footer {
    background:  var(--icb-green) !important;
    margin-top:  100px            !important;
    border-top:  2px solid var(--icb-ochre) !important;
}
.footerLogoHochgerueckt img {
    /* No filter — SVG renders naturally: white circle with dark green monogram on green footer */
}

ul.footerMenu > li > a {
    color:          var(--icb-beige)  !important;
    font-family:    var(--font-sans)  !important;
    font-weight:    500               !important;
    font-size:      0.78rem           !important;
    letter-spacing: 0.08em            !important;
    text-transform: uppercase         !important;
}
ul.footerMenu > li > a:hover {
    color: var(--icb-ochre) !important;
}

ul.footerMenu li li a {
    color:          rgba(254, 249, 243, 0.65) !important;
    font-family:    var(--font-sans)          !important;
    font-weight:    300                       !important;
    text-transform: none                      !important;
    font-size:      0.8rem                    !important;
}
ul.footerMenu li li a:hover {
    color: var(--icb-beige) !important;
}

ul.footerMenuDark {
    border-top: 1px solid rgba(254, 249, 243, 0.12) !important;
    padding-top: 16px !important;
}
ul.footerMenuDark li a {
    color:          rgba(254, 249, 243, 0.6) !important;
    font-family:    var(--font-sans)         !important;
    font-weight:    300                      !important;
    font-size:      0.78rem                  !important;
    text-transform: none                     !important;
}
ul.footerMenuDark li a:hover {
    color: var(--icb-beige) !important;
}

.footerDark {
    background: rgba(0, 0, 0, 0.38) !important;
}
.footerDark p {
    color:          rgba(254, 249, 243, 0.5) !important;
    font-family:    var(--font-sans)         !important;
    font-weight:    300                      !important;
    font-size:      0.75rem                  !important;
    text-transform: none                     !important;
    letter-spacing: 0.04em                   !important;
    margin-bottom:  0                        !important;
}

/* ─────────────────────────────────────────
   FORMS (Login / Register / Contact)
───────────────────────────────────────── */

#loginForm .form-check .form-check-input:checked {
    background-color: var(--icb-green) !important;
    border-color:     var(--icb-green) !important;
}
.form-label {
    font-family: var(--font-sans) !important;
    font-weight: 500              !important;
    font-size:   0.82rem          !important;
    color:       var(--icb-green) !important;
    letter-spacing: 0.04em        !important;
}
.form-control {
    font-family:   var(--font-sans)              !important;
    font-weight:   300                           !important;
    border-color:  rgba(47, 61, 44, 0.25)        !important;
    border-radius: 0                             !important;
    color:         var(--icb-green)              !important;
    background:    #ffffff                       !important;
    font-size:     0.92rem                       !important;
}
.form-control:focus,
input:focus {
    border-color: var(--icb-green)                   !important;
    box-shadow:   0 0 0 2px rgba(47, 61, 44, 0.12)  !important;
    outline:      none                               !important;
}

/* ─────────────────────────────────────────
   MEMBER REGISTER MODAL
───────────────────────────────────────── */

#memberregModal .modal-content {
    background:    var(--icb-beige)  !important;
    border-radius: 0                 !important;
}
#memberregModal .modal-header {
    border-bottom-color: rgba(47, 61, 44, 0.15) !important;
}
#memberregModal .modal-title {
    font-family: var(--font-serif) !important;
    font-weight: 400               !important;
    color:       var(--icb-green)  !important;
    font-size:   1.3rem            !important;
}

/* ─────────────────────────────────────────
   PARTNERS / PARTNERCLUBS
───────────────────────────────────────── */

.pageTeaserGreen p {
    color: rgba(254, 249, 243, 0.85) !important;
}

/* ─────────────────────────────────────────
   TEAM SECTION — hover overlay (max 30 %)
───────────────────────────────────────── */

/* Hide the old email overlay completely */
.teamHolderSlide {
    display: none !important;
}

/* Name + title below the photo: default state */
p.teamHead {
    font-family:  var(--font-sans)  !important;
    font-weight:  500               !important;
    font-size:    0.85rem           !important;
    color:        var(--icb-green)  !important;
    position:     relative          !important;
    z-index:      2                 !important;
    transition:   margin-top 0.4s ease, background 0.4s ease,
                  color 0.4s ease, padding 0.4s ease !important;
    margin-bottom: 0                !important;
    padding:      2px 0             !important;
}
p.teamSub {
    font-family:  var(--font-sans)  !important;
    font-weight:  300               !important;
    font-size:    0.82rem           !important;
    color:        rgba(47, 61, 44, 0.7) !important;
    position:     relative          !important;
    z-index:      2                 !important;
    transition:   background 0.4s ease, color 0.4s ease,
                  padding 0.4s ease !important;
    padding:      0                 !important;
}

/* On hover: slide name + title up over the bottom of the image */
.teamHolderInner:hover p.teamHead {
    margin-top:  -54px                        !important;
    background:  rgba(47, 61, 44, 0.85)       !important;
    color:       var(--icb-beige)             !important;
    padding:     10px 14px 3px                !important;
}
.teamHolderInner:hover p.teamSub {
    background:  rgba(47, 61, 44, 0.85)       !important;
    color:       rgba(254, 249, 243, 0.75)    !important;
    padding:     0 14px 8px                   !important;
}

/* Team filter tabs */
.teamFíter a {
    font-family:    var(--font-sans)  !important;
    font-weight:    500               !important;
    font-size:      0.82rem           !important;
    letter-spacing: 0.06em            !important;
    color:          var(--icb-green)  !important;
}
.teamFíter a.active {
    color: var(--icb-brown) !important;
}

/* ─────────────────────────────────────────
   BRITISH COUNTRY CLUB — additional refinements
───────────────────────────────────────── */

/* Gallery images: subtle zoom on hover (Hurlingham-style) */
.galLink {
    overflow: hidden !important;
}
.galLink img {
    transition: transform 0.6s ease !important;
}
.galLink:hover img {
    transform: scale(1.04) !important;
}
.galDescr {
    transition: opacity 0.4s ease !important;
}

/* Event thumbnails: gentle zoom */
.eventThumbContainer {
    transition: transform 0.5s ease !important;
}
.eventsListLoop:hover .eventThumbContainer {
    transform: scale(1.02) !important;
}

/* Sub-page hero images: parallax-like deeper overlay */
.pageIntro.pageIntroSmall::after {
    background: linear-gradient(
        to bottom,
        rgba(47, 61, 44, 0.3) 0%,
        rgba(47, 61, 44, 0.55) 100%
    ) !important;
}

/* Refined sub-page intro headings */
.pageIntro.pageIntroSmall h1,
.pageIntroHead.membersIntroHead h1 {
    font-size:      clamp(1.8rem, 4vw, 3rem) !important;
    letter-spacing: 0.12em                    !important;
}

/* Sub-page nav icon bar: more refined spacing */
.subPageButton a.ow-icon-placement-top {
    padding: 24px 0 !important;
}
.subPageButton a.ow-icon-placement-top:hover {
    color: var(--icb-ochre) !important;
}

/* Content containers: refined max-width for reading comfort */
.w-60 {
    max-width: 800px !important;
}

/* Gold ornamental separator — usable via class (for future HTML edits) */
.cc-separator {
    width:      60px;
    height:     1px;
    background: var(--icb-ochre);
    margin:     32px auto;
    opacity:    0.6;
}

/* Smooth image loading */
img {
    transition: opacity 0.3s ease !important;
}

/* Members login form: more club-like with extra padding */
#loginForm {
    max-width: 420px  !important;
    margin:    0 auto !important;
    padding:   40px   !important;
}

/* Partner clubs section — refined card appearance */
.pageTeaserGreen {
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.pageTeaserGreen:hover {
    transform:  translateY(-2px)                           !important;
    box-shadow: 0 6px 20px rgba(47, 61, 44, 0.15)         !important;
}

/* ─────────────────────────────────────────
   GLOBAL TRANSITIONS — elevated
───────────────────────────────────────── */

a,
button,
.ow-button-base a,
.greenGreyTeaserInner,
.greenTeaserInner {
    transition: color 0.3s ease, background-color 0.3s ease,
                border-color 0.3s ease, transform 0.3s ease,
                box-shadow 0.3s ease !important;
}