/* GLX-ReCaptcha - Anzeige im Formular */

.glxrc-box { margin: 14px 0; }

/* ---------------------------------------------------------------
   Nebeneinander statt untereinander

   Gordon, 08.09.2026: "Der Schieberegler kam, aber jetzt ist das
   Pop-up ellenlang. Das muss danebenkommen."

   Das Puzzle ist rund 320 Pixel hoch. Unter einem Anmeldeformular
   macht das aus einem handlichen Fenster einen Schlauch, der auf
   einem 14-Zoll-Laptop nicht mehr aufs Bild passt.

   Von selbst geschieht das nicht, denn das Plugin kennt das fremde
   Formular nicht: Ein Anmeldefenster verträgt zwei Spalten, das
   schmale Kommentarformular unter einem Beitrag nicht, und
   wp-login.php schon gar nicht - dort ist die ganze Seite 320 Pixel
   breit.

   Deshalb ein Schalter zum Anhängen. Im Theme genügt ein Wort:

       <form class="... glxrc-neben">

   Alles außer dem Puzzle landet links, das Puzzle rechts, über die
   volle Höhe. Unter 720 Pixeln Fensterbreite stapelt es sich von
   selbst wieder untereinander - dort wäre nebeneinander Unsinn.
   --------------------------------------------------------------- */
@media (min-width: 720px) {
	.glxrc-neben {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 348px;
		column-gap: 26px;
		align-items: start;
	}
	/* Alles in die linke Spalte ... */
	.glxrc-neben > * { grid-column: 1; }
	/* ... nur das Puzzle nach rechts, über die volle Höhe.
	   span 30 statt "1 / -1": Die Zeilen entstehen erst durch die
	   Kinder, und ein Ende, das es noch nicht gibt, kann das Raster
	   nicht ansteuern. Dreißig Zeilen hat kein Anmeldeformular. */
	.glxrc-neben > .glxrc-box {
		grid-column: 2;
		grid-row: 1 / span 30;
		align-self: start;
		margin-top: 0;
	}
}

.glxrc-wrap {
	display: block;
	width: 100%;
	max-width: 348px;
	padding: 12px;
	border-radius: 10px;
	box-sizing: border-box;
	font-size: 14px;
	line-height: 1.4;
}

.glxrc-dark  { background: #16191d; color: #e6e9ee; border: 1px solid #2a3038; }
.glxrc-light { background: #f6f7f9; color: #23282d; border: 1px solid #d6dae0; }

.glxrc-label { margin-bottom: 8px; opacity: .85; }

.glxrc-buehne {
	position: relative;
	width: 100%;
	max-width: 320px;
	border-radius: 8px;
	overflow: hidden;
	background: #0d1116;
	user-select: none;
}

.glxrc-bg {
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.glxrc-piece {
	position: absolute;
	top: 0;
	left: 0;
	max-width: none;
	cursor: grab;
	filter: drop-shadow( 0 2px 4px rgba( 0, 0, 0, .55 ) );
	touch-action: none;
}

.glxrc-aktiv .glxrc-piece { cursor: grabbing; }

.glxrc-leiste {
	position: relative;
	height: 34px;
	margin-top: 10px;
	border-radius: 17px;
	background: rgba( 128, 140, 155, .25 );
}

.glxrc-griff {
	position: absolute;
	top: 2px;
	left: 0;
	width: 46px;
	height: 30px;
	border-radius: 15px;
	background: #3b9dff;
	cursor: grab;
	touch-action: none;
}

.glxrc-griff::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient( to right, #fff 2px, transparent 2px ) 18px 11px / 5px 8px no-repeat,
		linear-gradient( to right, #fff 2px, transparent 2px ) 24px 11px / 5px 8px no-repeat;
	opacity: .9;
}

.glxrc-griff:focus { outline: 2px solid #fff; outline-offset: 2px; }

.glxrc-ok .glxrc-griff     { background: #2fae6a; }
.glxrc-fehler .glxrc-griff { background: #d1495b; }

.glxrc-status { min-height: 20px; margin-top: 8px; font-size: 13px; }
.glxrc-ok .glxrc-status     { color: #2fae6a; }
.glxrc-fehler .glxrc-status { color: #d1495b; }

.glxrc-neu {
	margin-top: 4px;
	padding: 4px 10px;
	font-size: 12px;
	border: 0;
	border-radius: 6px;
	cursor: pointer;
	background: rgba( 128, 140, 155, .25 );
	color: inherit;
}

.glxrc-neu:hover { background: rgba( 128, 140, 155, .4 ); }

.glxrc-hinweis { color: #d1495b; }