/* =====================================================================
   Mission Auth – das Tor
   Werte aus Downloads\09_Marke-und-Notizen\ (Tokens 1.0, Styleguide Teil 3).
   Nichts hier ist geschätzt; wo eine Variable fehlt, steht der Wert
   aus der Tokendatei als Rückfall daneben, weil das Tor auch auf
   Seiten steht, die die Tokendatei nicht laden.

   Aus Teil 3 übernommen und nicht verhandelbar:
     · Knopfhöhe 44 px – die Mindestgrösse für sichere Bedienung am Telefon
     · Primärknopf Vermilion 600 auf Weiss (4,81:1), Hover Vermilion 700
     · Fokusring 3 px rgba(255,66,3,.30) – ohne ihn ist die Seite per
       Tastatur unbenutzbar
     · Feldrahmen in Navy 600, NICHT in Sand: funktionale Ränder brauchen
       3:1 Kontrast, dekorative nicht
     · Ein Primärknopf je Bildschirmbereich
   ===================================================================== */

.mm-tor {
	--tor-brand:   var(--mm-color-brand, #FF4203);
	--tor-aktion:  var(--mm-color-brand-action, #D63500);
	--tor-stark:   var(--mm-color-brand-strong, #AB2800);
	--tor-ink:     var(--mm-color-ink, #232F3F);
	--tor-ink-2:   var(--mm-color-ink-secondary, #4F5E72);
	--tor-ink-3:   var(--mm-color-ink-muted, #6B7A8E);
	--tor-flaeche: var(--mm-color-surface, #FFFFFF);
	--tor-papier:  var(--mm-color-surface-paper, #FDF9F4);
	--tor-rand:    var(--mm-color-border, #EFE6DC);
	--tor-rand-fn: var(--mm-color-border-strong, #6B7A8E);
	--tor-fehler:  var(--mm-color-danger, #951532);
	--tor-fehler-w: var(--mm-color-danger-wash, #FFE3E4);

	box-sizing: border-box;
	max-width: 520px;
	margin: 0 auto;
	padding: 28px;
	background: var(--tor-flaeche);
	border: 1px solid var(--tor-rand);
	border-radius: 14px; /* Karten: 14 */
	box-shadow: var(--mm-shadow-md, 0 1px 2px rgba(35,47,63,.05), 0 8px 24px rgba(35,47,63,.06));
	font-family: var(--mm-font-ui, "Inter", system-ui, -apple-system, "Segoe UI", sans-serif);
	color: var(--tor-ink);
	text-align: left;
}

.mm-tor *,
.mm-tor *::before,
.mm-tor *::after { box-sizing: border-box; }

/* --- Überschrift und Vorspann ------------------------------------- */

.mm-tor .mm-tor-titel {
	font-family: var(--mm-font-display, "Fraunces", Georgia, serif);
	font-weight: 600;
	/* Bewusst h3-Grösse: Das Tor sitzt IM Ergebnis, es ist nicht dessen
	   Überschrift. h2 würde dem Bericht die Hierarchie wegnehmen. */
	font-size: 1.5625rem;
	line-height: 1.24;
	letter-spacing: -0.010em;
	color: var(--tor-ink);
	margin: 0 0 10px;
	text-transform: none;
}

.mm-tor .mm-tor-vorspann {
	font-size: 1rem;
	line-height: 1.55;
	color: var(--tor-ink-2);
	margin: 0 0 20px;
}

.mm-tor .mm-tor-hinweis,
.mm-tor-huelle .mm-tor-hinweis {
	background: var(--mm-color-warning-wash, #FBEDD1);
	color: var(--mm-color-warning, #8C6800);
	border-radius: 10px;
	padding: 10px 14px;
	font-size: 0.875rem;
	line-height: 1.45;
	margin: 0 0 16px;
}

/* --- Feld ---------------------------------------------------------- */

.mm-tor .mm-tor-label {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--tor-ink-2);
	margin: 0 0 6px;
}

.mm-tor .mm-tor-feld {
	display: block;
	width: 100%;
	height: 44px;
	padding: 0 14px;
	font-family: inherit;
	/* 16 px, damit iOS beim Hineintippen nicht zoomt – die Zielgruppe
	   sitzt am Handy. */
	font-size: 1rem;
	color: var(--tor-ink);
	background: var(--tor-flaeche);
	border: 1px solid var(--tor-rand-fn);
	border-radius: 10px;
	transition: border-color var(--mm-duration-fast, 120ms) var(--mm-ease-standard, cubic-bezier(.2,.7,.2,1)),
		box-shadow var(--mm-duration-fast, 120ms) var(--mm-ease-standard, cubic-bezier(.2,.7,.2,1));
	-webkit-appearance: none;
	appearance: none;
}

.mm-tor .mm-tor-feld::placeholder { color: var(--tor-ink-3); opacity: 1; }

.mm-tor .mm-tor-feld:hover { border-color: var(--tor-ink-2); }

.mm-tor .mm-tor-feld:focus,
.mm-tor .mm-tor-feld:focus-visible {
	outline: none;
	border-color: var(--tor-aktion);
	box-shadow: var(--mm-focus-ring, 0 0 0 3px rgba(255, 66, 3, 0.30));
}

/* --- Zustimmung als Häkchen (nur wenn der Rechtsteil es verlangt) -- */

.mm-tor .mm-tor-haken {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 14px 0 0;
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--tor-ink-2);
}

.mm-tor .mm-tor-haken input {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: var(--tor-aktion);
}

/* --- Knopf --------------------------------------------------------- */

.mm-tor .mm-tor-knopf {
	display: block;
	width: 100%;
	min-height: 44px;
	margin: 16px 0 0;
	padding: 0 24px;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 44px;
	color: #FFFFFF;
	text-align: center;
	text-decoration: none;
	background: var(--tor-aktion);
	border: 1px solid var(--tor-aktion);
	border-radius: 10px;
	cursor: pointer;
	transition: background var(--mm-duration-fast, 120ms) var(--mm-ease-standard, cubic-bezier(.2,.7,.2,1));
	-webkit-appearance: none;
	appearance: none;
}

.mm-tor .mm-tor-knopf:hover:not(:disabled) {
	background: var(--tor-stark);
	border-color: var(--tor-stark);
	color: #FFFFFF;
}

.mm-tor .mm-tor-knopf:focus-visible {
	outline: none;
	box-shadow: var(--mm-focus-ring, 0 0 0 3px rgba(255, 66, 3, 0.30));
}

.mm-tor .mm-tor-knopf:disabled { opacity: 0.55; cursor: default; }

/* --- Meldungen ----------------------------------------------------- */

.mm-tor .mm-tor-meldung {
	margin: 12px 0 0;
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--tor-ink-2);
	min-height: 1.45em; /* kein Springen, wenn eine Meldung erscheint */
}

.mm-tor .mm-tor-meldung.mm-tor-fehler {
	color: var(--tor-fehler);
	background: var(--tor-fehler-w);
	border-radius: 10px;
	padding: 9px 13px;
}

/* --- Google -------------------------------------------------------- */

.mm-tor .mm-tor-oder {
	position: relative;
	margin: 20px 0;
	text-align: center;
	font-size: 0.8125rem;
	color: var(--tor-ink-3);
}

.mm-tor .mm-tor-oder::before {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 50%;
	border-top: 1px solid var(--tor-rand);
}

.mm-tor .mm-tor-oder span {
	position: relative;
	padding: 0 12px;
	background: var(--tor-flaeche);
}

/* Sekundärstufe: Rahmen Navy 600, damit die 3:1-Regel für
   Bedienelemente erfüllt bleibt und nur EIN oranger Knopf im Kasten steht. */
.mm-tor .mm-tor-google {
	display: block;
	min-height: 44px;
	line-height: 42px;
	padding: 0 20px;
	font-size: 1rem;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	color: var(--tor-ink);
	background: var(--tor-flaeche);
	border: 1px solid var(--tor-rand-fn);
	border-radius: 10px;
}

.mm-tor .mm-tor-google:hover { background: var(--tor-papier); color: var(--tor-ink); }

.mm-tor .mm-tor-google:focus-visible {
	outline: none;
	box-shadow: var(--mm-focus-ring, 0 0 0 3px rgba(255, 66, 3, 0.30));
}

/* --- Kleingedrucktes ----------------------------------------------- */

.mm-tor .mm-tor-fein {
	margin: 16px 0 0;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--tor-ink-3);
}

/* Der Passwortweg und der Rechtshinweis sind zwei verschiedene Dinge und
   dürfen nicht als ein Absatz gelesen werden. */
.mm-tor .mm-tor-fein + .mm-tor-fein {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--tor-rand);
}

.mm-tor .mm-tor-fein a { color: var(--tor-aktion); text-decoration: underline; }

/* --- Am Diagnoseergebnis ------------------------------------------- */

/* Dort steht das Tor nicht allein auf der Seite, sondern in einem
   Bericht, der schon aus Karten besteht. Es bekommt deshalb den
   Papiergrund statt Weiss, damit es sich als eigener Schritt abhebt,
   ohne wie eine zweite Karte in der Karte zu wirken. */
.mm-tor-huelle { margin: 20px 0 0; }

.mm-tor-huelle .mm-tor {
	/* Nicht „none": Ein Eingabefeld über die volle Breite eines breiten
	   Berichts liest sich nicht mehr als Formular. 680 px ist die
	   Lesestreckenbreite aus den Tokens – breiter wird hier nichts. */
	max-width: 680px;
	background: var(--mm-color-surface-paper, #FDF9F4);
	border-color: var(--mm-color-border, #EFE6DC);
	box-shadow: none;
}

.mm-tor-huelle .mm-tor .mm-tor-feld,
.mm-tor-huelle .mm-tor .mm-tor-google,
.mm-tor-huelle .mm-tor .mm-tor-oder span {
	background: var(--mm-color-surface, #FFFFFF);
}

@media (max-width: 480px) {
	.mm-tor { padding: 22px 18px; }
	.mm-tor .mm-tor-titel { font-size: 1.25rem; }
}

/* ------------------------------------------------------------------
 * Der Bestätigungscode
 *
 * Sechs Ziffern werden abgetippt, nicht gelesen. Deshalb grösser als ein
 * gewöhnliches Feld, gesperrt gesetzt und mittig – so lässt sich beim
 * Tippen mit einem Blick prüfen, wie viele Stellen schon stehen.
 *
 * Ziffernbreite über font-variant-numeric: tabular-nums statt über eine
 * Monospace-Schrift; die Ziffern stehen damit in derselben Schrift wie
 * der Rest des Kastens, springen aber nicht mehr in der Breite.
 * ---------------------------------------------------------------- */

.mm-tor .mm-tor-codefeld {
	height: 56px;
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: .34em;
	/* Die Sperrung sitzt hinter jedem Zeichen, auch hinter dem letzten –
	   ohne diesen Ausgleich stünde die Zeile sichtbar links von der Mitte. */
	text-indent: .34em;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.mm-tor .mm-tor-codefeld::placeholder {
	letter-spacing: .34em;
	font-weight: 400;
	color: var(--tor-rand);
}

/* Auf dem Handy bleibt Platz genug für sechs Ziffern, aber nicht für die
   volle Sperrung – sonst läuft die letzte aus dem Feld. */
@media (max-width: 380px) {
	.mm-tor .mm-tor-codefeld {
		font-size: 1.3rem;
		letter-spacing: .24em;
		text-indent: .24em;
	}
}

/* ------------------------------------------------------------------
 * Die Rückwege im zweiten Schritt
 *
 * Zwei Textknöpfe, keine zweite Schaltfläche: Der Weg vorwärts bleibt der
 * auffälligste, diese beiden stehen daneben für den Fall, dass er nicht
 * geht. Als <button> und nicht als Link, weil sie keine Adresse öffnen –
 * ein Link, der keine Seite lädt, ist für Screenreader eine Falle.
 * ---------------------------------------------------------------- */

.mm-tor .mm-tor-rueckwege {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	margin: 14px 0 0;
	font-size: 14px;
}

.mm-tor .mm-tor-trenner {
	color: var(--tor-rand-fn);
}

.mm-tor .mm-tor-textknopf {
	appearance: none;
	-webkit-appearance: none;
	background: none;
	border: 0;
	padding: 2px 0;
	margin: 0;
	font: inherit;
	color: var(--tor-aktion);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	border-radius: 4px;
}

.mm-tor .mm-tor-textknopf:hover {
	color: var(--tor-stark);
}

.mm-tor .mm-tor-textknopf:focus-visible {
	outline: none;
	box-shadow: var(--mm-focus-ring, 0 0 0 3px rgba(255, 66, 3, 0.30));
}

/* Gesperrt heisst: sichtbar da, aber gerade nicht dran – der Zähler im
   Text sagt, wie lange noch. */
.mm-tor .mm-tor-textknopf[disabled] {
	color: var(--tor-ink-3);
	text-decoration: none;
	cursor: default;
}

/* Der Hinweis für den Fall, dass kein Skript läuft. */
.mm-tor .mm-tor-ohneskript {
	margin: 12px 0 0;
	padding: 11px 14px;
	border: 1px solid var(--tor-rand-fn);
	border-radius: 8px;
	background: var(--tor-papier);
	font-size: 14px;
	line-height: 1.5;
	color: var(--tor-ink-2);
}