/* GLX-Cookie-Check - Einwilligungsbanner
   Gestaltung wie GLX-FTP-Seite: System-Schriften, 15 px Grundgroesse,
   neutrale Rahmen in rgba(127,127,127,.45), Ecken 6-10 px. */

.glxcc {
	position: fixed;
	inset: 0;
	z-index: 999990;
	display: none;
	font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.5;
}
.glxcc.glxcc-an { display: block; }

.glxcc-schleier {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .6);
}
/* Am unteren Rand bleibt die Seite bedienbar - dort waere ein Schleier
   uebergriffig. Nur in der Mitte wird der Dialog wirklich blockierend. */
.glxcc-pos-unten .glxcc-schleier,
.glxcc-pos-unten-links .glxcc-schleier,
.glxcc-pos-unten-rechts .glxcc-schleier { display: none; }

.glxcc-box {
	position: absolute;
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: calc(100% - 32px);
	max-width: 640px;
	max-height: calc(100vh - 32px);
	overflow: auto;
	padding: 22px 24px;
	border-radius: 10px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}

/* --- Lage ------------------------------------------------------------- */
.glxcc-pos-mitte .glxcc-box        { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.glxcc-pos-unten .glxcc-box        { bottom: 16px; left: 50%; transform: translateX(-50%); }
.glxcc-pos-unten-links .glxcc-box  { bottom: 16px; left: 16px; }
.glxcc-pos-unten-rechts .glxcc-box { bottom: 16px; right: 16px; }

/* --- Farben ------------------------------------------------------------ */
.glxcc-theme-light .glxcc-box { background: #ffffff; color: #1d2327; border: 1px solid rgba(127,127,127,.35); }
.glxcc-theme-dark  .glxcc-box { background: #16191d; color: #d7dde3; border: 1px solid rgba(127,127,127,.28); }

/* Eigene Farben schlagen das Thema. Sie werden nur gesetzt, wenn der Betreiber
   sie in den Einstellungen wirklich vergeben hat - sonst bleiben die Variablen
   leer und die Regeln oben gelten weiter. */
.glxcc[style*="--glxcc-bg"] .glxcc-box { background: var(--glxcc-bg); }
.glxcc[style*="--glxcc-fg"] .glxcc-box { color: var(--glxcc-fg); }
.glxcc-ecke[style*="--glxcc-bg"] { background: var(--glxcc-bg); color: var(--glxcc-fg, currentColor); }

/* Eigene Breite. 'width' bleibt bei 100% minus Rand, damit das Fenster auf
   schmalen Handys nicht ueber den Bildschirm hinauslaeuft - die eigene Angabe
   wirkt als Obergrenze, genau wie der Standardwert von 640px. */
.glxcc[style*="--glxcc-breite"] .glxcc-box { max-width: var(--glxcc-breite); }

/* Eigener Rahmen - schlaegt die Rahmen der Themen weiter unten, deshalb muss
   diese Regel spezifischer sein als '.glxcc-theme-dark .glxcc-box'. */
.glxcc[style*="--glxcc-rand"] .glxcc-box {
	border: var(--glxcc-rand-dicke, 1px) solid var(--glxcc-rand, rgba(127,127,127,.3));
}

/* Hoechsthoehe des Textblocks. Laengere Texte bekommen einen eigenen kleinen
   Scrollbereich, statt das ganze Fenster in die Hoehe zu treiben. */
.glxcc[style*="--glxcc-texthoehe"] .glxcc-text {
	max-height: var(--glxcc-texthoehe);
	overflow-y: auto;
}

/* Kompakte Bauweise: weniger Luft, kleinere Schrift. Fuer alle, denen das
   Fenster schlicht zu hoch ist. */
.glxcc-kompakt .glxcc-box    { padding: 12px 16px; gap: 6px; }
.glxcc-kompakt .glxcc-titel  { font-size: 14px; }
.glxcc-kompakt .glxcc-text   { font-size: 12.5px; line-height: 1.45; }
.glxcc-kompakt .glxcc-text p { margin: 0 0 4px; }
.glxcc-kompakt .glxcc-text p:last-child { margin-bottom: 0; }
.glxcc-kompakt .glxcc-btn    { padding: 7px 14px; font-size: 12.5px; }
.glxcc-kompakt .glxcc-knoepfe{ gap: 6px; }
.glxcc-kompakt .glxcc-links  { font-size: 11.5px; }
.glxcc-kompakt .glxcc-kat    { padding: 6px 0; }

/* Streifen-Anordnung: ab einer grossen Breite stehen Text und Knoepfe
   NEBENeinander. Sonst waere das Fenster nur breiter, aber genauso hoch -
   und wirkt dann erst recht gestaucht. Ab 760px Bildschirmbreite, damit auf
   dem Handy weiter alles untereinander bleibt. */
@media (min-width: 760px) {
	.glxcc-streifen .glxcc-box {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-areas: "kopf knoepfe" "text knoepfe" "links knoepfe";
		align-items: center;
		column-gap: 24px;
		row-gap: 4px;
		padding: 14px 20px;
	}
	.glxcc-streifen .glxcc-kopf    { grid-area: kopf; }
	.glxcc-streifen .glxcc-text    { grid-area: text; }
	.glxcc-streifen .glxcc-links   { grid-area: links; margin: 0; }
	.glxcc-streifen .glxcc-knoepfe { grid-area: knoepfe; flex-wrap: nowrap; }
	/* Aufgeklappte Kategorien sprengen den Streifen - dann wieder normal. */
	.glxcc-streifen .glxcc-details:not([hidden]) { grid-column: 1 / -1; }
	.glxcc-streifen:has(.glxcc-details:not([hidden])) .glxcc-box {
		grid-template-columns: 1fr;
		grid-template-areas: "kopf" "text" "details" "links" "knoepfe";
	}
	.glxcc-streifen .glxcc-titel { font-size: 15px; }
	.glxcc-streifen .glxcc-text p:last-child { margin-bottom: 0; }
}

@media (prefers-color-scheme: dark) {
	.glxcc-theme-auto .glxcc-box { background: #16191d; color: #d7dde3; border: 1px solid rgba(127,127,127,.28); }
}
@media (prefers-color-scheme: light) {
	.glxcc-theme-auto .glxcc-box { background: #ffffff; color: #1d2327; border: 1px solid rgba(127,127,127,.35); }
}

.glxcc-titel { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.3; }

/* Gegen das Theme der Seite behaupten.
   Der Titel ist ein <h2>, und fast jedes Theme faerbt seine Ueberschriften -
   mit einer Regel wie '.entry-content h2', die spezifischer ist als
   '.glxcc-titel'. Dann stand hier dunkler Text auf dunklem Grund. Dasselbe
   droht bei Absaetzen und Fettungen. Diese Regeln holen die Farbe der Box
   zurueck; ihre Spezifitaet liegt bewusst hoeher als bei Theme-Regeln. */
.glxcc .glxcc-box .glxcc-titel,
.glxcc .glxcc-box .glxcc-text,
.glxcc .glxcc-box .glxcc-text p,
.glxcc .glxcc-box .glxcc-kat-text,
.glxcc .glxcc-box .glxcc-kat-text b,
.glxcc .glxcc-box .glxcc-kat-text span { color: inherit; }
.glxcc-text  { font-size: 14px; }
.glxcc-text p { margin: 0 0 8px; }
.glxcc-text p:last-child { margin-bottom: 0; }

.glxcc-links { margin: 0; font-size: 13px; opacity: .85; }
.glxcc-links a { color: #1c65b8; text-decoration: none; }
.glxcc-links a:hover { text-decoration: underline; }
.glxcc-theme-dark .glxcc-links a { color: #6cb6ff; }
@media (prefers-color-scheme: dark) { .glxcc-theme-auto .glxcc-links a { color: #6cb6ff; } }
.glxcc-trenn { margin: 0 7px; opacity: .5; }

/* --- Kategorien --------------------------------------------------------- */
/* [hidden] muss gewinnen. Mehrere Bausteine hier setzen display ueber eine
   Klasse, und eine Klassenregel schlaegt das hidden-Attribut des Browsers -
   dadurch liessen sich die Kategorien nicht mehr zuklappen. */
.glxcc[hidden],
.glxcc [hidden],
.glxcc-ecke[hidden] { display: none !important; }

.glxcc-details {
	display: flex;
	flex-direction: column;
	gap: 2px;
	border-top: 1px solid rgba(127,127,127,.3);
	border-bottom: 1px solid rgba(127,127,127,.3);
	padding: 8px 0;
	max-height: 42vh;
	overflow: auto;
}
.glxcc-kat {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	padding: 9px 8px;
	border-radius: 6px;
	cursor: pointer;
}
.glxcc-kat:hover { background: rgba(127,127,127,.1); }
.glxcc-kat.glxcc-fest { cursor: default; opacity: .8; }
.glxcc-kat.glxcc-fest:hover { background: transparent; }
.glxcc-kat input { margin-top: 3px; width: 16px; height: 16px; flex: 0 0 auto; accent-color: var(--glxcc-akzent, #1c65b8); }
.glxcc-kat-text { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.glxcc-kat-text b { font-size: 14px; }
.glxcc-kat-text span { opacity: .8; }
.glxcc-immer { font-size: 12px; font-style: normal; opacity: .65; }

/* --- Knoepfe ------------------------------------------------------------
   Alle gleich gross und gleich auffaellig: Ablehnen darf nicht schwerer zu
   treffen sein als Zustimmen. */
.glxcc-knoepfe {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: flex-end;
}
.glxcc-btn {
	/* Frueher stand hier 'flex: 1 1 auto' - damit zogen sich die Knoepfe ueber
	   die ganze Fensterbreite auseinander. Jetzt behalten sie ihre Breite und
	   stehen rechts zusammen. Die Mindestbreite gilt fuer alle gleich, damit
	   Ablehnen nicht kleiner wirkt als Zustimmen. */
	flex: 0 0 auto;
	min-width: var(--glxcc-btn-breite, 170px);
	padding: 10px 20px;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	border-radius: 8px;
	border: 1px solid rgba(127,127,127,.45);
	background: transparent;
	color: inherit;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}
.glxcc-btn:hover,
.glxcc-btn:focus-visible { background: rgba(127,127,127,.14); }
.glxcc-btn-prim {
	background: var(--glxcc-akzent, #1c65b8);
	border-color: var(--glxcc-akzent, #1c65b8);
	color: #fff;
}
.glxcc-btn-prim:hover,
.glxcc-btn-prim:focus-visible { filter: brightness(1.12); background: var(--glxcc-akzent, #1c65b8); }

/* --- Dauerhafter Widerrufs-Knopf --------------------------------------- */
.glxcc-ecke {
	position: fixed;
	left: 16px;
	bottom: 16px;
	z-index: 999980;
	width: 42px;
	height: 42px;
	padding: 9px;
	border-radius: 50%;
	border: 1px solid rgba(127,127,127,.45);
	cursor: pointer;
	display: none;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.glxcc-ecke.glxcc-an { display: flex; }
.glxcc-ecke svg { width: 100%; height: 100%; display: block; }
.glxcc-ecke.glxcc-theme-light { background: #ffffff; color: #1d2327; }
.glxcc-ecke.glxcc-theme-dark  { background: #16191d; color: #d7dde3; }
@media (prefers-color-scheme: dark)  { .glxcc-ecke.glxcc-theme-auto { background: #16191d; color: #d7dde3; } }
@media (prefers-color-scheme: light) { .glxcc-ecke.glxcc-theme-auto { background: #ffffff; color: #1d2327; } }
.glxcc-ecke:hover { border-color: var(--glxcc-akzent, #1c65b8); }

/* Link-Knopf fuer den Kurzbefehl - sieht aus wie ein Textlink */
.glxcc-link {
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	color: #1c65b8;
	cursor: pointer;
	text-decoration: none;
}
.glxcc-link:hover { text-decoration: underline; }

.glxcc-status { font-size: 14px; }

@media (max-width: 560px) {
	.glxcc-box { padding: 18px 16px; gap: 10px; }
	.glxcc-titel { font-size: 17px; }
	.glxcc-btn { min-width: 0; flex: 1 1 100%; }
}

/* Wer Bewegung reduziert haben will, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
	.glxcc-btn { transition: none; }
}