/* USt-IdNr-Pruefung: Feld, Pruefknopf, Statuszeile.
 *
 * Kili, 03.09.2026: „eher einen kleinen Button daneben, vielleicht mit Pruef-Icon, dann
 * kann das feedback auch darueber ausgegeben werden, oder halt Button, der dann
 * verschwindet wenn positives Feedback mit gruenem Rahmen und Haken im Feld."
 * Umgesetzt sind BEIDE Haelften: Knopf neben dem Feld, und nach der Bestaetigung
 * verschwindet er zugunsten von gruenem Rahmen und Haken im Feld.
 *
 * ZWEI TOKEN JE FARBE, NICHT EINS. Die Kasse definiert --spfk-ok/-bad nur fuer den
 * Hellmodus und laesst sie nachts unveraendert stehen. Gemessen gegen die tatsaechlichen
 * Gruende (hell #ffffff, dunkel #17181a):
 *   --spfk-ok-deep  #177a35   hell 5,42:1 ✓   dunkel 3,27:1 ✗
 *   --spfk-ok       #22a447   dunkel 5,47:1 ✓
 *   --spfk-bad-deep #a5251d   hell 7,29:1 ✓
 *   --spfk-bad      #e0453c   dunkel 4,30:1 ✗ (unter 4,5 — deshalb #ff6b61 mit 6,37:1)
 * Deshalb eigene Token, die je Modus umgeschaltet werden. Dieselbe Regel wie bei der
 * Akzentfarbe als Text.
 *
 * Das Feld steht nicht nur an der Kasse, sondern auch im Konto unter „Adressen". Dort
 * gibt es `body.spf-kasse-v3` nicht — jedes uebernommene Token braucht daher einen
 * eigenen Rueckfallwert.
 */

.bsl-vat {
	--bsl-ok:       #177a35;
	--bsl-ok-line:  #22a447;
	--bsl-ok-soft:  rgba( 34, 164, 71, .10 );
	--bsl-bad:      #a5251d;
	--bsl-bad-line: #e0453c;
	--bsl-bad-soft: rgba( 224, 69, 60, .08 );
	--bsl-ink:      var( --spfk-ink, #16181c );
	--bsl-muted:    var( --spfk-muted, #5b6270 );
	--bsl-line:     var( --spfk-border, #d7d9dc );
	--bsl-panel:    var( --spfk-panel, #ffffff );
	--bsl-radius:   var( --spfk-r-s, 10px );
}

html.spf-night .bsl-vat,
body.spf-night .bsl-vat {
	--bsl-ok:       #3ec46a; /* 7,87:1 auf #17181a */
	--bsl-bad:      #ff6b61; /* 6,37:1 auf #17181a */
	--bsl-ok-soft:  rgba( 62, 196, 106, .12 );
	--bsl-bad-soft: rgba( 255, 107, 97, .12 );
}

/* ---------- Zeile: Feld + Knopf ---------- */

.bsl-vat__zeile {
	display: flex;
	align-items: stretch;
	gap: 8px;
}

.bsl-vat__zeile > input {
	flex: 1 1 auto;
	/* minmax-Ersatz fuer Flex: ohne min-width:0 waechst ein Eingabefeld ueber seine
	   Spalte hinaus, weil sein Standard-`size` eine Mindestbreite erzeugt. */
	min-width: 0;
}

/* ---------- Pruefknopf ----------
   Kein eigener Knopf: `.bso-btn` mit `--ter` (nur Kante) und `--s` (klein) kommt aus
   spf-buttons.css. Nur was diese Rolle NICHT mitbringt, steht hier — die Bindung an die
   Feldhoehe und das Icon. */

.bsl-vat__knopf {
	flex: 0 0 auto;
	/* 44px ist die Untergrenze fuer Zeigeflaechen; die Feldhoehe liegt darueber und
	   gewinnt, damit Knopf und Feld buendig sind. */
	min-height: 44px;
	gap: 7px;
}

.bsl-vat__knopf svg {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

.bsl-vat__knopf[disabled] {
	cursor: progress;
}

/* Wartezustand: der Ring dreht sich, der Text bleibt stehen. */
.bsl-vat__knopf.is-laeuft svg {
	animation: bsl-vat-dreh 900ms linear infinite;
}

@keyframes bsl-vat-dreh {
	to { transform: rotate( 360deg ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.bsl-vat__knopf.is-laeuft svg { animation: none; opacity: .55; }
}

/* ---------- Bestaetigtes Feld ----------
   Der Haken sitzt IM Feld. Er ist Dekoration — die Aussage steht als Text in der
   Statuszeile, damit sie auch ohne Farbwahrnehmung und mit Vorleseprogramm ankommt. */

.bsl-vat.is-ok .bsl-vat__zeile > input {
	border-color: var( --bsl-ok-line ) !important;
	background-color: var( --bsl-ok-soft );
	padding-right: 38px;
}

.bsl-vat__haken {
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY( -50% );
	width: 18px;
	height: 18px;
	color: var( --bsl-ok );
	pointer-events: none;
}

.bsl-vat__zeile { position: relative; }

.bsl-vat.is-bad .bsl-vat__zeile > input {
	border-color: var( --bsl-bad-line ) !important;
	background-color: var( --bsl-bad-soft );
}

/* ---------- Statuszeile ---------- */

.bsl-vat__status {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	margin: 7px 0 0;
	font-size: 14px;
	line-height: 1.45;
	color: var( --bsl-muted );
}

.bsl-vat__status:empty { display: none; }

.bsl-vat__status svg {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	margin-top: 2px;
}

.bsl-vat__status.is-ok  { color: var( --bsl-ok ); }
.bsl-vat__status.is-bad { color: var( --bsl-bad ); }

/* ---------- Schmale Fenster ----------
   Unter 420px stehen Feld und Knopf untereinander: nebeneinander bliebe fuer die
   Nummer zu wenig Platz, und ATU12345678 soll vollstaendig lesbar sein. */

@media ( max-width: 420px ) {
	.bsl-vat__zeile { flex-wrap: wrap; }
	.bsl-vat__zeile > input { flex: 1 1 100%; }
	.bsl-vat__knopf { width: 100%; }
	.bsl-vat.is-ok .bsl-vat__zeile > input { padding-right: 38px; }
}

/* ---------- Hinweis im Warenkorb (01.10.2026) ----------
 *
 * Steht als eigene Zeile unter der Summentabelle, direkt nach der
 * Mehrwertsteuerzeile, die er erklaert. Dieselbe Stelle nutzt der
 * Lieferzeit-Hinweis (`.spf-deliv`) — deshalb dieselbe ruhige Anmutung:
 * kein Rahmen, keine Signalfarbe. Es ist eine Auskunft, keine Warnung.
 *
 * ⚠️ EIGENE TOKEN MIT RUECKFALL. Die Kassen-Token gibt es im Warenkorb nicht,
 * und `.bsl-vat` steht hier nicht als Elternelement — die Farben oben greifen
 * also nicht. Gemessen gegen die tatsaechlichen Gruende (hell #ffffff,
 * dunkel #17181a): #4a4a4a hell 8,59:1, #c9c9c9 dunkel 9,47:1.
 */

.bsl-vat-hinweis {
	--bsl-hinweis-ink:  #2b2b2b;
	--bsl-hinweis-mute: #4a4a4a;
	--bsl-hinweis-bg:   rgba( 0, 0, 0, .035 );

	/*
	 * ⚠️ BLOCK, NICHT FLEX. Bis 1.33.2 stand hier `display:flex` mit
	 * `flex-direction:column` — ein Rest der ersten Fassung, die aus Ueberschrift
	 * und Absatz bestand. Seit der Text ein FLIESSTEXT mit einem Link darin ist,
	 * macht Flex daraus drei Zeilen: Jedes Kind wird ein eigenes Flex-Element,
	 * und die Textstuecke vor und nach dem Link werden zu anonymen Elementen.
	 * Ergebnis war „… verifiziere bitte / einmal deine / USt-IdNr. /
	 * Der Nachweis …". Kili am 01.10.2026: „Wieso für 3 Wörter 2 eigene Zeilen?"
	 */
	display: block;
	padding: 10px 12px;
	margin: 8px 0 2px;
	border-radius: 6px;
	background: var( --bsl-hinweis-bg );
	font-size: 13px;
	line-height: 1.45;
	color: var( --bsl-hinweis-mute );
	text-align: left;
}

/* Seit dem 01.10.2026 ein einzelner Satz ohne Ueberschrift (Kilis Wortlaut) —
   in einer Summentabelle traegt eine Ueberschrift nicht, sie macht die Zeile
   nur hoeher. Die Regel bleibt stehen, falls wieder eine gebraucht wird. */
.bsl-vat-hinweis strong {
	font-size: 13px;
	font-weight: 700;
	color: var( --bsl-hinweis-ink );
}

/* Die Zeile sitzt in der Summentabelle: Zelle ohne eigene Rahmen und Abstaende,
   sonst erbt sie die Linien der Tabelle und steht doppelt eingerahmt da. */
.bsl-vat-hinweis-row > td {
	border: 0;
	padding: 0;
	/*
	 * ⚠️ `text-align` MUSS hier stehen. Die Summentabelle richtet ihre Zellen
	 * RECHTS aus — dort stehen Betraege. Ohne diese Zeile erbt der Hinweis das
	 * und laeuft rechtsbuendig um; „USt-IdNr." landete allein auf einer Zeile.
	 * Am 01.10.2026 live aufgefallen, nachdem Kili sich den Warenkorb angesehen
	 * hat. Dieselbe Zeile hat `.spf-cart-deliv-row > td` von Anfang an.
	 */
	text-align: left;
}

/* ⚠️ NACHTMODUS UEBER `spf-night`, NIE ueber `prefers-color-scheme`.
 *
 * Das Thema dieser Seite ist eine Entscheidung des NUTZERS (Umschalter im
 * Kopfbereich, `localStorage spflh_theme`), nicht seines Betriebssystems.
 * Der ganze Shop schaltet so; `spf-landing-hero-v2.css` haelt es ausdruecklich
 * fest, nachdem ein Media-Query am 02.09.2026 jeden Besucher mit dunklem
 * System getroffen hatte — auch auf der hellen Seite.
 *
 * Genau das ist mir am 01.10.2026 hier passiert: Der Hinweis stand mit
 * #c9c9c9 auf weissem Grund, gemessen 1,8:1. Kili hat es im Warenkorb gesehen.
 * `html.spf-night` ist das Fruehsignal gegen das Aufblitzen, `body.spf-night`
 * der endgueltige Zustand — beide muessen stehen.
 */
html.spf-night .bsl-vat-hinweis,
body.spf-night .bsl-vat-hinweis {
	--bsl-hinweis-ink:  #ededed;
	--bsl-hinweis-mute: #c9c9c9;
	--bsl-hinweis-bg:   rgba( 255, 255, 255, .06 );
}

/* ---------- Ankersprung: kurz zeigen, wo man gelandet ist ----------
 *
 * Der Hinweis im Warenkorb verlinkt auf `<kasse>#billing_vat_id`. Nach dem
 * Sprung bekommt das Feld fuer gut zwei Sekunden einen Ring. Zweck ist
 * Orientierung, nicht Schmuck: Ohne ihn landet der Blick irgendwo in einem
 * Formular mit zwanzig gleich aussehenden Feldern.
 *
 * ⚠️ Der Ring liegt AUSSERHALB per `box-shadow`, nicht als `outline` — das Feld
 * traegt bei Erfolg bereits einen gruenen Rahmen, und zwei Rahmen uebereinander
 * sehen nach Fehler aus.
 */

.bsl-vat--hervor,
input.bsl-vat--hervor {
	border-radius: 6px;
	box-shadow: 0 0 0 3px rgba( 255, 102, 0, .45 );
	transition: box-shadow 220ms ease-out;
}

/* Wer Bewegung reduziert haben will, bekommt den Ring ohne Ueberblendung —
   die Orientierungshilfe bleibt, die Animation faellt weg. */
@media ( prefers-reduced-motion: reduce ) {
	.bsl-vat--hervor,
	input.bsl-vat--hervor { transition: none; }
}

/* Der Link im Warenkorb-Hinweis: als Link erkennbar, ohne die ruhige Zeile zu
   zerreissen. Fokusring bleibt sichtbar — er ist die einzige Ansage fuer die
   Tastaturbedienung. */
.bsl-vat-hinweis__link {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	font-weight: 700;
}

.bsl-vat-hinweis__link:hover,
.bsl-vat-hinweis__link:focus-visible {
	text-decoration-thickness: 2px;
}

.bsl-vat-hinweis__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: 2px;
}