/* Ladezeit-Vergleich „Deine Website gegen unsere“ (P26, Konzept 21.10.2026). Entwurf für Tor D-LZ, Ziel: Child assets/ladezeit/snf-ladezeit.css.
   Maße in rem (Theme: 1rem = 10 px). Farben wie das P22-Modul (Rot #8b0d14, Tinte #111, Fläche #f7f7f5, Linie #e3e1dc).
   Lädt nur auf Seiten mit dem Shortcode [snf_ladezeit_vergleich]. Rückbau: Datei löschen. */
.snf-lz { --lz-rot: #8b0d14; --lz-tinte: #111; --lz-flaeche: #f7f7f5; --lz-linie: #e3e1dc; --lz-gruen: #0f7a3d; --lz-gelb: #c77700;
	margin: 2.8rem 0 1rem; text-align: left; }
.snf-lz *, .snf-lz *::before, .snf-lz *::after { box-sizing: border-box; }

/* Eingabe */
.snf-lz-form label { display: block; font-weight: 700; margin: 0 0 .8rem; }
.snf-lz-zeile { display: flex; gap: 1rem; flex-wrap: wrap; }
.snf-lz-zeile input[type="url"] { flex: 1 1 28rem; min-width: 0; padding: 1.3rem 1.6rem; border: 1.5px solid var(--lz-linie); border-radius: 1.2rem;
	font: inherit; font-size: 1.7rem; background: #fff; color: var(--lz-tinte); }
.snf-lz-zeile input[type="url"]:focus-visible { outline: 3px solid var(--lz-rot); outline-offset: 2px; border-color: var(--lz-rot); }
.snf-lz-zeile button { flex: 0 0 auto; padding: 1.3rem 2.4rem; border: 0; border-radius: 1.2rem; background: var(--lz-rot); color: #fff;
	font: inherit; font-size: 1.6rem; font-weight: 700; cursor: pointer; transition: background .15s ease, transform .15s ease; }
.snf-lz-zeile button:hover { background: #6e0a10; }
.snf-lz-zeile button:focus-visible { outline: 3px solid var(--lz-tinte); outline-offset: 2px; }
.snf-lz-zeile button[disabled] { background: #9a9a96; cursor: wait; }
.snf-lz-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.snf-lz-hinweis { font-size: 1.4rem; color: #555; margin: .8rem 0 0; }

/* Eingabe als Aufforderung (Webdesign-Umbau 22.10.2026, Daniel: das Feld ging unter der Überschrift unter): weiße Karte mit rotem
   Rand, größere Beschriftung mit Pfeil, größeres Feld; leuchtet zweimal auf, sobald es ins Bild kommt (Klasse aus snf-ladezeit.js).
   Rückbau: diesen Abschnitt bis zum Ende des Puls-Keyframes entfernen. */
.snf-lz-form { position: relative; background: #fff; border: 2px solid var(--lz-rot); border-radius: 1.6rem; padding: 2.4rem 2.4rem 2rem;
	box-shadow: 0 16px 40px rgba(139,13,20,.10); }
.snf-lz-form label { font: 700 2rem/1.3 "Space Grotesk", sans-serif; color: var(--lz-tinte); margin: 0 0 1.2rem; }
.snf-lz-form label::after { content: " \2193"; color: var(--lz-rot); }
.snf-lz-zeile input[type="url"] { font-size: 1.9rem; padding: 1.6rem 1.8rem; border: 2px solid #c9c6bf; }
.snf-lz-zeile input[type="url"]::placeholder { color: #8a8a85; }
.snf-lz-zeile button { font-size: 1.7rem; padding: 1.6rem 2.8rem; }
.snf-lz-achtung .snf-lz-zeile input[type="url"] { animation: snf-lz-puls 1.4s ease-out .3s 2; }
@keyframes snf-lz-puls { 0% { box-shadow: 0 0 0 0 rgba(139,13,20,.45); border-color: var(--lz-rot); } 100% { box-shadow: 0 0 0 1.4rem rgba(139,13,20,0); } }

/* Status und Fortschritt */
.snf-lz-status { min-height: 2.4rem; margin: 1.6rem 0 0; font-size: 1.5rem; }
.snf-lz-status[data-art="fehler"] { color: var(--lz-rot); font-weight: 600; }
.snf-lz-balken-lauf { height: .6rem; background: var(--lz-linie); border-radius: .3rem; overflow: hidden; margin-top: .8rem; }
.snf-lz-balken-lauf > div { height: 100%; width: 0; background: var(--lz-rot); transition: width .8s linear; }

/* Variante B: Duell-Karten */
.snf-lz-duell { display: grid; grid-template-columns: 1fr auto 1fr; gap: 2rem; align-items: stretch; margin-top: 2.4rem; }
.snf-lz-karte { background: #fff; border: 1px solid rgba(17,17,17,.12); border-radius: 1.6rem; padding: 2.4rem 2rem; box-shadow: 0 10px 30px rgba(17,17,17,.05);
	display: flex; flex-direction: column; align-items: center; text-align: center; }
.snf-lz-karte.snf-lz-wir { background: var(--lz-rot); border-color: var(--lz-rot); color: #fff; }
.snf-lz-wir p, .snf-lz-wir dt, .snf-lz-wir dd { color: #fff; }
.snf-lz-vs { align-self: center; font: 700 1.4rem/1 "Space Grotesk", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #777; }
.snf-lz-wer { font-weight: 700; margin: 0; font-size: 1.5rem; letter-spacing: .04em; text-transform: uppercase; }
.snf-lz-host { margin: .2rem 0 1.6rem; font-size: 1.5rem; color: #555; word-break: break-all; }
.snf-lz-wir .snf-lz-host { color: rgba(255,255,255,.8); }

/* Tacho: Ring mit Zahl */
.snf-lz-tacho { position: relative; width: 15rem; height: 15rem; margin: 0 0 1.2rem; }
.snf-lz-tacho svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.snf-lz-tacho .snf-lz-ring-bg { fill: none; stroke: rgba(17,17,17,.1); stroke-width: 9; }
.snf-lz-wir .snf-lz-tacho .snf-lz-ring-bg { stroke: rgba(255,255,255,.25); }
.snf-lz-tacho .snf-lz-ring { fill: none; stroke-width: 9; stroke-linecap: round; stroke-dasharray: 402; stroke-dashoffset: 402; transition: stroke-dashoffset 1.1s ease-out; }
.snf-lz-rot .snf-lz-ring { stroke: #d33; }
.snf-lz-gelb .snf-lz-ring { stroke: var(--lz-gelb); }
.snf-lz-gruen .snf-lz-ring { stroke: var(--lz-gruen); }
.snf-lz-wir.snf-lz-gruen .snf-lz-ring, .snf-lz-wir .snf-lz-ring { stroke: #fff; }
.snf-lz-leer .snf-lz-ring-bg { stroke-dasharray: 4 8; }
.snf-lz-wert { position: absolute; inset: 0; display: grid; place-items: center; font: 700 4.6rem/1 "Space Grotesk", sans-serif; color: var(--lz-tinte); }
.snf-lz-wir .snf-lz-wert { color: #fff; }
.snf-lz-leer .snf-lz-wert { color: #aaa; font-size: 3.6rem; }
.snf-lz-lauf .snf-lz-tacho svg { animation: snf-lz-dreh 1.4s linear infinite; }
.snf-lz-lauf .snf-lz-ring { stroke: #bbb; stroke-dasharray: 60 342; stroke-dashoffset: 0; transition: none; }
@keyframes snf-lz-dreh { to { transform: rotate(270deg); } }
.snf-lz-stufe { margin: 0 0 1.4rem; font-weight: 700; font-size: 1.6rem; }
.snf-lz-rot .snf-lz-stufe { color: #b22; }
.snf-lz-gelb .snf-lz-stufe { color: var(--lz-gelb); }
.snf-lz-gruen .snf-lz-stufe { color: var(--lz-gruen); }
.snf-lz-wir .snf-lz-stufe { color: #fff; }
.snf-lz-leer .snf-lz-stufe { color: #777; font-weight: 400; }

/* Drei Kennwerte */
.snf-lz-werte { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; width: 100%; margin: 0; padding-top: 1.4rem; border-top: 1px solid var(--lz-linie); }
.snf-lz-wir .snf-lz-werte { border-top-color: rgba(255,255,255,.3); }
.snf-lz-werte > div { margin: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.snf-lz-karte.snf-lz-leer { justify-content: center; }
.snf-lz-werte dt { font-size: 1.2rem; line-height: 1.3; color: #666; margin: 0 0 .3rem; }
.snf-lz-werte dd { margin: 0; font: 700 1.7rem/1.2 "Space Grotesk", sans-serif; }
.snf-lz-wir .snf-lz-werte dt { color: rgba(255,255,255,.8); }
.snf-lz-stand { margin: 1.2rem 0 0; font-size: 1.3rem; color: rgba(255,255,255,.85); }

/* Fazit */
.snf-lz-fazit { margin-top: 2rem; }
.snf-lz-satz { font-size: 1.7rem; line-height: 1.55; margin: 0 0 1rem; }
.snf-lz-links { margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .6rem 2.4rem; align-items: baseline; }
.snf-lz-klein { font-size: 1.3rem; color: #666; margin: 0; }

/* Variante A: zwei Balken */
.snf-lz-balken { display: grid; gap: 1.2rem; margin: 2rem 0 2rem; }
.snf-lz-b span { display: block; font-size: 1.4rem; margin-bottom: .4rem; }
.snf-lz-spur { height: 3.2rem; background: #fff; border: 1px solid var(--lz-linie); border-radius: .8rem; overflow: hidden; }
.snf-lz-fuell { height: 100%; width: 0; display: flex; align-items: center; justify-content: flex-end; padding-right: 1rem; color: #fff;
	font: 700 1.5rem/1 "Space Grotesk", sans-serif; transition: width 1s ease-out; min-width: 4rem; }
.snf-lz-fuell.snf-lz-rot { background: #d33; }
.snf-lz-fuell.snf-lz-gelb { background: var(--lz-gelb); }
.snf-lz-fuell.snf-lz-gruen { background: var(--lz-gruen); }
.snf-lz-fuell.snf-lz-wir { background: var(--lz-rot); }

/* Handy */
@media (max-width: 767px) {
	.snf-lz-duell { grid-template-columns: 1fr; gap: 1.2rem; }
	.snf-lz-vs { justify-self: center; }
	.snf-lz-zeile button { flex: 1 1 100%; }
	.snf-lz-form { padding: 1.8rem 1.6rem 1.6rem; }
	.snf-lz-form label { font-size: 1.8rem; }
	.snf-lz-werte { grid-template-columns: repeat(3, 1fr); gap: .4rem; }
	.snf-lz-werte dd { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
	.snf-lz-tacho .snf-lz-ring, .snf-lz-fuell, .snf-lz-balken-lauf > div { transition: none; }
	.snf-lz-lauf .snf-lz-tacho svg { animation: none; }
}
/* Ohne Schlüssel (Shortcode-Zustand „aus“): nur unsere Karte, halb so breit. */
.snf-lz-aus .snf-lz-duell { grid-template-columns: minmax(0, 32rem); }