﻿/* open-sans-regular - v17-latin_latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: normal;
  src: url('/clubdesk/webpage/webfonts/open-sans-v17-latin_latin-ext-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/clubdesk/webpage/webfonts/open-sans-v17-latin_latin-ext-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/clubdesk/webpage/webfonts/open-sans-v17-latin_latin-ext-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/clubdesk/webpage/webfonts/open-sans-v17-latin_latin-ext-regular.woff') format('woff'), /* Modern Browsers */
       url('/clubdesk/webpage/webfonts/open-sans-v17-latin_latin-ext-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/clubdesk/webpage/webfonts/open-sans-v17-latin_latin-ext-regular.svg#Oswald') format('svg'); /* Legacy iOS */
}/* open-sans-300 - v17-latin_latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('/clubdesk/webpage/webfonts/open-sans-v17-latin_latin-ext-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/clubdesk/webpage/webfonts/open-sans-v17-latin_latin-ext-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/clubdesk/webpage/webfonts/open-sans-v17-latin_latin-ext-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('/clubdesk/webpage/webfonts/open-sans-v17-latin_latin-ext-300.woff') format('woff'), /* Modern Browsers */
       url('/clubdesk/webpage/webfonts/open-sans-v17-latin_latin-ext-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/clubdesk/webpage/webfonts/open-sans-v17-latin_latin-ext-300.svg#Oswald') format('svg'); /* Legacy iOS */
}/* open-sans-700 - v17-latin_latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('/clubdesk/webpage/webfonts/open-sans-v17-latin_latin-ext-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/clubdesk/webpage/webfonts/open-sans-v17-latin_latin-ext-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/clubdesk/webpage/webfonts/open-sans-v17-latin_latin-ext-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('/clubdesk/webpage/webfonts/open-sans-v17-latin_latin-ext-700.woff') format('woff'), /* Modern Browsers */
       url('/clubdesk/webpage/webfonts/open-sans-v17-latin_latin-ext-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/clubdesk/webpage/webfonts/open-sans-v17-latin_latin-ext-700.svg#Oswald') format('svg'); /* Legacy iOS */
}
/* Inter - self-hosted (not linked from Google Fonts directly) to avoid sending visitor IPs to Google,
   which German/EU courts have treated as a GDPR violation. Uploaded to wwwfiles/ (same place
   custom.css lives) - confirmed that only resolves under the /clubdesk/ prefix, hence the
   absolute path below rather than a relative one (page.css itself is served from
   /clubdesk/genwwwfiles/, so a relative "wwwfiles/..." would resolve to the wrong place). */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/clubdesk/wwwfiles/inter-latin-var.woff2') format('woff2');
}

/* BGDA brand palette - approximated from design reference, swap for exact hex values once brand assets are provided */
:root {
    --bgda-mint: #7fe0c8;
    --bgda-mint-dark: #5bc9ac;
    --bgda-orange: #cc6b37;
    --bgda-green-dark: #46521f;
    --bgda-green-mid: #7c9b5d;
    --bgda-black: #14140f;
    --bgda-lime: #cfe070;
    --bgda-lavender: #decdff;
    --bgda-white: #ffffff;
}

/* Scroll-snap "hang" (senem-arkaz.ch style) is implemented in JS, in the
   <script> at the top of clubdesk-blocks.html's first pasted block - not
   here. Pure CSS scroll-snap-type/scroll-snap-align couldn't work: each of
   the four content sections lives inside its own separate ClubDesk-generated
   overflow:hidden wrapper, which per spec becomes the "scroll container"
   scroll-snap-align resolves against - so nothing ever actually snapped
   against the real page scroller. See the comment in clubdesk-blocks.html
   for the full explanation. */

body {
    position: relative;
    min-height: 100vh;
    margin: 0;
    /* Full-bleed content sections (see clubdesk-blocks.html) size themselves
       with 100vw, which overshoots the visible page by a hair once a
       vertical scrollbar is present - this keeps that sliver from showing
       up as horizontal scroll. */
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'Inter', 'Open Sans', sans-serif;
    color: var(--bgda-black);
}

.main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.cd-content, .cd-sidebar, .cd-header, .cd-footer {
    position: relative;
}

.columns-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: row;
}

.columns-margins {
    flex-grow: 1;
}

.columns {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    max-width: 1100px;
    flex-basis: 1100px;
}

.content-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sidebar-wrapper {
    display: flex;
    flex-direction: column;
    flex-basis: 240px;
    flex-shrink: 0;
    border-left: 0 SOLID var(--bgda-orange);
    overflow: hidden;
}

.cd-header, .cd-content, .cd-sidebar, .cd-footer {
    flex-grow: 1;
}

.cd-row {
    max-width: 1100px;
    margin: 0 auto;
}

.cd-navigation-bar-container a, .cd-navigation-bar-container a:hover {
    text-decoration: none;
}

.cd-filler {
    flex-grow: 1;
}

@media (max-width: 576px) {
    .columns {
        display: block;
        flex-basis: initial;
    }

    .sidebar-wrapper {
        border-left: none;
        max-width: 100%;
    }
}
.cd-header-empty .cd-content div.cd-section:first-of-type,
.cd-header-empty .cd-sidebar div.cd-section:first-of-type {
    padding-top: 130px;
}

.cd-navigation-bar-container,
.cd-header-empty .cd-navigation-bar-container {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 30000;
    background-color: var(--bgda-white);
    border-top: 4px solid var(--bgda-lime);
    transition: background 0.4s;
}

.cd-scroll .cd-navigation-bar-container, .cd-megamenu-open  .cd-navigation-bar-container {
    transition: background 0.4s;
    background-color: var(--bgda-white);
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
}

/* Checkered rainbow-gradient stripe + solid orange band, stacked directly under the white nav bar
   via two layered backgrounds on one pseudo-element - matches the BGDA reference image exactly. */
.cd-navigation-bar-container::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 24px;
    z-index: 30001;
    background-image:
        linear-gradient(
            to right,
            #111111 0px 26px, #cf59bb 26px 44px,
            #111111 44px 54px, #5963cf 54px 68px,
            #111111 68px 90px, #cf9e59 90px 120px,
            #111111 120px 130px, #6d59cf 130px 148px,
            #111111 148px 158px, #b159cf 158px 194px,
            #111111 194px 216px, #cf7659 216px 230px,
            #111111 230px 256px, #8a59cf 256px 270px,
            #111111 270px 284px, #a8cf59 284px 320px,
            #111111 320px 330px, #80cf59 330px 366px,
            #111111 366px 392px, #cf598a 392px 422px,
            #111111 422px 432px, #cfc559 432px 450px,
            #111111 450px 460px, #cf5963 460px 496px
        ),
        linear-gradient(to bottom, transparent 0 10px, var(--bgda-orange) 10px 100%);
    background-repeat: repeat-x, no-repeat;
    background-position: top left, top left;
    background-size: 496px 10px, 100% 100%;
}

.cd-navigation-bar-content {
    display: flex;
    align-items: center;
    padding: 0 0 0 20px;
    flex-direction: row;
}

.cd-separator {
    width: 24px;
    flex-shrink: 0;
}

.cd-megamenu-button {
    cursor: pointer;
    text-decoration: none;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cd-megamenu-button {
	font-family: 'Inter', 'Open Sans', sans-serif;
	font-size: 32px;
	font-weight: 700;
	font-style: normal;
	text-decoration: none;
	text-align: left;
	text-transform: none;
	margin: 0;
	padding: 0 36px;
	overflow-wrap: break-word;
	border-radius: 0;
}

.cd-megamenu-label {
	/* icon-only button to match the reference design; aria-label on the parent link covers accessibility */
	display: none;
}

.cd-megamenu-button {
	color: var(--bgda-white);
	background-color: var(--bgda-orange);
}

.cd-megamenu-button:hover {
	background-color: var(--bgda-green-dark);
}

.cd-megamenu-button:focus {
	outline: none;
}

.cd-megamenu-button:focus-visible {
	outline-width: 3px;
	outline-style: solid;
	outline-color: var(--bgda-green-dark);
}

@media (max-width: 576px) {
	.cd-megamenu-button {
		/* was 4vmin (~15px on a typical phone) - the icon is an inline SVG
		   sized via width/height:1em, so at that font-size it nearly
		   vanished inside the still-largely-unchanged ~87x88px button. */
		font-size: 24px;
	}
}



@media (max-width: 992px) {
    .cd-megamenu ul li {
        width: 100%;
    }
}

@media (min-width: 993px) {
    .cd-megamenu-content {
        float:right;
    }
}

.cd-megamenu-container {
    width: 100%;
    overflow-y: auto;
    background: var(--bgda-green-dark);
}

.cd-megamenu {
    display: none;
    width: 100%;
    border-bottom: 1px solid #AAA;
}

.cd-megamenu-content {
    margin: 20px;
}

.cd-megamenu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.cd-megamenu li {
    display: block;
}

.cd-megamenu .cd-menu-level-1 > ul {
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
}

.cd-megamenu a {
    text-decoration: none;
}

.cd-megamenu .cd-menu-level-1 a, .cd-megamenu .cd-menu-level-2 a, .cd-megamenu .cd-menu-level-3 a {
    display: inline-block;
}

.cd-megamenu .cd-menu-level-1 a {
	font-family: 'Inter', 'Open Sans', sans-serif;
	font-size: 24px;
	font-weight: 700;
	font-style: normal;
	text-decoration: none;
	text-align: left;
	text-transform: none;
	margin: 10px 20px;
	overflow-wrap: break-word;
}

.cd-megamenu .cd-menu-level-1 a {
	color: rgba(255,255,255,1.0);
}

.cd-megamenu .cd-menu-level-1 a:focus {
	outline-width: 3px;
	outline-style: solid;
	outline-offset: 5px;

}

.cd-megamenu .cd-menu-level-1 a:focus {
	outline-color: rgba(255,255,255,1.0);
}


.cd-megamenu .cd-menu-level-2 a {
	font-family: 'Inter', 'Open Sans', sans-serif;
	font-size: 16px;
	font-weight: 400;
	font-style: normal;
	text-decoration: none;
	text-align: left;
	text-transform: none;
	margin: 5px 20px;
	overflow-wrap: break-word;
}

.cd-megamenu .cd-menu-level-2 a {
	color: rgba(255,255,255,1.0);
}

.cd-megamenu .cd-menu-level-2 a:focus {
	outline-width: 3px;
	outline-style: solid;
	outline-offset: 5px;

}

.cd-megamenu .cd-menu-level-2 a:focus {
	outline-color: rgba(255,255,255,1.0);
}


.cd-megamenu .cd-menu-level-3 a {
	font-family: 'Inter', 'Open Sans', sans-serif;
	font-size: 12px;
	font-weight: 300;
	font-style: normal;
	text-decoration: none;
	text-align: left;
	text-transform: none;
	margin: 0 20px;
	overflow-wrap: break-word;
}

.cd-megamenu .cd-menu-level-3 a {
	color: rgba(255,255,255,1.0);
}

.cd-megamenu .cd-menu-level-3 a:focus {
	outline-width: 3px;
	outline-style: solid;
	outline-offset: 5px;

}

.cd-megamenu .cd-menu-level-3 a:focus {
	outline-color: rgba(255,255,255,1.0);
}



.cd-megamenu .cd-menu-level-1 a:before {
    content: "";
}

.cd-megamenu .cd-menu-level-2 a:before {
    content: "";
}

.cd-megamenu .cd-menu-level-3 a:before {
    content: "";
}

.cd-megamenu a.cd-menu-item.cd-menu-active, .cd-megamenu a.cd-menu-item:hover {
    color: var(--bgda-mint);
}
.cd-club-logo-and-name {
    display: inline-flex;
    align-items: center;
}

a.cd-club-logo-link {
    text-decoration: none;
}

a.cd-club-logo-link:focus {
    outline-color: var(--bgda-black);
    outline-width: 3px;
    outline-style: solid;
}

.cd-club-logo-link {
    display: none;
}
@media (max-width: 576px) {
    .cd-club-logo-link {
        display: none;
    }
}

.cd-club-logo {
height: 30px;

    vertical-align: middle;
}


.cd-club-name {
  display: inline;
}
@media (max-width: 576px) {
    .cd-club-name {
        display: inline;
    }
}

a.cd-club-name, a.cd-club-name:visited, a.cd-club-name:hover {
	font-family: 'Inter', 'Open Sans', sans-serif;
	font-size: 48px;
	font-weight: 800;
	font-style: normal;
	text-decoration: none;
	text-align: left;
	text-transform: none;
	margin: 16px 0;
	overflow-wrap: break-word;
}

a.cd-club-name, a.cd-club-name:visited, a.cd-club-name:hover {
	color: var(--bgda-black);
	display: inline-flex;
	align-items: center;
	gap: 16px;
}

.cd-club-logo-img {
	height: 96px;
	flex-shrink: 0;
	display: block;
}

a.cd-club-name:focus, a.cd-club-name:visited:focus, a.cd-club-name:hover:focus {
	outline-width: 3px;
	outline-style: solid;

}

a.cd-club-name:focus, a.cd-club-name:visited:focus, a.cd-club-name:hover:focus {
	outline-color: var(--bgda-black);
}

@media (max-width: 576px) {
	a.cd-club-name, a.cd-club-name:visited, a.cd-club-name:hover {
		font-size: 6vmin;
	}
	/* The logo is a single inline SVG (icon mark + wordmark together), fixed
	   at 96px tall with flex-shrink:0 - on a narrow phone that alone can run
	   wider than the viewport, pushing the Login button and hamburger off
	   to the right where they become unreachable (not just visually tight,
	   actually outside the viewport with no scroll to reach them). */
	.cd-club-logo-img {
		height: 56px;
		flex-shrink: 1;
	}
}





a.cd-button-login, input.cd-button-login, button.cd-button-login {
	background-color: var(--bgda-green-dark);
}

a.cd-button-login, input.cd-button-login, button.cd-button-login {
	border-color: var(--bgda-green-dark);
}

a.cd-button-login, input.cd-button-login, button.cd-button-login {
	font-family: 'Inter', 'Open Sans', sans-serif;
	font-size: 16px;
	font-weight: 700;
	font-style: normal;
	text-decoration: none;
	text-align: center;
	text-transform: none;
	overflow-wrap: break-word;
}

a.cd-button-login, input.cd-button-login, button.cd-button-login {
	color: var(--bgda-white);
}

a.cd-button-login:focus, input.cd-button-login:focus, button.cd-button-login:focus {
	outline-width: 3px;
	outline-style: solid;

}

a.cd-button-login:focus, input.cd-button-login:focus, button.cd-button-login:focus {
	outline-color: var(--bgda-green-dark);
}



a.cd-button-login, input.cd-button-login, button.cd-button-login {
    display: none;
	border-width: 1px;
	border-style: solid;
	padding: 5px 20px;
	border-radius: 10px;
	margin: 10px 0;
}

a.cd-button-login:hover, input.cd-button-login:hover, button.cd-button-login:hover {
	background-color: var(--bgda-orange);
}

a.cd-button-login:hover, input.cd-button-login:hover, button.cd-button-login:hover {
	color: var(--bgda-white);
}

a.cd-button-login:hover, input.cd-button-login:hover, button.cd-button-login:hover {
	border-color: var(--bgda-orange);
}

a.cd-button-login:focus, input.cd-button-login:focus, button.cd-button-login:focus {
	outline-width: 3px;
	outline-style: solid;

}

a.cd-button-login:focus, input.cd-button-login:focus, button.cd-button-login:focus {
	outline-color: var(--bgda-orange);
}



.cc-window, .cc-revoke {
	font-family: 'Inter', 'Open Sans', sans-serif;
	font-size: 14px;
	font-weight: 400;
	font-style: normal;
	text-decoration: none;
	text-align: left;
	text-transform: none;
	overflow-wrap: break-word;
}

.cc-window, .cc-revoke {
	color: rgba(255,255,255,1.0);
}

.cc-window:focus, .cc-revoke:focus {
	outline-width: 3px;
	outline-style: solid;

}

.cc-window:focus, .cc-revoke:focus {
	outline-color: rgba(255,255,255,1.0);
}



a.cc-link, a.cc-link:active, a.cc-link:visited, .cc-bottom {
	text-transform: none;
	text-decoration: none;
}

a.cc-link, a.cc-link:active, a.cc-link:visited, .cc-bottom {
	color: rgba(255,255,255,1.0);
}

a.cc-link:hover, a.cc-link:active:hover, a.cc-link:visited:hover, .cc-bottom:hover {	text-decoration: underline;
}

a.cc-link:hover, a.cc-link:active:hover, a.cc-link:visited:hover, .cc-bottom:hover {
	color: rgba(255,255,255,1.0);
}

a.cc-link:focus, a.cc-link:active:focus, a.cc-link:visited:focus, .cc-bottom:focus {
	outline-width: 3px;
	outline-style: solid;

}

a.cc-link:focus, a.cc-link:active:focus, a.cc-link:visited:focus, .cc-bottom:focus {
	outline-color: rgba(255,255,255,1.0);
}



.cc-bottom:focus {
    bottom: 25px;
}

.cc-window, .cc-revoke {
    background-color: rgba(51,51,51,1.0);
    box-shadow: 0 0 5px 0 rgba(0,0,0,0.3);
    z-index: 10000000;
}

.cc-btn {
    background-color: rgba(255,255,255,1.0);
    color: rgba(51,51,51,1.0);
}

.cc-btn:first-child {
    background-color: transparent;
}

.cc-btn:first-child {
	color: rgba(255,255,255,1.0);
}



.cd-totop-button {
    display: flex;
    justify-content: space-around;
    align-items: center;

    position: fixed;
    right: -100px;
    bottom: 50px;
    width: 60px;
    height: 40px;

    z-index: 1;

    box-shadow: 0 0 1.875rem 0 rgba(0,0,0,.25);

    color: var(--bgda-white);
    background-color: var(--bgda-orange);
    transition: all 0.4s ease;

    cursor: pointer;
}

.cd-totop-button {
	border-color: var(--bgda-white);
}

.cd-totop-button {
	border-width: 0;
	border-style: SOLID;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;
	border-bottom-left-radius: 20px;
}



.cd-scroll .cd-totop-button {
    right: 10px;
}

.cd-totop-button:focus {
    outline-color: var(--bgda-green-dark) !important;
}

footer {
    background-color: var(--bgda-lavender);
    padding: 48px 66px;
    font-family: 'Inter', 'Open Sans', sans-serif;
    font-size: 14px;
    color: var(--bgda-black);
}

footer a {
    /* !important: same ClubDesk theme-CSS override we hit on the content
       sections' headings/paragraphs - a direct rule on links elsewhere
       beats a plain "footer a" selector otherwise (confirmed live: these
       were rendering yellow instead of black). */
    color: var(--bgda-black) !important;
    text-decoration: none;
}

footer a:hover {
    color: var(--bgda-orange) !important;
}

.bgda-footer-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
}

.bgda-footer-brand {
    font-size: 18px;
    font-weight: 600;
}

.bgda-footer-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 18px;
    font-weight: 600;
}

.bgda-footer-social {
    display: none;
    grid-template-columns: repeat(2, auto);
    gap: 10px;
}

/* Uniform footprint around each icon (no visible border) - the source icons
   are inconsistent in their own internal styling (some have a square
   border, one has none, one has a thin circle), so giving them all the
   same size + centering keeps the grid feeling consistent without adding
   a visible box on top of icons that already carry their own outline. */
.bgda-footer-social a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1.5px solid var(--bgda-black);
    box-sizing: border-box;
}

.bgda-footer-social img,
.bgda-footer-social svg {
    width: 22px;
    height: 22px;
    display: block;
}

