/* 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; }
/* Hausfarbe, dieselbe wie in der Menüleiste der Webseite. */
.glx-hl-glx   { color: #22a1c4; font-weight: 700; }

/* 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; }

/* ================================================================
   GLX Box · GLX Boxbox · GLX Button

   Nur, was sich NICHT ins style-Attribut schreiben laesst: das
   Verhalten beim Ueberfahren und der Abstand zwischen Knoepfen.
   Farben, Rahmen und Ecken stehen am Block selbst - so sieht man im
   Editor sofort, was man eingestellt hat.
   ================================================================ */

/* Schrift und Zeilenabstand wie im urspruenglichen CSS der Startseite.
 *
 * Ohne das erbt die Box die Schrift des Themes. Bluestreet bringt eine
 * schmale, altmodisch wirkende Schrift mit - der Text sah dadurch voellig
 * anders aus als im Original, obwohl Farben, Groessen und Abstaende stimmten.
 * Gordon hat es an den Bildern nebeneinander gesehen.
 *
 * Die Familie steht hier und nicht in der Seite: So sieht JEDE GLX-Box gleich
 * aus, auf jeder Seite, ohne dass jemand daran denken muss. */
.glx-box {
	margin: 0 0 16px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	             Helvetica, Arial, sans-serif;
	line-height: 1.6;
}

.glx-boxbox { position: relative; }

/* Anheben beim Ueberfahren - abschaltbar am Block.
   Wer "Animationen reduzieren" in Windows gesetzt hat, bekommt es nicht;
   fuer manche Menschen loesen solche Bewegungen Schwindel aus. */
.glx-boxbox-heben {
	transition: transform .28s cubic-bezier(.2,.7,.3,1),
	            box-shadow .28s ease, border-color .28s ease;
	will-change: transform;
}
.glx-boxbox-heben:hover {
	transform: translateY(-7px) scale(1.015);
	/* Der zweite Schatten ist ein hauchduenner tuerkiser Ring.
	   Er stand im urspruenglichen CSS der Startseite und fehlte hier - ohne
	   ihn hebt sich die Karte zwar an, wirkt aber flach und leblos. Gordon
	   am 29.08.2026: "Der Glow-Effekt ist weg, das sieht langweilig aus."
	   Die Farbe laesst sich am Block ueberschreiben: --glxhover. */
	/* Drei Schatten, und der mittlere ist der, auf den es ankommt.
	 *
	 * Erster Anlauf hatte nur den schwarzen Schlagschatten und einen sehr
	 * blassen Ring. Auf einer dunklen Seite sieht man einen schwarzen Schatten
	 * auf fast schwarzem Grund nicht - die Karte hob sich zwar an, aber es
	 * wirkte flach. Gordon am 29.08.2026: "Das Hervorheben mit dem Schatten
	 * ist weg."
	 *
	 * Der tuerkise Schein traegt die Hervorhebung. Der schwarze bleibt fuer
	 * die Tiefe, der Ring fuer die scharfe Kante. */
	box-shadow: 0 16px 34px -10px rgba(0,0,0,.85),
	            0 0 26px -6px var(--glxhover-schein, rgba(34,161,196,.38)),
	            0 0 0 1px var(--glxhover-ring, rgba(34,161,196,.35));
	border-color: var(--glxhover, rgba(34,161,196,.55)) !important;
}

/* Ein feiner Lichtschein von oben links, nur beim Ueberfahren.
   Das ist der Rest des Effekts: Die Karte bekommt Tiefe, statt nur zu
   springen. Ohne pointer-events:none laege die Schicht ueber dem Text und
   Links darin waeren nicht mehr anklickbar. */
.glx-boxbox-heben::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background: linear-gradient(160deg, rgba(255,255,255,.07), transparent 45%);
	opacity: 0;
	transition: opacity .28s ease;
}
.glx-boxbox-heben:hover::before { opacity: 1; }

/* Das Symbol oben links - Flaeche, Groesse und Rundung.
   Die Farben kommen vom Block, damit man sie sieht, waehrend man sie waehlt. */
.glx-boxbox .glx-sym {
	width: 36px; height: 36px; border-radius: 10px;
	display: flex; align-items: center; justify-content: center;
	margin-bottom: 12px;
	transition: transform .28s cubic-bezier(.2,.7,.3,1), background .28s ease;
}
.glx-boxbox-heben:hover .glx-sym { transform: translateY(-2px) scale(1.09); }

/* Die Symbolflaeche wird beim Ueberfahren kraeftiger.
 *
 * Im urspruenglichen CSS der Startseite ging sie von 14 % auf 22 % derselben
 * Farbe. Hier war nur die Bewegung nachgebaut, nicht das Aufleuchten - dadurch
 * wirkte das Symbol beim Ueberfahren blass. Gordon am 29.08.2026: "Sogar die
 * Icons werden farbiger, das muss da mit rein."
 *
 * Umgesetzt als Schicht in der EIGENEN Farbe des Symbols (currentColor), nicht
 * als fester Farbwert: So stimmt es auch bei Gelb und bei jeder Farbe, die
 * jemand spaeter waehlt. Der Hintergrund steht im style-Attribut des Blocks
 * und laesst sich von hier aus nicht erhoehen - eine Schicht darueber schon. */
.glx-boxbox .glx-sym { position: relative; }
.glx-boxbox .glx-sym::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: currentColor;
	opacity: 0;
	transition: opacity .28s ease;
	pointer-events: none;
}
.glx-boxbox-heben:hover .glx-sym::after { opacity: .10; }
/* Das Symbol selbst gehoert ueber die Schicht, sonst verschwindet es darin. */
.glx-boxbox .glx-sym > svg { position: relative; z-index: 1; }

/* Knoepfe */
.glx-btn-wrap { display: inline-block; margin: 5px 8px 0 0; }

/* "In eigener Zeile" am Block.

   inline-block laesst zwei Knoepfe nebeneinander stehen wie zwei Woerter in
   einem Satz - auch dann, wenn ein Absatz dazwischen steht: Der Knopf ist ein
   eigener Block und steckt nicht im Absatz. Gordon am 31.08.2026: "Ich kann
   keine Buttons untereinander anlegen."

   block statt inline-block bricht die Zeile. width:fit-content sorgt dafuer,
   dass der Knopf trotzdem nur so breit wird wie sein Text - sonst zoege er
   sich ueber die ganze Spalte, und aus einem Knopf wuerde ein Balken. */
.glx-btn-wrap.glx-btn-zeile {
	display: block;
	width: fit-content;
	max-width: 100%;
}
.glx-btn {
	display: inline-block; padding: 8px 17px; font-weight: 600; font-size: 13.8px;
	text-decoration: none !important; cursor: pointer; line-height: 1.4;
	transition: background .15s ease, border-color .15s ease,
	            transform .15s ease, box-shadow .15s ease;
}
/* Die Mausueber-Farbe steht als Variable am Knopf - eine Hover-Regel
   laesst sich nicht in ein style-Attribut schreiben, eine Variable schon. */
.glx-btn:hover {
	background: var(--glxbtn-hover, #3a4048) !important;
	border-color: var(--glxbtn-hover, #3a4048) !important;
	transform: translateY(-2px);
	box-shadow: 0 10px 22px -10px rgba(0,0,0,.6);
}

@media (prefers-reduced-motion: reduce) {
	.glx-boxbox-heben, .glx-boxbox .glx-sym, .glx-btn { transition: none !important; }
	.glx-boxbox-heben:hover, .glx-btn:hover { transform: none; }
	.glx-boxbox-heben::before,
	.glx-boxbox .glx-sym::after { transition: none !important; }
}

/* Spalten brechen auf schmalen Bildschirmen um.
   Drei Karten nebeneinander sind auf dem Telefon drei Streifen - lesbar ist
   das nicht. Untereinander schon. */
@media (max-width: 860px) {
	.glx-box > .glx-inhalt { grid-template-columns: 1fr !important; }
}

/* Die Knopfreihe unter dem Inhalt der Box */
.glx-knopfreihe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.glx-knopfreihe .glx-btn { margin: 0; }

/* Wirkung beim Ueberfahren - je Knopf waehlbar */
.glx-btn.glx-fx-heben:hover    { transform: translateY(-2px); }
.glx-btn.glx-fx-leuchten:hover { box-shadow: 0 0 0 3px rgba(255,255,255,.10), 0 10px 24px -10px rgba(0,0,0,.7); }
.glx-btn.glx-fx-wachsen:hover  { transform: scale(1.06); }
.glx-btn.glx-fx-keine:hover    { transform: none; box-shadow: none; }

/* Die Sprungmarke ist unsichtbar, muss aber anspringbar bleiben.
   display:none waere falsch - ein verstecktes Ziel scrollt nicht an.
   Ein wenig Abstand nach oben, damit die Ueberschrift nicht unter einer
   festen Kopfleiste verschwindet. */
.glx-marke { display: block; height: 0; scroll-margin-top: 90px; }
.glx-marke-edit .glx-marke-fahne {
	display: inline-block; font-size: 12px; padding: 3px 9px; border-radius: 6px;
	background: rgba(34,161,196,.16); color: #22a1c4; border: 1px dashed #22a1c4;
}


/* ================================================================
   GLX Symbol - der eigene Symbol-Block (ab 3.8.0)
   ================================================================

   Blass im Ruhezustand, kraeftig beim Ueberfahren - so hat Gordon es sich
   gewuenscht, und so machte es auch das urspruengliche CSS der Startseite.
   Die Ruhe-Deckkraft steht als Variable am Element, weil ein :hover sich
   nicht in ein style-Attribut schreiben laesst. */

.glx-symbol {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	opacity: var(--glxsym-ruhe, .8);
	transition: opacity .28s ease, transform .28s cubic-bezier(.2,.7,.3,1),
	            filter .28s ease;
}
/* Beim Ueberfahren der UMGEBENDEN Box, nicht nur des Symbols selbst.
   Ein Symbol von 36 Punkten trifft man mit der Maus kaum; gemeint ist
   immer die Karte, auf der es sitzt. */
.glx-boxbox:hover .glx-symbol,
.glx-box:hover .glx-symbol,
.glx-symbol:hover {
	opacity: 1;
	transform: scale(1.09);
}

/* Eigene Zeile statt mitten im Text. */
.glx-symbol-links  { display: flex; margin-right: auto; }
.glx-symbol-mitte  { display: flex; margin-left: auto; margin-right: auto; }
.glx-symbol-rechts { display: flex; margin-left: auto; }

/* Die neun festen Plaetze.
   Sie beziehen sich auf die naechste Box darum - deshalb muss die
   positioniert sein, siehe weiter unten. */
.glx-symbol-ol, .glx-symbol-om, .glx-symbol-or,
.glx-symbol-ml, .glx-symbol-mm, .glx-symbol-mr,
.glx-symbol-ul, .glx-symbol-um, .glx-symbol-ur { position: absolute; }

.glx-symbol-ol { top: 12px;  left: 12px; }
.glx-symbol-om { top: 12px;  left: 50%; transform: translateX(-50%); }
.glx-symbol-or { top: 12px;  right: 12px; }
.glx-symbol-ml { top: 50%;   left: 12px;  transform: translateY(-50%); }
.glx-symbol-mm { top: 50%;   left: 50%;   transform: translate(-50%,-50%); }
.glx-symbol-mr { top: 50%;   right: 12px; transform: translateY(-50%); }
.glx-symbol-ul { bottom: 12px; left: 12px; }
.glx-symbol-um { bottom: 12px; left: 50%; transform: translateX(-50%); }
.glx-symbol-ur { bottom: 12px; right: 12px; }

/* Beim Ueberfahren duerfen die festen Plaetze ihre Verschiebung nicht
   verlieren - sonst springt das Symbol beim Vergroessern aus der Ecke. */
.glx-boxbox:hover .glx-symbol-om, .glx-box:hover .glx-symbol-om,
.glx-boxbox:hover .glx-symbol-um, .glx-box:hover .glx-symbol-um { transform: translateX(-50%) scale(1.09); }
.glx-boxbox:hover .glx-symbol-ml, .glx-box:hover .glx-symbol-ml,
.glx-boxbox:hover .glx-symbol-mr, .glx-box:hover .glx-symbol-mr { transform: translateY(-50%) scale(1.09); }
.glx-boxbox:hover .glx-symbol-mm, .glx-box:hover .glx-symbol-mm { transform: translate(-50%,-50%) scale(1.09); }

/* Die aeussere Box muss positioniert sein, damit "fest" sich auf SIE
   bezieht und nicht auf irgendetwas weiter aussen. Bei .glx-boxbox stand
   das schon; .glx-box hatte es nicht - dort waere ein Symbol "oben rechts"
   an der Ecke des Browserfensters gelandet. */
.glx-box { position: relative; }

@media (prefers-reduced-motion: reduce) {
	.glx-symbol { transition: none !important; }
	.glx-boxbox:hover .glx-symbol, .glx-box:hover .glx-symbol { transform: none; }
}