/* assets/css/morgenstraich-style.css */

/* Editorial-Stil (2026-10-17): kein Rahmen, dezente Konfetti-Ecke in den
   Farben aus dem Hero-Banner, grosszügigere Typografie. CSS-Variablen
   aus dem Theme fasnacht2027 mit Fallback-Werten, damit der Block auch
   ohne dieses Theme sinnvoll aussieht. */
.fasn8-mr-wrapper {
	/* Karte (feste Höhe, Rundung, Schatten, Hintergrund, Aussenabstand)
	   stehen als gemeinsame Variablen und Grundregel in
	   morgestraich-karte.css, identisch zum Countdown daneben. Hier nur,
	   was der Rechner zusätzlich braucht. */
	position: relative;
	padding: 24px 28px;
	justify-content: center;
}

.fasn8-mr-confetti {
	position: absolute;
	top: -8px;
	right: -8px;
	pointer-events: none;
}

.fasn8-mr-title {
	margin: 0 0 4px;
	font-weight: 700;
	font-size: 18px;
	color: var(--fasnacht-color-text, #1a1a1a);
	position: relative;
}

.fasn8-mr-subtitle {
	margin: 0 0 16px;
	font-size: 13px;
	color: var(--fasnacht-color-meta, #707070);
	position: relative;
}

.fasn8-mr-controls {
	margin: 0;
	display: flex;
	align-items: flex-end;
	gap: 14px;
	position: relative;
}

.fasn8-mr-year-field {
	flex: 1;
	min-width: 0;
}

.fasn8-mr-year-label {
	display: block;
	margin: 0 0 4px;
	font-size: 11px;
	color: var(--fasnacht-color-meta, #707070);
}

.fasn8-mr-year {
	width: 100%;
	box-sizing: border-box;
	padding: 0 0 8px;
	border: none;
	border-bottom: 2px solid var(--fasnacht-color-text, #1a1a1a);
	background: transparent;
	font-family: inherit;
	font-size: 22px;
	font-weight: 700;
	color: var(--fasnacht-color-text, #1a1a1a);
	/* Schrittmarker (Spinner) ausblenden -- bei vierstelligen Jahreszahlen
	   nutzlos (1er-Schritte), rein kosmetisch: Pfeiltasten-Bedienung und
	   Screenreader-Ankuendigung als Spinbutton bleiben unveraendert, nur
	   die sichtbaren Klick-Pfeile verschwinden. */
	-moz-appearance: textfield;
	appearance: textfield;
}
.fasn8-mr-year::-webkit-outer-spin-button,
.fasn8-mr-year::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.fasn8-mr-year:focus-visible {
	outline: none;
	border-bottom-color: var(--fasnacht-color-accent, #006699);
}

.fasn8-mr-submit {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: inherit;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	padding: 11px 22px;
	font-size: 14px;
	font-weight: 600;
	background: var(--fasnacht-color-text, #1a1a1a);
	color: #ffffff;
}
.fasn8-mr-submit:hover {
	background: #000000;
}

/* Zwei Zustände: Formular (Standard) und Resultat. Umgeschaltet per
   Klasse auf dem Wrapper statt dem HTML-hidden-Attribut, damit auch
   ohne JS (z.B. deaktiviert) wenigstens das Formular sichtbar bleibt. */
.fasn8-mr-result-state {
	display: none;
}
.fasn8-mr-wrapper.fasn8-mr-has-result .fasn8-mr-form {
	display: none;
}
.fasn8-mr-wrapper.fasn8-mr-has-result .fasn8-mr-result-state {
	display: block;
}

.fasn8-mr-result-label {
	margin: 0 0 8px;
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fasnacht-color-meta, #707070);
	position: relative;
}

.fasn8-mr-result {
	margin: 0;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--fasnacht-color-text, #1a1a1a);
	position: relative;
	/* clamp() statt fixer Schriftgrösse: schrumpft bei wenig Platz
	   (z.B. schmale Spalte) automatisch mit, bleibt bei viel Platz bei
	   1.75rem (= 28px, wie im Design-Vorschlag) gedeckelt. */
	font-size: clamp( 1.25rem, 5vw, 1.75rem );
	overflow-wrap: break-word;
}

/* Kreuz zum Zuruecksetzen (neues Jahr berechnen): rechtsbuendig auf der Zeile
   des Resultats, in beiden Designs am selben Ort (Ivo, 2026-10-23) -- dort
   besser sichtbar und direkter erreichbar als oben in der Ecke, und nicht
   mehr in der Konfetti-Ecke. Resultat und Kreuz stehen in einer Flex-Zeile,
   das Kreuz bleibt darum auch bei kleinerer (clamp) Schriftgroesse auf Linie
   und sitzt auf derselben rechten Kante wie der Berechnen-Knopf im Formular. */
.fasn8-mr-result-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.fasn8-mr-reset {
	flex: none;
	width: 36px;
	height: 36px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	line-height: 1;
	color: var(--fasnacht-color-meta, #707070);
	background: #f1efe9;
	border: none;
	border-radius: 50%;
	cursor: pointer;
}
.fasn8-mr-reset:hover,
.fasn8-mr-reset:focus-visible {
	background: #e5e2da;
}

/* ---------- Design "dunkel" (Einstellung "Kachel-Design") ----------
   Oberer Teil wie beim Morgestraich-Countdown (Scoreboard-Design): dunkler
   Kopf, Titel vorn (orange, wie der Countdown-Zustand "Fasnacht"),
   Untertitel darunter (blaugrau), keine Konfetti-Ecke. Farben, Abstaende
   und Rundung identisch zu .fasn8-ms-header im Countdown-Plugin. Der Kopf
   bleibt im Formular- UND im Resultat-Zustand stehen, darunter wechselt
   nur der weisse Teil. Gleiche feste Hoehe von 170px wie die Standard-
   Karte und der Countdown daneben.
   Selektoren mit zwei Klassen: Theme-Regeln fuer Artikel-Inhalt (p, 0,1,1)
   wuerden sonst die Abstaende der Absaetze im Kopf ueberstimmen.
   Das Resultat-Element bekommt hier KEIN display in der Grundregel, sonst
   wuerde es das display:none des Formular-Zustands ueberstimmen -- nur der
   Resultat-Zustand (fasn8-mr-has-result) schaltet es auf flex. */
.fasn8-mr-wrapper--dunkel {
	padding: 0;
	justify-content: flex-start;
}

.fasn8-mr-wrapper .fasn8-mr-header {
	flex: none;
	background: var(--fasn8-kopf-hintergrund);
	border-radius: var(--fasn8-karte-radius) var(--fasn8-karte-radius) 0 0;
	padding: var(--fasn8-kopf-abstand);
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: var(--fasn8-kopf-luecke);
}

.fasn8-mr-wrapper .fasn8-mr-header__highlight {
	margin: 0;
	order: -1;
	/* Titel-Masse aus den gemeinsamen Variablen (wie die Hervorhebung im
	   Normalzustand des Countdowns), damit beide Koepfe nebeneinander exakt
	   gleich hoch sind. */
	font-size: var(--fasn8-kopf-titel-groesse);
	font-weight: var(--fasn8-kopf-titel-gewicht);
	color: var(--fasn8-kopf-titel-farbe);
}

.fasn8-mr-wrapper .fasn8-mr-header__label {
	margin: 0;
	font-size: var(--fasn8-kopf-label-groesse);
	color: var(--fasn8-kopf-label-farbe);
}

.fasn8-mr-wrapper--dunkel .fasn8-mr-form {
	flex: 1;
	min-height: 0;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 24px;
}

.fasn8-mr-wrapper--dunkel .fasn8-mr-result-state {
	flex: 1;
	min-height: 0;
	box-sizing: border-box;
	flex-direction: column;
	justify-content: center;
	padding: 0 24px;
}

.fasn8-mr-wrapper--dunkel.fasn8-mr-has-result .fasn8-mr-result-state {
	display: flex;
}