/* Schriften 1:1 aus dem Shop, lokal kopiert. Feste Dateinamen, weil die
   Vite-Namen im Shop einen Inhalts-Hash tragen und sich bei jedem Build
   aendern wuerden - das Forum haette sonst irgendwann 404 auf die Schrift. */
@font-face{font-family:"Inter";font-style:normal;font-display:swap;font-weight:400;src:url("../fonts/inter-latin-400.woff2") format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Inter";font-style:normal;font-display:swap;font-weight:400;src:url("../fonts/inter-latin-ext-400.woff2") format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Inter";font-style:normal;font-display:swap;font-weight:500;src:url("../fonts/inter-latin-500.woff2") format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Inter";font-style:normal;font-display:swap;font-weight:500;src:url("../fonts/inter-latin-ext-500.woff2") format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Inter";font-style:normal;font-display:swap;font-weight:600;src:url("../fonts/inter-latin-600.woff2") format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Inter";font-style:normal;font-display:swap;font-weight:600;src:url("../fonts/inter-latin-ext-600.woff2") format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Inter";font-style:normal;font-display:swap;font-weight:700;src:url("../fonts/inter-latin-700.woff2") format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Inter";font-style:normal;font-display:swap;font-weight:700;src:url("../fonts/inter-latin-ext-700.woff2") format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-display:swap;font-weight:400;src:url("../fonts/plus-jakarta-sans-latin-400.woff2") format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-display:swap;font-weight:400;src:url("../fonts/plus-jakarta-sans-latin-ext-400.woff2") format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-display:swap;font-weight:600;src:url("../fonts/plus-jakarta-sans-latin-600.woff2") format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-display:swap;font-weight:600;src:url("../fonts/plus-jakarta-sans-latin-ext-600.woff2") format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-display:swap;font-weight:700;src:url("../fonts/plus-jakarta-sans-latin-700.woff2") format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-display:swap;font-weight:700;src:url("../fonts/plus-jakarta-sans-latin-ext-700.woff2") format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-display:swap;font-weight:800;src:url("../fonts/plus-jakarta-sans-latin-800.woff2") format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-display:swap;font-weight:800;src:url("../fonts/plus-jakarta-sans-latin-ext-800.woff2") format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
/* ==========================================================================
   EyE Games - Forum-Design
   Uebernimmt die Marken-Werte 1:1 aus dem Shop-Theme
   (resources/themes/eyegames/css/theme.css). Aendert sich dort eine Farbe,
   gehoert sie hier ebenfalls angepasst - die Werte sind bewusst dupliziert,
   weil Forum und Shop getrennte Anwendungen mit eigenem Build sind.

   Liegt NACH custom.css der Vorlage, ueberschreibt also Fomantic-UI gezielt.
   ========================================================================== */

:root {
	--eye-primary: #00a8ff;
	--eye-base-100: #02060b;
	--eye-base-200: #06111a;
	--eye-base-300: #0b1d2b;
	--eye-content: #f6fbff;
	--eye-azure-bright: #3db5ff;
	--eye-ice: #9fd4fd;
	--eye-cyan: #0fcaf2;
	--eye-muted: #9db0be;

	--eye-line: rgba(159, 212, 253, 0.14);
	--eye-line-soft: rgba(159, 212, 253, 0.08);
	--eye-radius: 0.5rem;
	--eye-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   Grundflaeche: identischer Verlauf wie im Shop (.dark body::before/::after).
   background-attachment:fixed haelt den Schimmer beim Scrollen still, dadurch
   wirken die Abschnitte wie eine durchgehende Flaeche statt wie Kacheln.
   -------------------------------------------------------------------------- */
html,
body {
	background: var(--eye-base-100) !important;
	color: var(--eye-content);
	font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -2;
	pointer-events: none;
	background:
		radial-gradient(120% 82% at 50% -16%, rgba(41, 184, 255, 0.45) 0%, rgba(0, 150, 235, 0.26) 24%, rgba(0, 96, 172, 0.11) 46%, rgba(2, 10, 22, 0) 66%),
		radial-gradient(62% 46% at 86% 2%, rgba(15, 202, 242, 0.16), transparent 60%),
		linear-gradient(180deg, #05253c 0%, #04192e 30%, #031222 50%, #020c18 72%, #02070f 100%);
	background-attachment: fixed;
}

body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(140% 105% at 50% 4%, transparent 52%, rgba(1, 4, 9, 0.55) 100%);
}

/* Fomantic setzt auf .pusher und diversen Segmenten eigene Hintergruende.
   Die muessen weg, sonst deckt eine graue Flaeche den Verlauf ab. */
.pusher,
.pusher > .full.height,
.ui.page.dimmer,
#main,
.full.height {
	background: transparent !important;
}

/* -------------------------------------------------------------------------
   Typografie: Ueberschriften in Plus Jakarta Sans wie im Shop
   ------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.ui.header,
.ui.header .content,
.ui.card > .content > .header,
.ui.cards > .card > .content > .header {
	font-family: "Plus Jakarta Sans", "Inter", ui-sans-serif, system-ui, sans-serif !important;
	color: var(--eye-content) !important;
	letter-spacing: -0.015em;
}

.ui.header .sub.header,
.ui.card .meta,
.ui.cards > .card .meta,
.ui.card .description,
.ui.list .description,
.ui.statistic > .label,
.meta,
small {
	color: var(--eye-muted) !important;
}

a {
	color: var(--eye-azure-bright);
	transition: color 0.2s ease;
}

a:hover {
	color: var(--eye-ice);
}

/* -------------------------------------------------------------------------
   Kopfleiste: dunkel, leicht durchscheinend und verschwommen wie im Shop.
   Die Haarlinie unten ersetzt die harte Fomantic-Border.
   ------------------------------------------------------------------------- */
.ui.menu,
.ui.secondary.menu,
.ui.secondary.small.menu {
	background: rgba(6, 17, 26, 0.72) !important;
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	margin: 0 !important;
	position: relative;
}

.ui.menu::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(159, 212, 253, 0.18) 20%, rgba(0, 168, 255, 0.32) 50%, rgba(159, 212, 253, 0.18) 80%, transparent);
}

.ui.menu .item,
.ui.secondary.menu .item {
	color: rgba(246, 251, 255, 0.72) !important;
	font-weight: 500;
	border-radius: var(--eye-radius) !important;
	transition: color 0.2s ease, background 0.2s ease;
}

.ui.menu .item:hover,
.ui.secondary.menu .item:hover {
	color: var(--eye-content) !important;
	background: rgba(0, 168, 255, 0.1) !important;
}

/* Aktiver Punkt bekommt den Marken-Akzent statt Fomantics grauem Kasten */
.ui.menu .active.item,
.ui.secondary.menu .active.item {
	color: var(--eye-content) !important;
	background: rgba(0, 168, 255, 0.16) !important;
	box-shadow: inset 0 0 0 1px rgba(159, 212, 253, 0.16);
}

/* Ausklappmenues */
.ui.dropdown .menu,
.ui.menu .ui.dropdown .menu {
	background: rgba(11, 29, 43, 0.97) !important;
	backdrop-filter: blur(14px);
	border: 1px solid var(--eye-line) !important;
	border-radius: var(--eye-radius) !important;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55) !important;
}

.ui.dropdown .menu > .item {
	color: rgba(246, 251, 255, 0.82) !important;
	border-radius: 0.375rem;
}

.ui.dropdown .menu > .item:hover {
	background: rgba(0, 168, 255, 0.14) !important;
	color: var(--eye-content) !important;
}

/* -------------------------------------------------------------------------
   Kopfbereich der Startseite
   ------------------------------------------------------------------------- */
.ui.masthead,
.ui.masthead.segment {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding-top: 3.5rem;
	padding-bottom: 2.5rem;
}

.ui.masthead h1,
.ui.masthead .ui.header {
	font-size: clamp(2rem, 4.5vw, 3.25rem);
	line-height: 1.05;
	font-weight: 800;
}

/* -------------------------------------------------------------------------
   Karten & Flaechen: base-200 mit feiner Kante, Hover wie .lifted im Shop
   ------------------------------------------------------------------------- */
.ui.card,
.ui.cards > .card,
.ui.segment,
.ui.segments,
.ui.attached.segment,
.ui.comments .comment .content,
.ui.table {
	background: rgba(6, 17, 26, 0.82) !important;
	border: 1px solid var(--eye-line-soft) !important;
	border-radius: var(--eye-radius) !important;
	box-shadow: none !important;
	color: var(--eye-content) !important;
}

.ui.card,
.ui.cards > .card {
	transition:
		transform 0.35s var(--eye-ease),
		border-color 0.35s ease,
		box-shadow 0.35s ease;
}

.ui.card:hover,
.ui.cards > .card:hover {
	transform: translateY(-3px);
	border-color: rgba(159, 212, 253, 0.2) !important;
	box-shadow:
		0 24px 80px rgba(0, 0, 0, 0.4),
		0 0 0 1px rgba(159, 212, 253, 0.2),
		0 8px 40px -12px rgba(0, 168, 255, 0.25) !important;
}

.ui.card > .content,
.ui.cards > .card > .content {
	border-top: 1px solid var(--eye-line-soft) !important;
	color: var(--eye-content);
}

.ui.card > .content:first-child,
.ui.cards > .card > .content:first-child {
	border-top: 0 !important;
}

.ui.card > .extra.content,
.ui.cards > .card > .extra.content {
	background: rgba(2, 6, 11, 0.45) !important;
}

/* -------------------------------------------------------------------------
   Forenlisten & Tabellen
   ------------------------------------------------------------------------- */
.ui.table thead th {
	background: rgba(11, 29, 43, 0.85) !important;
	color: var(--eye-content) !important;
	border-bottom: 1px solid var(--eye-line) !important;
	font-family: "Plus Jakarta Sans", sans-serif;
}

.ui.table tbody tr td {
	border-top: 1px solid var(--eye-line-soft) !important;
	color: rgba(246, 251, 255, 0.88) !important;
}

.ui.table tbody tr:hover td {
	background: rgba(0, 168, 255, 0.06) !important;
}

.ui.divider {
	border-top-color: var(--eye-line-soft) !important;
	border-bottom-color: transparent !important;
}

.ui.list > .item,
.ui.divided.list > .item {
	border-color: var(--eye-line-soft) !important;
	color: rgba(246, 251, 255, 0.88);
}

/* -------------------------------------------------------------------------
   Schaltflaechen: Primaerfarbe + Glow wie die Shop-CTA
   ------------------------------------------------------------------------- */
.ui.button {
	font-family: "Inter", sans-serif;
	font-weight: 600;
	border-radius: var(--eye-radius) !important;
	transition:
		transform 0.3s var(--eye-ease),
		box-shadow 0.3s ease,
		background 0.2s ease;
}

.ui.primary.button,
.ui.primary.buttons .button {
	background: var(--eye-primary) !important;
	color: #02060b !important;
	box-shadow: 0 8px 30px -10px rgba(0, 168, 255, 0.5) !important;
}

.ui.primary.button:hover {
	background: var(--eye-azure-bright) !important;
	transform: translateY(-1px);
	box-shadow: 0 12px 38px -10px rgba(0, 168, 255, 0.7) !important;
}

.ui.button:not(.primary):not(.negative):not(.positive) {
	background: rgba(11, 29, 43, 0.9) !important;
	color: var(--eye-content) !important;
	box-shadow: inset 0 0 0 1px var(--eye-line) !important;
}

.ui.button:not(.primary):not(.negative):not(.positive):hover {
	background: rgba(0, 168, 255, 0.14) !important;
}

/* Rueckmeldung beim Druecken - fuehlt sich wie ein echter Knopf an */
.ui.button:active {
	transform: translateY(1px) scale(0.99);
}

/* -------------------------------------------------------------------------
   Formulare
   ------------------------------------------------------------------------- */
.ui.form input[type="text"],
.ui.form input[type="email"],
.ui.form input[type="password"],
.ui.form input[type="number"],
.ui.form input[type="search"],
.ui.form textarea,
.ui.input > input,
.ui.selection.dropdown {
	background: rgba(2, 6, 11, 0.7) !important;
	border: 1px solid var(--eye-line) !important;
	border-radius: var(--eye-radius) !important;
	color: var(--eye-content) !important;
}

.ui.form input:focus,
.ui.input > input:focus,
.ui.form textarea:focus,
.ui.selection.dropdown:focus {
	border-color: var(--eye-primary) !important;
	box-shadow: 0 0 0 3px rgba(0, 168, 255, 0.16) !important;
}

.ui.form input::placeholder,
.ui.form textarea::placeholder {
	color: rgba(157, 176, 190, 0.7);
}

.ui.form label,
.ui.form .field > label {
	color: var(--eye-content) !important;
	font-weight: 600;
}

/* -------------------------------------------------------------------------
   Meldungen
   ------------------------------------------------------------------------- */
.ui.message {
	background: rgba(11, 29, 43, 0.85) !important;
	color: var(--eye-content) !important;
	border-radius: var(--eye-radius) !important;
	box-shadow: inset 0 0 0 1px var(--eye-line) !important;
}

.ui.negative.message {
	box-shadow: inset 0 0 0 1px rgba(255, 99, 99, 0.35) !important;
}

.ui.positive.message,
.ui.success.message {
	box-shadow: inset 0 0 0 1px rgba(56, 214, 160, 0.35) !important;
}

/* -------------------------------------------------------------------------
   Fusszeile: weicher Uebergang statt harter Kante - exakt die Logik von
   .site-footer im Shop (Verlauf ueber die ersten 140px + Lichtsaum).
   ------------------------------------------------------------------------- */
.ui.inverted.vertical.footer.segment,
.ui.vertical.footer.segment {
	position: relative;
	background: transparent !important;
	background-image: linear-gradient(180deg, transparent 0, var(--eye-base-200) 140px) !important;
	border: 0 !important;
	margin-top: 4rem !important;
	padding-top: 4rem !important;
}

.ui.inverted.vertical.footer.segment::before,
.ui.vertical.footer.segment::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: min(92%, 80rem);
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(159, 212, 253, 0.12) 20%, rgba(0, 168, 255, 0.2) 50%, rgba(159, 212, 253, 0.12) 80%, transparent);
}

.ui.inverted.link.list .item,
.ui.inverted.list .item,
.ui.inverted.header {
	color: rgba(246, 251, 255, 0.72) !important;
}

.ui.inverted.link.list a.item:hover {
	color: var(--eye-azure-bright) !important;
}

/* -------------------------------------------------------------------------
   Kleinkram
   ------------------------------------------------------------------------- */
.ui.label {
	background: rgba(0, 168, 255, 0.14) !important;
	color: var(--eye-ice) !important;
	border-radius: 0.375rem !important;
}

.ui.pagination.menu .item {
	color: rgba(246, 251, 255, 0.75) !important;
}

.ui.pagination.menu .active.item {
	background: rgba(0, 168, 255, 0.18) !important;
	color: var(--eye-content) !important;
}

.ui.modal,
.ui.modal > .content,
.ui.modal > .header,
.ui.modal > .actions {
	background: rgba(6, 17, 26, 0.98) !important;
	color: var(--eye-content) !important;
	border-color: var(--eye-line) !important;
}

.ui.modal {
	border-radius: var(--eye-radius) !important;
	box-shadow: 0 40px 120px rgba(0, 0, 0, 0.7) !important;
}

/* Fomantic zeichnet Avatare quadratisch; der Shop nutzt runde Ecken */
.ui.avatar.image,
.ui.avatar.image img {
	border-radius: 0.375rem !important;
}

/* Scrollbalken passend zur Marke */
* {
	scrollbar-color: rgba(0, 168, 255, 0.35) transparent;
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: rgba(0, 168, 255, 0.3);
	border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
	background: rgba(0, 168, 255, 0.5);
}

/* Wer Bewegung reduziert haben will, bekommt keine Hover-Spruenge */
@media (prefers-reduced-motion: reduce) {
	.ui.card,
	.ui.cards > .card,
	.ui.button {
		transition: none !important;
	}

	.ui.card:hover,
	.ui.cards > .card:hover,
	.ui.primary.button:hover {
		transform: none !important;
	}
}

/* ==========================================================================
   Nachtrag: Stellen, an denen Fomantic seine Standardfarbe rgba(0,0,0,.87)
   durchdrueckt. Auf dunklem Grund ist das praktisch unlesbar (Kontrast 1,1).
   Aufgefallen im Widget "Neueste Beitraege".
   ========================================================================== */

.ui.list .item .content,
.ui.list .item .content span,
.ui.list .item .header,
.ui.list .item a:not(.ui.button),
.ui.relaxed.list .item .content,
.ui.relaxed.list .item .content span,
.ui.card .description .ui.list .item,
.ui.card .description .ui.list .item span,
.ui.feed .event .content,
.ui.feed .event .content .summary,
.ui.feed .event .content .date,
.ui.comments .comment .text,
.ui.comments .comment .author,
.ui.statistic > .value,
.ui.statistics .statistic > .value {
	color: var(--eye-content) !important;
}

/* Zeitangaben und sonstige Nebeninfos bewusst gedaempft, aber lesbar */
.ui.list .item .content .date,
.ui.list .item .description,
.ui.feed .event .meta,
.ui.statistic > .label,
.ui.statistics .statistic > .label,
time,
.timeago {
	color: var(--eye-muted) !important;
}

/* Letzte Absicherung: wer im dunklen Bereich schwarz erbt, bekommt Hellgrau.
   Bewusst eng gehalten, damit Schaltflaechen mit dunkler Schrift auf Azur
   (die gewollt sind) nicht mitgefangen werden. */
.ui.card :not(.button):not(.label),
.ui.segment :not(.button):not(.label) {
	color: inherit;
}

/* --------------------------------------------------------------------------
   Cookie-Hinweis an die Marke angleichen - kam vorher als helles Fremdelement
   -------------------------------------------------------------------------- */
.cc-window {
	background: rgba(6, 17, 26, 0.97) !important;
	color: var(--eye-content) !important;
	border: 1px solid var(--eye-line) !important;
	border-radius: var(--eye-radius) !important;
	backdrop-filter: blur(14px);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5) !important;
	font-family: "Inter", sans-serif !important;
}

.cc-message {
	color: rgba(246, 251, 255, 0.86) !important;
}

.cc-link {
	color: var(--eye-azure-bright) !important;
	opacity: 1 !important;
}

.cc-btn.cc-allow,
.cc-btn.cc-dismiss {
	background: var(--eye-primary) !important;
	color: #02060b !important;
	border: 0 !important;
	border-radius: var(--eye-radius) !important;
	font-weight: 600 !important;
}

.cc-btn.cc-allow:hover {
	background: var(--eye-azure-bright) !important;
}

.cc-btn.cc-deny {
	background: transparent !important;
	color: rgba(246, 251, 255, 0.8) !important;
	border: 1px solid var(--eye-line) !important;
	border-radius: var(--eye-radius) !important;
}

.cc-btn.cc-deny:hover {
	background: rgba(255, 255, 255, 0.06) !important;
	color: var(--eye-content) !important;
}

/* --------------------------------------------------------------------------
   Fomantic laedt Lato mit; die Marke nutzt Inter. Ohne das hier erben einzelne
   Bausteine (Tabellen, Menues, Formulare) weiter die Fremdschrift.
   -------------------------------------------------------------------------- */
.ui.menu,
.ui.card,
.ui.segment,
.ui.table,
.ui.form,
.ui.list,
.ui.message,
.ui.modal,
.ui.label,
.ui.input > input,
body {
	font-family: "Inter", ui-sans-serif, system-ui, sans-serif !important;
}

/* ==========================================================================
   KORREKTUR: Fomantics Off-Canvas-Menue ist ebenfalls ein .ui.menu
   ("ui vertical inverted sidebar menu left"). Meine Kopfleisten-Regeln oben
   haben ihm damit position:relative gegeben - dadurch rutschte es aus seiner
   festen Position in den normalen Fluss und schob auf JEDER Seite den
   gesamten Inhalt um 720px nach unten.
   Die Sidebar bekommt ihre feste Positionierung zurueck.
   ========================================================================== */

.ui.sidebar,
.ui.sidebar.menu,
.ui.vertical.sidebar.menu {
	position: fixed !important;
	margin: 0 !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	background: rgba(6, 17, 26, 0.98) !important;
}

/* Die Leucht-Haarlinie gehoert nur unter die Kopfleiste, nicht an die Sidebar */
.ui.sidebar::after,
.ui.sidebar.menu::after {
	content: none !important;
}

/* Solange sie geschlossen ist, darf sie keine Klicks abfangen. Fomantic
   blendet sie per visibility aus; pointer-events macht es unmissverstaendlich. */
.ui.sidebar:not(.visible) {
	pointer-events: none !important;
}

.ui.sidebar.visible {
	pointer-events: auto !important;
}

.ui.sidebar .item {
	border-radius: 0 !important;
}

/* ==========================================================================
   KORREKTUR 2
   1) Footer-Kante: Der Verlauf lag auf body::before mit z-index:-2 und wurde
      damit vom eigenen (undurchsichtigen) Hintergrund des body verdeckt. Ueber
      dem Footer blieb flaches Schwarz stehen, sein Navy setzte hart ab.
      Der Verlauf gehoert direkt auf html - dann liegt er garantiert hinter
      allem und der Footer waechst nahtlos heraus.
   2) Dauerhafter Dunkelmodus, kein Hell-Umschalter mehr.
   3) Fomantic-Popups waren noch weiss auf weiss.
   ========================================================================== */

html {
	background:
		radial-gradient(120% 82% at 50% -16%, rgba(41, 184, 255, 0.45) 0%, rgba(0, 150, 235, 0.26) 24%, rgba(0, 96, 172, 0.11) 46%, rgba(2, 10, 22, 0) 66%),
		radial-gradient(62% 46% at 86% 2%, rgba(15, 202, 242, 0.16), transparent 60%),
		linear-gradient(180deg, #05253c 0%, #04192e 30%, #031222 50%, #020c18 72%, #02070f 100%) !important;
	background-attachment: fixed !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;
}

body {
	background: transparent !important;
}

/* Die alten Pseudo-Ebenen werden nicht mehr gebraucht - die Vignette bleibt,
   der Verlauf wandert nach html. */
body::before {
	background: none !important;
}

/* --------------------------------------------------------------------------
   Nur Dunkelmodus. Der Umschalter in der Fusszeile ist raus (footer.tpl);
   hier wird zusaetzlich alles abgeraeumt, was Fomantic hell einfaerbt.
   -------------------------------------------------------------------------- */
#darkmode,
.darkmode-toggle,
.darkmode-toggle-label,
.darkmode-ball {
	display: none !important;
}

/* --------------------------------------------------------------------------
   Popups / Tooltips - waren weiss mit weisser Schrift und damit unlesbar
   -------------------------------------------------------------------------- */
.ui.popup,
.ui.popup > .header,
.ui.popup > .content,
.ui.inverted.popup {
	background: rgba(11, 29, 43, 0.98) !important;
	color: var(--eye-content) !important;
	border: 1px solid var(--eye-line) !important;
	border-radius: var(--eye-radius) !important;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55) !important;
}

.ui.popup .header {
	font-family: "Plus Jakarta Sans", sans-serif !important;
	color: var(--eye-content) !important;
}

.ui.popup .description,
.ui.popup .meta {
	color: var(--eye-muted) !important;
}

/* Das kleine Dreieck des Popups traegt die Hintergrundfarbe separat */
.ui.popup::before,
.ui.bottom.popup::before,
.ui.top.popup::before,
.ui.left.popup::before,
.ui.right.popup::before {
	background: rgba(11, 29, 43, 0.98) !important;
	box-shadow: -1px -1px 0 0 var(--eye-line) !important;
}

/* --------------------------------------------------------------------------
   Restliche helle Fomantic-Flaechen einfangen
   -------------------------------------------------------------------------- */
.ui.inverted.segment,
.ui.basic.segment,
.ui.attached.header,
.ui.accordion,
.ui.accordion .title,
.ui.accordion .content,
.ui.tab,
.ui.search > .results,
.ui.search > .results .result,
.ui.search > .results .message {
	background: rgba(6, 17, 26, 0.92) !important;
	color: var(--eye-content) !important;
	border-color: var(--eye-line-soft) !important;
}

.ui.search > .results .result:hover {
	background: rgba(0, 168, 255, 0.12) !important;
}

/* Fomantics Lade-/Dimmer-Schleier hell -> dunkel */
.ui.dimmer {
	background: rgba(2, 6, 11, 0.75) !important;
}

.ui.inverted.dimmer {
	background: rgba(2, 6, 11, 0.85) !important;
}

/* ==========================================================================
   KORREKTUR 3: Das Benutzer-Ausklappmenue kam noch hell heraus. Fomantic
   setzt die Farben teils auf .menu.transition, was meine erste Regel nicht
   traf. Dazu das Suchfeld darin.
   ========================================================================== */
.ui.dropdown .menu,
.ui.dropdown .menu.transition,
.ui.menu .ui.dropdown .menu,
.ui.dropdown .menu .menu {
	background: rgba(11, 29, 43, 0.98) !important;
	border: 1px solid var(--eye-line) !important;
	border-radius: var(--eye-radius) !important;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6) !important;
}

.ui.dropdown .menu > .item,
.ui.dropdown .menu > .item .text,
.ui.dropdown .menu .header {
	color: rgba(246, 251, 255, 0.88) !important;
}

.ui.dropdown .menu > .item:hover,
.ui.dropdown .menu > .item.selected,
.ui.dropdown .menu > .item.active {
	background: rgba(0, 168, 255, 0.16) !important;
	color: var(--eye-content) !important;
}

.ui.dropdown .menu > .divider,
.ui.dropdown .menu > .ui.divider {
	border-top-color: var(--eye-line-soft) !important;
}

/* Suchfeld im Ausklappmenue */
.ui.dropdown > .search,
.ui.dropdown input.search,
.ui.dropdown .menu > .input input,
.ui.dropdown > input.search {
	background: rgba(2, 6, 11, 0.8) !important;
	color: var(--eye-content) !important;
	border: 1px solid var(--eye-line) !important;
	border-radius: 0.375rem !important;
}

/* Fomantic faerbt den aktiven Ausklapp-Knopf hell ein */
.ui.dropdown.active,
.ui.dropdown.visible,
.ui.menu .ui.dropdown.active,
.ui.menu .ui.dropdown.visible {
	background: rgba(0, 168, 255, 0.16) !important;
	color: var(--eye-content) !important;
}

/* ==========================================================================
   KORREKTUR 4: Die Kopfleiste bekommt einen eigenen z-index.
   Ohne ihn versinkt der komplette Stacking-Context der Leiste - samt der
   Popups darin - unter dem Kopfbereich, und die Eintraege im Benutzermenue
   liessen sich nicht anklicken. Ursache war das backdrop-filter weiter oben:
   es erzeugt einen Stacking-Context, wodurch das z-index:99999 des Popups
   nur noch innerhalb der Leiste zaehlt.
   ========================================================================== */
.ui.menu:not(.sidebar),
.ui.secondary.menu:not(.sidebar),
#navbar {
	position: relative;
	z-index: 1000;
}

/* Der Kopfbereich darf sich nicht ueber die Leiste schieben */
.ui.masthead {
	position: relative;
	z-index: 1;
}

/* Popups selbst sicherheitshalber ueber allem anderen */
.ui.popup {
	z-index: 1100 !important;
}