/* ==========================================================================
   ClubDesk – komplettes CSS zum Layout "layout_template_teal"
   Teil 1: Schriften           Teil 2: Grundstruktur
   Teil 3: Navigation + Menü   Teil 4: Login, Cookie, Nach-oben-Button
   Teil 5: Zusatz-Styles (Hintergrund, Glas-Effekt, Rundungen)
   Teil 6: Komponenten der Vorlage (Hero, Termine, Karten, Beitritts-Banner ...)
           Gelten NUR innerhalb von <div class="vt"> ... </div>
   Teil 7: Globaler Footer (clubdesk_footer.html), Klasse .vtf
   Teil 8: Header (clubdesk_header_start.html / clubdesk_header_unterseite.html), Klasse .vth
   Teil 9: Bausteine (html_bausteine.html), Klassen .vb-* innerhalb von .vt

   Farben: Hintergrund #F6F8F5 | Karten #FFFFFF | Anthrazit #1B2430
           Teal #0F766E | Gelb #F2C230 | Linie #DDE4DF | Fläche #E7EEE9
   ========================================================================== */


/* ===== Teil 1: Schriften ================================================== */

/* montserrat-700 - v14-latin_latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url('/clubdesk/webpage/webfonts/montserrat-v14-latin_latin-ext-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/clubdesk/webpage/webfonts/montserrat-v14-latin_latin-ext-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/clubdesk/webpage/webfonts/montserrat-v14-latin_latin-ext-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('/clubdesk/webpage/webfonts/montserrat-v14-latin_latin-ext-700.woff') format('woff'), /* Modern Browsers */
       url('/clubdesk/webpage/webfonts/montserrat-v14-latin_latin-ext-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/clubdesk/webpage/webfonts/montserrat-v14-latin_latin-ext-700.svg#Oswald') format('svg'); /* Legacy iOS */
}

/* 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 */
}


/* ===== Teil 2: Grundstruktur ============================================== */

body {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #f6f8f5;
    color: #1b2430;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.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: 1120px;
    flex-basis: 1120px;
    padding: 0 50px;
    box-sizing: border-box;
}

.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 rgba(221,228,223,1.0);
    overflow: hidden;
}

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

.cd-row {
    max-width: 1120px;
    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: 100px;
}


/* ===== Teil 3: Navigation und Menü ======================================== */

.cd-navigation-bar-container {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 30000;
    transition: background 0.4s;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.cd-scroll .cd-navigation-bar-container, .cd-megamenu-open  .cd-navigation-bar-container {
    transition: background 0.4s;
    background-color: rgba(246,248,245,0.88);
    box-shadow: 0 8px 24px -16px rgba(27,36,48,0.25);
}

.cd-navigation-bar-container {
    background: rgba(246,248,245,0.88);
    border-bottom: 1px solid #dde4df;
}

.cd-header-empty .cd-navigation-bar-container {
    background: rgba(246,248,245,0.88);
    border-bottom: 1px solid #dde4df;
}

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

.cd-megamenu-button {
    cursor: pointer;
    text-decoration: none;
}
.cd-megamenu-button {
	font-family: Montserrat, sans-serif;
	font-size: 15px;
	font-weight: 700;
	font-style: normal;
	text-decoration: none;
	text-align: left;
	text-transform: none;
	margin: 0 20px;
	overflow-wrap: break-word;
}

.cd-megamenu-button {
	color: rgba(27,36,48,1.0);
}

.cd-megamenu-button:focus {
	outline-width: 3px;
	outline-style: solid;

}

.cd-megamenu-button:focus {
	outline-color: rgba(27,36,48,1.0);
}

@media (max-width: 576px) {
	.cd-megamenu-button {
		font-size: 4vmin;
	}
}



@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: rgba(255,255,255,1.0);
    border-radius: 0 0 22px 22px;
}

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

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

.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: Montserrat, sans-serif;
	font-size: 22px;
	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(27,36,48,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(27,36,48,1.0);
}


.cd-megamenu .cd-menu-level-2 a {
	font-family: Open Sans, sans-serif;
	font-size: 18px;
	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(27,36,48,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(27,36,48,1.0);
}


.cd-megamenu .cd-menu-level-3 a {
	font-family: Open Sans, sans-serif;
	font-size: 16px;
	font-weight: 400;
	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(27,36,48,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(27,36,48,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: rgba(15,118,110,1.0);
}

.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: rgba(27,36,48,1.0);
    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: Montserrat, sans-serif;
	font-size: 24px;
	font-weight: 700;
	font-style: normal;
	text-decoration: none;
	text-align: left;
	text-transform: none;
	margin: 10px 0;
	overflow-wrap: break-word;
	letter-spacing: -0.02em;
}

a.cd-club-name, a.cd-club-name:visited, a.cd-club-name:hover {
	color: rgba(27,36,48,1.0);
}

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: rgba(27,36,48,1.0);
}

@media (max-width: 576px) {
	a.cd-club-name, a.cd-club-name:visited, a.cd-club-name:hover {
		font-size: 5vmin;
	}
}


/* ===== Teil 4: Login, Cookie-Hinweis, Nach-oben-Button ==================== */

a.cd-button-login, input.cd-button-login, button.cd-button-login {
	background-color: transparent;
}

a.cd-button-login, input.cd-button-login, button.cd-button-login {
	border-color: rgba(221,228,223,1.0);
}

a.cd-button-login, input.cd-button-login, button.cd-button-login {
	font-family: Montserrat, sans-serif;
	font-size: 14px;
	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: rgba(27,36,48,1.0);
}

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: rgba(27,36,48,1.0);
}



a.cd-button-login, input.cd-button-login, button.cd-button-login {
	border-width: 2px;
	border-style: solid;
	padding: 8px 20px;
	border-radius: 50px;
	margin: 10px 0;
}

a.cd-button-login:hover, input.cd-button-login:hover, button.cd-button-login:hover {
	background-color: rgba(231,238,233,1.0);
}

a.cd-button-login:hover, input.cd-button-login:hover, button.cd-button-login:hover {
	color: rgba(15,118,110,1.0);
}

a.cd-button-login:hover, input.cd-button-login:hover, button.cd-button-login:hover {
	border-color: rgba(15,118,110,1.0);
}

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: rgba(15,118,110,1.0);
}



.cc-window, .cc-revoke {
	font-family: 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,0.9);
}

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

}

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



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(231,238,233,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(231,238,233,1.0);
}



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

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

.cc-btn {
    background-color: rgba(242,194,48,1.0);
    color: rgba(27,36,48,1.0);
    border-radius: 999px;
    font-weight: 700;
}

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

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



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

    position: fixed;
    right: -100px;
    bottom: 24px;
    width: 48px;
    height: 48px;

    z-index: 1;

    color: rgba(255,255,255,1.0);
    background-color: rgba(15,118,110,1.0);
    transition: all 0.4s ease;

    cursor: pointer;
}

.cd-totop-button {
	border-color: rgba(15,118,110,1.0);
}

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



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

.cd-totop-button:focus {
    outline-color: rgba(255,255,255,1.0) !important;
}


/* ===== Teil 5: Zusatz-Styles ============================================== */

/* Weiches Scrollen; Anker-Sprünge landen nicht unter der fixen Navigation */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* Titel enger gesetzt */
h1, h2, h3 {
    letter-spacing: -0.02em;
}


/* Navigation auf dem Smartphone: kompakter, Vereinsname darf zweizeilig sein, ohne die Leiste hoch zu machen */
@media (max-width: 576px) {
    a.cd-club-name, a.cd-club-name:visited, a.cd-club-name:hover {
        font-size: 16px;
        line-height: 1.2;
        margin: 8px 0;
    }
    /* Burger-Symbol (die drei Balken) ausblenden, nur das Wort "Menü" bleibt */
    .cd-megamenu-button {
        font-size: 14px;
        margin: 0 4px 0 10px;
        padding: 8px 4px;           /* Tippfläche für den Daumen */
        background-image: none;
    }
    .cd-megamenu-button::before,
    .cd-megamenu-button::after {
        content: none !important;
        display: none !important;
    }
    .cd-megamenu-button svg,
    .cd-megamenu-button img,
    .cd-megamenu-button i,
    .cd-megamenu-button [class*="icon"],
    .cd-megamenu-button [class*="burger"],
    .cd-megamenu-button [class*="bar"],
    .cd-megamenu-button [class*="line"] {
        display: none !important;
    }
    a.cd-button-login, input.cd-button-login, button.cd-button-login {
        padding: 6px 14px;
        font-size: 13px;
        margin: 8px 0;
    }
}


/* ===== Teil 6: Komponenten der Vorlage (style.css) =========================
   Alles ist auf <div class="vt"> begrenzt, damit nichts im ClubDesk-Layout
   (Navigation, Menü, Footer, Formulare) überschrieben wird.
   Nicht übernommen: header/nav/footer, globale Resets, Dark-Mode-Variablen. */

.vt{
  --bg:#f6f8f5; --surface:#ffffff; --ink:#1b2430; --muted:#5b6673;
  --accent:#0f766e; --accent-ink:#ffffff; --signal:#f2c230; --line:#dde4df; --soft:#e7eee9;
  --r:14px;
  font-family:'Open Sans',system-ui,sans-serif;
  font-size:17px; line-height:1.6; color:var(--ink);
}
.vt *{box-sizing:border-box}
.vt h1,.vt h2,.vt h3{font-family:Montserrat,'Open Sans',system-ui,sans-serif;font-weight:700;line-height:1.1;margin:0;letter-spacing:-.02em}
.vt a{color:inherit}
.vt :focus-visible{outline:3px solid var(--signal);outline-offset:3px}
.vt .wrap{max-width:1120px;margin:0 auto;padding:0 50px}

/* Buttons */
.vt .btn{display:inline-block;padding:13px 22px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-family:Montserrat,sans-serif;font-weight:700;text-decoration:none;border:0;cursor:pointer;font-size:16px}
.vt .btn:hover{filter:brightness(1.08)}
.vt .btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--line)}

/* Globale Version des gelben Buttons (basierend auf dem .join Banner) */
.vt a.btn.btn-yellow, 
.vt a.btn.btn-yellow:link, 
.vt a.btn.btn-yellow:visited, 
.vt a.btn.btn-yellow:focus,
.vt button.btn.btn-yellow {
    background-color: #f2c230 !important; /* Dein gewünschtes Gelb */
    color: #1b2430 !important;           /* Dunkle Schriftfarbe wie im Banner */
}

/* Der Hover-Effekt (wenn man mit der Maus darüber fährt) */
.vt a.btn.btn-yellow:hover,
.vt button.btn.btn-yellow:hover {
    background-color: #ffd447 !important; /* Das helle Gelb aus der Vorlage */
    color: #1b2430 !important;
}

/* Globale Version des roten Buttons */
.vt a.btn.btn-red, 
.vt a.btn.btn-red:link, 
.vt a.btn.btn-red:visited, 
.vt a.btn.btn-red:focus,
.vt button.btn.btn-red {
    background-color: #d32f2f !important; /* Kräftiges Rot */
    color: #ffffff !important;           /* Weiße Schrift für guten Kontrast */
}

/* Hover-Effekt für den roten Button */
.vt a.btn.btn-red:hover,
.vt button.btn.btn-red:hover {
    background-color: #b71c1c !important; /* Etwas dunkleres Rot beim Drüberfahren */
    color: #ffffff !important;
}

/* Roter Balken für die Karten (Angebotcards) */
.vt .vb-card.card-red-bar {
    border-top: 5px solid #d32f2f !important; /* Roter Balken am oberen Rand der Karte */
}

/* (Optional) Falls du den Balken lieber links haben möchtest, nutze diese Klasse: */
.vt .vb-card.card-red-left {
    border-left: 5px solid #d32f2f !important;
}

/* Hero */
.vt .hero{padding:72px 0 56px}
.vt .hero-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:start}
.vt .hero h1{font-size:clamp(40px,6.4vw,72px);max-width:12ch}
.vt .hero p.lead{font-size:20px;color:var(--muted);max-width:48ch;margin:24px 0 32px}
.vt .cta{display:flex;gap:12px;flex-wrap:wrap}
.vt .events{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:8px}
.vt .events h2{font-size:20px;padding:18px 18px 8px}
.vt .ev{display:grid;grid-template-columns:64px 1fr;gap:16px;padding:14px 18px;border-top:1px solid var(--line);align-items:center;text-decoration:none}
.vt .ev:first-of-type{border-top:0}
.vt .ev:hover{background:var(--soft);border-radius:14px}
.vt .date{background:var(--soft);border-radius:12px;text-align:center;padding:8px 0;font:700 24px/1 Montserrat,sans-serif}
.vt .date small{display:block;font:400 12px/1.4 'Open Sans',sans-serif;color:var(--muted);margin-top:2px}
.vt .ev:first-of-type .date{background:var(--signal);color:#1b2430}
.vt .ev b{display:block}
.vt .ev span{color:var(--muted);font-size:15px}
.vt .all{display:block;padding:14px 18px;font-weight:700;color:var(--accent);text-decoration:none}

/* Abschnitte */
.vt section{padding:64px 0}
.vt .head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:32px;flex-wrap:wrap}
.vt .head h2{font-size:clamp(30px,4vw,42px)}
.vt .head a{font-weight:700;color:var(--accent);text-decoration:none}
.vt .news{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.vt .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;text-decoration:none}
.vt .card .img{aspect-ratio:16/10;background:linear-gradient(135deg,var(--accent),var(--soft))}
.vt .card:nth-child(2) .img{background:linear-gradient(135deg,var(--signal),var(--soft))}
.vt .card:nth-child(3) .img{background:linear-gradient(135deg,var(--ink),var(--accent))}
.vt .card div.t{padding:20px}
.vt .card time{font-size:14px;color:var(--muted)}
.vt .card h3{font-size:22px;margin:6px 0 8px}
.vt .card p{margin:0;color:var(--muted);font-size:16px}

.vt .about{background:var(--surface);border-block:1px solid var(--line)}
.vt .about-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:56px}
/* Schiebt nur den Angebote-Block innerhalb seiner Spalte nach rechts */
@media (min-width: 1201px) {
    .vt .about-grid .swisswushu {
        margin-left: 240px !important; 
    }

}.vt .about p{color:var(--muted);max-width:60ch}
.vt .facts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.vt .facts div{border-left:4px solid var(--signal);padding-left:14px}
.vt .facts b{font:700 34px/1 Montserrat,sans-serif;display:block}
.vt .facts span{font-size:14px;color:var(--muted)}
.vt .offers{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-content:start}
.vt .offer{border:1px solid var(--line);border-radius:var(--r);padding:20px;background:var(--bg)}
.vt .offer h3{font-size:19px;margin-bottom:6px}
.vt .offer p{margin:0;font-size:15px}

.vt .board{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.vt .person .ph{aspect-ratio:1;border-radius:var(--r);background:var(--soft);margin-bottom:12px;display:grid;place-items:center;font:700 40px Montserrat,sans-serif;color:var(--accent)}
.vt .person b{display:block}
.vt .person span{color:var(--muted);font-size:15px}

.vt .join{background:var(--accent);color:var(--accent-ink);border-radius:28px;padding:56px;display:grid;grid-template-columns:1.3fr 1fr;gap:32px;align-items:center}
.vt .join h2{font-size:clamp(30px,4vw,46px)}
.vt .join p{margin:14px 0 0;opacity:.9;max-width:46ch}
.vt .join .btn{background:var(--signal);color:#1b2430;justify-self:start}

.vt .contact{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.vt .vt-form{display:grid;gap:14px}
.vt label{font-weight:700;font-size:15px;display:grid;gap:6px}
.vt input,.vt textarea{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.vt textarea{min-height:120px;resize:vertical}
.vt .info p{margin:0 0 18px;color:var(--muted)}
.vt .info b{color:var(--ink);display:block}

/* --- Lesbarkeit: ClubDesk-Link- und Überschriftenfarben dürfen die Vorlage nicht überschreiben --- */
.vt h1, .vt h2, .vt h3 { color: #1b2430; }

.vt a.btn, .vt a.btn:link, .vt a.btn:visited, .vt a.btn:hover, .vt a.btn:active, .vt a.btn:focus,
.vt button.btn {
    background-color: #0f766e !important;
    color: #ffffff !important;
    text-decoration: none !important;
}
.vt a.btn:hover, .vt button.btn:hover { background-color: #0b5c56 !important; }

.vt a.btn.ghost, .vt a.btn.ghost:link, .vt a.btn.ghost:visited, .vt a.btn.ghost:hover, .vt a.btn.ghost:focus {
    background-color: transparent !important;
    color: #1b2430 !important;
}
.vt a.btn.ghost:hover { background-color: #e7eee9 !important; }

/* Beitritts-Banner: dunkelgrün mit heller Schrift, gelber Button mit dunkler Schrift */
.vt .join { background-color: #0f766e; }
.vt .join h2, .vt .join p, .vt .join div { color: #ffffff !important; }
.vt .join a.btn, .vt .join a.btn:link, .vt .join a.btn:visited, .vt .join a.btn:hover, .vt .join a.btn:focus {
    background-color: #f2c230 !important;
    color: #1b2430 !important;
}
.vt .join a.btn:hover { background-color: #ffd447 !important; }

/* Links in der Vorlage */
.vt a.all, .vt a.all:link, .vt a.all:visited, .vt .head a, .vt .head a:link, .vt .head a:visited {
    color: #0f766e; text-decoration: none;
}
.vt a.ev, .vt a.ev:link, .vt a.ev:visited, .vt a.card, .vt a.card:link, .vt a.card:visited {
    color: #1b2430; text-decoration: none;
}
.vt .card p, .vt .ev span, .vt .about p, .vt .facts span, .vt .person span, .vt .info p { color: #5b6673; }
.vt .info b, .vt .ev b, .vt .person b { color: #1b2430; }

@media (max-width:1200px){
  .vt .hero-grid,.vt .about-grid,.vt .contact,.vt .join{grid-template-columns:1fr}
  .vt .news{grid-template-columns:1fr}
  .vt .board{grid-template-columns:1fr 1fr}
  .vt .join{padding:32px}
}


/* ===== Teil 7: Globaler Footer (clubdesk_footer.html) ======================
   Dunkler, unten ruhiger Abschluss mit abgerundeten oberen Ecken.
   Alle Farben sind fest gesetzt, damit ClubDesk-Link- und Überschriftenfarben
   nichts überschreiben. */

.vtf {
    background-color: #1b2430;
    color: rgba(238,242,240,0.85);
    font-family: 'Open Sans', system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    border-radius: 28px 28px 0 0;
    padding: 64px 12px 28px;
    margin-top: 48px;
}
.vtf * { box-sizing: border-box; }
.vtf-wrap { max-width: 1120px; margin: 0 auto; }

.vtf-grid {
    display: grid;
    /* Wir machen alle 5 Spalten gleich breit, oder passen sie leicht an */
    grid-template-columns: 1.2fr 1fr 1fr 1fr 1.2fr; 
    gap: 30px; /* Den Abstand etwas verkleinern, da wir nun mehr Spalten auf gleichem Platz haben */
}

.vtf-brand {
    font-family: Montserrat, 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 24px;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin: 0 0 12px;
}
.vtf-about p { margin: 0 0 20px; max-width: 34ch; color: #9aa7b2; }

.vtf h3 {
    font-family: Montserrat, 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.02em;
    margin: 0 0 14px;
    color: #ffffff !important;
}

.vtf ul { list-style: none; margin: 0; padding: 0; }
.vtf li { margin: 0 0 8px; }
.vtf address { font-style: normal; color: #9aa7b2; margin: 0 0 12px; }
.vtf p.vtf-contact { margin: 0; }

/* Links: feste Farben in allen Zuständen */
.vtf a, .vtf a:link, .vtf a:visited {
    color: rgba(238,242,240,0.85) !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}
.vtf a:hover, .vtf a:focus {
    color: #f2c230 !important;
}
.vtf a:focus-visible { outline: 3px solid #f2c230; outline-offset: 3px; border-radius: 4px; }

/* Vereinsname und Spaltenüberschriften sind Links: weiss, bei Hover gelb */
.vtf .vtf-brand a, .vtf .vtf-brand a:link, .vtf .vtf-brand a:visited,
.vtf h3 a, .vtf h3 a:link, .vtf h3 a:visited {
    color: #ffffff !important;
    font: inherit;
    letter-spacing: inherit;
}
.vtf .vtf-brand a:hover, .vtf h3 a:hover, .vtf .vtf-brand a:focus, .vtf h3 a:focus {
    color: #f2c230 !important;
}

/* Button im Footer */
.vtf a.vtf-btn, .vtf a.vtf-btn:link, .vtf a.vtf-btn:visited {
    display: inline-block;
    padding: 12px 22px;
    border-radius: 999px;
    background-color: #f2c230 !important;
    color: #1b2430 !important;
    font-family: Montserrat, 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 15px;
}
.vtf a.vtf-btn:hover, .vtf a.vtf-btn:focus {
    background-color: #ffd447 !important;
    color: #1b2430 !important;
}

/* Untere Leiste */
.vtf-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.12);
    font-size: 14px;
    color: #9aa7b2;
}
.vtf-legal a { margin-left: 20px; }
.vtf-legal a:first-child { margin-left: 0; }

@media (max-width: 900px) {
    .vtf-grid { grid-template-columns: 1fr 1fr; }
    .vtf-about { grid-column: 1 / -1; }
}
@media (max-width: 576px) {
    .vtf { padding-top: 48px; border-radius: 20px 20px 0 0; }
    .vtf-grid { grid-template-columns: 1fr; gap: 28px; }
    .vtf-bottom { flex-direction: column; align-items: flex-start; }
    .vtf-legal a { margin: 0 20px 0 0; }
}


/* ===== Teil 8: Header (.vth) ===============================================
   Startseite: grosser Bild-Header (.vth-home) mit Tagline und zwei Buttons.
   Unterseiten: schmaler Titel-Header (.vth-page).
   Das Bild wird per style="--vth-img: url('https://...')" gesetzt. Ohne Bild
   erscheint ein Teal-Anthrazit-Verlauf. Die Navigation liegt fix darüber. */

.vth {
    position: relative;
    width: 100%;
    display: flex;
    align-items: flex-end;
    padding: 96px 0 56px;               /* oben Platz für die fixe Navigation */
    background-color: #1b2430;
    background-image:
        linear-gradient(180deg, rgba(27,36,48,0.35) 0%, rgba(27,36,48,0.80) 100%),
        var(--vth-img, linear-gradient(135deg, #0f766e 0%, #1b2430 100%));
    background-size: cover;
    background-position: center;
    border-radius: 0 0 28px 28px;
    overflow: hidden;
    box-sizing: border-box;
}
.vth * { box-sizing: border-box; }
.vth-home { min-height: clamp(440px, 64vh, 660px); }
.vth-page { min-height: 260px; padding-bottom: 40px; }

.vth-inner {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 50px;
}

.vth-kicker {
    display: inline-block;
    margin: 0 0 18px;
    padding: 6px 14px;
    border-radius: 999px;
    background-color: rgba(255,255,255,0.14);
    color: #ffffff !important;
    font-family: Montserrat, 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.02em;
}

.vth h1.vth-title, .vth .vth-title {
    margin: 0;
    color: #ffffff !important;
    font-family: Montserrat, 'Open Sans', sans-serif;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.03em;
    text-shadow: 0 2px 24px rgba(0,0,0,0.25);
}
.vth-home .vth-title { font-size: clamp(40px, 6.4vw, 76px); max-width: 16ch; }
.vth-page .vth-title { font-size: clamp(32px, 5vw, 54px); max-width: 24ch; }

.vth p.vth-lead {
    margin: 22px 0 0;
    max-width: 52ch;
    color: rgba(255,255,255,0.9) !important;
    font-size: 20px;
    line-height: 1.55;
}

.vth-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* Buttons im Header: feste Farben in allen Zuständen */
.vth a.vth-btn, .vth a.vth-btn:link, .vth a.vth-btn:visited {
    display: inline-block;
    padding: 14px 28px;
    border-radius: 999px;
    background-color: #f2c230 !important;
    color: #1b2430 !important;
    font-family: Montserrat, 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none !important;
    transition: background-color 0.2s ease, transform 0.2s ease;
}
.vth a.vth-btn:hover, .vth a.vth-btn:focus {
    background-color: #ffd447 !important;
    color: #1b2430 !important;
    transform: translateY(-2px);
}
.vth a.vth-btn.vth-btn-ghost, .vth a.vth-btn.vth-btn-ghost:link, .vth a.vth-btn.vth-btn-ghost:visited {
    background-color: transparent !important;
    color: #ffffff !important;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.55);
}
.vth a.vth-btn.vth-btn-ghost:hover, .vth a.vth-btn.vth-btn-ghost:focus {
    background-color: rgba(255,255,255,0.14) !important;
    color: #ffffff !important;
}
.vth a:focus-visible { outline: 3px solid #f2c230; outline-offset: 3px; }

@media (max-width: 576px) {
    .vth { padding: 108px 0 36px; border-radius: 0 0 20px 20px; }
    .vth-home { min-height: 480px; }
    .vth-page { min-height: 240px; padding-bottom: 28px; }
    .vth-inner { padding: 0 20px; }
    .vth-home .vth-title { font-size: clamp(30px, 8.6vw, 42px); max-width: none; }
    .vth-page .vth-title { font-size: clamp(28px, 8vw, 38px); }
    .vth-kicker { font-size: 13px; margin-bottom: 14px; }
    .vth p.vth-lead { font-size: 17px; margin-top: 16px; }
    .vth-cta { flex-direction: column; gap: 10px; margin-top: 24px; }
    .vth a.vth-btn { display: block; width: 100%; text-align: center; padding: 14px 22px; font-size: 15px; }
}


/* ===== Teil 9: Bausteine (html_bausteine.html) =============================
   Jeder Baustein steht in <div class="vt"><section class="vb"> ... </section></div>.
   Farben sind fest gesetzt, damit ClubDesk-Link- und Textfarben nichts überschreiben. */

.vt section.vb { padding: 48px 0; }
.vt .vb p, .vt .vb li, .vt .vb td, .vt .vb th, .vt .vb dd, .vt .vb summary + div { color: #5b6673; margin-top: 0; }
.vt .vb h2, .vt .vb h3 { color: #1b2430; }
.vt .vb a:not(.btn), .vt .vb a:not(.btn):link, .vt .vb a:not(.btn):visited { color: #0f766e; font-weight: 700; text-decoration: none; }
.vt .vb a:not(.btn):hover { text-decoration: underline; }

.vt .vb-head { max-width: 62ch; margin: 0 0 28px; }
.vt .vb-head h2 { font-size: clamp(28px, 4vw, 40px); }
.vt .vb-head p { margin: 12px 0 0; }
.vt .vb-eyebrow { display: block; margin: 0 0 10px; font: 700 13px/1 Montserrat, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: #0f766e !important; }

/* Text + Bild */
.vt .vb-split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.vt .vb-split.rev .vb-media { order: 2; }
.vt .vb-split h2 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 14px; }
.vt .vb-split p { margin: 0 0 14px; }
.vt .vb-media { aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden; background: linear-gradient(135deg, #0f766e, #e7eee9); }
.vt .vb-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Karten-Raster */
.vt .vb-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.vt .vb-card { background: #ffffff; border: 1px solid #dde4df; border-radius: 14px; padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.vt .vb-card h3 { font-size: 21px; }
.vt .vb-card p { margin: 0; }
.vt .vb-card .vb-more { margin-top: auto; padding-top: 8px; }
.vt .vb-tag { align-self: flex-start; padding: 4px 12px; border-radius: 999px; background: #e7eee9; color: #0f766e !important; font: 700 13px/1.4 Montserrat, sans-serif; }

/* Zahlen */
.vt .vb-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; }
.vt .vb-facts div { border-left: 4px solid #f2c230; padding-left: 14px; }
.vt .vb-facts b { display: block; font: 700 38px/1 Montserrat, sans-serif; color: #1b2430; }
.vt .vb-facts span { font-size: 14px; color: #5b6673; }

/* Tabelle (Trainingszeiten, Preise) */
.vt .vb-tablewrap { overflow-x: auto; border: 1px solid #dde4df; border-radius: 14px; background: #ffffff; }
.vt table.vb-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.vt .vb-table th { text-align: left; padding: 14px 18px; background: #e7eee9; color: #1b2430 !important; font: 700 14px/1.4 Montserrat, sans-serif; white-space: nowrap; }
.vt .vb-table td { padding: 14px 18px; border-top: 1px solid #dde4df; }
.vt .vb-table tr:hover td { background: #f6f8f5; }
.vt .vb-table td:first-child { color: #1b2430; font-weight: 700; }

/* Personen (Vorstand, Trainer) */
.vt .vb-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.vt .vb-photo { aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: #e7eee9; margin-bottom: 12px; display: grid; place-items: center; font: 700 40px Montserrat, sans-serif; color: #0f766e; }
.vt .vb-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vt .vb-person b { display: block; color: #1b2430; font-size: 17px; }
.vt .vb-person span { display: block; font-size: 15px; color: #5b6673; }

/* Sponsoren / Logos */
.vt .vb-logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.vt .vb-logo { aspect-ratio: 3 / 2; display: grid; place-items: center; padding: 20px; background: #ffffff; border: 1px solid #dde4df; border-radius: 14px; text-align: center; font: 700 15px Montserrat, sans-serif; color: #5b6673; }
.vt .vb-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Galerie */
.vt .vb-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.vt .vb-gallery div { aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: linear-gradient(135deg, #e7eee9, #dde4df); }
.vt .vb-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; }
.vt .vb-gallery div:hover img { transform: scale(1.04); }

/* Downloads */
.vt .vb-files { display: grid; gap: 10px; }
.vt .vb-file { display: grid; grid-template-columns: 52px 1fr auto; gap: 16px; align-items: center; padding: 14px 18px; background: #ffffff; border: 1px solid #dde4df; border-radius: 14px; }
.vt .vb-ext { width: 52px; height: 52px; border-radius: 12px; background: #e7eee9; display: grid; place-items: center; font: 700 13px Montserrat, sans-serif; color: #0f766e; }
.vt .vb-file b { display: block; color: #1b2430; }
.vt .vb-file span { font-size: 14px; color: #5b6673; }

/* FAQ */
.vt .vb-faq { display: grid; gap: 10px; max-width: 1200px; }
.vt .vb-faq details { background: #ffffff; border: 1px solid #dde4df; border-radius: 14px; }
.vt .vb-faq summary { cursor: pointer; padding: 18px 22px; font: 700 17px Montserrat, sans-serif; color: #1b2430 !important; list-style: none; }
.vt .vb-faq summary::-webkit-details-marker { display: none; }
.vt .vb-faq summary::after { content: "+"; float: right; color: #0f766e; font-size: 22px; line-height: 1; }
.vt .vb-faq details[open] summary::after { content: "\2212"; }
.vt .vb-faq details > div { padding: 0 22px 18px; }
.vt .vb-faq details > div p { margin: 0; }

/* Fix für das verschobene Plus-Zeichen im FAQ bei langem Text */
.vt .vb-faq summary {
    display: flex !important;
    justify-content: space-between;
    align-items: flex-start; /* Hält das Plus oben, wenn der Text mehrzeilig wird */
    gap: 16px; /* Sorgt für einen Mindestabstand zwischen Text und Plus */
}

.vt .vb-faq summary::after {
    float: none !important; /* Deaktiviert das alte, fehlerhafte Verhalten */
    flex-shrink: 0; /* Verhindert, dass das Plus-Zeichen vom Text gequetscht wird */
    margin-top: -2px; /* Optische Korrektur für die exakte Höhe */
}

/* Hinweisbox */
.vt .vb-note { background: #e7eee9; border-left: 4px solid #0f766e; border-radius: 14px; padding: 18px 22px; }
.vt .vb-note.warn { border-left-color: #f2c230; background: #fdf6df; }
.vt .vb-note b { display: block; color: #1b2430; margin-bottom: 4px; }
.vt .vb-note p { margin: 0; color: #1b2430; }

/* Kontakt-Karten */
.vt .vb-contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.vt .vb-contact .vb-card b { color: #1b2430; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; }

/* Rechtstexte (Impressum, Datenschutz) */
.vt .vb-legal { max-width: 760px; }
.vt .vb-legal h2 { font-size: 30px; margin: 0 0 18px; }
.vt .vb-legal h3 { font-size: 20px; margin: 30px 0 8px; }
.vt .vb-legal p { margin: 0 0 12px; }
.vt .vb-legal ul { margin: 0 0 12px; padding-left: 20px; }

@media (max-width: 900px) {
    .vt .vb-split { grid-template-columns: 1fr; gap: 24px; }
    .vt .vb-split.rev .vb-media { order: 0; }
}
@media (max-width: 576px) {
    .vt .vb-file { grid-template-columns: 44px 1fr; }
    .vt .vb-file .btn { grid-column: 1 / -1; text-align: center; }
    .vt section.vb { padding: 36px 0; }
}

/* Mobiler Fallback für die Inhaltsbreite */
@media (max-width: 576px) {
    .columns, 
    .vt .wrap {
        padding: 0 20px;
    }
}

/* Globale Brechstange für abgeschnittene ClubDesk-Formularfelder */
body input[type="text"],
body input[type="email"],
body input[type="date"],
body input[type="tel"],
body input[type="number"],
body select,
body textarea {
    height: auto !important;
    min-height: 48px !important;
    max-height: none !important;
    line-height: 1.5 !important;
    padding: 10px 14px !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
}

body select {
    appearance: auto !important;
    -webkit-appearance: auto !important;
}