@font-face {
font-family : 'poppins';
src : url("fonts/poppins.woff") format('woff');
font-weight : normal;
font-style : normal;
}
@font-face {
font-family : 'Pacifico';
src : url("fonts/Pacifico.woff") format('woff');
font-weight : normal;
font-style : normal;
}
@font-face {
font-family : 'SpicyWasabi';
src : url("fonts/SpicyWasabi.woff") format('woff');
font-weight : normal;
font-style : normal;
}
@font-face {
font-family : 'PatrickHand';
src : url("fonts/PatrickHand-Regular.woff") format('woff');
font-weight : normal;
font-style : normal;
}

/* ============================================ Basis-Reset ============================================  */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* ============================================ Global Reset & Basis-Styles ============================================ */
*, *::before, *::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	/* Farben zentral anpassbar */
	--color-orange: #fcae05;
	--color-blau: #336699;
	--color-rot: #ff0000;
	--color-menu-bar: #454e5c;
	--color-menu-text: #fcae05;
	--color-menu-hover-text: #ffffff;
	--color-menu-hover-bg: #333333;
	--color-body-bg: #f5f5f5;
	--color-footer-bg: #454e5c;
	--color-footer-text: #cccccc;
	--color-flexbox-bg: #ffffff;
	--color-flexbox-border: #dddddd;
	--color-flexbox-heading: #336699;
	--color-flexbox-text: #555555;

	/* Abmessungen */
	--max-breite: 650px;
	--footer-height: 130px;
	--menu-height: 50px;
	--header-image-url: url('img/Header.png');

	/* Schriften */
	--font-family: 'Poppins', sans-serif;
	--font-size-base: 16px;
	--font-size-menu: 11px;
	--font-size-heading: 20px;
	--font-size-footer: 14px;

	/* Übergänge */
	--transition-speed: 0.3s;
}
/* Webkit-Browser (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #f3f3f3;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb {
  background: #336699;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #fcae05;
}

/* Firefox (begrenzte Unterstützung) */
html {
  scrollbar-width: thin;
  scrollbar-color: #336699 #f3f3f3;
}
html {
    font-size: var(--font-size-base);
    overflow-y: auto;
    scroll-behavior: smooth;
}
@media (min-width: 601px) {
    html {
        scrollbar-gutter: stable;
    }
}
/* ============================================ Body ============================================ */
body {
    margin: 0;
    min-height: 100vh;
    background-color: #fff;
    font-family: 'poppins', sans-serif;
    font-size: 13px;
    padding-top: 0 !important;
    hyphens: auto !important;
    color: #336699;

	overflow-x: clip;
}
/* ============================================ WRAPPER für maximale Breite begrenzen ============================================ */
.page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
	padding-top: 0 !important;
}
.content-wrapper {
    flex: 1;
    max-width: var(--max-breite);
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
	padding-top: 0 !important;
}
/* ============================================ Überschriften ============================================ */
h2 {
	font-family: 'PatrickHand', sans-serif;
	font-size: 18px;
	color: #fff;
	font-weight : normal;
	color: #fcae05;
	letter-spacing: 2px;
	text-transform: uppercase;
	border-bottom: 1px dotted #fff;
}
h3 {
	color: #fcae05;
	font-size: 13px;
	font-weight: 300;
	letter-spacing: 1px;
	border-bottom: 1px dotted #fff;
}
h4 {
	font-family: 'PatrickHand', sans-serif;
	color: #fcae05;
	font-size: 16px;
	letter-spacing: 2px;
	border-bottom: 1px dotted #fff;
}
h5 {
	font-family : 'PatrickHand', sans-serif;
	color : #fff;
	font-size : 14px;
	letter-spacing : 2px;
	text-transform : uppercase;
	border-bottom : 2px dotted #fcae05;
}
h6 {
	background-color: #fff;
	font-family: 'PatrickHand', sans-serif;
	font-size: 20px;
	color: #336699;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: 10px;
	box-shadow: 3px 3px 5px #333;
}
a {
	color: var(--color-menu-text);
	text-decoration: none;
	transition: color var(--transition-speed) ease;
}
a:hover {
	color: var(--color-menu-hover-text);
}

/* ============================================ Header / Banner ============================================ */
.site-header {
	width: 100%;
	position: relative; 
	z-index: 1;
}
@media (max-width: 600px) {
    .site-header {
		width: 100%;
		max-width: var(--max-breite);
		margin: 0 auto;
		margin-top: 0px;
	}
}
.site-header__banner {
	width: 100%;
}
.site-header__banner img {
	width: 100%;
	height: auto;
	display: block;
}
/* ============================================ Navigation / Menü ============================================ */
.main-nav {
    position: sticky !important;
    top: 0px;
    height: 50px;
    background-color: #454e5c;
    z-index: 1000;
    width: 100%;
    max-width: 650px;       /* RESPONSIVE FIX: war 800px */
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.main-nav__item.active a {
    color: var(--color-menu-hover-text, #ffdb4d);
    background-color: var(--color-menu-hover-bg, #3a424d);
}

/* ===== CHECKBOX (versteckt) ===== */
.menu-checkbox {
    display: none;
}

/* ===== BURGER ICON ===== */
.burger-icon {
    display: none;
    flex-direction: column;
    cursor: pointer;
    width: 28px;
    height: 20px;
    justify-content: space-between;
    z-index: 1000;
    position: absolute;
    right: 15px;
}

.burger-icon .bar {
    width: 100%;
    height: 3px;
    background-color: #fcae05;
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* ===== NAV LIST (Desktop) ===== */
.main-nav__list {
    list-style: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 0;
    padding: 0;
}

/* ===== NAV ITEMS (Desktop) ===== */
.main-nav__item {
    display: flex;
    align-items: center;
    height: 100%;
    border: none;
}

/* ===== NAV LINKS ===== */
.main-nav__link {
    text-decoration: none;
    color: #fcae05;
    font-size: 12px;
    font-weight: normal;
    padding: 15px 8px;
    transition: color 0.3s ease, background-color 0.3s ease;
    white-space: nowrap;
}

.main-nav__link:hover,
.main-nav__link:focus-visible {
    color: var(--color-menu-hover-text, #ffdb4d);
    background-color: var(--color-menu-hover-bg, #3a424d);
}

.main-nav__link:active {
    background-color: #222222;
}

/* ===== RESPONSIVE BREAKPOINT (unter 600px) ===== */
@media screen and (max-width: 600px) {
    .main-nav {
        position: sticky; 
        top: 0;
        max-width: 100%;
        margin: 0 auto;
        justify-content: flex-start;
        padding-left: 15px;
    }

    /* Burger Icon anzeigen */
    .burger-icon {
        display: flex;
    }

    /* NAV LIST Mobile */
    .main-nav__list {
        display: block !important;
        position: absolute;
        top: 50px;
        left: 0;
        right: 0;
        background-color: #454e5c;
        width: 100%;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease-out;
        z-index: 998;
    }

    /* NAV ITEMS Mobile */
    .main-nav__item {
        display: block !important;
        width: 100%;
        height: auto !important;
        border-bottom: 1px solid #505866;
    }

    /* NAV LINKS Mobile */
    .main-nav__link {
        display: block !important;
        padding: 18px 20px !important;
        white-space: normal;
        font-size: 14px;       /* RESPONSIVE FIX: größer für Mobile */
    }

    /* MENÜ ÖFFNEN */
    .menu-checkbox:checked ~ .main-nav__list {
        max-height: 600px;
    }

    /* BURGER ANIMATION */
    .menu-checkbox:checked ~ .burger-icon .bar:nth-child(1) {
        transform: rotate(45deg) translate(5px, 6px);
    }

    .menu-checkbox:checked ~ .burger-icon .bar:nth-child(2) {
        opacity: 0;
    }

    .menu-checkbox:checked ~ .burger-icon .bar:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -6px);
    }
}
/* ============================================ breadcrumb Balken ============================================ */
.breadcrumb {
	width: 100%;
    height: 50px;
    max-height: 50px;
    background-color: #ffffff;
    margin: 0 auto;
    display: flex;
    align-items: center;
	border-left: #336699 1px solid;
	border-right: #336699 1px solid;
}
.breadcrumb__list {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0 15px;
    width: 100%;
    white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis !important;
}
.breadcrumb__item {
    display: flex;
    align-items: center;
	color: #336699;
	letter-spacing: 1px;
}
.breadcrumb__link {
	color: #336699;
    text-decoration: none;
    font-size: 15px;
    transition: color var(--transition-speed) ease;
	letter-spacing: 1px;
	text-transform: uppercase;
}
.breadcrumb__link:hover {
	color: #336699;
    text-decoration: none;
}
.breadcrumb__link--current {
    color: #ff0000;
    font-size: 14px;
}
.breadcrumb__separator {
    color: #aaaaaa;
    font-size: 12px;
    padding: 0 4px;
}
/* Responsive — auf kleinen Screens umbrechen lassen */
@media (max-width: 600px) {
    .breadcrumb {
        height: auto;           /* RESPONSIVE FIX: war 50px fixiert */
        max-height: none;      /* RESPONSIVE FIX: war 50px */
        padding: 8px 0;        /* RESPONSIVE FIX: etwas Luft */
    }
    .breadcrumb__list {
        padding: 0 10px;
        gap: 5px;
	    white-space: normal;   /* RESPONSIVE FIX: Text darf umbrechen */
        flex-wrap: wrap;       /* RESPONSIVE FIX: Elemente umbrechen */
    }

    .breadcrumb__link {
        font-size: 13px;
    }

    .breadcrumb__separator {
        font-size: 11px;
    }
}
/* ============================================ Content-Bereich der Flexboxen ============================================ */
.content {
    flex: 1;
    padding: 15px 40px 120px;
    display: flex;
    flex-wrap: wrap;
	gap: 15px;
    justify-content: center;
	text-align: justify;
    align-items: stretch;
	max-width: var(--max-breite);
    margin: 0 auto;
	width: 100%;
	background-color: #336699;
	color: #fff; 
	border-left: #336699 1px solid;
	border-right: #336699 1px solid;
	border-radius: 0 0 25px 25px;
	overflow-wrap: break-word; 
	word-wrap: break-word; 
}
.flexbox {
	background-color: var(--color-flexbox-bg);
	border: 1px solid var(--color-flexbox-border);
	border-radius: 0 0 10px 0;
	padding: 10px;
	flex: 1 1 210px;
	min-width: 350px;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	transition: box-shadow var(--transition-speed) ease,
				transform var(--transition-speed) ease;
}
.flexbox:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.flexbox__heading {
	color: var(--color-flexbox-heading);
	font-size: var(--font-size-heading);
	font-weight: 700;
	margin-bottom: 12px;
	padding-bottom: 2px;
	border-bottom: #336699 2px dashed;
}
.flexbox__text {
	color: var(--color-flexbox-text);
	line-height: 1.6;
	font-size: 13px;          /* RESPONSIVE FIX: war 12px */
	flex: 2;
	text-align: justify;
	font-family: 'poppins', sans-serif;
	margin-left: 25px;
	margin-right: 25px;
}
.flexbox__link {
	display: inline-block;
	margin-top: 14px;
	padding: 8px 18px;
	background-color: var(--color-menu-bar);
	color: var(--color-menu-text);
	text-decoration: none;
	border-radius: 5px;
	font-weight: 600;
	font-size: 14px;
	transition: background-color var(--transition-speed) ease,
				color var(--transition-speed) ease;
	align-self: flex-start;
}
.flexbox__link:hover {
	background-color: var(--color-menu-hover-bg);
	color: var(--color-menu-hover-text);
}

/* ════════════════════════════════════════════ FILTER-LOGIK ════════════════════════════════════════════ */

/* Wenn IRGENDEINE Checkbox aktiv ist → alle Spiele ausblenden */
body:has(.filter-menu input[type="checkbox"]:checked) .game {
  display: none !important;  /* !important wichtig für Priorität */
}

/* Pro Tag: wenn die zugehörige Checkbox checked ist, zeige alle Spiele mit dieser Klasse */
body:has(#filter-koop:checked) .game.tag-koop,
body:has(#filter-semikoop:checked) .game.tag-semikoop,
body:has(#filter-kompetitiv:checked) .game.tag-kompetitiv,
body:has(#filter-strategie:checked) .game.tag-strategie,
body:has(#filter-solo:checked) .game.tag-solo,
body:has(#filter-2:checked) .game.tag-2,
body:has(#filter-3:checked) .game.tag-3,
body:has(#filter-4:checked) .game.tag-4,
body:has(#filter-5:checked) .game.tag-5,
body:has(#filter-6:checked) .game.tag-6,
body:has(#filter-7:checked) .game.tag-7,
body:has(#filter-8:checked) .game.tag-8,
body:has(#filter-9:checked) .game.tag-9,
body:has(#filter-10:checked) .game.tag-10,
body:has(#filter-Social-Deduction:checked) .game.tag-Social-Deduction,
body:has(#filter-rpg:checked) .game.tag-rpg {
  display: flex !important;  /* ← Flexbox beibehalten! Nicht 'block' */
}
/* ============================================ Sortierung ============================================ */

.filter {
    /* position: sticky;
    top: 50px; */
    background: #336699;
    z-index: 998;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: #fff 1px dashed;
    flex-wrap: wrap;
    padding: 10px 15px;
}
.filter-menu input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	top: 25px;
	margin-top: 3px !important;
}
.filter-menu label {
	margin-top: 5px;
	cursor: pointer;
	padding: 2px 4px;
	border: 1px solid #fff;
	background: #336699;
	border-radius: 6px;
	user-select: none;
	margin-right: 5px;
}
.filter-menu input:hover + label {
	background: #fcae05;
	color: #fff;
	border-color: #fff;
	transition: background-color var(--transition-speed) ease,
				color var(--transition-speed) ease;
}
.filter-menu input:checked + label {
  background: #fcae05;
  color: #fff;
  border-color: #fff;
}
.filter-clear-icon {
    color: #fcae05;
    font-size: 20px;
    cursor: pointer;
    text-decoration: none;
    padding: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
	margin-top: 5px;
	cursor: pointer;
	padding: 2px 4px;
	border: 1px solid #fff;
	background: #336699;
	border-radius: 6px;
	user-select: none;
	margin-right: 5px;
}

.filter-clear-icon:hover {
    color: #fff;
	background: #fcae05;
	transition: background-color var(--transition-speed) ease,
				color var(--transition-speed) ease;
}


/* Icon verstecken wenn kein Filter aktiv */
.filter-clear-icon.hidden {
    display: none;
}

/* Responsive */
@media (max-width: 600px) {
    .filter-clear-icon {
        font-size: 18px;
        margin-left: 10px;
        order: -1;                  /* Auf Mobile nach vorne schieben (optional) */
    }
    
    .filter {
        justify-content: flex-start;
        gap: 5px;
    }
}



.game {
	border: #333 0px solid;

}

/* _____________________ Bewertungsbox _____________________ */


/* ==================== HAUPT-CONTAINER für Spiele-Raster  ==================== */#
.Spieleraster-wrapper {
	max-width: 650px;  /* ↑ Erhöht von 600px auf 650px */
	width: 100%;
	margin: 0 auto;
}
.Spieleraster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 10px;
}
.Spieleraster-box {
	display: flex !important;           /* ↑ Flexbox erzwingen */
	flex-direction: row !important;     /* ↑ Explizit horizontal */
	align-items: flex-start !important;
	gap: 10px;                          /* ↑ Abstand Bild ↔ Text */
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 8px;
	background-color: #f9f9f9;
	text-decoration: none;
	color: inherit;
	min-height: 90px;                   /* ↑ Mindesthöhe */
}
.Spieleraster-image {
	width: 70px !important;             /* ↑ Fixierte Breite erzwingen */
	height: 70px !important;            /* ↑ Fixierte Höhe erzwingen */
	min-width: 70px !important;         /* ↑ Schrumpf-Verhinderung */
	object-fit: cover;
	flex-shrink: 0 !important;          /* ↑ Bild darf nie schrumpfen */
	border: #333 1px solid;
	margin-right: 0;                    /* ↓ margin entfernt, gap übernimmt */
}
.Spieleraster-content {
	flex: 1 !important;                 /* ↑ Text nimmt Restraum */
	min-width: 0 !important;            /* ↑ Text-Wrapping aktivieren */
	overflow-wrap: break-word;          /* ↑ Lange Wörter umbrechen */
}
.Spieleraster-title {
	font-family: 'SpicyWasabi', sans-serif;
	color: #336699;
	font-size: 16px;
	letter-spacing: 2px;
	border-bottom: 1px dotted #fff;
	margin-bottom: 5px;                 /* ↑ Abstand zu Listenelementen */
}
.Spieleraster-list {
	list-style: none;
	color: #333;
	font-size: 13px;
	padding: 0;
	margin: 0;
}

/* Responsive: Untereinander wenn weniger als 650px */
@media (max-width: 650px) {
	.Spieleraster {
	grid-template-columns: 1fr; 
	}
}
/* ==================== HAUPT-CONTAINER für Spiel-Info ==================== */
.Spieleliste {
	background-color: var(--color-flexbox-bg);
	border: 1px solid var(--color-flexbox-border);
	border-radius: 0 0 10px 0;
	padding: 10px;
	flex: 1 1 210px;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	margin-bottom: 20px;
}
.Spieleliste__link {
	font-size: 13px;
	padding: 6px 14px;
	color: #34a56f;
}
.Spieleliste__link:hover {
	font-size: 13px;
	padding: 6px 14px;
	color: #ff0000;
}
.spiel-layout {
    display: flex;
    gap: 20px;
    margin-left: 5px;
    margin-right: 5px;
}
.spiel-layout__name {
	color: var(--color-flexbox-heading);
	font-size: var(--font-size-heading);
	font-weight: 700;
	margin-bottom: 12px;
	padding-bottom: 2px;
	margin-left: 8px;
	border-bottom: #336699 2px dashed;
}
/* --- Linke Spalte: Bild --- */
.spiel-layout__bild {
    flex-shrink: 0;
    width: 150px;
}

.spiel-layout__bild img {
    max-width: 100%;
    width: 150px;
    height: auto;
    display: block;
    border: #333 1px solid;
}

/* --- Rechte Spalte: Beschreibungstext --- */
.spiel-layout__text {
    flex: 1;
    min-width: 0; /* Wichtig für Text-Wrapping bei langen Wörtern */
    color: #333;
    line-height: 1.6;
    font-size: 13px;
    text-align: justify;
    font-family: 'poppins', sans-serif;
	max-width: 340px;
	overflow-wrap: break-word;
}
.spiel-layout__text-SdJ  {
	font-family: 'poppins', sans-serif !important;
	color: #336699;
	letter-spacing: 0px;
	font-style: italic;	
}
.spiel-layout__text-von  {
	font-family: 'poppins', sans-serif !important;
	color: #336699;
	font-size: 10px;
	letter-spacing: 2px;
	padding-left: 18px;
	float: right;
}
/* ==================== VOLLE BREITE BEREICHE ==================== */
.spiel-layout__full {
    margin-left: 5px;
    margin-right: 5px;
}

/* Spiel-Infos (Icons + Daten) */
.spiel-layout__infos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;   /* Items horizontal mittig */
    align-items: center;       /* Icons + Text vertikal ausgerichtet */
    gap: 12px;
    padding: 15px 0;
    margin-top: 15px;
    border-top: 1px dashed #ccc;
    border-bottom: 1px dashed #ccc;
}

.spiel-layout__info-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #333;
    font-size: 14px;
}

.spiel-layout__info-item i {
    color: #336699;
    font-size: 16px;
}
/* Bewertungen */
.bewertungsbox {
    margin-top: 20px;
}

.bewertungsbox-header {
    color: #336699;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 12px;
}

.bewertungsbox-liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
}

.bewertungsbox-member {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 2px;
    background-color: #ebf0f5;
    border-radius: 4px;
    border-left: 3px solid #336699;
}

.bewertungsbox-member__name {
    font-weight: 600;
    font-size: 13px;
    color: #333;
	margin-left: 10px;
}

.bewertungsbox-member__name a {
    color: #333;
    text-decoration: none;
}

.bewertungsbox-member__name a:hover {
    color: #fcae05;
}

.bewertungsbox-member__icons {
    display: flex;
    align-items: center;
    color: #336699;
    font-size: 20px;
	letter-spacing: 20px;
}
.folgt  {
	font-family: 'poppins', sans-serif !important;
	color: #999 !important;
	font-size: 10px !important;
	letter-spacing: 2px !important;
	padding-right: 18px;
}


/* ==================== RESPONSIVE ==================== */

/* Tablet & Mobile (<800px): Bild über, Text darunter */
@media (max-width: 800px) {
    .spiel-layout {
        flex-direction: column;
        margin-left: 5px;
        margin-right: 5px;
    }

    .spiel-layout__bild {
        width: 100%;
        max-width: 150px;
        margin: 0 auto 15px auto;
    }

    .spiel-layout__bild img {
        width: 100%;
        max-width: 250px;
    }

    .spiel-layout__text {
        margin-left: 0;
        margin-right: 0;
    }

    .spiel-layout__full {
        margin-left: 15px;
        margin-right: 15px;
    }

    .bewertungsbox-liste {
        grid-template-columns: 1fr;
    }
}

/* Kleines Handy (<500px): Alles kompakter */
@media (max-width: 500px) {
    .spiel-layout__text {
        font-size: 14px;
    }

    .spiel-layout__info-item {
        font-size: 13px;
        gap: 4px;
    }

    .spiel-layout__info-item i {
        font-size: 14px;
    }

    .bewertungsbox-member {
        padding: 6px 10px;
    }

    .bewertungsbox-member__name {
        font-size: 12px;
    }

    .bewertungsbox-member__icons {
        font-size: 14px;
    }

	.bewertungsbox-member__link {
        font-size: 13px;
        padding: 6px 14px;
    }
}

/* ============================================ Team ============================================ */
.teambox {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding: 20px;
	margin-bottom: 20px;
	background-color: #fff;
	border-radius: 8px;
	-webkit-box-shadow: 5px 5px 5px 3px rgba(51,51,51,0.32);
	box-shadow: 5px 5px 5px 3px rgba(51,51,51,0.32);
}
.team-content {
	flex: 1;
}
.team-image {
    width: 150px;
    height: 150px;
    border: 1px solid #333;
    object-fit: cover;
    border-radius: 10px;
}
.team-name {
	font-size: 1.5em;
	color: #336699;
	font-weight: 700;
	margin-bottom: 12px;
	padding-bottom: 2px;
	border-bottom: #336699 2px dashed;
}
.team-text {
	margin: 0;
	line-height: 1.5;
	color: #666;
}
.team-bottom {
    margin-top: auto;
	color: #666;
}
.team_link {
    color: #fcae05;
    text-decoration: none;
}
.team_link:hover {
    color: #333;
}
/* RESPONSIVE FIX: Teambox auf Mobile stapeln */
@media (max-width: 600px) {
	.teambox {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 15px;
		padding: 15px;
	}
	.team-image {
		width: 120px;
		height: 120px;
	}
	.team-name {
		font-size: 1.2em;
		text-align: center;
	}
}


/* ============================================ Kalender ============================================ */
.calendar-container {
	width: 100%;
	max-width: 100%;            /* RESPONSIVE FIX: war 800px */
	background-color: #336699;
	border-radius: 0px;
	overflow: hidden;
}
.calendar-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px;
	color: #ffffff;
	gap: 10px;
}
.calendar-header h2 {
	font-size: 1.6rem;
	font-weight: 600;
	text-align: center;
	flex-grow: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}
.header-left, .header-right {
	display: flex;
	align-items: center;
	gap: 8px;
}
.nav-btn {
	background: transparent;
	border: 1px solid #ffffff;
	color: #ffffff;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	font-size: 10px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s, transform 0.1s;
}
.nav-btn:hover { background: rgba(255,255,255,0.15); }
.nav-btn:active { transform: scale(0.92); }
.today-btn {
background: transparent; border: 2px solid #ffffff; color: #ffffff;
padding: 8px 16px; border-radius: 22px; font-size: 0.9rem; font-weight: 600;
cursor: pointer; white-space: nowrap; transition: background 0.2s;
}
.today-btn:hover { background: rgba(255,255,255,0.15); }
.weekdays-row { display: grid; grid-template-columns: repeat(7, 1fr); padding: 0 12px 8px; }
.weekday-label {
text-align: center; color: #ffffff; font-size: 0.85rem; font-weight: 600;
text-transform: uppercase; padding: 8px 4px; letter-spacing: 1px;
}
.days-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; padding: 0 12px 16px; }
.day-cell {
	aspect-ratio: 1;
	position: relative;
	border: 2px solid #ffffff;
	border-radius: 8px;
	color: #ffffff;
	font-size: 1.05rem;
	font-size: 16px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s;
	font-family: 'poppins', sans-serif;
}
.day-cell:hover:not(.empty) {
	background: rgba(255,255,255,0.15);
	}
.day-cell.empty {
	border: none;
	cursor: default;
	}
.day-cell.today {
	background-color: #34a56f;
	font-weight: 700;
	font-family: 'poppins', sans-serif;
	}
.day-cell.selected {
	background: rgba(255,255,255,0.25);
	border-color: #ffcc00;
	}
.event-dots {
position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
display: flex; gap: 3px;
}
.event-dots .dot {
	width: 15px;
	height: 7px;
	border-radius: 10px;
	border: #fff 1px solid;
}
.events-panel {
	background: #ffffff;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease;
	border: #336699 15px solid;
}
.events-panel.open {
max-height: 4000px;
}
.events-panel-inner {
padding: 20px;
}
.events-panel h3 {
	margin-bottom: 14px;
	font-family: 'SpicyWasabi', sans-serif;
	font-size: 18px;
	font-weight : normal;
	color: #336699;
	letter-spacing: 2px;
	text-transform: uppercase;
	border-bottom: 1px dotted #336699;
}
.event-card {
	background: #f8f9fa;
	border-left: 4px solid #336699;
	border-radius: 6px;
	padding: 14px 16px;
	margin-bottom: 12px;
}
.event-card-title {
font-size: 1.05rem; font-weight: 600; color: #222; margin-bottom: 6px;
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.event-card-title a { color: #336699; text-decoration: none; }
.event-card-title a:hover { text-decoration: underline; }
.category-badge {
font-size: 0.72rem; font-weight: 700; padding: 2px 10px; border-radius: 12px;
color: #fff; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap;
}
.event-detail {
	font-size: 0.88rem;
	color: #555;
	margin-bottom: 4px;
	line-height: 1.4;
}
.event-detail strong {
	color: #336699;
	letter-spacing: 1px;
	border-bottom: #336699 1px dotted;
}
.signup-info {
background: #e8f5e9; border: 1px solid #a5d6a7; border-radius: 6px;
padding: 10px 12px; margin-top: 8px; font-size: 0.85rem; color: #2e7d32;
}
.signup-info.full { background: #ffebee; border-color: #ef9a9a; color: #c62828; }
.btn-signup {
display: inline-block; background: #34a56f; color: #fff; border: none;
border-radius: 6px; padding: 8px 18px; font-size: 0.88rem; font-weight: 600;
cursor: pointer; margin-top: 8px; transition: background 0.2s;
}
.btn-signup:hover { background: #2d8a5f; }
.badge-full {
display: inline-block; background: #c62828; color: #fff; font-size: 0.72rem;
font-weight: 700; padding: 2px 10px; border-radius: 12px;
text-transform: uppercase; letter-spacing: 0.5px; margin-left: 4px;
}
.event-card-actions { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }
.btn-edit {
background: #336699; color: #fff; border: none; border-radius: 4px;
padding: 5px 12px; cursor: pointer; font-size: 0.8rem; transition: background 0.2s;
}
.btn-edit:hover { background: #2a527a; }
.delete-event {
background: #ff4444; color: #fff; border: none; border-radius: 4px;
padding: 5px 12px; cursor: pointer; font-size: 0.8rem; transition: background 0.2s;
}
.delete-event:hover { background: #cc3333; }
.no-events { color: #999; font-style: italic; padding: 8px 0; }
.registrations-section {
margin-top: 10px; background: #f0f7ff; border: 1px solid #bbdefb;
border-radius: 6px; padding: 12px;
}
.registrations-section h5 { font-size: 0.85rem; color: #336699; margin-bottom: 8px; }
.registration-item {
display: flex; align-items: center; gap: 8px; padding: 6px 0;
border-bottom: 1px solid #e3f2fd; font-size: 0.82rem; flex-wrap: wrap;
}
.registration-item:last-child { border-bottom: none; }
.registration-item .reg-name { font-weight: 600; color: #333; }
.registration-item .reg-email, .registration-item .reg-count { color: #666; }
.registration-item .reg-info { color: #888; font-style: italic; flex-basis: 100%; margin-top: 4px; }
.registration-item .reg-delete {
background: #ff4444; color: #fff; border: none; border-radius: 3px;
padding: 2px 8px; cursor: pointer; font-size: 0.72rem; margin-left: auto;
}
.registration-item .reg-delete:hover { background: #cc3333; }
.add-form {
background: #f0f0f5; padding: 20px; margin-top: 16px; border-radius: 8px; display: none;
}
.add-form h4 { color: #336699; margin-bottom: 14px; font-size: 1.05rem; }
.form-group { margin-bottom: 14px; }
.form-group label {
display: block; margin-bottom: 6px; color: #333; font-size: 0.88rem; font-weight: 600;
}
.form-group input, .form-group select, .form-group textarea {
width: 100%; padding: 10px 12px; border: 2px solid #ccc; border-radius: 8px;
font-size: 0.95rem; outline: none; transition: border-color 0.2s; font-family: inherit;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: #336699; }
.form-group textarea { resize: vertical; min-height: 60px; }
.form-group .hint { font-size: 0.78rem; color: #888; margin-top: 4px; }
.checkbox-group {
display: flex; align-items: center; gap: 8px; padding: 10px 12px;
background: #fff; border: 2px solid #ccc; border-radius: 8px;
cursor: pointer; transition: border-color 0.2s;
}
.checkbox-group:hover { border-color: #336699; }
.checkbox-group input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; accent-color: #336699; }
.checkbox-group label { margin: 0; cursor: pointer; font-size: 0.9rem; font-weight: 600; color: #333; }
.signup-fields {
display: none; padding: 14px; background: #e8f5e9; border-radius: 8px;
margin-top: 4px; margin-bottom: 14px;
}
.signup-fields.visible { display: block; }
.form-row { display: flex; gap: 12px; }
.form-row .form-group { flex: 1; }
.btn-primary {
background: #336699; color: #fff; border: none; padding: 10px 22px;
border-radius: 8px; font-size: 0.95rem; cursor: pointer; transition: background 0.2s;
}
.btn-primary:hover { background: #2a527a; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-cancel-edit {
background: #e0e0e0; color: #333; border: none; padding: 10px 22px;
border-radius: 8px; font-size: 0.95rem; cursor: pointer; transition: background 0.2s; margin-left: 8px;
}
.btn-cancel-edit:hover { background: #c0c0c0; }
.btn-secondary {
background: #e0e0e0; color: #333; border: none; padding: 8px 16px;
border-radius: 6px; font-size: 0.85rem; cursor: pointer; transition: background 0.2s;
}
.btn-secondary:hover { background: #c0c0c0; }
.category-manager {
background: #ebeef5; padding: 16px; margin-top: 12px; border-radius: 8px; display: none;
}
.category-manager h4 { color: #336699; margin-bottom: 10px; font-size: 0.95rem; }
.category-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.category-item {
display: flex; align-items: center; gap: 8px; background: #fff;
padding: 6px 12px; border-radius: 8px; font-size: 0.82rem; flex-wrap: wrap;
}
.category-item .cat-color { width: 16px; height: 16px; border-radius: 50%; border: 1px solid #ddd; flex-shrink: 0; }
.category-item .cat-name {
flex-grow: 1;
font-weight: 500;
color: #999;
}
.category-item .cat-edit-input {
display: none; padding: 4px 8px; border: 2px solid #336699; border-radius: 4px;
font-size: 0.82rem; outline: none; flex-grow: 1; min-width: 100px;
}
.category-item .cat-edit-color {
display: none; width: 34px; height: 30px; border: 2px solid #ccc; border-radius: 4px; cursor: pointer; padding: 2px;
}
.category-item .cat-edit-hex {
display: none; width: 80px; padding: 4px 8px; border: 2px solid #ccc; border-radius: 4px;
font-size: 0.78rem; font-family: monospace; outline: none; text-transform: lowercase;
}
.category-item.editing .cat-name { display: none; }
.category-item.editing .cat-color { display: none; }
.category-item.editing .cat-edit-input { display: block; }
.category-item.editing .cat-edit-color { display: block; }
.category-item.editing .cat-edit-hex { display: block; }
.category-item.editing .cat-save { display: inline-block; }
.category-item.editing .cat-cancel { display: inline-block; }
.category-item.editing .cat-edit { display: none; }
.category-item.editing .cat-delete { display: none; }
.category-item .cat-edit, .category-item .cat-delete, .category-item .cat-save, .category-item .cat-cancel {
background: none; border: none; cursor: pointer; font-size: 1rem; padding: 0 4px; line-height: 1;
}
.category-item .cat-edit { color: #336699; }
.category-item .cat-edit:hover { color: #2a527a; }
.category-item .cat-delete { color: #ff4444; }
.category-item .cat-delete:hover { color: #cc3333; }
.category-item .cat-save { display: none; color: #34a56f; font-weight: 700; font-size: 0.9rem; }
.category-item .cat-save:hover { color: #2d8a5f; }
.category-item .cat-cancel { display: none; color: #999; }
.category-item .cat-cancel:hover { color: #666; }
.cat-form-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cat-form-row input[type="text"] { flex: 1; min-width: 120px; padding: 8px 10px; border: 2px solid #ccc; border-radius: 6px; font-size: 0.85rem; outline: none; }
.cat-form-row input[type="color"] { width: 38px; height: 36px; border: 2px solid #ccc; border-radius: 6px; cursor: pointer; padding: 2px; }
.cat-hex-input {
width: 90px !important; padding: 8px 10px; border: 2px solid #ccc; border-radius: 6px;
font-size: 0.82rem; font-family: monospace; outline: none; text-transform: lowercase;
flex: none !important; min-width: 90px !important;
}
.cat-hex-input:focus { border-color: #336699; }
.admin-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.tab-btn {
background: #e0e0e0; border: none; padding: 8px 16px; border-radius: 6px;
cursor: pointer; font-size: 0.85rem; font-weight: 600; color: #555;
transition: background 0.2s, color 0.2s;
}
.tab-btn.active {
	background: #336699;
	color: #fff;
}
/* Login Overlay */
.login-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}
.login-overlay.show {
    display: flex;
}
.login-box {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    text-align: center;
    max-width: 350px;
    width: 90%;
}
.login-box h2 {
    margin-bottom: 20px;
}
.login-box input[type="password"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box;
}
.login-error {
    color: #e74c3c;
    font-size: 14px;
    margin-bottom: 10px;
    min-height: 20px;
}
.login-box button {
    width: 100%;
    padding: 10px;
    background: #e67e22;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
}
.login-box button:hover {
    background: #d35400;
}
.admin-badge {
display: none; background: #ffcc00; color: #333; font-size: 0.7rem; font-weight: 700;
padding: 2px 8px; border-radius: 4px; margin-left: 8px; text-transform: uppercase; letter-spacing: 1px;
}
.confirm-overlay {
display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6);
z-index: 300; align-items: center; justify-content: center;
}
.confirm-overlay.show { display: flex; }
.confirm-box {
background: #ffffff; border-radius: 12px; padding: 28px 24px 20px; width: 90%; max-width: 380px;
text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.confirm-box .confirm-title { font-size: 1.1rem; font-weight: 600; color: #336699; margin-bottom: 6px; word-break: break-word; }
.confirm-box .confirm-message { font-size: 0.9rem; color: #666; margin-bottom: 20px; }
.confirm-buttons { display: flex; gap: 12px; justify-content: center; }
.confirm-buttons button { border: none; padding: 10px 24px; border-radius: 8px; font-size: 0.92rem; cursor: pointer; transition: background 0.2s; }
.btn-confirm-yes { background: #ff4444; color: #fff; }
.btn-confirm-yes:hover { background: #cc3333; }
.btn-confirm-no { background: #e0e0e0; color: #333; }
.btn-confirm-no:hover { background: #c0c0c0; }
.signup-overlay {
display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6);
z-index: 350; align-items: center; justify-content: center; padding: 20px;
}
.signup-overlay.show { display: flex; }
.signup-box {
background: #ffffff; border-radius: 12px; padding: 28px 24px; width: 100%; max-width: 420px;
box-shadow: 0 8px 32px rgba(0,0,0,0.4); max-height: 90vh; overflow-y: auto;
}
.signup-box h3 { color: #336699; margin-bottom: 4px; font-size: 1.2rem; }
.signup-box .signup-subtitle { font-size: 0.85rem; color: #888; margin-bottom: 18px; }
.signup-success { display: none; text-align: center; padding: 20px 0; }
.signup-success.show { display: block; }
.signup-success .success-icon { font-size: 3rem; color: #34a56f; margin-bottom: 10px; }
.signup-success h3 { margin-bottom: 8px; }
.signup-success p { color: #666; font-size: 0.9rem; margin-bottom: 16px; }
.hp-field { position: absolute; left: -9999px; top: -9999px; opacity: 0; height: 0; width: 0; pointer-events: none; }
.signup-box .form-group { margin-bottom: 14px; }
.signup-box .form-group label { display: block; margin-bottom: 6px; color: #333; font-size: 0.88rem; font-weight: 600; }
.signup-box .form-group input, .signup-box .form-group textarea {
width: 100%; padding: 10px 12px; border: 2px solid #ccc; border-radius: 8px;
font-size: 0.95rem; outline: none; transition: border-color 0.2s; font-family: inherit;
}
.signup-box .form-group input:focus, .signup-box .form-group textarea:focus { border-color: #336699; }
.signup-box .form-group textarea { resize: vertical; min-height: 70px; }
.signup-box .btn-primary { width: 100%; margin-top: 6px; }
.signup-close { float: right; background: none; border: none; font-size: 1.5rem; color: #999; cursor: pointer; line-height: 1; padding: 0; }
.signup-close:hover { color: #333; }
.legend { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 20px 16px; color: #fff; font-size: 0.78rem; }
.legend-item { display: flex; align-items: center; gap: 5px; }
.legend-item .legend-dot { width: 10px; height: 10px; border-radius: 50%; }
.legend-item .legend-text { opacity: 0.9; }
@media (max-width: 600px) {
.calendar-header h2 { font-size: 1.1rem; }
.nav-btn { width: 36px; height: 36px; font-size: 1.1rem; }
.today-btn { padding: 6px 12px; font-size: 0.8rem; }
.weekday-label { font-size: 0.7rem; padding: 6px 2px; }
.day-cell {
	font-size: 0.85rem;
	font-family: 'poppins', sans-serif;
}
.calendar-header { padding: 14px; gap: 6px; }
.days-grid { gap: 4px; padding: 0 8px 12px; }
.form-row { flex-direction: column; gap: 0; }
.events-panel-inner { padding: 14px; }
.add-form { padding: 14px; }
.signup-box { padding: 20px 16px; }
}
@media (max-width: 400px) {
	.weekday-label { 
	font-size: 0.6rem; 
	}
	.day-cell {
		font-size: 0.7rem;
		font-family: 'poppins', sans-serif;
		}
	.today-btn { 
		padding: 4px 8px; 
		font-size: 0.7rem; 
	}
	.legend { 
		font-size: 0.68rem; 
		gap: 6px; 
	}
}


/* ============================================ Termine ============================================ */
.TerminBox {
	border-top: #fff 1px dashed;
	border-right: #fff 1px dashed;
	border-bottom:  #fff 1px dashed;
	border-left: #fff 1px dashed;
	padding: 5px;
	margin-bottom: 20px;
	min-height: 80px;
}
.TerminBox-Club {
	border-right: #fcae05 1px dashed;
	border-bottom: #fcae05 1px dashed;
	border-left: #fcae05 8px solid;
	border-top-left-radius: 5px;
	border-top: #fcae05 1px dashed;
	padding: 5px;
	margin-bottom: 20px;
	min-height: 80px;
}
.TerminBox-MC {
	border-top: #ccc 1px dashed;
	border-right: #ccc 1px dashed;
	border-bottom:  #ccc 1px dashed;
	border-left: #538cc6 3px solid;
	padding: 5px;
	margin-left: 50px;
	margin-bottom: 20px;
	min-height: 80px;
}
.Tag {
	font-family: 'poppins', sans-serif;
    color: #fff;
	letter-spacing: 1px;
    float: none;                /* RESPONSIVE FIX: war float: left */
    display: inline-block;      /* RESPONSIVE FIX */
	text-align: center;
    font-size: 15px;
    line-height: 1.1em;
    padding: 6px 5px;           /* RESPONSIVE FIX: padding angepasst */
	border-right: #fff 1px dashed;
	border-bottom: #fff 1px dashed;
	margin-left: 0;             /* RESPONSIVE FIX: war -3px */
	margin-right: 8px;
	margin-bottom: 50px;
	width: auto;                /* RESPONSIVE FIX: war 35px fixiert */
	min-width: 35px;
}
.Tag-MC {
	font-family: 'poppins', sans-serif;
    color: #fff;
	letter-spacing: 1px;
    float: none;                /* RESPONSIVE FIX: war float: left */
    display: inline-block;      /* RESPONSIVE FIX */
	text-align: center;
    font-size: 15px;
    line-height: 1.1em;
    padding: 6px 5px;           /* RESPONSIVE FIX: padding angepasst */
	border-right: #fff 1px dashed;
	border-bottom: #fff 1px dashed;
	margin-left: 0;             /* RESPONSIVE FIX: war -3px */
	margin-right: 8px;
	margin-bottom: 50px;
	width: auto;                /* RESPONSIVE FIX: war 35px fixiert */
	min-width: 35px;
}
.Tag2 {
	font-family: 'poppins', sans-serif;
    color: #999;
	letter-spacing: 1px;
    float: none;                /* RESPONSIVE FIX: war float: left */
    display: inline-block;      /* RESPONSIVE FIX */
	text-align: center;
    font-size: 15px;
    line-height: 1.1em;
    padding: 6px 5px;           /* RESPONSIVE FIX */
	border-right: #fff 1px dashed;
	border-bottom: #fff 1px dashed;
	margin-left: 0;             /* RESPONSIVE FIX */
	margin-right: 8px;
	margin-bottom: 0;           /* RESPONSIVE FIX: war 50px! */
	width: auto;                /* RESPONSIVE FIX */
	min-width: 35px;
}
.Tag-Club {
	font-family: 'poppins', sans-serif;
    color: #fff;
	letter-spacing: 1px;
    float: none;                /* RESPONSIVE FIX */
    display: inline-block;      /* RESPONSIVE FIX */
    font-size: 15px;
	font-style: italic;
    line-height: 1.1em;
    padding: 6px 5px;           /* RESPONSIVE FIX */
	border-right: #fcae05 6px solid;
	border-bottom: #fff 1px dashed;
	margin-right: 8px;
	margin-bottom: 0;           /* RESPONSIVE FIX */
	width: auto;                /* RESPONSIVE FIX */
	min-width: 35px;
}
.Tag2-Club {
    color: #999;
	font-family: 'poppins', sans-serif;
	letter-spacing: 1px;
    float: none;                /* RESPONSIVE FIX */
    display: inline-block;      /* RESPONSIVE FIX */
    font-size: 15px;
	font-style: italic;
    line-height: 1.1em;
    padding: 6px 5px;           /* RESPONSIVE FIX */
	border-right: #fcae05 6px solid;
	border-bottom: #fff 1px dashed;
	margin-right: 8px;
	margin-bottom: 0;           /* RESPONSIVE FIX */
	width: auto;                /* RESPONSIVE FIX */
	min-width: 35px;
}


.Tag, .Tag2, .Tag-MC, .Tag2-Club {
    float: left;
    margin-right: 8px;
    margin-bottom: 5px;
}

.TerminBox::after, .TerminBox-Club::after, .TerminBox-MC::after {
    content: "";
    display: table;
    clear: both;
}

/* ============================================ Termine - RESPONSIVE ============================================ */

.TerminBox,
.TerminBox-Club {
    padding-left: 50px;              /* Platz für den Tag */
    position: relative;
}

.Tag,
.Tag2,
.Tag-Club,
.Tag2-Club {
    position: absolute;
    left: 5px;                       /* Abstand vom linken Rand */
    top: 5px;
    width: 40px;
    text-align: center;
    display: block;                  /* Block-Element für korrekte Positionierung */
    z-index: 1;
}
.Termin-Link {
	float: right;
	margin-top: 5px;
}
/* Desktop: etwas mehr Abstand zwischen Tag und Text */
@media (min-width: 601px) {
    .TerminBox,
    .TerminBox-Club {
        padding-left: 55px;
    }
    
    .Tag,
    .Tag2,
    .Tag-Club,
    .Tag2-Club {
        left: 5px;
    }
}

/* === Menü für vergangene Termine === */
#vergangene-Termine {
	padding-bottom: 20px;
}
.TerminB {
	display: inline-block;
	background: #336699;
	border: 1px solid #fff;
	margin: 5px 1px;
	color: #ffffff;
	border-radius: 8px;
	font-size: 12px;
	padding: 4px 6px;
	cursor: pointer;
	text-decoration: none;
	line-height: 1.2;
	transition: background 0.2s, transform 0.1s;
	white-space: normal;        /* RESPONSIVE FIX: darf umbrechen */
}
.TerminB:hover {
	background: #fcae05;
	transition: background 0.2s, transform 0.1s;
}
/* RESPONSIVE FIX: TerminBox auf Mobile - Textfluss reparieren */
@media (max-width: 600px) {
    .TerminBox,
    .TerminBox-Club {
        padding-left: 50px;
        padding-right: 10px;
    }
    
    .Tag,
    .Tag2,
    .Tag-Club,
    .Tag2-Club {
        left: 3px;
        width: 38px;
        font-size: 13px;
    }

	.TerminB {
		display: inline-block;     /* nebeneinander wie auf Desktop */
		width: auto;
		margin: 3px 2px;
		text-align: center;
		white-space: nowrap;      /* verhindert Zeilenumbruch innerhalb eines Buttons */
	}
	/* Fix für lange Zeilen in TerminBox */
	.TerminBox *,
	.TerminBox-Club * {
		word-wrap: break-word;  /* RESPONSIVE FIX */
		overflow-wrap: break-word;
	}
}


/* ============================================ Kontakt ============================================ */

.kontakt_container {
    width: 100%;
    max-width: 600px;
    background-color: #336699;
    padding: 30px 25px;
    margin: 0 auto;
}

.kontakt_title {
    font-family: 'PatrickHand', sans-serif;
    font-size: 1.6rem;
    color: #fff;
    margin-bottom: 8px;
    text-align: center;
}

.kontakt_subtitle {
    color: #fff;
    font-size: 1rem;
    margin-bottom: 20px;
    text-align: center;
    line-height: 1.5;
}

.kontakt_form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Feld-Gruppe */
.kontakt_field-group {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.kontakt_label {
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    color: #fff;
    font-weight: 500;
    display: block;
}

.kontakt_required {
    color: #fcae05;
    font-weight: 700;
    font-size: 0.9em;
}

/* Inputs & Textarea */
.kontakt_input,
.kontakt_textarea {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;              /* Mindestens 16px gegen iOS-Zoom */
    padding: 12px 14px;
    border: 2px solid #ddd;
    border-radius: 6px;
    outline: none;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    background-color: #fff;       /* Weißer Hintergrund für Lesbarkeit */
    color: #333;
    width: 100%;
    box-sizing: border-box;       /* Wichtig: Padding inklusive Breite */
}

.kontakt_input:focus,
.kontakt_textarea:focus {
    border-color: #fcae05;
    background-color: #fff;
}

.kontakt_input:focus:invalid,
.kontakt_textarea:focus:invalid {
    border-color: #e74c3c;
}

.kontakt_textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.5;
}

/* Tooltip (Fehlerhinweis bei Fokus) */
.kontakt_tooltip {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #e74c3c;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: normal;
    margin-top: 4px;
    z-index: 10;
    word-wrap: break-word;
}

.kontakt_input:focus:invalid ~ .kontakt_tooltip,
.kontakt_textarea:focus:invalid ~ .kontakt_tooltip {
    display: block;
}

/* Sicherheitsfrage Hinweis */
.kontakt_captcha-hint {
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    color: #fcae05;               /* Deutliche Farbe statt Grau auf Blau */
    font-weight: 600;
    margin-top: 2px;
    padding: 8px 10px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    border-left: 3px solid #fcae05;
    line-height: 1.4;
    word-wrap: break-word;
}

/* Checkbox-Gruppen */
.kontakt_checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 4px;
    padding: 6px 0;
}

.kontakt_checkbox {
    width: 18px;
    height: 18px;
    accent-color: #fcae05;
    margin-top: 2px;
    cursor: pointer;
    flex-shrink: 0;
    appearance: checkbox;
}

.kontakt_checkbox-label {
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    color: #fff;
    line-height: 1.4;
    cursor: pointer;
    word-wrap: break-word;
}

.kontakt_link {
    color: #fcae05;
    text-decoration: underline;
    word-wrap: break-word;
}

.kontakt_link:hover {
    color: #fff;
}

/* Button */
.kontakt_button {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    background-color: #fcae05;
    border: none;
    border-radius: 6px;
    padding: 14px 24px;
    cursor: pointer;
    margin-top: 8px;
    letter-spacing: 0.5px;
    transition: background-color 0.2s ease, transform 0.1s ease;
    width: auto;
    min-width: 200px;
    display: inline-block;
    text-align: center;
}

.kontakt_button:hover {
    background-color: #ffb300;
}

.kontakt_button:active {
    transform: translateY(1px);
}

/* Fehlerliste (Server-seitig) */
.kontakt_error-list {
    background-color: #fef2f2;
    border: 2px solid #fecaca;
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 12px;
}

.kontakt_error-item {
    color: #dc2626;
    font-size: 0.8rem;
    list-style: none;
    margin-bottom: 4px;
    line-height: 1.4;
}

.kontakt_error-item:last-child {
    margin-bottom: 0;
}

/* Erfolgsmeldung */
.kontakt_success {
    text-align: center;
    padding: 30px 20px;
    color: #fff;
}

.kontakt_success-title {
    font-family: 'PatrickHand', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #4ade80;               /* Hellgrün für Erfolg */
    margin-bottom: 12px;
}

.kontakt_success-text {
    font-size: 0.95rem;
    color: #fff;
    line-height: 1.6;
}

/* Honeypot (visuell versteckt) */
.kontakt_honeypot {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Server-Fehler: Feld hervorheben */
.kontakt_field-group--error .kontakt_input,
.kontakt_field-group--error .kontakt_textarea {
    border-color: #e74c3c;
    background-color: #fff5f5;
}

/* ============================================ Kontakt - RESPONSIVE ============================================ */

@media (max-width: 600px) {
    .kontakt_container {
        padding: 20px 12px;       /* Weniger Padding auf Mobile */
        width: 100%;
        max-width: 100%;
    }
    
    .kontakt_title {
        font-size: 1.3rem;
        margin-bottom: 6px;
    }
    
    .kontakt_subtitle {
        font-size: 0.9rem;
        margin-bottom: 15px;
    }
    
    .kontakt_label {
        font-size: 0.8rem;
    }
    
    .kontakt_input,
    .kontakt_textarea {
        font-size: 1rem;          /* iOS verhindert Zoom bei >= 16px */
        padding: 14px 12px;       /* Mehr vertikales Padding für Touch */
        border-radius: 5px;
    }
    
    .kontakt_textarea {
        min-height: 100px;
        font-size: 1rem;
    }
    
    .kontakt_captcha-hint {
        font-size: 0.8rem;
        padding: 6px 8px;
        margin-bottom: 4px;
    }
    
    .kontakt_checkbox-group {
        flex-direction: column;   /* Vertikal stapeln */
        align-items: flex-start;
        gap: 6px;
        padding: 4px 0;
    }
    
    .kontakt_checkbox {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }
    
    .kontakt_checkbox-label {
        font-size: 0.8rem;
        line-height: 1.4;
    }
    
    .kontakt_button {
        width: 100%;              /* Volle Breite */
        padding: 14px 16px;
        font-size: 1rem;
        min-width: auto;
    }
    
    .kontakt_success {
        padding: 20px 15px;
    }
    
    .kontakt_success-title {
        font-size: 1.2rem;
    }
    
    .kontakt_error-list {
        padding: 10px 12px;
    }
    
    .kontakt_error-item {
        font-size: 0.75rem;
    }
}

/* Sehr kleine Screens (<375px) */
@media (max-width: 375px) {
    .kontakt_container {
        padding: 15px 10px;
    }
    
    .kontakt_label,
    .kontakt_checkbox-label {
        font-size: 0.75rem;
    }
    
    .kontakt_input,
    .kontakt_textarea {
        padding: 10px 8px;
    }
}
/* ============================================ Footer ============================================ */
.full-width-footer {
    width: 100%;
    background-color: #333;
    flex-shrink: 0;
    min-height: var(--footer-height);
	margin-top: 20px;
}

.site-footer__inner {
    width: 100%;
    max-width: var(--max-breite);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 20px;
    text-align: center;
}

.site-footer__text {
    font-size: var(--font-size-footer);
    margin: 3px 0;
	color: #fff;
}

.site-footer__link {
    color: var(--color-menu-text);
    text-decoration: none;
    transition: color var(--transition-speed) ease;
}

.site-footer__link2 {
    color: #454e5c;
    text-decoration: none;
    transition: color var(--transition-speed) ease;
}

.site-footer__link:hover {
    color: var(--color-menu-hover-text);
}

/* Footer Responsive */
@media (max-width: 600px) {
    .full-width-footer {
        height: auto;
        min-height: var(--footer-height);
    }

    .site-footer__inner {
        flex-direction: column;
        gap: 4px;
    }
}
/* ============================================ Topp ============================================ */
.backToTop {
    color: #fcae05;
	font-size: 25px;
	text-align: center !important;
	margin-top: 5px;
}
.backToTop2 {
	text-align: right !important;
	color: #fcae05;
	margin-bottom: -25px;
}
.backToTop:hover, .backToTop2:hover {
    color: #fff;
}
.backToTop3 {
    color: #fcae05;
	font-size: 20px;
	text-align: center !important;
	margin-top: 5px;
}
/* ============================================ xtra ============================================ */
.tar {
	text-align: right !important;
}
.tal {
	text-align: left !important;
}
.tac {
	text-align: center !important;
}
.tav {
	text-align: justify !important;
}
.vat {
	vertical-align: text-top !important;
}
.tc-ora {
	color: #fcae05 !important;
}
.tc-red {
	color: #ff0000 !important;
}
.tc-blue {
	color: #336699 !important;
}
.tc-green {
	color: #34a56f !important;
}
.tc-
.fw-bold {
	font-weight: bold;
}
.tc-333 {
	color: #333 !important;
}
.Club {
	font-family: 'poppins', sans-serif !important;
	color: #fcae05 !important;
	letter-spacing: 2px !important;
}

.warum {
	vertical-align: super;
	font-size: smaller;
}
.info {
	font-family: 'poppins', sans-serif !important;
	color: #fff !important;
	font-size: 11px;
	letter-spacing: 1px !important;
}
.Anmeldung {
	text-align: right !important;
	color: #fcae05;
}
/* === Rotate === */

.boxSh {
	-webkit-box-shadow: 5px 5px 5px 3px rgba(51,51,51,0.32);
	box-shadow: 5px 5px 5px 3px rgba(51,51,51,0.32);
}

.bdb-blue-d {
	border-bottom: #336699 1px dotted !important;
}
.bdb-333-s {
	border-bottom: #333 1px solid !important;
}
.bd-fff-da {
	border: #fff 1px dashed !important;
}
.mal100 {
	margin-left: 100px !important;
}
.mar200 {
	margin-left: 200px !important;
}
.mar300 {
	margin-right: 300px !important;
}
.mar500 {
	margin-right: 500px !important;
}
.h20 {
    height: 20px !important;
}
.h30 {
    height: 30px !important;
}
.h40 {
    height: 40px !important;
}
.h50 {
    height: 50px !important;
}
.h100 {
    height: 100px !important;
}
.h200 {
    height: 200px !important;
}
.h300 {
    height: 300px !important;
}
.w50 {
	width: 50px !important;
}
.w100 {
	width: 100px !important;
}
.w120 {
	width: 120px !important;
}
.w150 {
	width: 150px !important;
}
.w200 {
	width: 200px !important;
}
.w250 {
	width: 200px !important;
}
.w300 {
	width: 300px !important;
}
.w400 {
	width: 400px !important;
}
.p20 {
	padding: 20px !important;
}
.pr20 {
	padding-right: 20px !important;
}
/* RESPONSIVE FIX: Fixed Margins auf Mobile entfernen */
@media (max-width: 600px) {
	.mal100, .mar200, .mar300, .mar500 {
		margin-left: 0 !important;    /* RESPONSIVE FIX */
		margin-right: 0 !important;   /* RESPONSIVE FIX */
	}
}
hr {
	width: 50% !important;
	margin: 0 auto !important;
	height: 0.1px !important;
	margin-top: 25px !important;
	margin-bottom: 25px !important;
}
.imgcenter {
	display: flex;
	justify-content: center;
	align-items: center;
}
.img {
	border: #333 0px solid;
	width: 100%;
	max-width: 400px;
	height: auto;
	display: block;
	margin: auto;
}
.grafikborder {
	border: #fff 1px dotted;
	width: 100% !important;           /* RESPONSIVE FIX: war 300px fixiert */
	max-width: 300px !important;      /* RESPONSIVE FIX: maximale Breite */
	height: auto !important;          /* RESPONSIVE FIX: war 138px fixiert */
	text-align : center !important;
	margin: auto;
}
/* RESPONSIVE FIX: Alle übrigen Fix-Width-Klassen auf Mobile anpassen */
@media (max-width: 600px) {
	.w50, .w100, .w120, .w150, .w200, .w250, .w300, .w400 {
		width: auto !important;       /* RESPONSIVE FIX: flexibel */
		max-width: 100% !important;   /* RESPONSIVE FIX: nicht breiter als Container */
	}
}