/* Allgemeine Stile */
:root{
	--white: #FFFFFF;
	--body-bg: #e3e3ff;
	--light-gray: #CCCCCC;
	--gray: #494949;
	
	--blau1: #EFF7FE; 
	--blau2: #8CBFFF;
	--blau3: #6baaf7;
	--blau4: #137DFF;
	--blau5: #2E6AC5;
	--blau6: #0052DB;
	--blau7: #0254A4;
	--blau8: #0D47A1;
	--blau9: #003383;
	--text: #333333;
	--radius: 0.4rem;
	--shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.3);
	--shadow2: 0px 4px 6px rgba(0, 0, 0, 0.2);
	
	/*MultiUpload*/
	--gap: .75rem;
	--border: #E3E3FF;

	/* Statusfarben */
	--info-bg: #e8f1ff;
	--info-border: #9ec3ff;
	--info-text: #103a8a;

	--success-bg: #f6fff6;
	--success-border: #00841E;
	--success-text: #00841E;

	--error-bg: #fff6f6;
	--error-border: #80000C;
	--error-text: #80000C;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--white);
    color: var(--text);
    font-size: 1rem;
	font-family: 'Nunito', sans-serif;
}
a {
	color: var(--blau7);
	text-decoration: none;
	transition: 0.2s;
}
a:hover {
	text-decoration: underline;
}
hr {
	margin-top: 0.5rem;
    border: 0.0075rem solid var(--gray);
}

h4 {
    padding: 1rem 0;
    margin: 0;
    text-align: left;
}

div.breadcrumb {
    font-size: 1.3rem;
	color: #6A6969;
    font-weight: bold;
    max-width: 88rem;
    overflow-x: auto;
    white-space: nowrap;
}
div.breadcrumb a {
    font-size: 1.3rem !important;
    padding: 0.2rem;  
    display: inline-block;
    font-weight: bold;
}

div.breadcrumb i {
    margin: 0.3rem;
}
div.breadcrumb a:hover {
    color: var(--blau8);
}

/*Banner / Header*/
div.header {
    width: 100%;
    height: 15rem;
    background-image: url('../images/background.png');
    background-repeat: repeat-x;
    background-size: contain;
    background-position: center;
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;                 /* verhindert visuelles überlaufen in die Navbar */
    box-sizing: border-box;
}

.banner-nav{
	background: var(--blau8);
	padding: 1rem;
	width: 100%;
	position: sticky;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: .5rem;
	z-index: 10 !important;
}

/* allgemeine Buttons */
.banner-nav a {
	display: inline-flex;
	align-items: center;
	border-radius: var(--radius);
	color: var(--white);
	background-color: var(--blau5);
	padding: .5rem;
	text-decoration: none;
	position: relative;
}
.banner-nav a:hover,
.banner-nav a.aktiv {
	background-color: var(--blau4);
}

/* Burger links halten */
.banner-nav a.menu-toggle {
	margin-right: auto;
}
.banner-nav a .notify-count {
	position: absolute;
	top: -0.5rem;
	right: -0.5rem;
	pointer-events: none;
	animation: outlinePulse 1.5s linear infinite;
	z-index: 1;
}

@keyframes outlinePulse{
	0%   { outline: 0rem solid rgba(255,0,0,1); }
	100% { outline: .8rem solid rgba(255,0,0,0); }
}

/* damit top/right von .user-menu relativ zum Container berechnet werden
.user-area { position: relative; } */

/* Dropdown */
.user-menu{
	display: none;
	position: absolute;
	top: calc(100%);
	right: 1rem;
	background: var(--white);
	border-radius: var(--radius);
	padding: .5rem;
	box-shadow: var(--shadow);
	z-index: 7 !important;
	min-width: 20rem;
}

.user-menu .menu-head{
	display: flex;
	justify-content: flex-start;
}

/* Rundes Profilbild im Menü */
.user-menu .avatar{
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border: .15rem solid var(--blau5);
	overflow: hidden;
	margin-right: 1rem;
}
.user-menu .avatar.no-img{
	background: var(--blau5);
	position: relative;
}
.user-menu .avatar.no-img::before{
	background-color: var(--white);
	content: "\f007";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 2.5rem;
	line-height: 3rem;
	text-align: center;
	color: var(--blau3);
	display: block;
}

/* Links im Menü */
.user-menu a {
	align-items: center;
	border-radius: var(--radius);
	color: var(--white);
	display: block;
	gap: .5rem;
	margin-top: 0.5rem;
	padding: 0.5rem;
	position: relative;
	text-decoration: none;
}
.user-menu a i{
	width: 1rem;
}

/* Badge nur im Menü auf Admin-Link */
.notify-count {
	background-color: red;
	border-radius: 1rem;
	color: var(--white);
	font-size: .75em;
	font-weight: bold;
	padding: 0.2rem 0.35rem;
	line-height: 1;
}


/* ?? Navigation */
.navbar {
    background: var(--white);
    box-shadow: var(--shadow);
    color: var(--white);
    width: 100%;
}

/* Navigation Links */
.nav-links {
    list-style: none;
    display: flex;
    padding: 0;
    max-width: 88rem;
    margin: 0 auto;
    z-index: 6;
}

.nav-links > li {
    position: relative;
    margin-right: 1rem;
	transition: 0.2s;
}

.nav-links a {
    color: var(--text);
    display: block;
    font-size: 1.2rem;
    padding: 2rem 1rem;
    text-decoration: none;
}
.nav-links > li > a {
    font-weight: bold;
}

.nav-links > li.nav-search {
    background-color: transparent;
    border-radius: var(--radius);
    box-shadow: none;
    margin-left: auto;
    padding: 0;
    margin-right: 0;
    align-items: center;
}
.nav-search form {
    display: flex;
}
.nav-search button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0; 
}
.nav-search input[type="text"] {
    border: 0.15rem solid #3683e4;
    border: 0.15rem solid var(--blau8);
    border-top-left-radius: var(--radius);
    border-bottom-left-radius: var(--radius);
    border-right: none;
    box-shadow: var(--shadow);
    font-size: 1rem;
    padding: 11px;
    outline: none;
}
.admin_navi {
	margin: -0.5rem;
	float: right;
    font-size: 0;
	
}
.admin_navi a {
	background-color: var(--white);
	color: var(--gray);
	cursor: pointer;
	display: inline-block;
	text-align: center;
    font-size: 1.2rem;
	padding: 0.5rem;
}
.admin_navi a:hover {
	color: var(--blau7);
    text-decoration: none;	
}
.admin_navi a.aktiv {
	background-color: var(--blau9);
	color: var(--white);
    text-decoration: none;	
}
.admin_navi a:first-child {
	border-top-left-radius: 0.4rem;
	border-bottom-left-radius: 0.4rem;
}
.admin_navi a:last-child {
	border-top-right-radius: 0.4rem;
	border-bottom-right-radius: 0.4rem;
}

marquee {
	display: block;
    background: var(--white);
    box-shadow: var(--shadow);
    padding: 0.5rem 1.5rem 0 1.5rem;
}
main.content {
	background-color: var(--body-bg);
	margin: 0 !important;
}

.content_box {
	display: grid;
    background: var(--white);
    box-shadow: var(--shadow);
    padding: 1rem;
	gap: 1rem;
}

.content h1 {
	background:linear-gradient(180deg,var(--blau6) 0%,var(--blau8) 100%);
    box-shadow: var(--shadow);
	font-size: 1.2rem;
    color: var(--white);
	position: relative;
	padding: 1rem;
	z-index: 0;
	word-break: break-word;  /* optional, lange Wörter umbrechen */
	hyphens: auto;
}

.content_box h2, 
.content_box h3 {
    margin: 0;
}
.content_box a {	
	font-weight: bold;
}

/*Nummerierungsstyles*/
.content_box ul {
	list-style: disc;
	padding-left: 1.5rem
}
.content_box ol {
	list-style: decimal;
	padding-left: 1.5rem
}
.content_box ul ul {
	padding-left: 1.5rem
}
.content_box ol ol {
	list-style: lower-alpha;
	padding-left: 1.5rem
}

.content_box > .info_box {
	border-bottom: 0.15rem solid var(--gray);
	color: var(--text);
	display: block;
	font-size: 1.1rem;
	font-weight: bold;
	text-align: right;
}
/*
.grid {
    background-color: var(--blau8);
	border-radius: var(--radius);
    overflow-x: auto;
	padding: 0.5rem;
    white-space: nowrap;
	width: 100%;
	display: flex;
 	flex-wrap: wrap;
	gap: 0.5rem;
	box-shadow: var(--shadow2);
}
.grid a {
	border-radius: 0.35rem;
	border: 0.15rem solid var(--blau8);
	color: var(--white);
	cursor: pointer;
	display: inline-block;
	font-size: 1.2rem;
	padding: 0.3rem 0.6rem;
	text-decoration: none;
	transition: all 0.2s;
}
.grid a:hover {
	text-decoration: none;
	border: 0.15rem solid var(--white);
}
.grid a.aktiv {
	border: 0.15rem solid var(--white);
	background: var(--white);
	position: relative;
	color: var(--blau8);
}
.grid a i {
	font-size: 1.5rem;
	line-height: 1;
	margin-right: 0.5rem;
}
*/
.grid {
    border-bottom: 0.15rem solid var(--gray);
	display: flex;
 	flex-wrap: wrap;
	gap: 0.5rem;
    overflow-x: auto;
	padding-bottom: 0.5rem;
    white-space: nowrap;
	width: 100%;
}
.grid a {
	border-radius: var(--radius);
	cursor: pointer;
	display: inline-block;
	font-size: 1.2rem;
	padding: 0.5rem 0.8rem;
	text-decoration: none;
	transition: all 0.2s;
}
.grid a:hover {
	text-decoration: none;
	background: var(--blau2);
}
.grid a.aktiv {
	background: var(--blau6);
	position: relative;
	color: var(--white) !important;
}
.grid a i {
	font-size: 1.5rem;
	line-height: 1;
	margin-right: 0.5rem;
}

.tab-content {
	display: none !important;
}
.tab-content.aktiv {
	display: block !important;
}

/*Admin-Grid*/
.admin_grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(clamp(11rem, 40vw, 15rem), 1fr));
	gap: 1rem;
}

.admin_grid a {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	gap: 1rem;
	min-height: 7rem;
	background: var(--blau3);
	border-radius: var(--radius);
	padding: 1rem;
	color: var(--white);
	text-decoration: none;
	transition: background-color .15s ease;
	text-align: center;      /* <- dazu */
	word-break: break-word;  /* optional, lange Wörter umbrechen */
	hyphens: auto; 
}

.admin_grid a:hover {
	background-color: var(--blau4);
}

/* feste Iconfläche, damit nix springt */
.admin_grid a i {
	font-size: 4rem;           /* bleibt konstant */
	line-height: 1;
	height: 4rem;              /* reserviert Platz */
	width: 4rem;               /* optional – symmetrisch */
	display: inline-flex;
	align-items: center;
	justify-content: center;

	transform: scale(1);       /* nur transform animieren */
	transform-origin: center;
	transition: transform .18s ease-out;
	will-change: transform;    /* hint für GPU */
}

.admin_grid a:hover i {
	transform: scale(1.12);
}
.admin_grid .modul-count {
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
	background: var(--white);
	color: var(--blau3);
	display: inline-block;
	font-size: 0.8rem;
	font-weight: bold;
	padding: 0.2rem 0.4rem;
	border-radius: 1em;
	line-height: 1;
}
.admin_grid .notify-count {
	top: 0.5rem;
	right: 0.5rem;
	padding: 0.2rem 0.4rem;
	position: absolute;
	font-size: 0.8rem;
}

/*Balkendiagramm Übersicht Kämpfe*/
div.bar_sun {
  display: flex;
  align-items: stretch;       /* flach */
  border-radius: var(--radius);
  overflow: hidden;
  margin: 0.5rem 0;
  background: var(--white);          /* Basishintergrund, falls Leerräume entstehen */
  box-shadow: var(--shadow2);
  font-size: 0;                 /* verhindert Lücken bei inline-block, bleibt für Kompatibilität stehen */
  position: relative;
}

/* Ränder wie bisher für erstes/letztes Segment */
div.bar_sun > div:first-child {
  border-bottom-left-radius: var(--radius) !important;
  border-top-left-radius: var(--radius) !important;
}
div.bar_sun > div:last-child {
  border-bottom-right-radius: var(--radius) !important;
  border-top-right-radius: var(--radius) !important;
}

/* Segmente (nutzt deine alten Klassen) */
div.bar_s,
div.bar_u,
div.bar_n,
div.bar_f,
div.bar_ng {
	position: relative;
	display: block;
	min-height: 2rem;             /* konsistent zur Containerhöhe */
	line-height: 2rem;            /* vertikale Ausrichtung */
	padding-left: 1rem;           /* Platz für Label */
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--white, #fff);   /* Textfarbe */
	font-weight: bold;
	font-size: 1rem;
	transition: width .35s ease, filter .15s ease, opacity .15s ease;
	border: none;                 /* keine harten Kanten */
}

/* Labels im Segment (werden per PHP ab ~9% angezeigt) */
div.bar_sun .bar_lbl {
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	text-shadow: 0 1px 2px rgba(0,0,0,.35);
	letter-spacing: .1px;
}

/* Tooltips über data-title */
div.bar_sun > div::after {
	content: attr(title);
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	background: #111827;
	color: #fff;
	padding: 4px 8px;
	border-radius: 6px;
	font-size: .75rem;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .12s ease;
	box-shadow: var(--shadow2);
}
div.bar_sun > div::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: #111827;
	opacity: 0;
	transition: opacity .12s ease;
}
div.bar_sun > div:hover::after,
div.bar_sun > div:hover::before {
	opacity: 1;
}

div.bar_sun > div {
	box-shadow: 0 0 0 0.15rem rgba(0,0,0,.25) inset;
}
/* Hover-Effekt leicht */
div.bar_sun > div:hover {
	filter: brightness(1.04);
}

div.bar_s {
	background-color: #00cc00;
}
div.bar_u {
	background-color: #FF9A00;
}
div.bar_n {
	background-color: #cc0000;
}
div.bar_f {
	background-color: #8484FF;
}
div.bar_ng {
	background-color: var(--light-gray);
}

/* Optionale Legende unter dem Ribbon */
.bar_sun_legend {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 16px;
	margin-top: 6px;
	font-size: .85rem;
	color: #374151;
}
.bar_sun_legend .legend_item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.bar_sun_legend .legend_dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	display: inline-block;
}
.bar_sun_legend .legend_dot.bar_s  {
	background: #00cc00;
}
.bar_sun_legend .legend_dot.bar_u  {
	background: #ff9a00;
}
.bar_sun_legend .legend_dot.bar_n  {
	background: #cc0000;
}
.bar_sun_legend .legend_dot.bar_f  {
	background: #4f83ff;
}
.bar_sun_legend .legend_dot.bar_ng {
	background: var(--light-gray, #bfbfbf);
}
/* Meta-Zeile */
.bar_sun_meta {
	margin-top: 4px;
	font-size: .8rem;
	color: #6b7280; }

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  div.bar_sun > div { transition: none; }
}

/*Eingabefelder*/
form {
	display: block;
	/*max-width: 400px;*/
}
fieldset {
	border-radius: 0.5rem;
	border: 0.15rem solid var(--light-gray);
    padding: 0 1rem;
}
fieldset legend {
    border-radius: 0.3rem;
	background-color: var(--white);
	color: var(--gray);
	font-weight: bold;
    padding: 0 0.5rem;
	position: relative;
	margin-left: -0.3rem;
}
fieldset table.content {
	margin-bottom: 1rem;
}
.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 1rem;
	margin: 1rem 0;
}
.input-container {
	position: relative;
	display: inline-block;
	width: 100%;
	padding: 0 !important;
	margin: 0 !important;
}
.input-container button {
	width: 100%;
}

.input-container input,
.input-container select,
.input-container textarea {
	width: 100%;
	padding: 0.7rem;
    background-color: var(--white) !important;
	border: 0.15rem solid var(--gray);
	border-radius: var(--radius);
	font-size: 1.1rem;
	outline: none;
	background: transparent;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
	box-sizing: border-box;
	resize: none;
}

.input-container textarea {
	font-family: 'Nunito', sans-serif;
	min-height: 15rem;
}
.input-container input,
.input-container select {
}

.input-container input:hover,
.input-container select:hover,
.input-container textarea:hover {
	border-color: #5FACFF;
}

.input-container input:focus,
.input-container select:focus,
.input-container textarea:focus {
	outline: 0; /* Standardrahmen weg */
	border-color: #007bff;
	box-shadow: 0 0 0 0.2rem rgba(0,82,219,0.35); /* blauer Glow */
}

.input-container label {
	background: var(--white);
    border-radius: var(--radius);
	color: var(--gray);
	font-size: 1.1rem;
	position: absolute;
	padding: 0 0.375rem;
	pointer-events: none;
	left: 0.75rem;
	top: 0.74rem;              /* feste Höhe statt 50% */
	transition: all 0.3s ease;
	z-index: 0;
	transform: none;        /* transform komplett raus */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.input-container input:focus + label,
.input-container input[readonly] + label,
.input-container textarea:focus + label,
.input-container input:valid + label,
.input-container textarea:valid + label,
.input-container select:valid + label {
	top: -0.6rem;
	left: 0.6rem;
	font-size: 0.9rem;
	color: #007bff;
}

.disabled {
	pointer-events: none;
	opacity: 0.6;
	cursor: not-allowed;
}
.input-container input[disabled] {
	border-color: #888888;
	color: #888888;
	cursor: not-allowed;
}


.input-container input:required:invalid,
.input-container select:required:invalid,
.input-container textarea:required:invalid {
	border-color: #80000C; /* Bootstrap-Rot */
	background-color: #fff6f6 !important;
}
.input-container input:required:valid,
.input-container select:required:valid,
.input-container textarea:required:valid {
	border-color: #00841E; /* Bootstrap-Grün */
	background-color: #f6fff6 !important;
}

.input-container input:required:invalid + label,
.input-container select:required:invalid + label,
.input-container textarea:required:invalid + label {
	background-color: #fff6f6 !important;
	color: #80000C;
}

.input-container input:required:valid + label,
.input-container select:required:valid + label,
.input-container textarea:required:valid + label {
	background-color: #f6fff6 !important;
	color: #00841E;
}

.checkbox-container,
.radio-container {
	display: inline-block;
	align-items: center;
	margin: 0.75rem 0;
}

.checkbox-container input,
.radio-container input {
	display: none;
}

.checkbox-container label,
.radio-container label {
	position: relative;
	display: block;
	padding-left: 2.25rem;
	cursor: pointer;
	font-size: 1.1rem;
}

.checkbox-container label::before,
.radio-container label::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 1.5rem;
	height: 1.5rem;
	border: 0.15rem solid var(--gray);
	border-radius: var(--radius);
	background: white;
	transition: all 0.3s ease;
	display: flex;
	justify-content: center;
	align-items: center;
    z-index: 0;
}

.radio-container label::before {
	border-radius: 50%;
}

.checkbox-container input:checked + label::before {
	background: #007bff;
	border-color: #007bff;
	font-family: "Font Awesome 6 Free";
	content: "\f00c"; /* Font Awesome Check */
	font-weight: 900; /* wichtig für Solid Icons */
	font-size: 1.1rem;
	color: white;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}

.radio-container input:checked + label::before {
	background: #007bff;
	border-color: #007bff;
	content: '';
}

.radio-container input:checked + label::after {
	content: '';
	position: absolute;
	left: 0.5rem;
	top: 0.7rem;
	width: 0.5rem;
	height: 0.5rem;
	background: white;
	border-radius: 50%;
    z-index: 2;
}
.radio-container input.disabled,
.checkbox-container input.disabled {
	background-color: var(--gray) !important;
	border-color: var(--gray) !important;
}

/*
.radio-nav {
    font-size: 0;
	display: flex;
	width: 100%;
	border-radius: var(--radius);
	overflow: hidden;
}

.radio-nav input {
	display: none;
}

.radio-nav label {
	flex: 1;
	text-align: center;
	font-size: 1.1rem;
	padding: 0.7rem;
	cursor: pointer;
	background: var(--white);
	border: 0.15rem solid var(--blau8);
	border-right: none;
	color: var(--blau8);
	transition: all 0.2s;
}
.radio-nav label:last-child {
	border-right: 0.15rem solid var(--blau8);
}
.radio-nav label:hover{
	background: var(--blau5);
	color: var(--white);
    text-decoration: none;
}
.radio-nav input:checked + label {
	background: var(--blau8);
	color: var(--white);
}

.radio-nav label:first-of-type {
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}

.radio-nav label:last-of-type {
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}
*/

/* ========== Radio-Schalter – nur CSS ========== */
.radio-nav{
  --count:2;                 /* via :has() -> 3/4 */
  --pos:0;                   /* 0-basiert */
  --sep:0.15rem;             /* Trennerbreite */
  --r:0.3rem;                /* EINHEITLICHER Radius für Rahmen & aktives Segment */
  --c:var(--blau8);               /* Blau */

  position:relative;
  display:flex;
  width:100%;
  border:0.15rem solid var(--c);      /* Außenrahmen */
  border-radius: 0.5rem;
  overflow:hidden;
  background:var(--white);
  font-size:0;
  box-sizing:border-box;
}

/* Gleitender Hintergrund (aktives Segment) */
.radio-nav::before{
  content:"";
  position:absolute;
  top:0; left:0; bottom:0;
  width:calc(100%/var(--count));
  transform:translateX(calc(var(--pos)*100%));
  background:var(--c);
  transition:transform 200ms ease;
  z-index:0;                          /* unter Labels/Trennern */
  will-change:transform;
  backface-visibility:hidden;

  /* Standard: innen eckig, außen wird unten gezielt aktiviert */
  border-radius:0;
}

/* Nur wenn das LINKSS äußerste Segment aktiv ist -> linke Ecken rund */
.radio-nav:has(input:first-of-type:checked)::before{
  border-top-left-radius:var(--r);
  border-bottom-left-radius:var(--r);
}

/* Nur wenn das RECHTS äußerste Segment aktiv ist -> rechte Ecken rund */
.radio-nav:has(input:last-of-type:checked)::before{
  border-top-right-radius:var(--r);
  border-bottom-right-radius:var(--r);
}

/* Trenner – über dem Slider; rechte Endlinie ausgeblendet */
.radio-nav::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;

  --step:calc(100%/var(--count));
  background:
    repeating-linear-gradient(90deg,
      transparent 0,
      transparent calc(var(--step) - var(--sep)),
      var(--c)      calc(var(--step) - var(--sep)),
      var(--c)      var(--step)
    );

  /* linke+rechte Außenkante frei lassen -> kein border-right beim letzten */
  -webkit-mask:linear-gradient(90deg,
    transparent 0 var(--sep),
    #000       var(--sep) calc(100% - var(--sep)),
    transparent calc(100% - var(--sep)) 100%);
  mask:linear-gradient(90deg,
    transparent 0 var(--sep),
    #000       var(--sep) calc(100% - var(--sep)),
    transparent calc(100% - var(--sep)) 100%);
}

/* Segmentanzahl automatisch */
.radio-nav:has(input:nth-of-type(3)){ --count:3; }
.radio-nav:has(input:nth-of-type(4)){ --count:4; }

/* Aktive Position (0-basiert) */
.radio-nav:has(input:nth-of-type(1):checked){ --pos:0; }
.radio-nav:has(input:nth-of-type(2):checked){ --pos:1; }
.radio-nav:has(input:nth-of-type(3):checked){ --pos:2; }
.radio-nav:has(input:nth-of-type(4):checked){ --pos:3; }

/* Inputs verstecken */
.radio-nav input{ display:none; }

/* Labels */
.radio-nav label{
  flex:1;
  position:relative;
  z-index:1;                           /* über Slider, unter Trennern */
  text-align:center;
  font-size:1.1rem;
  padding:0.7rem;
  cursor:pointer;
  color:var(--c);
  transition:color .2s ease;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  box-sizing:border-box;
  /* KEINE abgerundeten Label-Ecken – Rundung steuert nur der Container/Slider */
}

.radio-nav label:hover{ color:var(--blau5); }
.radio-nav input:checked + label{ color:var(--white); }

@media (prefers-reduced-motion: reduce){
  .radio-nav::before, .radio-nav label{ transition:none; }
}

button,
input[type=submit], 
input[type=button] , 
input[type=reset] {
	background: #007bff;
    background: var(--blau8);
	color: white;
	padding: 0.8rem;
	border: none;
	border-radius: var(--radius);
	font-size: 1.1rem;
	cursor: pointer;
	transition: background 0.3s ease;
}

button:hover,
input[type="submit"]:hover, 
input[type="button"]:hover, 
input[type="reset"]:hover {
	background: var(--blau5);
}

.save {
    background-color: #007B06 !important;
}
.save:hover {
    background-color: #00A708 !important;
}
.delete {
    background-color: #C90208 !important;
}
.delete:hover {
    background-color: #FF0007 !important;
}
.cancel {
    background-color: #F39B00 !important;
}
.cancel:hover {
    background-color: #FFBB42 !important;
}
.load-more {
	display: block;
	width: 100%;
	margin-top: 1rem;
}

/*Toggle Content*/
.toggle-box {
	display: block !important;
	background-color: var(--blau1);
	border: 0.15rem solid var(--blau2);
	border-radius: var(--radius);
	padding: 0 0.5rem;
	box-shadow: var(--shadow2);
	width: 100%;
}

.toggle-row {
	align-items: center;
	cursor: pointer;
	display: flex;
	font-weight: bold;
	padding: 0.5rem 0;
}
.toggle-row a {
	display: inline-block;
	width: 9rem;
}
.toggle-row span.filter {
	background-color: var(--white);
	border: 0.15rem solid var(--blau6);
	font-weight: normal;
	border-radius: 0.4rem;
	margin-left: 0.3rem;
	padding: 0.3rem;
}
.toggle-trigger {
	display: inline;
}

/* Inhalt standardmäßig ausgeblendet */
.toggle-content {
	display: none;
}

.scroll-top {
    position: fixed;
    width: 3.5rem;
    height: 3.5rem;
    background: var(--blau8);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    cursor: pointer;
    box-shadow: var(--shadow2);
    opacity: 0;
    transform: scale(0);
	transition: 0.2s;
	z-index: 1000;
}
.scroll-top.show {
    opacity: 1;
    transform: scale(1);
}
.scroll-top.show:hover {
    background: var(--blau5);
}

/*Tabelle*/
.table-wrapper {
    overflow-x: auto;
}
.left {
	text-align: left !important;
}
.center {
    text-align: center !important;
    vertical-align: middle;  /* Zentriert den Inhalt vertikal */
}
.right {
	text-align: right !important;
}


table.content {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
}

.content td,
.content th {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
	vertical-align: top;
}
/* Ausnahme: keine Kürzung */
.content td.no_overflow,
.content th.no_overflow {
	overflow: visible;       /* wieder sichtbar */
	white-space: normal;      /* Zeilenumbruch erlaubt */
	text-overflow: clip;      /* kein Ellipsis mehr */
}

table.content tr th,
table.dropdown-suche th {
	border-bottom: 0.15rem solid var(--light-gray);
	font-weight: bold;
	padding: 0.2rem !important;
}
table.content tr td,
table.dropdown-suche td {
	border-top: 0.1rem solid var(--light-gray);
	padding: 0.2rem;
	text-align: left;
}

table.content tr:first-child td {
	border: none;
}

/*Dropdownsuche*/
table.dropdown-suche {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	margin-top: 0.3rem;
	background: white;
	border: 0.15rem solid var(--light-gray);
    box-shadow: var(--shadow);
	max-height: 10rem;
	overflow-y: auto;
	z-index: 9999;
}

table.dropdown-suche thead {
	position: sticky;
	top: 0;
	background-color: var(--white);
}

/* Hover-Effekt allgemein – ohne !important, sonst killst du alles andere */
table.interaktiv tr:hover td,
table.dropdown-suche tr.dropdown-item:hover td,
table.dropdown-suche .dropdown-item.highlight td {
	background-color: rgba(0,0,0,0.15) !important;
	cursor: pointer;
}

table.interaktiv tr:hover th {
	cursor: inherit;
}

/* Zeilen-Highlight (deine Animation) bleibt wie gehabt */
table.interaktiv tr.highlight td,
table.interaktiv tr:target td {
	background-color: #CCFFCC;
	animation-name: highlight;
	animation-duration: 10s;
	animation-fill-mode: forwards;
}

@keyframes highlight {
	from { background-color: #CCFFCC; }
	to   { background-color: transparent; }
}

/* Nur Rahmen über <col> – das funktioniert für ganze Spalten */
table.content col.hightlight {
	border-left: 0.2rem solid var(--blau5);
	border-right: 0.2rem solid var(--blau5);
	background-color: var(--body-bg);
}

table.interaktiv tr.neu td {
	background-color: var(--blau1);
}
table.interaktiv tr.neu td:first-child {
	border-left: 0.2rem solid var(--blau2);
}
table.interaktiv tr.neu td:last-child {
	border-right: 0.2rem solid var(--blau2);
}

table.interaktiv tr.heimkampf td {
	background-color: var(--blau1);
}
table.interaktiv tr.heimkampf td:first-child {
	border-left: 0.2rem solid var(--blau2);
}
table.interaktiv tr.heimkampf td:last-child {
	border-right: 0.2rem solid var(--blau2);
}

table.interaktiv tr.auswaertskampf td {
	background-color: rgba(255,210,210,0.80);
}
table.interaktiv tr.auswaertskampf td:first-child {
	border-left: 0.2rem solid #FF6969;
}
table.interaktiv tr.auswaertskampf td:last-child {
	border-right: 0.2rem solid #FF6969;
}

table.interaktiv tr.neutral td {
	background-color: rgba(255,221,184,0.80);
}
table.interaktiv tr.neutral td:first-child {
	border-left: 0.2rem solid #805200;
}
table.interaktiv tr.neutral td:last-child {
	border-right: 0.2rem solid #805200;
}

table.interaktiv tr.spielfrei td {
	background-color: rgba(155,155,155,0.80);
}
table.interaktiv tr.spielfrei td:first-child {
	border-left: 0.2rem solid #1B1B1B;
}
table.interaktiv tr.spielfrei td:last-child {
	border-right: 0.2rem solid #1B1B1B;
}

/*Termin Styles*/
.inhalt input.tk_farbe {
	display: none;
}
.inhalt label.tk_farbe {
	border: 0.15rem solid;
	border-radius: 20px;
	display: inline-block;
	font-size: 0;
	margin-right: 10px;
	height: 30px;
	width: 30px;
}
.inhalt label.tk_farbe:hover {
	cursor: pointer;
}
.inhalt label.aktiv {
	box-shadow: 0 0 0 3px #000000;
}
.inhalt label[for=blau] {
	background-color: rgba(54,131,228,.8);
	border-color: rgba(0,85,204,1);
}
.inhalt span label[for=blau]:hover {
	background-color: rgba(54,131,228,1);
}
.inhalt label[for=gelb] {
	background-color: rgba(255,221,0,.8);
	border-color: rgba(255,221,0,1);
}
.inhalt span label[for=gelb]:hover {
	background-color: rgba(255,221,0,1);
}
.inhalt label[for=gruen] {
	background-color: rgba(0,116,87,.8);
	border-color: rgba(0,116,87,1);
}
.inhalt span label[for=gruen]:hover {
	background-color: rgba(0,116,87,1);
}
.inhalt label[for=lila] {
	background-color: rgba(129,0,111,.8);
	border-color: rgba(129,0,111,1);
}
.inhalt span label[for=lila]:hover {
	background-color: rgba(129,0,111,1);
}
.inhalt label[for=rot] {
	background-color: rgba(255,90,90,.8);
	border-color: rgba(204,0,0,1);
}
.inhalt span label[for=rot]:hover {
	background-color: rgba(255,90,90,1);
}
.inhalt label[for=schwarz] {
	background-color: rgba(0,0,0,.8);
	border-color: rgba(0,0,0,1);
}
.inhalt span label[for=schwarz]:hover {
	background-color: rgba(0,0,0,1);
}

/*Ergebnisse*/
.spieltag {
	background-image: url('../images/spieltag_bg.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: bottom center;
	box-shadow: 0 0 3rem 3rem #fff inset;
}
.spieltag h2,
.spieltag strong {
	background-color: rgba(255,255,255,0.80);
	border-radius: var(--radius);
	padding: 0.3rem;
	
}
.spieltag strong {
	line-height: 1.9rem;
}
div.emblem {
	background-position: center center;
	background-size: 8rem auto;
	background-repeat: no-repeat;
	border-radius: var(--radius);
	display: inline-block;
	height: 11rem !important;
	width: 100% !important;
}
div.ergebnis {
	padding-top: 1rem;
	font-size: 1.5rem;
}

@import url('https://fonts.cdnfonts.com/css/seven-segment');
div.ergebnis p {
	display: inline-block;
	background-color: rgba(28,28,28,1.00);
	box-shadow: 0.1rem 0.1rem 0.3rem 0.1rem var(--gray);
	border-radius: var(--radius);
	font-family: 'Seven Segment', sans-serif;
	font-size: 2rem;
	font-weight: bold;
	margin: 0.4rem 0.2rem !important;
	padding: 0.1rem;
	width: 1.6rem;
	text-align: center;
}

div.ergebnis.green p {
	color: #D9FFD9;
	text-shadow:
		0 0 0.3rem #fff,
		0 0 0.6rem #00AB00;
}
div.ergebnis.orange p {
	color: #FFF1DA;
	text-shadow:
		0 0 0.3rem #fff,
		0 0 0.6rem #FF8600;
}
div.ergebnis.red p {
	color: #FFDFDF;
	text-shadow:
		0 0 0.3rem #fff,
		0 0 0.6rem #FF0000;
}
div.ergebnis.white p {
	color: #B7B5B5;
}
div.ergebnis.upcoming p {
	color: #B7B5B5;
	width: auto !important;
}

/* Result Karten Grid Startseite*/
/* Grid */
.results-grid{
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
	gap:var(--gap);
}

/* Karte – BG + Inset-Glow, volle Fläche klickbar bleibt */
.result-card{
	position:relative;
	background:var(--white) url('../images/spieltag_bg.jpg') bottom center / cover no-repeat;
	border-radius:var(--radius);
	padding:1rem;
	display:flex;
	flex-direction:column;
	box-shadow:0 0 3rem 3rem var(--white) inset, var(--shadow);
	transition:transform .12s ease, box-shadow .12s ease;
	z-index: 1;
}
.result-card:hover{
	box-shadow:0 0 3rem 3rem var(--light-gray) inset, var(--shadow);
	z-index: 2;
}

/* Ganze Karte klickbar */
.card-overlay-link{
	position:absolute;
	inset:0;
	z-index:1;
}

/* Kopfzeile */
.header-line{
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	gap:.5rem;
	margin-bottom:.75rem;
	font-size:.95rem;
	color:var(--text);
}
.header-line .dot{ opacity:.6; }
.neutral{ opacity:.9; }

/* Mittelteil */
.vs-row{
	display:grid;
	grid-template-columns:1fr auto 1fr;
	align-items:center;
	gap:1rem;
}
.team{
	display:grid;
	justify-items:center;
	gap:.5rem;
	text-align:center;
}
.emblem-img{
	max-width:100px;
	max-height:100px;
	width:auto;
	height:auto;
	object-fit:contain;
	display:block;
}

/* Pills (Teamnamen + VS) */
.pill{
	display:inline-block;
	padding:.25rem .6rem;
	border-radius:var(--radius);
	background:rgba(255,255,255,.85);
	border:1px solid var(--light-gray);
	box-shadow:var(--shadow);
	color:var(--text);
	line-height:1.2;
}
.team-name{
	max-width:24ch;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	font-weight:700;
}
.vs-mid{
	font-weight:900;
	letter-spacing:.06em;
}

/* Ergebnis unten (nicht klickbar, über dem Overlay) */
.digit-result{
	margin-top:1rem;
	display:flex;
	justify-content:center;
	align-items:center;
	position:relative;
	pointer-events:none;
}

/* Links unten */
.more-links{
	margin-top:1rem;
	padding-left:1rem;
}

/* Kleinere Screens */
@media (max-width:420px){
	.team-name{ max-width:18ch; }
	.emblem-img{
		max-width:120px;
		max-height:120px;
	}
}


/* Textinhalt rechts */
.card-content {
	flex: 1;
	padding: 1rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.card-content h2 {
	margin: 0;
}
.card-content p {
	margin: 0.5rem 0;
	font-size: 1.5rem;
}

/* Cards z.B. für Corstand */
.card-container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	padding: 1rem;
}
@media (max-width: 700px) {
	.card-container {
		grid-template-columns: 1fr;
 	}
}
.card {
	display: flex;
	background: var(--body-bg);
	border-radius: var(--radius);
    box-shadow: var(--shadow);
	overflow: hidden;
	height: 18rem; /* Feste Höhe, kann angepasst werden */
}

/* kleines neutrales Styling */
.kpis {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}

.kpi-box {
	padding: 1rem;
	border: 0.15rem solid var(--blau8);
	border-radius: var(--radius);
	text-align: center;
}

.kpi-value {
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1;
}

.kpi-label {
	opacity: .75;
	width: 100%;
}

/* Wrapper: Karten-Grid ohne Breakpoints */
.groups{
	display: grid;
	gap: 1.2rem;
	grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}

/* Karte */
.group {
	background: var(--blau1);
	border-radius: var(--radius);
	box-shadow: var(--shadow2);
	padding: 0.5rem;
	display: flex;
	flex-direction: column;
	min-width: 0; /* verhindert Overflow durch Inhalt */
}
/* Titel */
.group h3 {
	margin: 0 0 .75rem;
}
/* Mitglieder: Grid in der Karte */
.member-list {
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: .5rem;
}
.member-list li {
	padding: .6rem .75rem;
	background: var(--white);
	border-radius: var(--radius);
	border: 0.15rem solid var(--blau2);
	display: flex;
	align-items: center;
	gap: .5rem;
	transition: background .15s ease, border-color .15s ease;
}
/* Leader (erstes LI) nur wenn .has-leader am <ul> hängt */
.member-list.has-leader li:first-child {
	font-weight: 600;
	border-color: var(--blau6);
	grid-column: 1 / -1;  /* volle Breite innerhalb der Karte */
	position: relative;
	padding-right: 2.2rem;
}
.member-list.has-leader li:first-child::after {
	content: "\f521"; /* FontAwesome Krone */
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	color: var(--blau2);
	position: absolute;
	right: .75rem;
	top: 50%;
	transform: translateY(-50%);
}

/* Sortierbare Items, z.B. für Mitgliedergruppen */
#selectItem {
	padding: 0;
	margin: .5rem 0;
	list-style: none;
}
#selectItem li {
	display: inline-block;
	background: var(--body-bg);
	padding: .25rem .5rem;
	margin: .25rem;
	border-radius: 4px;
	position: relative;   /* fürs Sortieren */
}
/* beim Greifen: dicke, gestrichelte Umrandung */
#selectItem li.sortable-chosen {
	outline: 0.15rem dashed #CDCDFB;
}

/* die Ghost-Version leicht transparent */
#selectItem li.sortable-ghost {
	opacity: 0.5;
}

#selectItem li .remove {
	cursor: pointer;
}

.selected-list li:hover {
	background: #D3D3FF !important;
	cursor: move;        
}

/*LightGallery*/
#lg-gallery {
	list-style:none;
	margin:0;
	padding:0;
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(15rem,1fr));
	gap:.75rem;
}
#lg-gallery li{
	overflow:hidden;
	border-radius: 0.4rem;
    box-shadow: var(--shadow2);
}

/* Kachel-Container = Clip + Border + Radius (bleibt immer gleich) */
#lg-gallery li a {
	position: relative;
	display: block;
	aspect-ratio: 4/3;
	overflow: hidden;
}

/* 10% Weiß-Overlay im Normalzustand */
#lg-gallery li a::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #fff;
	opacity: .15;
	pointer-events: none;
	transition: opacity .2s ease;
	border-radius: inherit;
}

/* Bild füllt Box; KEIN Border/Radius hier, nur Zoom */
#lg-gallery img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%;
	transform: scale(1);
	transition: transform .2s ease;
	will-change: transform;
	cursor: zoom-in;
}

/* Hover: Overlay weg + sanfter Zoom aufs Bild (Kachel bleibt fix) */
#lg-gallery li a:hover::after,
#lg-gallery li a:focus-visible::after{ opacity:0; }

#lg-gallery li a:hover img,
#lg-gallery li a:focus-visible img{ transform:scale(1.06); }

/* optional: statt Border-Änderung ein Hover-Ring ohne Layout-Shift */
/*
#lg-gallery li a:hover{ box-shadow:0 0 0 .15rem var(--blau6); }
*/

/* Motion-Preference respektieren */
@media (prefers-reduced-motion: reduce){
	#lg-gallery li a::after,
	#lg-gallery img {
		transition: none; }
}

/* optional: nur Desktop zoomen (Touch nicht) */
@media (pointer:coarse){
	#lg-gallery li a:hover img {
		transform: none;
	}
}



/* ===========================
   Statusleiste (eine pro Uploader)
   =========================== */
.kbv-upload-status {
	align-items: center;
	border-radius: var(--radius);
	border: 0.15rem solid var(--info-border);
	color: var(--info-text);
	font-size: 1.1rem;
	gap: .5rem;
	margin-bottom: .75rem;
	padding: .6rem;
	background: var(--info-bg);
	/* Optional „sticky“:
	position: sticky; top: 0; z-index: 2;
	*/
}
.kbv-upload-status[data-type="success"] {
	border-color: var(--success-border);
	background: var(--success-bg);
	color: var(--success-text);
}
.kbv-upload-status[data-type="error"] {
	border-color: var(--error-border);
	background: var(--error-bg);
	color: var(--error-text);
}
.kbv-upload-status-text {
	display: block;
	line-height: 1.3;
}
.kbv-upload-status-errors {
	padding-left: 1rem;
	font-size: 0.9rem;
	display: block;
}

/* ===========================
	Bulk-Grid
=========================== */
.form-row.kbv-bulk-grid {
	margin-top: .5rem;
}
.kbv-grid {
	display: grid;
	gap: var(--gap);
	grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
}
/*Nur für den Upload*/
.form-row.kbv-grid {
}
/*Nur für die Galerieansicht*/
.gallery.kbv-grid {
	grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
	
}

/* Karte */
.kbv-bulk-item {
	position: relative;
	background-color: var(--white);
	border: 0.15rem solid var(--light-gray);
	border-radius: var(--radius);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: 0.2s;
}
a .kbv-bulk-name {
	font-weight: bold;
}
a:hover .kbv-bulk-name {
	text-decoration: none !important;
}
a:hover > .kbv-bulk-item {
	border: 0.15rem solid var(--blau6);
	box-shadow: var(--shadow);
}

/* Thumbnailkachel (nur die URL kommt per inline style) */
.kbv-bulk-thumb {
	aspect-ratio: 4 / 3;
	background-size: cover;
	background-position: center center;
	background-color: var(--error-bg);
}
.kbv-bulk-thumb-img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.gallery .kbv-bulk-thumb-img {
}


/* Dateiname */
.kbv-bulk-name {
	padding: .5rem;
	color: var(--text);
	line-height: 1rem;
	word-break: break-word;
	overflow-wrap: anywhere;
	text-align: center;
}

/* Entfernen-Button */
.kbv-bulk-remove {
	position: absolute;
	top: 0.4rem;
	right: 0.4rem;
	width: 1.8rem;
	height: 1.8rem;
	border-radius: 50%;
	border: 0.15rem solid var(--border);
	background: var(--body-bg);
	color: var(--text);
	line-height: 1;
	padding: 0 !important;
	display: grid;
	place-items: center;
	font-size: 1rem;
	cursor: pointer;
	transition: 0.2s;
}
.kbv-bulk-remove i {
	pointer-events: none;
}

.kbv-bulk-remove:hover {
	background: #fee2e2;
	color: #7f1d1d;
	border-color: #fca5a5;
}

/* PDF-Preview (falls genutzt) */
.kbv-pdf-preview {
	width: 100%;
	height: 30rem;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--white);
}

/* Bewegungen reduzieren, wenn gewünscht */
@media (prefers-reduced-motion: reduce) {
	.kbv-bulk-item,
	.kbv-upload-status,
	.kbv-bulk-remove { transition: none !important; }
}

.picture-preview {
	display: block;        /* vermeidet Lücken unter dem Bild */
	max-width: 100%;       /* skaliert runter bis zur Containerbreite */
	height: auto;          /* hält Seitenverhältnis */
	margin: 0 auto;
	border-radius:var(--radius);
	object-fit:cover; 
    box-shadow: var(--shadow2);
}
/* Platzhalter, falls kein Bild */
.profile-placeholder {
	background: var(--light-gray);
	flex: 0 0 40%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #777;
}
.card > .picture-preview {
	flex: 0 0 40%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #777;
	max-width: 40%;
}

/*File Grid für Uploadseite*/
.file_grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 1rem;
}
.file_grid a {
	border-radius: var(--radius);
	box-shadow: var(--shadow2);
	display: flex;
	flex-direction: column;
	outline: 0.15rem solid var(--light-gray);
	padding: 0.5rem;
	text-align: center;
	color: inherit;
	text-decoration: none;
}
.file_grid a:hover {
	outline: 0.3rem solid var(--blau6);
}
.file_grid img,
.file_grid .icon {
	flex: 0 0 auto;
}
.file_grid img {
	max-width: 100%;
	max-height: 4rem;
	object-fit: cover;
	margin: 0 auto 0.5rem;
}
.file_grid .icon {
	font-size: 2rem;
	margin-bottom: 0.5rem;
	color: var(--text);
}
.file_grid .ext {
	font-size: 0.9rem;
	color: #444;
}
.file_grid a p {
	margin-top: auto;
	font-size: 0.85rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.breadcrumbs {
	margin-bottom: 1rem;
}
.breadcrumbs a {
	margin-right: 0.5rem;
	text-decoration: none;
}

/* ?? Footer */
footer.copyright {
    background: var(--blau8);
    box-shadow: var(--shadow);
    color: var(--white);
    font-weight: bold;
    padding: 1rem 0.5rem;
    text-align: center;
}
footer.content {
    text-align: center;
    color: #000000;
    padding: 0.5rem 0;
}
footer.content ul {
	display: inline-block;
	list-style: none;
    padding: 0.5rem;
	vertical-align: top;
    margin: 0;
}
@media screen and (max-width: 768px) {
	footer.content ul {
		display: block;
	}
}
footer.content ul li.header {
	text-align: left;
	font-weight: bold;
	display: block;
}
footer.content ul li {
	text-align: left;
	font-weight: normal;
	padding-top: 0.5rem;
}
footer.content ul li > i {
	color: var(--text);
	font-size: 1rem;
	margin-right: 0.5rem;
	width: 1.2rem;
	display: inline-block;
}
footer.content ul li a {
}

/* Social Media Container */
footer.content ul.social {
    justify-content: center;;
    padding: 0.5rem;
}
footer.content ul.social li.header {
	display: block;
}
footer.content ul.social li {
	padding-right: 10px;
	display: inline-block;
	vertical-align: top;
}
footer.content ul.social li a {
    width: 3.5rem;/* Quadratische Größe */
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px; /* Abgerundete Ecken */
    font-size: 2.2rem !important;
    color: var(--white);
    transition: 0.2s;
	text-decoration: none;
}
footer.content ul.social li a:hover {
	font-size: 2.4rem !important;
}

/* Farben für jede Plattform */
footer.content ul.social .facebook {
    background: #1877F2;
}
footer.content ul.social .instagram {
	background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%),
    radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%),
    radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%),
    radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%),
    radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%),
    radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%),
    radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent),
    linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);
}
footer.content ul.social .youtube {
    background: #FF0000;
}
footer.content ul.social .wikipedia {
    background: #000;
}

.overlay {
	background: rgba(0, 0, 0, 0.8);
	backdrop-filter: blur(0.1rem);
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 5;
}
#largeContainer {
    background-color: var(--white);
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 10;
    opacity: 0; /* Container ist zu Beginn unsichtbar */
    transition: transform 0.2s ease-out, opacity 0.2s ease-out; /* Animation */
    border-radius: 10px;
    box-shadow: 0.15rem 0.15rem 0.75rem #000000;
    padding: 1rem !important;
    overflow-y: auto;
}
#largeContainer > h3 {
    background-color: var(--blau8);
	border-radius: 0.5rem;
	font-size: 1.2rem;
    padding: 0.6rem 1.2rem;
    color: var(--white);
}
#largeContainer > h3 .tool-box {
    display: flex;            /* <-- wichtig */
    align-items: center;
    gap: 0.4rem;              /* statt margin-left an den Links */
    float: right;
    margin-right: -0.8rem;
    margin-top: -0.3rem;
}

#largeContainer > h3 .tool-box i {
    display: inline-flex;     /* optional, sauberer als block-flex */
    background-color: var(--white);
    border-radius: var(--radius);
	font-size: 1.6rem;
	color: var(--text);
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
	transition: .2s all;
	cursor: pointer;
    /* margin-left: 0;  // entfernen, wenn du gap nutzt */
}

#largeContainer > h3 .tool-box i:hover {
	text-decoration: none;
	background-color: var(--blau2);
}
#largeContainer > h3 .tool-box i.fa-xmark:hover {
	text-decoration: none;
	color: #fff;
	background-color: red;
}
/* Styling für den Tooltip */
.custom-tooltip {
    position: absolute;
    background: var(--text);
    color: var(--white);
    padding: 0.3rem;
    border-radius: 0.3rem;
    font-size: 1rem;
    white-space: nowrap;
    z-index: 1000;
    display: none;
}
/* Pfeil, der vom Tooltip zum Element zeigt */
.custom-tooltip::before {
    content: "";
    position: absolute;
    bottom: 100%; /* Pfeil direkt oberhalb des Tooltips */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    /* Hier wird der Pfeil gezeichnet: nur die untere Kante ist sichtbar */
    border-color: transparent transparent #333333 transparent;
}
.custom-tooltip input[type=text]{
    border-radius: 0.2rem;
    padding: 0.3rem;
    font-size: 1rem;
    width: 10rem;
}
.custom-tooltip button {
    background-color: var(--white);
    border-radius: 0.2rem;
    color: var(--text);
    font-size: 1rem;
    padding: 0.3rem;
}
.custom-tooltip button:hover {
    background-color: var(--light-gray);
}

/*Text farblich markieren*/
.mark_blue,
.mark_green,
.mark_red,
.mark_black,
.mark_orange {
	display: inline;
	border-radius: var(--radius);
	padding: 0.15rem 0.3rem;
	margin: 0;
}
.mark_blue {
	background-color: rgba(108,166,240,0.8);
	color: #0000ff;
}
.mark_green {
	background-color: rgba(146,255,34,.8) !important;
	color: #004e39;
}
.mark_red {
	background-color: rgba(255,141,141,.8);
	color: #4e0000;
}
.mark_black {
	background-color: rgba(155,155,155,0.80);
	color: #000000;
}
.mark_orange {
	background-color: rgba(255,187,66,0.8);
	color: #805200;
}

.diamant {
	color: #4CB9FF;
}
.gold {
	color: #FFA500;
}
.silber {
	color: #625F5F;
}
.bronze {
	color: #8F5B2B;
}
.blau {
	color: #005FFF;
	font-weight: bold;
}
.gelb {
	color: #C3A900;
	font-weight: bold;
}
.gruen {
	color: #007457;
	font-weight: bold;
}
.lila {
	color: #81006F;
	font-weight: bold;
}
.rot {
	color: #FF0000;
	font-weight: bold;
}
.schwarz {
	color: #000000;
	font-weight: bold;
}
.grau {
	color: #AAAAAA;
	font-weight: bold;
}

/* Eine Zeile für Summary + Status/Button */
.lm-row {
  display: flex;
  align-items: center;
  gap: .75rem;            /* Abstand zwischen Summary und Button/Status */
  flex-wrap: wrap;        /* falls eng, umbrechen */
}
.lm-summary{ margin:0;
}
.muted {
}


/*Termine Kalender*/
.termin_blau,
.termin_gelb,
.termin_gruen,
.termin_lila,
.termin_rot,
.termin_schwarz {
	border-radius: 0.8rem;
	border: 0.3rem solid;
    padding: 0.5rem;
	
}
.termin_blau {
	border-color: #005FFF;
}
.termin_gelb {
	border-color: #FFDD00;
}
.termin_gruen {
	border-color: #007457;
}
.termin_lila {
	border-color: #81006F;
}
.termin_rot {
	border-color: #FF5A5A;
}
.termin_schwarz {
	border-color: #000000;
}

.kalender {
    overflow-x: auto;
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 0.2rem;
}
.tag {
	padding: 0.5rem;
	border: solid 0.15rem var(--light-gray);
	height: 10.5rem;
	font-size: 0.85em;
	max-width: 12rem;
    text-overflow: ellipsis;
    white-space: nowrap;
	overflow-y: auto;          /* vertikal scrollen bei Bedarf */
	overflow-x: hidden;        /* horizontal NICHT scrollen */
	/* kein text-overflow/nowrap hier! */
	-webkit-overflow-scrolling: touch; /* mobiles, optional */
}
.ausserhalb {
	background-color: #E8E8E8;
	color: #888888;
}
.samstag {
	background-color: #C7DFFD;
}
.sonntag {
	background-color: #A2C9FA;
}
.ausserhalb.samstag  {
	background-color: #B6CBE5 !important;
}
.ausserhalb.sonntag  {
	background-color: #99B8DF !important;
}
.wochentag-header {
	font-weight: bold;
	background: #dddddd;
	text-align: center;
	padding: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.termin {
	margin-top: 4px;
	padding: 3px 5px;
	border-radius: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hover-highlight {
	cursor: pointer;
	box-shadow: 0 0 0.5rem rgba(0,0,0,0.5);
}

.tag .blau {
	background-color: rgba(0,95,255,0.20);
}
.tag .gelb {
	background-color: rgba(255,221,0,0.20);
}
.tag .gruen {
	background-color: rgba(0,116,87,0.20);
}
.tag .lila {
	background-color: rgba(129,0,111,0.20);
}
.tag .rot {
	background-color: rgba(255,90,90,0.20);
}
.tag .schwarz {
	background-color: rgba(0,0,0,0.20);
}
.heute {
	border: 0.15rem solid var(--blau6);
	box-shadow: inset 0 0 4px var(--blau6);
}

/* Container für Benachrichtigungen */
.notification-list {
	top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    position: fixed;
    z-index: 11;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Basisstil für Benachrichtigungen */
.notification-box {
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    padding: 0.8rem;
    opacity: 1; /* Start bei voller Sichtbarkeit */
    position: relative;
    /* Entferne CSS-Animationen, damit jQuery den Ein- und Ausblendeffekt steuert */
    /* animation: fadeInOut 3.3s forwards; */
	display: flex;
    align-items: center;   /* vertikal mittig */
    gap: .6rem; 
}
.notification-box > i {
    font-size: 2rem;
    width: 2rem;
    line-height: 1;        /* verhindert Extra-Luft */
    flex: 0 0 auto;
}
.notification-box p {
    display: inline-block; /* oder block */
    margin: 0;
    vertical-align: middle; /* kann auch ganz raus */
}

/* Typ-spezifische Farben */
.success {
    background-color: green;
    color: var(--white);
}
.error {
    background-color: red;
    color: var(--white);
}
.info {
    background-color: blue;
    color: var(--white);
}
.warning {
    background-color: darkorange;
    color: var(--white);
}

/* Fortschrittsbalken – optional, hier ohne Animationen */
.progressBar {
    border-bottom-left-radius: 3px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: rgba(0,0,0,0.70);
    opacity: 0.8;
}
.success .progressBar,
.error .progressBar,
.info .progressBar,
.warning .progressBar {
    animation: progressBar 3s linear forwards, fadeOutUp 1s ease-in-out 3s forwards;
}
/* Fortschrittsbalken leert sich*/
@keyframes progressBar {
    0% {
        width: 100%;
    }
    100% {
        width: 0;
    }
}

/* ===================== */
/* Desktop               */
/* ===================== */
@media screen and (min-width: 1300px) {
	div.header {
		height: 15rem;
	}
	/* Banner-Layout: Mitte flexibel, Seiten so groß wie nötig */
	.banner {
		width: min(88rem, 100%);
		height: 100%;
		margin: 0 auto;
		position: relative;

		display: grid;
		/* Mitte darf sich ausdehnen, Seiten dürfen schrumpfen */
		grid-template-columns: minmax(8rem, 1fr) auto minmax(8rem, 1fr);
		align-items: center;
		gap: clamp(0.5rem, 2vw, 2rem);
		overflow: hidden;
	}

	.banner > * { min-width: 0; }

	.banner img {
		display: block;
		height: auto;
		max-height: 100%;
		max-width: 100%;
		object-fit: contain;
	}

	/* Ausrichtung */
	.banner img:first-child  { justify-self: start; }
	.banner img:nth-child(2) { justify-self: center; }
	.banner img:last-child   { justify-self: end; }

	/* --- Seitenwappen: dürfen groß sein, aber schrumpfen bei Bedarf --- */
	.banner img:first-child,
	.banner img:last-child {
		height: clamp(13rem, 80%, 20rem); /* dynamisch, nie zu riesig */
	}

	/* --- Mittel-Banner: Hauptfokus, bleibt breit und proportional --- */
	.banner img:nth-child(2) {
		height: auto;
		max-height: 11rem;
		width: auto;
		max-width: 100%;
	}
	.navbar {
    	z-index: 5 !important;
    }
    div.breadcrumb {
        border-radius: 0.5rem;
        margin: 0 auto;
    }
	.banner-nav {
		z-index: 5;
    }
    .banner-nav a {
        font-size: 1rem;
    }
	.banner-nav a.menu-toggle{
		display: none;
	}
    .banner-nav a i {
		margin-right: 0.5rem;
	}
    .nav-links > li {
        border-radius: var(--radius);
    }
	.nav-links > li:hover > a {
		color: var(--blau4);
	}
	.nav-search{
		margin-top: 1.3rem;
	}
    .nav-search input[type="text"] {
        width: 13rem;
    }    
    .menu-toggle {
        display: none;
    }
    .nav-links .dropdown {
        padding-right: 1rem !important;
		transition: all .2s;
    }
    .dropdown:hover {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
    .dropdown li {
		box-shadow: var(--shadow)
    }
    .dropdown:hover > .dropdown-menu {
        display: block;
    }
	.dropdown:before {
		font-size: 1.2rem;
		font-family: "Font Awesome 6 Free";
		font-weight: 900;
		color: var(--text);
		content: '\f0dd';
		position: relative;
		top: 1.8rem;
		right: 0;
		float: right;
    }
	.dropdown .dropdown:first-child:hover {
		border-top-right-radius: 0 !important;
	}
	.dropdown .dropdown:last-child:hover {
		border-bottom-right-radius: 0 !important;
	}
    .dropdown .dropdown:before {
		color: #0066cc;
		font-size: 1.2rem;
		font-family: "Font Awesome 6 Free";
		font-weight: 900;
		content: '\f0da';
		position: relative;
		top: 0.8rem;
		right: -0.5rem;
		float: right;
    }
    .dropdown .dropdown:hover:before {
		color: var(--white);
	}
    /* Haupt-Dropdown-Menü */
    .dropdown-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        list-style: none;
        width: 16.5rem;
        z-index: 3;
    }
    .dropdown-menu li {
        background: var(--white);
        color: var(--blau7);
        display: block;
        font-size: 1rem;
        position: relative;
        margin: 0;
   		/*box-shadow: var(--shadow);*/
    }
    .dropdown-menu li:last-child {
        border-bottom-left-radius: var(--radius);
        border-bottom-right-radius: var(--radius);        
    }
	.dropdown-menu li:hover {
        background: #3683e4;
		color: var(--white);
    }
    .dropdown-menu li:hover > a {
		color: var(--white);
    }
    .dropdown-menu a {
        color: var(--blau7);
        padding: 12px;
        display: block;
        font-size: 1rem;
        border-radius: none;
    }
    .dropdown-menu a:hover {
		color: var(--white);
    }

    /* 3. Untermenü: Rechts daneben anzeigen */
    .dropdown-menu .dropdown-menu {
        display: none;
        position: absolute;
        top: 0;
        left: 100%; /* Schiebt das Menü nach rechts */
    }
    .dropdown-menu .dropdown-menu li {
       /* box-shadow: var(--shadow);*/
        background-color: #3683e4;
        color: var(--white);
    }
    .dropdown-menu .dropdown-menu li:hover {
        background-color: var(--blau6);
    }
    .dropdown-menu .dropdown-menu li:first-child {
        border-top-right-radius: var(--radius);        
    }
    .dropdown-menu .dropdown-menu li:last-child {
        border-bottom-left-radius: var(--radius);
        border-bottom-right-radius: var(--radius);        
    }
	.dropdown-menu .dropdown-menu li:hover a {
		color: var(--white);
    }
    .dropdown-menu .dropdown-menu li a {
		color: var(--white);
    }

    .dropdown-menu li:hover > .dropdown-menu {
        display: block;
    }
	main.content {
		padding: 1rem;
	}
	div.content,
	div.content_cols {
		max-width: 88rem;
		display: grid;
		align-items: start;
		margin: 0 auto 1rem auto;
	}	
	div.content_cols {		
		grid-template-columns: 2fr 1fr; /* Linke Spalte doppelt so groß */
	}

	/* Boxen-Styling */
	.content_box {
		background: var(--white);
		border-bottom-left-radius: var(--radius);
		border-bottom-right-radius: var(--radius);
		box-shadow: var(--shadow);
	}
	marquee {
		background: var(--white);
		box-shadow: var(--shadow);		
	}
	
    .content h1 {
		border-top-left-radius: var(--radius);
		border-top-right-radius: var(--radius);
    }
	.content h1.scroll-to-fixed-fixed {
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
        border-bottom-left-radius: var(--radius);
        border-bottom-right-radius: var(--radius);
	}
	
	.content_right > h1 {
		margin-left: 1rem;
	}

	
	.content_left > .content_box,
	.content_right > .content_box,
	.content > .content_box {
		margin-bottom: 1rem !important;
		margin-bottom: 1rem !important;
	}	
	.content_left > .content_box:last-child,
	.content_right > .content_box:last-child,
	.content > .content_box:last-child {
		margin-bottom: 0 !important;
	}
	
	.content_right > .content_box {
		margin-left: 1rem;
	}
	
    .scroll-top {
        bottom: 2rem;
        right: 2rem;
    }
	#largeContainer {
		max-height: 90vh;
		max-width: 90vh;
		min-width: 60rem;
	}
	#largeContainer > form {
	}
}

/* ===================== */
/* Mobile Navigation */
/* ===================== */
@media screen and (max-width: 1299px) {
	.header {
		height: auto !important;          /* kein Fixmaß */
		padding-block: .5rem;             /* optional: etwas Luft */
	}

	.banner {
		width: min(88rem, 100%);
		height: auto;                     /* passt sich dem Bild an */
		grid-template-columns: 1fr;       /* nur noch die Mitte */
		gap: 0;
	}

	/* Wappen ausblenden */
	.banner img:first-child,
	.banner img:last-child {
		display: none !important;
	}

	/* Mittel-Banner: zentriert, dynamisch an die Viewport-Breite gekoppelt */
	.banner img:nth-child(2) {
		display: block;
		margin-inline: auto;
		width: auto;
		height: clamp(3rem, 14vw, 7.5rem); /* skaliert mit, aber bleibt kompakt */
		max-height: 100%;                  /* kein unnötiger Platz */
		max-width: 100%;
		object-fit: contain;
	}
	
    div.breadcrumb {
		background-color: var(--white);
        margin: none;
    }
	.admin_navi a {
		font-size: 0 !important;
		display: inline-block;
		width: 2.5rem;
		line-height: 1
	}
	.form-row#formButtons {		
   		grid-template-columns: repeat(auto-fit, minmax(4rem, 1fr)) !important;
	}
	#formButtons button {
		font-size: 0 !important;
		
	}
	.admin_navi a i,
	#formButtons button i {
		font-size: 1.2rem !important;
	}
    .banner-nav a {
        font-size: 0;
    }
    .banner-nav a i {
        font-size: 2rem;
		width: 2rem;
		text-align: center;
    }
    .banner-nav a span {
        font-size: 0.8rem !important;
    }
	.banner-nav .user-menu a {
        font-size: 1rem;
    }
	.banner-nav .user-menu a i {
        font-size: 1rem;
		width: 1.5rem;
    }
    .nav-search input[type="text"] {
        width: 100% !important;
    }
    .menu-toggle {
        display: block;
        float: left;
    }
    
    .navbar {
        left: 0;
        position: fixed;
        width: 20rem;
    	z-index: 10 !important;
    }
    
    .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        left: 0;
        background-color: transparent;
        padding: 0;
        max-height: 100vh;       /* nie größer als Höhe des Viewports */
        overflow-y: auto;        /* bei Ãœberlauf vertikal scrollbar */
        -webkit-overflow-scrolling: touch; /* flüssiges Scrollen auf iOS */
        box-sizing: border-box;   /* Padding in die Höhe einrechnen */
        width: 100%;
    }
    
    .nav-links.active {
        display: flex;
    }

    .nav-links > li {
        width: 100%;
        margin: 0;
        text-align: left;
		background-color: var(--blau7);
    }
	.nav-links > li:hover {
		background-color: var(--blau5);
	}
	.nav-links > li a {
		color: var(--white);
	}

    .nav-links a {
        padding: 1rem;
        font-size: 1.2rem;
        display: block;
        width: 100%;
    }

    .dropdown-menu {
        display: block;
        position: relative;
        width: 100%;
    }

    .dropdown-menu li {
		background-color: var(--blau3);
    }
	
    .dropdown-menu a {
        padding-left: 2rem;
    }
	
	.dropdown-menu li:hover {
		background-color: var(--blau4);
    }
	
	.dropdown {
		position: relative;
	}

    .dropdown:before {
	    font-size: 1.5rem;
		font-family: "Font Awesome 6 Free";
		font-weight: 900;
		content: "\f358"; /* Pfeil nach unten */
		position: absolute;
		top: 0.9rem;
		right: 0.9rem;
		transition: transform 300ms ease-in-out;
    }

    .dropdown.open > .dropdown-menu {
        display: block;
    }
	.dropdown.open::before {
		content: "\f358"; /* Das gleiche Symbol bleibt, nur die Rotation ändert sich */
		transform: rotate(180deg);
	}
	.dropdown-menu .dropdown-menu li a {
        background-color: #8EB7EB;
        color: var(--white);
        padding-left: 45px;
	}
	.dropdown-menu .dropdown-menu li a:hover {
        background-color: var(--blau6);
		
	}
    h1 {
        background-color: var(--white);        
    }
    div.content {
        margin: 0 auto;
    }
	.content_left {
	}
	.content_right {
	}
	.content_box {
		padding: 0.5rem;
		gap: 0.5rem;
	}
	marquee {
        padding: 0.2rem 0.5rem;
	}

    .scroll-top {
        bottom: 1rem;
        right: 0.5rem;
    }
	#largeContainer {
		/*
		max-height: 85vh;
		min-height: 85vh;
		max-width: 90vw;
		min-width: 90vw;
		*/
		width: calc(100vw - 2rem);
		max-height: calc(100vh - 6rem);
	}
	#largeContainer > form {
	}
}

/*Cookie Hinweis*/
#cookiePopup {
	justify-content: center;
	text-align: center;
}
#cookiePopup h3 {
	margin-bottom: 1rem;	
}