/* GLX Aufklapp-Box – gemeinsames Design für Frontend UND Block-Editor */

.glx-desc { margin: 18px 0; }

.glx-desc summary,
.glx-desc .glx-summary-preview {
	cursor: pointer;
	display: inline-block;
	list-style: none;
	font-weight: 700;
	padding: 9px 18px;
	border-radius: 8px;
	color: #fff;
	background-size: 200% auto;
	box-shadow: 0 2px 10px rgba(0,0,0,.35);
	user-select: none;
}
.glx-desc summary::-webkit-details-marker { display: none; }
.glx-desc summary::marker { content: ""; }

/* ===== Button-Effekte (auch für Download-/Link-Buttons .glx-dlbtn) ===== */
@keyframes glx-shimmer { to { background-position: 200% center; } }
@keyframes glx-bounce  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes glx-pulse   { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes glx-glow    { 0%,100% { box-shadow: 0 2px 10px rgba(0,0,0,.35); } 50% { box-shadow: 0 0 20px 4px var(--glx-glow, #9fe4f6); } }
@keyframes glx-float   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes glx-shake   { 0%,92%,100% { transform: translateX(0); } 94% { transform: translateX(-3px); } 96% { transform: translateX(3px); } 98% { transform: translateX(-2px); } }

.glx-fx-shimmer { animation: glx-shimmer 3s linear infinite; }
.glx-fx-bounce  { animation: glx-bounce 2s ease-in-out infinite; }
.glx-fx-pulse   { animation: glx-pulse 2s ease-in-out infinite; }
.glx-fx-glow    { animation: glx-glow 2s ease-in-out infinite; }
.glx-fx-float   { animation: glx-float 3s ease-in-out infinite; }
.glx-fx-shake   { animation: glx-shake 2.5s ease-in-out infinite; }

/* ===== BUTTON-Hover-Effekte (beim Drüberfahren mit der Maus) ===== */
.glx-desc summary, .glx-desc .glx-summary-preview, .glx-dlbtn {
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
/* Laufende Dauer-Animation beim Hover pausieren, damit der Hover-Effekt sichtbar wird */
.glx-fx-shimmer:hover, .glx-fx-bounce:hover, .glx-fx-pulse:hover,
.glx-fx-glow:hover, .glx-fx-float:hover, .glx-fx-shake:hover { animation-play-state: paused; }

.glx-hx-grow:hover   { transform: scale(1.06); }
.glx-hx-lift:hover    { transform: translateY(-3px); box-shadow: 0 9px 22px rgba(0,0,0,.45); }
.glx-hx-bright:hover  { filter: brightness(1.15); }
.glx-hx-glow:hover    { box-shadow: 0 0 22px 5px var(--glx-glow, #9fe4f6); }

@keyframes glx-shimmer { to { background-position: 200% center; } }

.glx-desc .glx-close { display: none; }
.glx-desc[open] .glx-read { display: none; }
.glx-desc[open] .glx-close { display: inline; }

.glx-desc-body {
	margin-top: 12px;
	padding: 18px 22px;
	border-left: 4px solid #38b6dd;
	border-radius: 8px;
	background: #1c1f24;
	color: #d7dde3;
	line-height: 1.65;
}
.glx-desc-body p { margin: 10px 0; }
.glx-desc-body h3 {
	margin: 20px 0 6px;
	font-size: 1.05em;
	color: #38b6dd;
	border-bottom: 1px solid rgba(56,182,221,.25);
	padding-bottom: 4px;
}
.glx-desc-body a { color: #38b6dd; }
.glx-desc-body ul, .glx-desc-body ol { margin: 8px 0 8px 4px; padding-left: 22px; }
.glx-desc-body li { margin: 5px 0; }

/* Highlights */
.glx-desc-body code,
.glx-hl-code {
	background: #0e1013;
	color: #9fe4f6;
	padding: 1px 6px;
	border-radius: 4px;
	font-size: .9em;
	font-family: 'Courier New', monospace;
}
.glx-hl-btn   { background: #1b7fa8; color: #fff; padding: 1px 8px; border-radius: 5px; font-weight: 600; white-space: nowrap; }
.glx-hl-field { color: #ffd479; font-weight: 600; }
.glx-hl-warn  { color: #ff8f6b; font-weight: 600; }
.glx-hl-ok    { color: #7fe0a0; font-weight: 600; }

/* Unterstrichen-Format */
.glx-u { text-decoration: underline; }

/* Hover-Effekt: Farbe/Größe/Schrift beim Drüberfahren (Werte via Inline-Variablen) */
.glx-hover {
	transition: color .18s ease, font-size .18s ease;
	color: var(--glx-bc, inherit);
}
.glx-hover:hover {
	color: var(--glx-hc, var(--glx-bc, inherit));
	font-size: var(--glx-hs, inherit);
	font-family: var(--glx-hf, inherit);
}

/* Nativer Block: Text bleibt in EINER Box, Enter = neue Zeile (kein Block-Split) */
.glx-body-pre { white-space: pre-wrap; }

/* Download-Button (Modus „Datei herunterladen") */
.glx-dlbtn {
	display: inline-block;
	text-decoration: none;
	color: #fff;
	font-weight: 700;
	padding: 9px 18px;
	border-radius: 8px;
	background-size: 200% auto;
	box-shadow: 0 2px 10px rgba(0,0,0,.35);
	user-select: none;
}
.glx-dlbtn:hover, .glx-dlbtn:focus { color: #fff; opacity: .95; }

/* Hinweiszeile im Editor (Download-Modus) */
.glx-dl-hint {
	margin-top: 8px;
	font-size: 13px;
	color: #9fe4f6;
	word-break: break-all;
}

/* Button-Gruppe: mehrere Buttons neben-/untereinander */
.glx-group { display: flex; gap: 14px; margin: 18px 0; align-items: flex-start; }
.glx-group.is-horizontal { flex-direction: row; flex-wrap: wrap; }
.glx-group.is-vertical   { flex-direction: column; }
.glx-group > * { margin: 0; }            /* Abstände kommen über gap */
.glx-group .glx-desc,
.glx-group .glx-dlbtn { margin: 0; }
/* WICHTIG: im Editor zwingt WordPress Blöcke auf volle Breite –
   in der Reihe müssen die Kinder auf Inhaltsbreite schrumpfen, sonst stapeln sie. */
.glx-group.is-horizontal > * { flex: 0 0 auto; width: auto; max-width: none; }
.glx-group.is-vertical   > * { width: auto; max-width: none; }

/* Editor-Vorschau: Body immer sichtbar zeigen, damit man tippen kann */
.glx-editor-preview .glx-summary-preview { margin-bottom: 4px; }

/* ---- Schliessen-Knopf am Ende einer langen Beschreibung ---- */
/* Der Fuss sitzt optisch IN der Beschreibungsbox: gleicher Hintergrund,
   gleicher Rand, und die Box verliert unten ihre Rundung, damit beides
   als ein Kasten wirkt. */
.glx-desc-body.has-foot {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	padding-bottom: 4px;
}
.glx-desc-foot {
	display: flex;
	justify-content: center;
	margin-top: 0;
	padding: 6px 22px 18px;
	border-left: 4px solid #38b6dd;
	border-radius: 0 0 8px 8px;
	background: #1c1f24;
	/* Feste Textfarbe: geerbt wuerde im dunklen Editor dunkel auf dunkel. */
	color: #d7dde3;
}
.glx-desc-foot.is-left   { justify-content: flex-start; }
.glx-desc-foot.is-center { justify-content: center; }
.glx-desc-foot.is-right  { justify-content: flex-end; }
/* Nur fuer echte details-Elemente: im Editor ist die Box ein div und damit
   NIE "offen" - die alte Regel hat den Fussknopf dort dauerhaft versteckt. */
details.glx-desc[open] .glx-desc-foot { display: flex; }
details.glx-desc:not([open]) .glx-desc-foot { display: none; }
.glx-desc-collapse {
	cursor: pointer;
	padding: 7px 20px;
	border-radius: 8px;
	border: 1px solid rgba(127, 127, 127, .45);
	background: transparent;
	color: #d7dde3;
	font-weight: 600;
	font-size: .95em;
	opacity: .85;
	transition: opacity .15s ease, background .15s ease;
}
.glx-desc-collapse:hover,
.glx-desc-collapse:focus {
	opacity: 1;
	background: rgba(127, 127, 127, .14);
}

/* Reine Text-Variante des unteren Schliessen-Knopfes */
.glx-desc-collapse.is-text {
	padding: 4px 2px;
	border: none;
	background: none;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.glx-desc-collapse.is-text:hover,
.glx-desc-collapse.is-text:focus {
	background: none;
	opacity: 1;
}

/* Im Editor ist die Box immer offen - dort den Fuss-Knopf trotzdem zeigen. */
.glx-editor-preview .glx-desc-foot {
	display: flex;
}

/* ==================================================================
   Offene Text-Box (Block glx/textbox)

   Kein Button, kein Aufklappen - der Kasten steht einfach da. Farben,
   Breite und Innenabstand kommen als Angaben direkt vom Block, damit
   sie sich je Box einstellen lassen.
   ================================================================== */

.glx-textbox {
	margin: 16px 0;
	border-radius: 8px;
	line-height: 1.65;
	box-sizing: border-box;
}

.glx-textbox-body p { margin: 10px 0; }
.glx-textbox-body p:first-child { margin-top: 0; }
.glx-textbox-body p:last-child { margin-bottom: 0; }

.glx-textbox-body h3 {
	margin: 20px 0 6px;
	font-size: 1.05em;
}

.glx-textbox-body a { color: inherit; }