/* 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; }
.glx-hover:hover {
	color: var(--glx-hc, 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; }