/* Hier können Sie bei Bedarf Ihre eigenen CSS-Definitionen einfügen. */
/* VBC Logo oben links */
.cd-logo-and-name-desktop .cd-club-logo {
    width: auto; /* Breite automatisch anpassen, um das Seitenverhältnis beizubehalten */
    margin-left: 30px; /* Abstand von der linken Kante */
    height: 70px;
}
/* Hintergrund von der Navigationsleiste schwarz */
.cd-navigation-bar-container {
    background: #000000;
}
/* Abstand von dem Schwarzen Balken hinter der Navigationsleiste */
#section_1000564 {
    min-height: 150px;
    margin: 0px;
    padding: 0px;
}

/* Hintergrund vom VBC Tunierbild leicht transparent, also leicht weis mit übergang */
#section_1000660 {
    background: linear-gradient(
  to bottom,
  /* Abschnitt 1-2: 0-40% komplett clean (kein Weiß) */
  rgba(255, 255, 255, 0) 0%,
  rgba(255, 255, 255, 0) 40%,
  
  /* Abschnitt 3: 40-60% ultra-sanfter Übergang */
  rgba(255, 255, 255, 0.08) 45%,
  rgba(255, 255, 255, 0.2) 55%,
  
  /* Abschnitt 4: 60-85% Haupt-Übergang */
  rgba(255, 255, 255, 0.5) 70%,
  rgba(255, 255, 255, 0.85) 85%,
  
  /* Abschnitt 5: 85-100% finales Weiß */
  rgba(255, 255, 255, 1) 100%
);
}
/* Überschrift vom VBC Tunier schöner machen */
#block_1001635_content h5 {
    font-size: 5rem; /* Kleinere Schrift */
    color: #ffffff; /* Weiße Schrift für bessere Lesbarkeit */
    text-shadow: 4px 4px 10px rgb(0 0 0 / 90%); /* Textschatten für Kontrast */
    position: relative; /* Für z-index */
    z-index: 2; /* Über dem Hintergrund */
    margin: 0;
    padding: 40px;
    text-align: center; /* Zentrierter Text */
}


/* Club-Logo Animation */
.cd-club-logo {
  transition: transform 0.3s ease;
}
/* Club-Logo Animation */
.cd-club-logo:hover {
  transform: scale(1.05) rotate(-5deg);
}

/* Teams Bilder in der Mitte anzeigen */
.cd-group-image {
  width: 100%; 
  float: unset; 
  margin: auto; 
  display: block; 
}

/* Dropdown überlappen wird somit behoben. Droppdown ist immer im Vordergrund */
.cd-singledropdownmenu .cd-menu-level-2 {
  z-index: 9999;
}


/* hover effekt Hintergrund bei der Spielertabelle minimieren (gibt es zwar immer noch aber der hintergrund ist weiss)*/
.cd-light .cd-table .cd-tr-value:hover, .cd-dark .cd-light .cd-table .cd-tr-value:hover, .cd-light .cd-dark .cd-light .cd-table .cd-tr-value:hover, .cd-dark .cd-dark .cd-light .cd-table .cd-tr-value:hover, .cd-light .cd-light .cd-dark .cd-light .cd-table .cd-tr-value:hover, .cd-dark .cd-light .cd-dark .cd-light .cd-table .cd-tr-value:hover {
	background-color: transparent !important;
}
.cd-dark .cd-table .cd-tr-value:hover, .cd-light .cd-dark .cd-table .cd-tr-value:hover, .cd-dark .cd-light .cd-dark .cd-table .cd-tr-value:hover {
	background-color: transparent !important;
}
.cd-light .cd-table .cd-tr-value:hover td, .cd-dark .cd-light .cd-table .cd-tr-value:hover td, .cd-light .cd-dark .cd-light .cd-table .cd-tr-value:hover td, .cd-dark .cd-dark .cd-light .cd-table .cd-tr-value:hover td, .cd-light .cd-light .cd-dark .cd-light .cd-table .cd-tr-value:hover td, .cd-dark .cd-light .cd-dark .cd-light .cd-table .cd-tr-value:hover td {
	color: inherit !important;
}
.cd-dark .cd-table .cd-tr-value:hover td, .cd-light .cd-dark .cd-table .cd-tr-value:hover td, .cd-dark .cd-light .cd-dark .cd-table .cd-tr-value:hover td {
	color: inherit !important;
}


/* Titel von den Sponsoren auf der Wilkommensseite*/
#block_1001335_content h1, #block_1001454_content h1, #block_1001561_content h1, #block_1001631_content h1, #block_1001664 h1, #block_1001662 h1, #block_1001660 h1, #block_1001666 h1, #block_1001659 h1, #block_1001667 h1 {
    color: white;
    /*text-shadow: 5px 5px 10px rgb(0 0 0 / 100%);*/

    color: white;
    
    /* Kombinierter text-shadow: Stroke + weicher Schatten */
    text-shadow: 
        /* Stroke-Effekt (4 Richtungen) */
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000,
        
        /* Weicher Schlagschatten (offset + blur) */
        5px 5px 10px rgb(0 0 0 / 100%);
}



/* Sponsorenhintergrund leichtes dezentes Transparent und leichte schwarze umrandung*/
.cd-light .cd-sponsors-item, .cd-dark .cd-light .cd-sponsors-item, .cd-light .cd-dark .cd-light .cd-sponsors-item, .cd-dark .cd-dark .cd-light .cd-sponsors-item, .cd-light .cd-light .cd-dark .cd-light .cd-sponsors-item, .cd-dark .cd-light .cd-dark .cd-light .cd-sponsors-item {
    background-color: rgb(255 255 255 / 60%);
    box-shadow: 4px 4px 10px rgb(0 0 0 / 10%);
}
.cd-light html, .cd-light td, .cd-light div, .cd-light .tinyMceContent > *, .cd-dark .cd-light html, .cd-dark .cd-light td, .cd-dark .cd-light div, .cd-dark .cd-light .tinyMceContent > *, .cd-light .cd-dark .cd-light html, .cd-light .cd-dark .cd-light td, .cd-light .cd-dark .cd-light div, .cd-light .cd-dark .cd-light .tinyMceContent > *, .cd-dark .cd-dark .cd-light html, .cd-dark .cd-dark .cd-light td, .cd-dark .cd-dark .cd-light div, .cd-dark .cd-dark .cd-light .tinyMceContent > *, .cd-light .cd-light .cd-dark .cd-light html, .cd-light .cd-light .cd-dark .cd-light td, .cd-light .cd-light .cd-dark .cd-light div, .cd-light .cd-light .cd-dark .cd-light .tinyMceContent > *, .cd-dark .cd-light .cd-dark .cd-light html, .cd-dark .cd-light .cd-dark .cd-light td, .cd-dark .cd-light .cd-dark .cd-light div, .cd-dark .cd-light .cd-dark .cd-light .tinyMceContent > * {
    border: none;
}




/* Startseite Bild in der mitte*/
#block_1001669 .cd-image-block {
    text-align: center;
}

#block_1001669 .cd-image-block img.cd-image-contain {
    width: 50%;
    height: auto;
    display: inline-block;
}


/* Handy design */
/*Überschreibt page.css das die Kopfzeile schwarz ist auf dem Handy*/
.cd-mobile-menu-bar-content {
    transition: all 0.4s ease;
     background: black !important;
}

@media (max-width: 990px) {
/* Startseite Logo grösser */
  #block_1001669 .cd-image-block img.cd-image-contain {
    width: 100%;
  }
/* VBC Bubendort Turnier Schrift kleiner beim Handy */
  #block_1001635_content h5 {
      font-size: 3.5rem; /* Kleinere Schrift */
  }
/* Abstand von dem Schwarzen Balken hinter der Navigationsleiste bisschen kleiner*/
#section_1000564 {
    min-height: 120px;
	margin: 0px;
    padding: 0px;
}


}


/* Nur Übergangsanimation definieren */
/* Animation der Startseite für das Logo welches eingeblendet wird */
.cd-logo-and-name-desktop {
  display: flex;
  align-items: center;
  transition: transform 0.4s ease-out;
}

/* Verschiebt ganzen Container nach links, wenn kein Logo da */
.cd-logo-and-name-desktop.shift-left {
  transform: translateX(-190px); /* ca. Breite Logo + margin */
}

.cd-club-logo {
  transition: transform 0.4s ease-out, opacity 0.4s ease-out;
  will-change: transform, opacity;
  height: 70px;
  width: auto;
  max-height: 70px;
  max-width: 200px;
  object-fit: contain;
  margin-left: 30px;
}

/* sichtbar */
.cd-club-logo.slide-in {
  transform: translateX(0);
  opacity: 1;
}

/* versteckt */
.cd-club-logo.hidden {
  transform: translateX(-150%);
  opacity: 0;
}



/*------------ ClubDesk 4.5 Update anpassungen ------------*/

/* Umrandung löschen bei allen Links */
a:focus, a:visited:focus, .tinyMceContent a:focus, .tinyMceContent a:visited:focus {
	outline: none !important;
}

/* Bei Kontakten Tabellen Hover reparieren */
.cd-light .cd-table .cd-tr-value:hover td a, .cd-dark .cd-light .cd-table .cd-tr-value:hover td a, .cd-light .cd-dark .cd-light .cd-table .cd-tr-value:hover td a, .cd-dark .cd-dark .cd-light .cd-table .cd-tr-value:hover td a, .cd-light .cd-light .cd-dark .cd-light .cd-table .cd-tr-value:hover td a, .cd-dark .cd-light .cd-dark .cd-light .cd-table .cd-tr-value:hover td a {
	color: rgba(51, 51, 51, 1.0) !important;
}

/*---------------------------------------------------------------------------------------------*/


/* Unter Links Und Dokumente Formulare Icons hinzufügen mittels SVG Platzhaltern W3*/
#block_1001630_content a {
  position: relative;
  padding-left: 1.6em; /* Platz links für Icon */
  text-underline-offset: 2px;
  line-height: 1.6;
}
#block_1001630_content a::before {
  content: "";
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  position: absolute;
  left: 0;
  top: 0.15em;
  background-color: currentColor; /* übernimmt Linkfarbe */
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zM14 3.5 18.5 8H14V3.5zM8 11h8v1.5H8V11zm0 3h8v1.5H8V14zm0 3h5v1.5H8V17z"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zM14 3.5 18.5 8H14V3.5zM8 11h8v1.5H8V11zm0 3h8v1.5H8V14zm0 3h5v1.5H8V17z"/></svg>');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Unter Links Und Dokumente Weiterführende Links Icons hinzufügen mittels SVG Platzhaltern W3*/
#block_1001626_content a {
  position: relative;
  padding-left: 1.6em; /* Platz links für Icon */
  text-underline-offset: 2px;
  line-height: 1.6;
}

#block_1001626_content a::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  position: absolute;
  left: 0;
  top: 0.15em;
  background-color: currentColor; /* übernimmt Linkfarbe */
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 420"><path stroke="black" stroke-width="26" fill="none" d="M209,15a195,195 0 1,0 2,0z"/><path stroke="black" stroke-width="18" fill="none" d="m210,15v390m195-195H15M59,90a260,260 0 0,0 302,0 m0,240 a260,260 0 0,0-302,0M195,20a250,250 0 0,0 0,382 m30,0 a250,250 0 0,0 0-382"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 420"><path stroke="black" stroke-width="26" fill="none" d="M209,15a195,195 0 1,0 2,0z"/><path stroke="black" stroke-width="18" fill="none" d="m210,15v390m195-195H15M59,90a260,260 0 0,0 302,0 m0,240 a260,260 0 0,0-302,0M195,20a250,250 0 0,0 0,382 m30,0 a250,250 0 0,0 0-382"/></svg>');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}


/* Gemeinsamer Hover-Effekt für beide Blöcke */
#block_1001630_content a,
#block_1001626_content a {
  transition: color 0.3s ease; /* sanfter Farbwechsel */
}
#block_1001630_content a::before,
#block_1001626_content a::before {
  transition: background-color 0.3s ease, transform 0.3s ease;
}
/* Hover-Effekt */
#block_1001630_content a:hover,
#block_1001626_content a:hover {
  color: rgba(238, 127, 0, 1.0) !important; /* Orange */
}
#block_1001630_content a:hover::before,
#block_1001626_content a:hover::before {
  background-color: rgba(238, 127, 0, 1.0); /* Icon färbt sich mit */
  transform: scale(1.15); /* Icon wird leicht größer */
}