@charset "UTF-8";
/* CSS Document */

/* albert-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Albert Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/albert-sans-v4-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* bebas-neue-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/bebas-neue-v16-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root {
	--grau: #3A3A3A;
	--petrol: #579496;
}

h1{
	font-family: 'Bebas Neue';
	font-size: 500px;
}


head, body, html {
	height: 100%;
	background-color: var(--grau);
	color: white;
	font-family: 'Albert Sans';
}

h2, h3, p{
	color: white;
	
}


/* Das Hero Image */
.hero-image {
	/* Mit "linear-gradient" wird das Hintergrundbild (images/photographer.jpg) abgedunkelt, damit der Text leichter lesbar ist */
	background-image: linear-gradient(rgba(0, 0, 0, 0.5),
					rgba(0, 0, 0, 0.5)),
					url("../images/hero.jpg");

	/* Höhe des Hero-Images festlegen */
	height: 100vh; /* 50vh macht das Hero-Image nur halb so hoch */

	/* Ausrichtung und Zentrierung des Bildes, damit es auf allen Bildschirmen gut aussieht */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	display: flex;
	justify-content: center;
}

.hero-image-spieler {
	/* Mit "linear-gradient" wird das Hintergrundbild (images/photographer.jpg) abgedunkelt, damit der Text leichter lesbar ist */
	background-image: linear-gradient(rgba(0, 0, 0, 0.5),
					rgba(0, 0, 0, 0.5)),
					url("../images/Herp_Spieler.JPG")!important;

	/* Höhe des Hero-Images festlegen */
	height: 100vh; /* 50vh macht das Hero-Image nur halb so hoch */

	/* Ausrichtung und Zentrierung des Bildes, damit es auf allen Bildschirmen gut aussieht */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	display: flex;
	justify-content: center;
}

.hero-image-aufstellung {
	/* Mit "linear-gradient" wird das Hintergrundbild (images/photographer.jpg) abgedunkelt, damit der Text leichter lesbar ist */
	background-image: linear-gradient(rgba(0, 0, 0, 0.5),
					rgba(0, 0, 0, 0.5)),
					url("../images/Hero_Aufstellung.JPG")!important;

	/* Höhe des Hero-Images festlegen */
	height: 100vh; /* 50vh macht das Hero-Image nur halb so hoch */

	/* Ausrichtung und Zentrierung des Bildes, damit es auf allen Bildschirmen gut aussieht */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	display: flex;
	justify-content: center;
}

.hero-image-galerie {
	/* Mit "linear-gradient" wird das Hintergrundbild (images/photographer.jpg) abgedunkelt, damit der Text leichter lesbar ist */
	background-image: linear-gradient(rgba(0, 0, 0, 0.5),
					rgba(0, 0, 0, 0.5)),
					url("../images/Hero_Galerie.JPG")!important;

	/* Höhe des Hero-Images festlegen */
	height: 100vh; /* 50vh macht das Hero-Image nur halb so hoch */

	/* Ausrichtung und Zentrierung des Bildes, damit es auf allen Bildschirmen gut aussieht */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	display: flex;
	justify-content: center;
}

.hero-image-spielplan {
	/* Mit "linear-gradient" wird das Hintergrundbild (images/photographer.jpg) abgedunkelt, damit der Text leichter lesbar ist */
	background-image: linear-gradient(rgba(0, 0, 0, 0.5),
					rgba(0, 0, 0, 0.5)),
					url("../images/Hero_Spielplan.JPG")!important;

	/* Höhe des Hero-Images festlegen */
	height: 100vh; /* 50vh macht das Hero-Image nur halb so hoch */

	/* Ausrichtung und Zentrierung des Bildes, damit es auf allen Bildschirmen gut aussieht */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	display: flex;
	justify-content: center;
}

.hero-image-kontakt {
	/* Mit "linear-gradient" wird das Hintergrundbild (images/photographer.jpg) abgedunkelt, damit der Text leichter lesbar ist */
	background-image: linear-gradient(rgba(0, 0, 0, 0.5),
					rgba(0, 0, 0, 0.5)),
					url("../images/Hero_Kontakt.JPG")!important;

	/* Höhe des Hero-Images festlegen */
	height: 100vh; /* 50vh macht das Hero-Image nur halb so hoch */

	/* Ausrichtung und Zentrierung des Bildes, damit es auf allen Bildschirmen gut aussieht */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	display: flex;
	justify-content: center;
}


/* Platziert einen Text in der Mitte des Bildes (optional) */
.hero-text {
	color: white;
	text-align: center;
	align-self: center;
}

.hero-text button {
	border: none;
	outline: 0;
	display: inline-block;
	padding: 10px 25px;
	color: black;
	background-color: #ddd;
	text-align: center;
	cursor: pointer;
}

.hero-text button:hover {
	background-color: #555;
	color: white;
}




.container-fluid {
	padding-top: 50px;
	padding-bottom: 50px;
}

/* vertical-centered text */
.text-vcenter {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.text-vcenter h1 {
  font-size: 4.5em;
  font-weight: 700;
  color: #FFF;
  margin: 0;
  padding: 0;
}

.text-vcenter h3 {
  color: #FFF;
}

/* additional sections */
#hero {
  background: linear-gradient(rgba(0, 0, 0, 0.5),
					rgba(0, 0, 0, 0.5)),
					url("../images/hero.jpg")
	  no-repeat center center fixed;
  display: table;
  height: 100%;
  position: relative;
  width: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.hero_button{
	
	font-size: 30px;
	color: var(--petrol);
	padding: 5px;
	border-radius: 10px;
}

.hero_button:hover{

	font-size: 30px;
	font-weight: bold;
	color: white;
	padding: 5px;
	border-radius: 10px;
	text-decoration: none;
}

#sponsoren{
  background-color: white;
  color: #ffffff;
}

#sponsoren .glyphicon {
  border: 2px solid #FFFFFF;
  border-radius: 50%;
  display: inline-block;
  font-size: 60px;
  height: 140px;
  line-height: 140px;
  text-align: center;
  vertical-align: middle;
  width: 140px;
}

#broschure {
  background: linear-gradient(rgba(0, 0, 0, 0.8),
					rgba(0, 0, 0, 0.5)), url("../images/parallax.jpg") no-repeat center center fixed;
  display: table;
  height: 800px;
  position: relative;
  width: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
 
}

#broschure .panel {
background-color: white;
padding: 10px;
border-radius: 0px 0px 10px 10px;
}



#google_map {
  height: 500px;
}

footer {
  padding: 20px 0;
}

footer .glyphicon {
  color: #333333;
  font-size: 60px;
}

footer .glyphicon:hover {
  color: #306d9f;
}


/* Hover-Effekt für die Navbar-Links in der dunklen Leiste */
.navbar-dark .navbar-nav .nav-link:hover {
    background-color: var(--petrol) !important; 
	color: white !important;
	border-radius: 4px !important;
}


/* Style the buttons that are used to open and close the accordion panel */
.accordion {
  background-color: var(--petrol);
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
  border-radius: 10px 10px 0px 0px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
  background-color: var(--grau);
color: white;
}


.panel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;

}

.pdf_download a {
  color: var(--petrol);       
  text-decoration: none;   
  font-size: 20px;
}

.pdf_download a:hover {
  color: var(--petrol);       
  text-decoration: none; 
 font-style: bold;
}

.carousel-control {
  background: none;
  color: var(--petrol);
  font-size: 40px;
}

.carousel-item img {
  display: block;
  margin: 0 auto;
	 width: 100%;
  height: auto;
}


.footer_font{
	color: white;
}

footer img {
  display: block;
  margin: 0 auto;
}

.lukas {
  width: 100%;
  height: 220px;        
  object-fit: cover;    
  border-radius: 8px;
}

h5{
	color: var(--petrol)
}

.column {
  flex: 33.33%;
  max-width: 33.33%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}

table {
  border-collapse: collapse;
  width: 100%;
 background-color: white;
}

th{
	color: var(--petrol)
}
td, th {
  
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}



.navbar .dropdown {
  position: relative;
}

.navbar .dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--grau) !important;
  min-width: 180px;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
  z-index: 9999;
}

/* Links */
.navbar .dropdown-content a {
  color: white !important;
  padding: 10px 15px;
  display: block;
  text-decoration: none;
}

/* Hover */
.navbar .dropdown-content a:hover {
  background-color: var(--petrol) !important;
  color: white !important;
}

/* Anzeigen */
.navbar .dropdown:hover .dropdown-content {
  display: block;
}


.bg-petrol{
	background-color: var(--petrol);
}

label{
	color: var(--grau);
}

.input{
	width: 100%;
	border-style: solid, 2px white;
}

.absenden{
	float: right;
	margin-bottom: 50px;
	background-color: var(--grau);
	border-radius: 4px;
	border-style: none;
	padding: 5px;
	color:white;
}

.absenden:hover{
	float: right;
	margin-bottom: 50px;
	background-color: white;
	border-radius: 4px;
	border-style: none;
	padding: 5px;
	color: var(--petrol);
}

iframe{
	margin: auto;
}

.gruppen {
  margin-bottom: 30px;
  margin-top: 30px;
}

.finale {
  text-align: center;
  margin-bottom: 30px;
 border: solid 2px var(--petrol);
	width: 50%;
	border-radius: 10px;
	margin: auto;
}

.runde{
   
	background-color: var(--petrol);
	
		width: 100%;
	padding: 5px;
	border-radius: 10px;
	margin-bottom: 20px;
}

.runde_schrift{
	color: var(--grau);
}

.bebas{
	font-family:'Bebas Neue';
	font-size: 50px;
}

blockquote{
	color: white;
}

.schief{
	clip-path: polygon(0 0, 95% 0, 100% 100%, 0% 100%);
}

.logo-bounce {
    display: flex;
    justify-content: center;  
    align-items: center;      
}

.logo-bounce img {
    width: 100px;
    animation: bouncePause 2.5s infinite;
}

@keyframes bouncePause {
    0%   { transform: translateY(0); }
    10%  { transform: translateY(-20px); }
    20%  { transform: translateY(0); }
    30%  { transform: translateY(-10px); }
    40%  { transform: translateY(0); }

    /* Pause */
    50%,
    60%,
    70%,
    80%,
    90%,
    100% { transform: translateY(0); }
}

.scale:hover {
	transform: scale(1.2, 1.2);

}

.spielplan-section{
    background: var(--grau);
    min-height:100vh;
    padding:80px 0;
}

.spielplan-section h1,
.spielplan-section h2{
    color:white;
}

.spielplan-card{
    background:white;
    border-radius:20px;
    padding:30px;
    height:100%;
}

.spielplan-card h3{
    color:var(--petrol);
    text-align:center;
    margin-bottom:25px;
}

.spielplan-card li{
    color:var(--grau);
    font-size:1.3rem;
    margin-bottom:12px;
}

.spiel-box{
    background:white;
    border-radius:20px;
    overflow:hidden;
    margin-bottom:40px;
    box-shadow:0 10px 30px rgba(0,0,0,.25);
}

.runde-header{
    background:var(--petrol);
    color:white;
    font-size:1.6rem;
    padding:20px 30px;
    font-weight:bold;
}

.spiel-content{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:40px;
}

.spiel-content span{
    color:#777;
    display:block;
    margin-bottom:10px;
}

.spiel-content h4{
    color:var(--grau);
    font-size:2rem;
}

.vs{
    font-family:'Bebas Neue';
    font-size:4rem;
    color:var(--petrol);
}

.finalbereich{
    margin-top:120px;
}

.final-info{
    max-width:700px;
    margin:0 auto 50px auto;
    background:white;
    color:var(--grau);
    border-radius:20px;
    padding:40px;
    text-align:center;
    font-size:2rem;
}

.finalbild{
    width:100%;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.3);
}

@media(max-width:992px){

    .spiel-content{
        flex-direction:column;
        text-align:center;
        gap:20px;
    }

    .vs{
        font-size:3rem;
    }

    .spiel-content h4{
        font-size:1.5rem;
    }

    .final-info{
        font-size:1.4rem;
    }
}



.sponsor-section {
      padding: 30px 0;
    }

    .sponsor-section-title {
      text-align: center;
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #999;
      margin-bottom: 20px;
    }

    .sponsor-section-title::before,
    .sponsor-section-title::after {
      content: '';
      display: inline-block;
      width: 40px;
      height: 1px;
      background: #ddd;
      vertical-align: middle;
      margin: 0 12px;
    }

    /* Hauptsponsoren – groß */
    .sponsor-logo-lg {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: #fff;
      border: 1px solid #e9ecef;
      border-radius: 8px;
      height: 130px;
      transition: box-shadow 0.2s ease, border-color 0.2s ease;
    }

    .sponsor-logo-lg:hover {
      box-shadow: 0 4px 16px rgba(0,0,0,0.08);
      border-color: #ced4da;
    }

    .sponsor-logo-lg img {
      max-width: 100%;
      max-height: 95px;
      object-fit: contain;
      filter: grayscale(30%);
      transition: filter 0.2s ease;
    }

    .sponsor-logo-lg:hover img {
      filter: grayscale(0%);
    }

    /* Silber & Partner – gleich groß */
    .sponsor-logo-md,
    .sponsor-logo-sm {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 14px;
      background: #fff;
      border: 1px solid #e9ecef;
      border-radius: 8px;
      height: 95px;
      transition: box-shadow 0.2s ease, border-color 0.2s ease;
    }

    .sponsor-logo-md:hover,
    .sponsor-logo-sm:hover {
      box-shadow: 0 4px 16px rgba(0,0,0,0.08);
      border-color: #ced4da;
    }

    .sponsor-logo-md img,
    .sponsor-logo-sm img {
      max-width: 100%;
      max-height: 70px;
      object-fit: contain;
      filter: grayscale(40%);
      transition: filter 0.2s ease;
    }

    .sponsor-logo-md:hover img,
    .sponsor-logo-sm:hover img {
      filter: grayscale(0%);
    }

    .sponsor-divider {
      border: none;
      border-top: 1px solid #e9ecef;
      margin: 0 30px;
    }

.mail{
	color: white;
}

.mail:hover{
	color: black;
}



 .spieler-img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: top;
	 border-radius: 0.375rem;}