/* Silbermuschel Zähler - die schlanke Box unter dem Inhalt.
 *
 * Gordon, 11.09.2026: "Das muss eine sehr schlanke Box werden, ähnlich
 * wie der Besucherzähler, nur halt einen Schluck ausführlicher."
 *
 * Deshalb kein Kasten mit Rahmen und Schatten, sondern nur ein leiser
 * Grund und eine dünne Linie oben. Die Box soll die Seite abschliessen,
 * nicht mit ihr konkurrieren.
 *
 * Die Farben kommen aus dem Theme - fällt es aus, greifen die Werte
 * hinter dem Komma. So sieht die Box auch dann anständig aus, wenn sie
 * mal woanders steht.
 */

/* DIE BOX NIMMT SICH DIE GANZE BREITE.
 *
 * Gordon, 03.10.2026: "Die Statistik sollte unterhalb volle
 * Content-Breite sein."
 *
 * Sie war es nicht, und der Grund lag nicht an der Box: Sie landet
 * manchmal in einer Reihe mit anderen Elementen - etwa neben den
 * Knoepfen "zurueck zur Uebersicht" und "nach oben". Steht sie in
 * einem flex- oder grid-Behaelter, schrumpft ein Block auf seinen
 * Inhalt zusammen, und aus 46rem werden 270 Punkte.
 *
 * max-width allein hilft dagegen nicht - das ist eine OBERgrenze.
 * Es braucht eine Untergrenze:
 *
 *     width:100%        nimm die ganze Breite des Behaelters
 *     flex-basis:100%   und in einer flex-Reihe eine eigene Zeile
 *     grid-column:1/-1  und in einem Gitter alle Spalten
 *     clear:both        und neben einem offenen Umfluss darunter
 *
 * Vier Zeilen fuer vier Lagen, in denen sie sonst gequetscht wird.
 * Billiger, als an jeder Einbaustelle nachzusehen - und die naechste
 * Einbaustelle kennt man ohnehin noch nicht.
 */
.smz-box {
	margin: 2rem auto 1rem;
	width: 100%;
	flex-basis: 100%;
	grid-column: 1 / -1;
	clear: both;
	box-sizing: border-box;
	max-width: 46rem;
	padding: .85rem 1.1rem .9rem;
	border-top: 2px solid var(--sms-gold, #bfa24f);
	border-radius: 0 0 12px 12px;
	background: var(--sms-creme, #faf4e6);
	color: var(--sms-tinte, #33402f);
	font-family: var(--sms-text, Lora, Georgia, serif);
	text-align: center;
	line-height: 1.45;
}

.smz-box p { margin: 0; }

/* WENN DIE BOX IN EINEM SPALTEN-BLOCK STECKT, HILFT HIER NICHTS.
 *
 * Nachgemessen auf silbermuschel.de: Die Box lag dort nicht in der
 * Seite, sondern als eine von DREI Spalten eines
 * WordPress-Spalten-Blocks - neben "zurueck zur Uebersicht" und
 * "nach oben zurueck".
 *
 * Damit kann die Box selbst nichts ausrichten. Breit oder schmal
 * entscheidet die Spalte; "width:100%" heisst dann eben 100 Prozent
 * von 270 Punkten.
 *
 * Hier stand kurz eine Regel, die die Spalte mit :has() auf volle
 * Breite gezwungen hat. Sie wirkte - und schob dafuer die beiden
 * Knopf-Spalten uebereinander. Das war der Tausch eines sichtbaren
 * Fehlers gegen einen schlimmeren, und zwar auf einer Seite, deren
 * Aufbau dieses Plugin gar nicht kennt.
 *
 * Darum: Die Box bringt ihre Breite mit, so weit sie kann (siehe
 * oben), und mischt sich nicht in fremde Layouts ein. Steht sie zu
 * schmal, gehoert der Kurzbefehl aus dem Spalten-Block heraus und
 * allein unter den Inhalt. Das ist ein Griff in der Seite und kein
 * Trick im Stylesheet.
 */

/* Die Zeile ganz oben - klein und zurückhaltend, sie sagt nur, worum
   es geht. */
.smz-kopf {
	font-size: .78rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sms-tinte-leise, #6c7a67);
}

/* Die Hauptzahl. */
.smz-summe {
	margin-top: .15rem !important;
	font-size: 1.05rem;
}

.smz-summe strong {
	font-family: var(--sms-titel, "Cormorant Garamond", Garamond, serif);
	font-size: 1.7rem;
	font-weight: 600;
	color: var(--sms-moos-tief, #2f4434);
	/* Damit die Ziffern nicht springen, wenn die Zahl hochzählt. */
	font-variant-numeric: tabular-nums;
}

.smz-wann {
	color: var(--sms-tinte-leise, #6c7a67);
	font-size: .92rem;
}

/* Die einzelnen Systeme.
 *
 * flex mit gap statt Abstände an jeder Marke: So bleibt der Abstand
 * zwischen zwei Marken derselbe, egal wie viele in einer Zeile stehen
 * und wo umgebrochen wird. */
.smz-marken {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .35rem .45rem;
	margin-top: .6rem !important;
}

.smz-marke {
	padding: .16rem .55rem;
	border: 1px solid var(--sms-rand, #e3d7bd);
	border-radius: 999px;
	background: var(--sms-pergament, #fffdf8);
	font-size: .82rem;
	white-space: nowrap;
}

.smz-marke b {
	font-weight: 600;
	color: var(--sms-moos, #4f6f52);
	font-variant-numeric: tabular-nums;
}

.smz-fuss {
	margin-top: .55rem !important;
	font-size: .82rem;
	color: var(--sms-tinte-leise, #6c7a67);
}

/* Die leere Box beim Einbauen - gedaempft, damit man sie auf Anhieb
   von einer echten unterscheidet. */
.smz-box.smz-leer {
	border-top-style: dashed;
	opacity: .72;
}

/* Auf dem Handy darf die Box schmaler atmen. */
@media (max-width: 600px) {
	.smz-box {
		margin: 1.5rem 0 .75rem;
		padding: .7rem .8rem .75rem;
	}

	.smz-summe strong { font-size: 1.45rem; }
	.smz-marke { font-size: .78rem; }
}

/* Beim Ausdrucken hat eine Besucherstatistik auf dem Papier nichts
   verloren - da will jemand seine Karten sehen, nicht unsere Zahlen. */
@media print {
	.smz-box { display: none; }
}