/* ===========================================================================
   Anmelden und Konto anlegen - EIN Aussehen fuer das Anmelde-Modal jedes
   Shops (Event: Views/shop/_anmeldung.php, "Tabs im Kassen-Stil") und die
   Seiten /login, /registrieren usw. der Base-App (Views/anmeldeseite.php).
   Seit 28.09.2026 gemeinsam; vorher standen die Regeln nur fuer das Modal in
   kasse-v1.css (kasse-modal, kasse-segment, kasse-code, kasse-modal-symbol,
   Knopf kasse-haupt, Titel kasse-titel) und die Base-Seiten sahen anders aus.

   Bootstrap-Formulare, input-group, nav-pills und form-switch tragen alles;
   hier nur, was Bootstrap nicht hat - Praefix anm-:
     anm-karte    Karte bzw. Modal-Inhalt (Rundung, Schatten; Handy ohne)
     anm-segment  Umschalter "Anmelden | Konto anlegen"
     anm-knopf    Hauptknopf (wie kasse-haupt der Kasse)
     anm-titel    Titel mit Symbol (zweiter Faktor, Passwort vergessen ...)
     anm-code     Feld fuer den 6-stelligen Code
     anm-symbol   rundes Symbol der Bestaetigung ("Mail unterwegs")
     anm-firma    Firmenfeld - erst sichtbar, wenn "Ich bestelle fuer eine
                  Firma" (anm-firma-haken) angehakt ist (Base ohne Skript;
                  das Modal blendet es per Alpine x-if ein)

   Eingabegruppen in beiden gleich (Markup, kein CSS): "input-group
   input-group-lg" + "form-control" (nicht form-control-lg - sonst passen
   die Radien von Symbol, Feld und Knopf nicht), Auge "btn btn-light border
   text-body-secondary" (Rand wie die Felder), bei has-validation steht die
   .invalid-feedback IMMER als letztes Kind in der Gruppe (auch leer), sonst
   rundet Bootstrap die inneren Ecken.
   =========================================================================== */

.anm-karte {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 24px 48px rgba(16, 24, 40, .18);
}

@media (max-width: 575.98px) {
	.anm-karte { border-radius: 0; box-shadow: none; }
}

.anm-karte .input-group-text {
	min-width: 46px;
	justify-content: center;
	color: var(--bs-secondary-color);
}

.anm-segment {
	background: var(--bs-tertiary-bg);
	border-radius: 12px;
	padding: 4px;
	gap: 4px;
}

.anm-segment .nav-link {
	border-radius: 9px;
	font-weight: 600;
	color: var(--bs-secondary-color);
	transition: background .15s, color .15s, box-shadow .15s;
}

.anm-segment .nav-link.active {
	background: #fff;
	color: var(--bs-body-color);
	box-shadow: 0 1px 3px rgba(16, 24, 40, .12);
}

.anm-knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 0;
	border-radius: 12px;
	background: #0d6efd;
	color: #fff;
	font-weight: 700;
	font-size: 1.05rem;
	padding: .85rem 2.2rem;
	text-decoration: none;
	transition: transform .15s, box-shadow .15s, background .15s;
	box-shadow: 0 4px 14px rgba(13, 110, 253, .3);
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

/* Hover nur fuer echte Zeiger - auf Touch-Geraeten schaltete der erste Tipp sonst nur den Hover */
@media (hover: hover) {
	.anm-knopf:hover {
		background: #0b5ed7;
		color: #fff;
		transform: translateY(-1px);
		box-shadow: 0 6px 18px rgba(13, 110, 253, .38);
	}
}

.anm-knopf:active { transform: none; }
.anm-knopf:disabled { background: #9db8dd; box-shadow: none; transform: none; }
a.anm-knopf:visited { color: #fff; }

.anm-titel {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 20px;
	font-size: 1.2rem;
	font-weight: 700;
}

.anm-titel > .bi {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 12px;
	background: rgba(13, 110, 253, .09);
	color: #0d6efd;
	font-size: 1.15rem;
}

.anm-code {
	font-size: 1.6rem;
	letter-spacing: .5em;
	font-variant-numeric: tabular-nums;
}

.anm-symbol {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(25, 135, 84, .1);
	color: #198754;
	font-size: 1.8rem;
}

/* Firmenfeld erst nach dem Haken (Base-Seiten, ohne Skript) */
.anm-firma { display: none; }
form:has(.anm-firma-haken:checked) .anm-firma { display: block; }