/**
 * Baseline-Styling fuer die Social-Buttons - Werte 1:1 aus dem
 * freigegebenen Klickdummy uebernommen (docs/klickdummies/
 * registrierung-webseite-klickdummy.html, Variante "Buttons ueber
 * Formular", Entscheidung 25.08.2026). Apple/Google-Farben folgen den
 * jeweiligen Plattform-Vorgaben (nicht der CI-Button-Hierarchie) - so
 * auch bereits in der App (docs/klickdummies/login-klickdummy.html).
 *
 * Bewusst puristisch gehalten: das Theme darf Abstaende/Typo der
 * umgebenden Seite ueberschreiben, ohne dass hier Spezifitaetskaempfe
 * noetig werden.
 */

.golfstunde-social-login {
	margin-bottom: 8px;
}

/* context="login": Block sitzt am Ende der Login-Seite (unter dem
   Formular), es folgt nichts mehr - haengenden Abstand nach der
   Button-Reihe wegnehmen. Der Divider "oder" steht in dieser Variante
   VOR dem Block und bringt den Abstand zum Formular schon mit. */
.golfstunde-social-login--login {
	margin-bottom: 0;
}

.golfstunde-social-login--login .golfstunde-social-login__row {
	margin-bottom: 0;
}

/* Einleitung ueber den SSO-Buttons: gleiche Linien-Optik wie
   .golfstunde-social-login__divider (zentrierter Text mit Trennlinie
   links/rechts), nur enger an die Buttons herangerueckt. 1:1 mit
   .social-hint im Klickdummy. */
.golfstunde-social-login__hint {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 16px;
	font-size: 14px;
	font-weight: 500;
	color: #595959;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.golfstunde-social-login__hint::before,
.golfstunde-social-login__hint::after {
	content: "";
	flex: 1;
	height: 1px;
	background: #e2e2e2;
}

.golfstunde-social-login__hint[hidden] {
	display: none;
}

/* Apple + Google nebeneinander - 1:1 mit .social-row im freigegebenen
   Klickdummy (Nebeneinander-Entscheidung 28.08.2026). flex-wrap: unter
   ~410px Spaltenbreite bricht die Reihe automatisch untereinander um
   (jeder Button dann volle Breite) - darunter wuerde der GIS-Button sein
   ~200px-Minimum unterschreiten und kaputt rendern. */
.golfstunde-social-login__row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 10px;
}

.golfstunde-social-login__row > * {
	flex: 1 1 200px;
	min-width: 0;
}

.golfstunde-social-login__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	/* KORREKTUR 28.08.2026: war 50px, s. Korrektur bei #golfstunde-google-btn
	   unten - musste runter auf Googles fest codierte 40px, nicht umgekehrt. */
	min-height: 40px;
	border-radius: 10px;
	font-family: inherit;
	font-weight: 500;
	font-size: 15px;
	cursor: pointer;
	border: 0;
	padding: 0 12px;
	width: 100%;
}

.golfstunde-social-login__btn--apple {
	background: #000;
	color: #fff;
}

.golfstunde-social-login__ic {
	width: 19px;
	height: 19px;
	flex: none;
	display: block;
}

/* Google-Button wird von Google Identity Services selbst gerendert
   (renderButton in assets/js/social-buttons.js). Die exakte Pixelbreite
   fuer renderButton liest die JS-Datei aus offsetWidth dieses Containers.
   KEIN display:flex hier - GIS misst dann die Breite falsch und faellt
   auf den Default zurueck.
   BUGFIX 28.08.2026 (erster Versuch, NICHT ausreichend): GIS' "large"-
   Preset rendert fix 40px hoch, .golfstunde-social-login__btn (Apple)
   war 50px hoch. Erster Fix hatte hier 5px vertikales Padding ergaenzt,
   um die AEUSSERE Container-Box auf 50px zu bringen - das machte zwar
   die Flex-Zeile gleich hoch, liess aber die TATSAECHLICH SICHTBARE,
   grau umrandete Google-Schaltflaeche weiterhin bei 40px, jetzt nur mit
   5px Luft oben/unten statt randlos - im Screenshot-Vergleich mit dem
   randlos gefuellten Apple-Button blieben die Buttons sichtbar
   unterschiedlich hoch. KORREKTUR: kein Padding-Trick mehr - Google
   selbst darf laut Branding-Vorgaben nicht skaliert werden, also muss
   stattdessen Apple (voll in unserer Kontrolle) auf Googles fixe 40px
   runter (s. .golfstunde-social-login__btn oben). min-height hier bleibt
   als Platzhalter-Reservierung VOR dem GIS-Rendering (Script laedt
   lazy) - jetzt einfach direkt 40px, kein Aufrunden mehr noetig. */
#golfstunde-google-btn {
	width: 100%;
	min-height: 40px;
}

/* Solange GIS den echten Button noch nicht hineingerendert hat (async-
   Ladephase), sieht der reservierte Platz wie ein Button im Ladezustand
   aus - kein leeres Loch neben dem Apple-Button. Sobald GIS Inhalt
   einfuegt, greift :empty nicht mehr und diese Optik verschwindet. */
#golfstunde-google-btn:empty {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1.5px solid #dadce0;
	border-radius: 10px;
	background: #fff;
	color: #9aa0a6;
	font-family: inherit;
	font-weight: 500;
	font-size: 15px;
}

#golfstunde-google-btn:empty::after {
	content: "Weiter mit Google";
}

@media (prefers-reduced-motion: no-preference) {
	#golfstunde-google-btn:empty {
		animation: golfstunde-social-pulse 1.4s ease-in-out infinite;
	}
	@keyframes golfstunde-social-pulse {
		0%, 100% { opacity: 1; }
		50%      { opacity: 0.6; }
	}
}

.golfstunde-social-login__error {
	font-size: 14px;
	color: #a23232;
	margin: 6px 0 0;
}

.golfstunde-social-login__divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 22px 0;
	color: #595959;
	font-size: 14px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.golfstunde-social-login__divider::before,
.golfstunde-social-login__divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: #e2e2e2;
}