/**
 * SimoneStats
 *
 * Der Akzent liegt in --bs-accent; die alten --bs-teal-Namen zeigen nur noch
 * darauf, damit die vielen Regeln, die sie nennen, unverändert greifen. Wer
 * die Farbe der App ändern will, ändert die vier Akzentwerte hier oben.
 *
 * Alle Flächen- und Schriftwerte sind aus den Bildschirmfotos der Vorlage
 * abgegriffen: fast schwarzer Grund mit grünem Stich, Karten eine Spur
 * heller, gedämpftes Grün als Akzent. Jede Paarung ist auf mindestens
 * 4.5:1 gerechnet – die Schwelle, ab der kleiner Text auch bei Sonnenlicht
 * oder schwachen Augen sicher lesbar bleibt.
 */

.simonestats,
.simonestats-app,
.simonestats-site {
	/* Der Akzent. --bs-accent trägt Text und Symbole, --bs-accent-fill ist
	   die Fläche gefüllter Schaltflächen (weisse Schrift darauf: 6.5:1). */
	--bs-accent: #57b783;
	--bs-accent-light: #7fd0a4;
	--bs-accent-mid: #3f9c6b;
	--bs-accent-fill: #37674f;
	--bs-accent-hover: #457f62;
	--bs-accent-deep: #1f4a35;
	--bs-accent-rgb: 87, 183, 131;

	/* Die alten Namen zeigen auf den Akzent. */
	--bs-teal: var(--bs-accent);
	--bs-teal-light: var(--bs-accent-light);
	--bs-teal-mid: var(--bs-accent-mid);
	--bs-teal-dark: var(--bs-accent-fill);
	--bs-teal-darker: var(--bs-accent-deep);

	/* Flächen, von hinten nach vorn. */
	--bs-bg: #060c0a;
	--bs-surface: #0d1712;
	--bs-raised: #132019;
	--bs-bar: #040a08;
	--bs-header: #08110d;

	--bs-line: #22362b;
	--bs-line-soft: #16241c;

	--bs-text: #f0f4f1;
	--bs-muted: #9aaba1;
	--bs-faint: #8b9c92;

	--bs-green: #07b351;
	--bs-danger: #eb2f5f;
	--bs-warning: #febd69;
	--bs-star: #f0a500;

	/* Die kräftigen Marken-Farben tragen dunklen Text. Weiss käme auf dem
	   hellen Akzent nur auf 2.47:1 – gemessen an der gefüllten Chip-Pille
	   und der laufenden Seitenzahl. Mit diesem Ton sind es 5.9:1. */
	--bs-on-teal: #08301a;
	--bs-on-green: #08301a;
	--bs-on-danger: #26030c;

	/* Aufgehellte Fassungen für die Fälle, in denen Rot selbst Text ist. */
	--bs-danger-text: #f3819e;

	/* Schriftfarben der Status-Abzeichen: als Umriss brauchen sie einen Ton,
	   der auf der Fläche selbst lesbar ist, nicht auf einem farbigen Feld. */
	--bs-green-ink: #35d17a;
	--bs-warning-ink: #febd69;
	--bs-danger-ink: #fba6bc;

	--bs-gradient: linear-gradient(130deg, var(--bs-accent) 0%, var(--bs-accent-fill) 80%, var(--bs-accent-fill) 100%);
	/* Etwas weichere Ecken und ein gestufter Schatten – ein einzelner
	   harter Schatten wirkt flach, zwei Lagen geben Tiefe. */
	/* Textfarbe des Akzents – in der hellen Fassung dunkler als die Fläche. */
	--bs-teal-ink: var(--bs-teal);

	--bs-radius: 14px;
	--bs-radius-sm: 10px;
	--bs-shadow: 0 1px 2px rgba(0, 0, 0, .28), 0 6px 18px rgba(0, 0, 0, .28);
	--bs-shadow-lg: 0 2px 6px rgba(0, 0, 0, .3), 0 18px 40px rgba(0, 0, 0, .42);
	--bs-heading-font: Raleway, "Segoe UI", system-ui, -apple-system, sans-serif;
	--bs-body-font: "Source Sans 3", "Source Sans Pro", "Segoe UI", system-ui, -apple-system, sans-serif;

	/* Ältere Bezeichner, damit portierte Regeln weiter greifen. */
	--bs-dark: var(--bs-text);
	--bs-darker: #1a1a1a;

	box-sizing: border-box;
	color: var(--bs-text);
	font-family: var(--bs-body-font);
	font-size: 16px;
	line-height: 1.5;
}

.simonestats-app *,
.simonestats-app *::before,
.simonestats-app *::after,
.simonestats-site *,
.simonestats-site *::before,
.simonestats-site *::after {
	box-sizing: inherit;
}

.simonestats-app h1,
.simonestats-app h2,
.simonestats-app h3,
.simonestats-app h4,
.simonestats-app h5,
.simonestats-site h1,
.simonestats-site h2,
.simonestats-site h3,
.simonestats-site h4,
.simonestats-site h5 {
	font-family: var(--bs-heading-font);
	color: inherit;
}

.simonestats-app .screen-reader-text,
.simonestats-site .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.bs-icon {
	flex: none;
	vertical-align: middle;
}

/* --------------------------------------------------------------------------
   Schaltflächen
   -------------------------------------------------------------------------- */

.simonestats-app .bs-btn,
.simonestats-site .bs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 9px 18px;
	border: 1px solid transparent;
	border-radius: var(--bs-radius);
	background: var(--bs-surface);
	color: var(--bs-dark);
	font: inherit;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.simonestats-app .bs-btn:focus-visible,
.simonestats-site .bs-btn:focus-visible {
	outline: 3px solid var(--bs-teal-light);
	outline-offset: 2px;
}

.bs-btn-primary {
	background: var(--bs-teal);
	border-color: var(--bs-teal);
	color: var(--bs-on-teal);
}

.bs-btn-primary:hover,
.bs-btn-primary:focus {
	background: var(--bs-teal-dark);
	border-color: var(--bs-teal-ink);
	color: #fff;
}

.bs-btn-ghost {
	background: transparent;
	border-color: var(--bs-line);
	color: var(--bs-dark);
}

.bs-btn-ghost:hover,
.bs-btn-ghost:focus {
	border-color: var(--bs-teal);
	color: var(--bs-teal-ink);
}

.bs-btn-danger {
	background: transparent;
	border-color: var(--bs-line);
	color: var(--bs-danger-text);
	margin-inline-start: auto;
}

.bs-btn-danger:hover,
.bs-btn-danger:focus {
	background: var(--bs-danger);
	border-color: var(--bs-danger);
	color: var(--bs-on-danger);
}

.bs-btn-hero {
	background: var(--bs-teal-dark);
	border: 1px solid var(--bs-teal-darker);
	color: #f3f3f3;
	font-size: 1.05em;
	padding: 14px 28px;
	text-transform: uppercase;
	letter-spacing: .03em;
}

.bs-btn-hero:hover,
.bs-btn-hero:focus {
	background: var(--bs-teal);
	color: var(--bs-on-teal);
}

.bs-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.bs-icon-btn:hover {
	background: rgba(0, 0, 0, .06);
}

/* --------------------------------------------------------------------------
   App-Container
   -------------------------------------------------------------------------- */

.simonestats-app {
	background: transparent;
}

.bs-view[hidden] {
	display: none;
}

/* --------------------------------------------------------------------------
   Werkzeugleiste und Filter
   -------------------------------------------------------------------------- */

.bs-toolbar {
	margin-bottom: 12px;
}

/* Vier Bedienelemente in einer Zeile: Suchen, Filtern, Sortieren,
   Darstellung. Sie müssen auch auf einem 320 Pixel breiten Telefon
   nebeneinander stehen – darum knapp gepolstert und ohne Umbruch. */
.bs-tools {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 6px;
}

.bs-tools[hidden] {
	display: none;
}

.bs-tool {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	/* 36 Pixel hoch: darunter trifft der Daumen daneben. */
	min-height: 36px;
	padding: 0 10px;
	border: 1px solid var(--bs-line);
	border-radius: 999px;
	background: var(--bs-surface);
	color: var(--bs-text);
	font: inherit;
	font-size: .85rem;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color .15s ease;
}

.bs-tool:hover,
.bs-tool:focus-visible,
.bs-tool:focus-within {
	border-color: var(--bs-teal);
}

.bs-tool .bs-icon {
	flex: 0 0 auto;
	color: var(--bs-teal-ink);
}

/* Nur die Lupe: quadratisch und so schmal wie möglich. */
.bs-tool-icon {
	flex: 0 0 auto;
	justify-content: center;
	width: 36px;
	padding: 0;
}

.bs-tool-label {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Die Sortierung darf als Einzige schrumpfen – ihr Text ist der längste
   und lässt sich am ehesten kürzen. */
.bs-tool-sort {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}

/* Die Auswahlliste liegt unsichtbar über der Schaltfläche: Das Telefon
   öffnet seine gewohnte Auswahl, und daneben steht trotzdem lesbar,
   wonach gerade sortiert wird. */
.simonestats .bs-tool-sort select {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	background: none;
	cursor: pointer;
}

/* Aufgeklappte Suche: Sie nimmt die ganze Zeile ein, statt sich mit den
   anderen drei um den Platz zu streiten. */
.bs-search {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 6px 0 12px;
	background: var(--bs-surface);
	border: 1px solid var(--bs-line);
	border-radius: 999px;
	color: var(--bs-muted);
}

.bs-search[hidden] {
	display: none;
}

.bs-search:focus-within {
	border-color: var(--bs-teal);
	box-shadow: 0 0 0 3px rgba(var(--bs-accent-rgb), .25);
}

.bs-search input {
	flex: 1;
	min-width: 0;
	padding: 8px 0;
	border: 0;
	background: transparent;
	color: var(--bs-dark);
	font: inherit;
	font-size: .9rem;
}

.bs-search input:focus {
	outline: none;
}

.bs-search-close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--bs-muted);
	cursor: pointer;
}

.bs-search-close:hover,
.bs-search-close:focus-visible {
	color: var(--bs-text);
}

/* Formularfelder müssen schrumpfen dürfen. Ein input hat von sich aus eine
   Mindestbreite, und die fällt je nach Gerät verschieden aus: Safari auf dem
   iPhone gibt einem Datumsfeld deutlich mehr, als Chromium auf dem Rechner
   annimmt. Ohne min-width: 0 sprengen zwei solche Felder nebeneinander ihre
   Zeile, und die ganze Seite lässt sich seitwärts schieben. */
.simonestats input,
.simonestats select,
.simonestats textarea,
.simonestats-app input,
.simonestats-app select,
.simonestats-app textarea {
	min-width: 0;
	max-width: 100%;
}

/* Das Datumsfeld auf dem iPhone.
   Safari zeichnet es als eigenes Bedienelement mit fester Eigenbreite und
   grosszügigen Innenabständen: Das Feld wurde damit breiter als sein Platz
   und deutlich höher als die Felder daneben. Mit appearance: none ist es
   ein gewöhnlicher Kasten, der sich an width hält; die drei inneren
   Bausteine, aus denen Safari das Datum zusammensetzt, bekommen ihre
   Abstände genommen und dürfen ebenfalls schrumpfen. */
.simonestats input[type="date"] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	min-width: 0;
	/* Ohne das steht das Datum auf dem iPhone mittig statt links wie
	   überall sonst. */
	text-align: left;
}

.simonestats input[type="date"]::-webkit-date-and-time-value {
	margin: 0;
	min-width: 0;
	width: 100%;
	text-align: left;
}

.simonestats input[type="date"]::-webkit-datetime-edit {
	padding: 0;
	min-width: 0;
}

.simonestats input[type="date"]::-webkit-datetime-edit-fields-wrapper {
	padding: 0;
}

/* Der Hinweis in einem leeren Datumsfeld. Er liegt über dem Feld statt
   darin: input ist ein ersetztes Element und kennt kein ::before. Darum
   umschliesst eine Hülle jedes Datumsfeld und trägt den Hinweis; sie ist
   genau so hoch und so breit wie das Feld, auch wenn Safari es niedriger
   zeichnet als Chrome. (Vorher hing der Hinweis in einem 42 Pixel hohen
   Kasten am unteren Rand des ganzen Feldblocks und rutschte auf dem
   iPhone über die obere Kante hinaus.) Das Merkmal setzt das JavaScript,
   sobald sich der Wert ändert. */
.bs-date {
	display: block;
	position: relative;
	min-width: 0;
}

/* Als Block sitzt das Feld ohne den Zeilenabstand, den ein Browser unter
   einem eingebetteten Element frei lässt – sonst wäre die Hülle ein paar
   Pixel höher als das Feld und der Hinweis säße zu tief. */
.bs-date input[type="date"] {
	display: block;
}

.bs-date[data-leer="1"]::after {
	content: "TT.MM.JJJJ";
	position: absolute;
	/* Deckt sich mit dem Feld: 10 Pixel Innenabstand plus 1 Pixel Rahmen
	   setzen den Hinweis auf dieselbe Grundlinie wie ein Datum. */
	inset: 0;
	padding-inline-start: 11px;
	display: flex;
	align-items: center;
	color: var(--bs-faint);
	font-size: .92rem;
	pointer-events: none;
}

/* Beim Tippen verschwindet er – dann setzt der Browser selbst den Cursor. */
.bs-date[data-leer="1"]:focus-within::after {
	content: none;
}

/* Auf dem Rechner schreibt Chrome in ein leeres Datumsfeld von sich aus
   "tt.mm.jjjj". Zusammen mit dem Hinweis oben stünde das doppelt – also
   wird die eigene Anzeige unsichtbar gemacht, solange das Feld leer und
   nicht angetippt ist. So sieht es auf beiden Geräten gleich aus. */
.bs-date[data-leer="1"] input[type="date"]::-webkit-datetime-edit {
	color: transparent;
}

.bs-date[data-leer="1"]:focus-within input[type="date"]::-webkit-datetime-edit {
	color: inherit;
}

.simonestats-app select,
.simonestats-app input[type="text"],
.simonestats-app input[type="url"],
.simonestats-app input[type="number"],
.simonestats-app input[type="date"],
.simonestats-app textarea {
	padding: 9px 10px;
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius);
	background: var(--bs-surface);
	color: var(--bs-dark);
	font: inherit;
	max-width: 100%;
}

.simonestats-app select:focus,
.simonestats-app input:focus,
.simonestats-app textarea:focus {
	outline: none;
	border-color: var(--bs-teal);
	box-shadow: 0 0 0 3px rgba(var(--bs-accent-rgb), .25);
}

.bs-layout-toggle {
	display: inline-flex;
	/* Darf nicht schrumpfen: In einer engen Werkzeugzeile würde overflow
	   hidden sonst zwei der drei Schaltflächen abschneiden. */
	flex: 0 0 auto;
	border: 1px solid var(--bs-line);
	/* Pille wie die Schaltflächen daneben. */
	border-radius: 999px;
	overflow: hidden;
	background: var(--bs-surface);
}

.bs-layout-toggle button {
	display: inline-flex;
	align-items: center;
	/* Mindestens 36 Pixel hoch – darunter trifft der Daumen daneben.
	   Schmaler als früher, damit die vier Bedienelemente in eine Zeile
	   passen; die Höhe bleibt als Tippfläche. */
	min-height: 36px;
	padding: 0 8px;
	border: 0;
	background: transparent;
	color: var(--bs-muted);
	cursor: pointer;
}

.bs-layout-toggle button.is-active {
	background: var(--bs-teal);
	color: var(--bs-on-teal);
}

.bs-count {
	margin: 0 0 12px;
	color: var(--bs-muted);
	font-size: .9em;
}

/* --------------------------------------------------------------------------
   Bücherliste
   -------------------------------------------------------------------------- */

.bs-books.is-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 16px;
}

.bs-books.is-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bs-book {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0;
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius);
	background: var(--bs-surface);
	box-shadow: var(--bs-shadow);
	text-align: left;
	cursor: pointer;
	overflow: hidden;
	font: inherit;
	color: inherit;
	transition: transform .12s ease, box-shadow .12s ease;
}

.bs-book:hover,
.bs-book:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
	outline: none;
}

.bs-book-cover {
	position: relative;
	aspect-ratio: 2 / 3;
	background: linear-gradient(150deg, var(--bs-teal-light), var(--bs-teal-dark));
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.bs-book-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bs-book-initials {
	color: rgba(255, 255, 255, .9);
	font-family: var(--bs-heading-font);
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: .05em;
}

.bs-book-body {
	padding: 0 12px 12px;
}

.bs-book-title {
	display: block;
	font-family: var(--bs-heading-font);
	font-weight: 600;
	font-size: .95rem;
	line-height: 1.3;
	margin-bottom: 2px;
}

.bs-book-author {
	display: block;
	color: var(--bs-muted);
	font-size: .85rem;
}

.bs-book-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	margin-top: 8px;
	font-size: .78rem;
	color: var(--bs-muted);
}

/* Das Lesedatum auf der Karte – nur in der Vorgangszählung, wo dasselbe
   Buch mehrfach in der Liste steht. */
.bs-book-when {
	font-variant-numeric: tabular-nums;
}

.bs-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--bs-bg);
	color: var(--bs-dark);
	font-size: .72rem;
	font-weight: 600;
}

.bs-badge-read {
	background: rgba(var(--bs-accent-rgb), .15);
	color: var(--bs-teal-ink);
}

.bs-badge-reading {
	background: rgba(254, 189, 105, .25);
	color: #8a5a00;
}

.bs-badge-aborted {
	background: rgba(235, 47, 94, .12);
	color: #a01338;
}

.bs-stars {
	color: #f0a500;
	letter-spacing: .05em;
}

/* Listendarstellung */

.bs-books.is-list .bs-book {
	flex-direction: row;
	align-items: center;
	gap: 12px;
	padding: 8px 12px 8px 8px;
}

.bs-books.is-list .bs-book-cover {
	width: 44px;
	min-width: 44px;
	aspect-ratio: 2 / 3;
	border-radius: 4px;
}

.bs-books.is-list .bs-book-initials {
	font-size: .9rem;
}

.bs-books.is-list .bs-book-body {
	padding: 0;
	flex: 1;
}

/* --------------------------------------------------------------------------
   Tabellenansicht
   -------------------------------------------------------------------------- */

.bs-books.is-table {
	display: block;
}

/* Der Rahmen rollt, nicht die Seite. */
.bs-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius);
	background: var(--bs-surface);
	-webkit-overflow-scrolling: touch;
}

.bs-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .92rem;
}

/* Statt seitwärts zu rollen, fallen enge Spalten weg. Auf dem Handy bleiben
   Titel, Seiten und Bewertung; alles Weitere kommt mit dem Platz dazu. */
.bs-col-authors,
.bs-col-genre,
.bs-col-finished {
	display: none;
}

@media (min-width: 560px) {
	.bs-col-authors {
		display: table-cell;
	}
}

@media (min-width: 780px) {
	.bs-col-finished {
		display: table-cell;
	}
}

@media (min-width: 980px) {
	.bs-col-genre {
		display: table-cell;
	}
}

.bs-table th,
.bs-table td {
	padding: 10px 14px;
	text-align: left;
	vertical-align: middle;
	border-bottom: 1px solid var(--bs-line);
}

.bs-table thead th {
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--bs-raised);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--bs-muted);
	white-space: nowrap;
}

.bs-table tbody tr:last-child td {
	border-bottom: 0;
}

.bs-table tbody tr {
	cursor: pointer;
	transition: background-color .12s ease;
}

.bs-table tbody tr:hover,
.bs-table tbody tr:focus-visible {
	background: var(--bs-raised);
	outline: none;
}

.bs-table .is-numeric {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.bs-table-title {
	font-weight: 500;
	color: var(--bs-text);
	/* Lange Titel dürfen umbrechen, statt die Tabelle breiter zu machen,
	   als der Bildschirm ist. */
	overflow-wrap: anywhere;
}

/* Auf schmalen Schirmen zählt jeder Pixel. */
@media (max-width: 860px) {
	.bs-table th,
	.bs-table td {
		padding: 9px 9px;
	}

	.bs-table td.bs-col-authors {
		max-width: 130px;
	}
}

.bs-table-title .bs-badge {
	margin-left: 8px;
	vertical-align: middle;
}

/* Autor und Genre dürfen kürzen – der Titel nicht. */
.bs-table td.bs-col-authors,
.bs-table td.bs-col-genre {
	max-width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--bs-muted);
}

.bs-table td.bs-col-finished,
.bs-table td.bs-col-pages {
	white-space: nowrap;
	color: var(--bs-muted);
}

.bs-table-sort {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	cursor: pointer;
}

.bs-table-sort:hover {
	color: var(--bs-teal-ink);
}

.bs-table-sort.is-active {
	color: var(--bs-teal-ink);
}

.bs-table-arrow {
	font-size: .7em;
}

/* --------------------------------------------------------------------------
   Leerzustand und Seitenzahlen
   -------------------------------------------------------------------------- */

.bs-empty {
	padding: 48px 24px;
	text-align: center;
	color: var(--bs-muted);
}

.bs-empty .bs-icon {
	color: var(--bs-teal-ink);
	margin-bottom: 12px;
}

/* Vom Home-Bildschirm gestartet gibt es keine Browserleiste – unten muss
   Platz für den Bedienstrich des Telefons bleiben. */
@media (display-mode: standalone) {
	.bs-footer {
		padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
	}
}

/* Mehrere kleine Formulare nebeneinander statt untereinander. */
.bs-inline-form {
	display: inline-block;
	margin: 0 8px 8px 0;
}

/* Wert zum Abschreiben, mit Knopf daneben. */
.bs-copyfield {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
}

.bs-copyfield label {
	flex: 0 0 100%;
	font-weight: 600;
	font-size: .85rem;
	color: var(--bs-muted);
}

.simonestats .bs-copyfield input {
	flex: 1 1 240px;
	width: auto;
	min-width: 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .85rem;
}

.bs-copyfield .bs-btn {
	flex: 0 0 auto;
}

/* Fortschrittsbalken der Umschlagsuche */

.bs-progress {
	height: 8px;
	margin: 12px 0 16px;
	overflow: hidden;
	border-radius: 999px;
	background: var(--bs-bar);
}

.bs-progress span {
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: var(--bs-teal);
	transition: width .3s ease;
}

.bs-covers-status {
	margin: 0;
	color: var(--bs-muted);
}

.bs-tile-period {
	color: var(--bs-teal-ink);
	font-weight: 700;
	white-space: nowrap;
}

/* Auf der türkisen Kachel wäre Türkis auf Türkis nicht zu lesen. */
.bs-tile-accent .bs-tile-period {
	color: inherit;
	opacity: .75;
}

.bs-empty-mark {
	display: block;
	margin-bottom: 14px;
	font-size: 2.6rem;
	line-height: 1;
	opacity: .55;
}

.bs-empty p {
	margin: 0;
	max-width: 30em;
	margin-inline: auto;
}

.bs-empty h3 {
	margin: 0 0 8px;
	color: var(--bs-dark);
}

.bs-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 20px;
}

.bs-pagination button {
	min-width: 38px;
	padding: 7px 12px;
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius);
	background: var(--bs-surface);
	color: var(--bs-dark);
	font: inherit;
	cursor: pointer;
}

.bs-pagination button[disabled] {
	opacity: .5;
	cursor: default;
}

.bs-pagination button.is-current {
	background: var(--bs-teal);
	border-color: var(--bs-teal);
	color: var(--bs-on-teal);
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   Formulare
   -------------------------------------------------------------------------- */

/* Ein Formular liest man in Spalten, nicht in Feldern: eine auf dem Handy,
   höchstens zwei auf dem Schirm. Bei auto-fit wurden daraus auf breiten
   Fenstern vier – der Blick springt dann hin und her, und Paare wie
   "Std / Min" werden zusammengequetscht. */
.bs-field-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
}

@media (min-width: 620px) {
	.bs-field-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.bs-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
}

.bs-field label {
	font-size: .82rem;
	font-weight: 600;
	color: var(--bs-muted);
}

.bs-field-wide {
	grid-column: 1 / -1;
}

.bs-field-small {
	max-width: 100%;
}

.bs-required {
	color: var(--bs-danger-text);
}

.bs-form-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--bs-line);
}

/* Auf dem Handy passen drei Schaltflächen nicht nebeneinander. Sie brachen
   um und "Löschen" landete allein und rechtsbündig in einer zweiten Zeile –
   ausgerechnet der Knopf, den man nicht aus Versehen treffen soll. Jetzt
   untereinander über die volle Breite, mit Abstand vor dem Löschen. */
@media (max-width: 560px) {
	.bs-form-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.bs-form-actions .bs-btn {
		width: 100%;
		justify-content: center;
	}

	.simonestats .bs-form-actions .bs-btn-danger {
		margin-inline-start: 0;
		margin-top: 8px;
	}
}

.bs-hint {
	color: var(--bs-muted);
	font-size: .88rem;
}

/* --------------------------------------------------------------------------
   Buch hinzufügen
   -------------------------------------------------------------------------- */

.bs-add-search h3 {
	margin-top: 0;
}

.bs-lookup-form {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin-bottom: 18px;
}

/* Das Suchfeld bekommt eine eigene Zeile, sonst wird der Platzhalter auf
   dem Handy abgeschnitten. Die beiden Schaltflächen teilen sich die nächste. */
.bs-lookup-form .bs-search {
	flex: 1 1 100%;
}

.bs-lookup-form .bs-btn {
	flex: 1 1 auto;
}

.bs-lookup-results {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 12px;
}

.bs-result {
	display: flex;
	gap: 12px;
	padding: 12px;
	background: var(--bs-surface);
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius);
}

.bs-result-cover {
	width: 56px;
	min-width: 56px;
	aspect-ratio: 2 / 3;
	border-radius: 4px;
	object-fit: cover;
	background: var(--bs-bg);
}

.bs-result-body {
	flex: 1;
	min-width: 0;
}

.bs-result-title {
	font-family: var(--bs-heading-font);
	font-weight: 600;
	font-size: .95rem;
	margin: 0 0 2px;
}

.bs-result-meta {
	margin: 0 0 10px;
	color: var(--bs-muted);
	font-size: .84rem;
}

.bs-result-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.bs-result-actions .bs-btn {
	padding: 6px 12px;
	font-size: .84rem;
}

.bs-manual {
	margin-top: 28px;
	padding: 16px;
	background: var(--bs-surface);
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius);
}

.bs-manual > summary {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--bs-heading-font);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.bs-manual > summary::-webkit-details-marker {
	display: none;
}

.bs-manual[open] > summary {
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--bs-line);
}

/* --------------------------------------------------------------------------
   Statistik
   -------------------------------------------------------------------------- */

.bs-stats-head {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin-bottom: 18px;
}

.bs-stats-head label {
	font-weight: 600;
	color: var(--bs-muted);
}

.bs-stats-head .bs-btn {
	margin-inline-start: auto;
}

/* Formularfelder sind sonst 100 % breit – ein Jahr braucht keine 1150 Pixel.
   Die Auswahl muss so spezifisch sein wie die allgemeine Formularregel, die
   weiter unten steht. */
.simonestats .bs-stats-head select {
	width: auto;
	min-width: 160px;
	max-width: 260px;
}

/* Auf dem Handy reicht die Breite nicht für beides nebeneinander. Statt den
   Knopf ins zweite Glied nach rechts zu schieben, bekommt er eine eigene
   Zeile über die ganze Breite – das trifft der Daumen sicher. */
@media (max-width: 560px) {
	.simonestats .bs-stats-head select {
		flex: 1 1 auto;
		min-width: 0;
		max-width: none;
	}

	.bs-stats-head .bs-btn {
		flex: 1 1 100%;
		margin-inline-start: 0;
		justify-content: center;
	}
}

.bs-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	/* Oben brauchte es Luft: Die Kacheln klebten am Ring darüber. */
	margin: 22px 0;
}

/* Ohne Deckel packt auto-fit auf breiten Schirmen sieben Kacheln in eine
   Reihe – die werden dann schmaler als auf dem Handy. Drei sind genug. */
@media (min-width: 720px) {
	.bs-tiles {
		grid-template-columns: repeat(3, 1fr);
	}
}

.bs-tile {
	/* Bezugsgrösse für die mitwachsende Wertschrift weiter unten. */
	container-type: inline-size;
	padding: 16px;
	background: var(--bs-surface);
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius);
	box-shadow: var(--bs-shadow);
}

/* Eine Kachel, die weiterführt. Sie sieht aus wie die anderen, ist aber
   ein Knopf – nur der Rahmen leuchtet auf, wenn man sie ansteuert. */
.bs-tile-link {
	display: block;
	width: 100%;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color .15s ease, transform .15s ease;
}

.bs-tile-link:hover,
.bs-tile-link:focus-visible {
	border-color: var(--bs-teal);
	transform: translateY(-2px);
}

.bs-tile-accent {
	background: var(--bs-gradient);
	border-color: transparent;
	color: #f3f3f3;
}

.bs-tile-accent .bs-tile-label,
.bs-tile-accent .bs-tile-sub {
	color: rgba(255, 255, 255, .85);
}

.bs-tile-label {
	display: block;
	font-size: .8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--bs-muted);
}

.bs-tile-value {
	display: block;
	margin: 6px 0 2px;
	font-family: var(--bs-heading-font);
	/* Mitwachsend, damit der längste Wert – "CHF 490.93" – in die schmale
	   Kachel passt, statt umzubrechen oder anzustossen. Massgeblich ist die
	   Kachel, nicht das Fenster: Auf breiten Schirmen stehen mehrere Kacheln
	   nebeneinander, sind also einzeln schmaler. Die vw-Zeile bleibt als
	   Rückfall für Browser ohne Container-Abfragen stehen. */
	font-size: clamp(1.1rem, 5.2vw, 1.9rem);
	font-size: clamp(1.05rem, 15cqi, 1.9rem);
	font-weight: 700;
	line-height: 1.1;
	white-space: nowrap;
}

.bs-tile-sub {
	display: block;
	font-size: .82rem;
	color: var(--bs-muted);
}

/* Zwei Angaben untereinander statt in einer Zeile: „2.4 Bücher/Monat“ und
   „621 verschiedene Bücher“ passen nebeneinander auf keinem Handy. */
.bs-tile-sub-line {
	display: block;
}

/* Ein Verweis in der Zusatzzeile – etwa auf die Lektüren ohne Seitenzahl.
   Er sieht aus wie die Zeile, in der er steht, und zeigt nur durch die
   Unterstreichung, dass sich hier etwas antippen lässt. */
.bs-sub-link {
	display: inline;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--bs-teal);
	font: inherit;
	text-align: start;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.bs-panels {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 16px;
}

/* Mehr als drei Diagramme nebeneinander werden zu schmal, um sie zu lesen. */
@media (min-width: 1240px) {
	.bs-panels {
		grid-template-columns: repeat(3, 1fr);
	}
}

.bs-panel {
	padding: 16px;
	background: var(--bs-surface);
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius);
	box-shadow: var(--bs-shadow);
	min-width: 0;
}

.bs-panel-wide {
	grid-column: 1 / -1;
}

.bs-panel h4 {
	margin: 0 0 4px;
	font-size: 1rem;
}

.bs-panel-note {
	margin: 0 0 10px;
	font-size: .84rem;
	color: var(--bs-muted);
}

.bs-chart {
	margin-top: 10px;
	overflow-x: auto;
}

.bs-chart svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.bs-chart-empty {
	padding: 24px 0;
	color: var(--bs-muted);
	font-size: .88rem;
	text-align: center;
}

.bs-chart-bar {
	fill: var(--bs-teal);
	transition: fill .15s ease;
}

.bs-chart-bar:hover {
	fill: var(--bs-teal-dark);
}

/* Balken, die weiterführen: Die Trefferfläche reicht über die ganze
   Spalte, sonst träfe man einen niedrigen Balken kaum. */
.bs-chart-hit {
	cursor: pointer;
}

.bs-chart-hit:hover .bs-chart-bar,
.bs-chart-hit:focus-visible .bs-chart-bar {
	fill: var(--bs-teal-light);
}

.bs-chart-hit:focus-visible {
	outline: 2px solid var(--bs-teal);
	outline-offset: 1px;
}

.bs-chart-hint {
	margin: 8px 0 0;
	color: var(--bs-muted);
	font-size: .8rem;
}

/* Der Umschalter über der Statistik: Bücher oder Hörbücher. Zwei gleich
   breite Hälften in einer Pille – so ist auf einen Blick zu sehen, dass
   es genau zwei Möglichkeiten gibt und welche gerade gilt. */
.bs-medium-switch {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	margin: 0 0 14px;
	padding: 3px;
	border: 1px solid var(--bs-line);
	border-radius: 999px;
	background: var(--bs-surface);
}

.bs-medium-switch button {
	min-height: 38px;
	padding: 0 12px;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--bs-muted);
	font: inherit;
	font-size: .92rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.bs-medium-switch button.is-active {
	background: var(--bs-teal);
	color: var(--bs-on-teal);
}

.bs-medium-switch button:not(.is-active):hover {
	color: var(--bs-text);
}

.bs-panel[hidden] {
	display: none;
}

/* Folgt die Liste einer Frage aus der Statistik, steht das über ihr. */
/* Der Grund, warum diese Liste so aussieht, wie sie aussieht – und bei
   mehrfach Gelesenem darunter die Stufen: alle, zweimal, dreimal. */
.bs-question {
	display: block;
	margin: 0 0 10px;
}

.bs-question[hidden] {
	display: none;
}

.bs-question-head {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 6px 5px 12px;
	border: 1px solid var(--bs-teal);
	border-radius: 999px;
	background: var(--bs-surface);
	font-size: .82rem;
}

.bs-question-steps {
	display: flex;
	flex-wrap: nowrap;
	gap: 3px;
	margin-top: 8px;
	padding-bottom: 2px;
	overflow-x: auto;
	scrollbar-width: none;
}

.bs-question-steps::-webkit-scrollbar {
	display: none;
}

.bs-step {
	flex: 0 0 auto;
	min-height: 36px;
	padding: 0 9px;
	border: 1px solid var(--bs-line);
	border-radius: 999px;
	background: transparent;
	color: var(--bs-text);
	font: inherit;
	font-size: .72rem;
	line-height: 1;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.bs-step:hover {
	border-color: var(--bs-teal);
}

.bs-step.is-active {
	background: var(--bs-teal);
	border-color: var(--bs-teal);
	color: var(--bs-on-teal);
	font-weight: 600;
}

.bs-question-clear {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--bs-muted);
	font: inherit;
	cursor: pointer;
}

.bs-question-clear:hover,
.bs-question-clear:focus-visible {
	color: var(--bs-text);
}

.bs-chart-line {
	fill: none;
	stroke: var(--bs-teal-dark);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.bs-chart-area {
	fill: rgba(var(--bs-accent-rgb), .15);
}

.bs-chart-dot {
	fill: var(--bs-teal-dark);
}

.bs-chart-axis {
	stroke: var(--bs-line);
	stroke-width: 1;
}

.bs-chart-label {
	fill: var(--bs-muted);
	font-size: 10px;
	font-family: var(--bs-body-font);
}

.bs-chart-value {
	fill: var(--bs-dark);
	font-size: 10px;
	font-weight: 600;
	font-family: var(--bs-body-font);
}

/* Balken mit Beschriftung links (Autoren, Genres) */

.bs-rows {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
}

.bs-row {
	display: grid;
	grid-template-columns: minmax(80px, 40%) 1fr auto;
	gap: 10px;
	align-items: center;
	font-size: .86rem;
}

.bs-row-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bs-row-track {
	height: 10px;
	background: var(--bs-bg);
	border-radius: 999px;
	overflow: hidden;
}

.bs-row-fill {
	display: block;
	height: 100%;
	background: var(--bs-teal);
	border-radius: 999px;
}

.bs-row-value {
	font-weight: 600;
	color: var(--bs-muted);
	font-variant-numeric: tabular-nums;
}

.bs-donut-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
}

.bs-donut-wrap svg {
	width: 140px;
	flex: none;
}

.bs-legend {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .86rem;
}

.bs-legend li {
	display: flex;
	align-items: center;
	gap: 8px;
}

.bs-legend .bs-swatch {
	width: 12px;
	height: 12px;
	border-radius: 3px;
	flex: none;
}

.bs-records {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 12px;
}

/* Ein Rekord ist eine Schaltfläche: Antippen öffnet das Buch. Er soll
   aber aussehen wie die Karte, die er vorher war – darum kein Knopfrahmen,
   nur ein Aufleuchten beim Darüberfahren. */
.bs-record {
	display: block;
	width: 100%;
	padding: 12px;
	border: 1px solid transparent;
	background: var(--bs-bg);
	border-radius: var(--bs-radius);
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color .15s ease;
}

.bs-record:hover,
.bs-record:focus-visible {
	border-color: var(--bs-teal);
}

.bs-record-label {
	display: block;
	font-size: .78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--bs-muted);
	margin-bottom: 4px;
}

.bs-record-title {
	display: block;
	font-family: var(--bs-heading-font);
	font-weight: 600;
}

.bs-record-meta {
	display: block;
	font-size: .82rem;
	color: var(--bs-muted);
}

/* --------------------------------------------------------------------------
   Dialoge
   -------------------------------------------------------------------------- */

.bs-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	justify-content: center;
	padding: 16px;
	/* Auf dem Handy liegen Adressleiste und Systemleiste über der Seite. */
	padding-top: max(16px, env(safe-area-inset-top));
	padding-bottom: max(16px, env(safe-area-inset-bottom));
	/* Notausgang: Passt der Kasten trotz allem nicht, rollt der Rahmen. */
	overflow-y: auto;
	overscroll-behavior: contain;
}

.bs-modal[hidden] {
	display: none;
}

.bs-modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(32, 32, 32, .55);
}

.bs-modal-box {
	position: relative;
	width: 100%;
	max-width: 760px;
	/* align-items: center schneidet beim Überlaufen oben ab – die Kopfzeile
	   wäre dann unerreichbar. margin: auto zentriert ohne diesen Fehler. */
	margin: auto;
	max-height: 90vh;
	/* iOS rechnet vh so, als wäre die Adressleiste ausgeblendet; dvh ist die
	   Höhe, die wirklich zu sehen ist. Deshalb steht vh oben als Rückfall. */
	max-height: calc(90dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
	display: flex;
	flex-direction: column;
	background: var(--bs-surface);
	border-radius: 12px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
	overflow: hidden;
}

.bs-modal-narrow {
	max-width: 420px;
}

.bs-modal-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	background: var(--bs-teal);
	color: var(--bs-on-teal);
}

.bs-modal-head h3 {
	margin: 0;
	flex: 1;
	font-size: 1.05rem;
	color: #fff;
}

.bs-modal-body {
	padding: 18px;
	overflow-y: auto;
}

.bs-detail-summary {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 18px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--bs-line);
}

.bs-detail-head {
	display: flex;
	gap: 14px;
	/* stretch, damit die Textspalte so hoch wird wie der Umschlag und die
	   Knöpfe unten andocken können. */
	align-items: stretch;
}

.bs-detail-cover {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	min-width: 84px;
	aspect-ratio: 2 / 3;
	overflow: hidden;
	border-radius: 4px;
	background: linear-gradient(150deg, var(--bs-teal-dark), #1f4d4d);
}

.bs-detail-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bs-detail-lead {
	/* Ohne flex: 1 blieb rechts neben dem Text ein toter Streifen. */
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	padding-top: 2px;
}

.bs-detail-author {
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--bs-muted);
}

.bs-detail-series {
	font-size: .88rem;
	color: var(--bs-muted);
}

.bs-detail-marks {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin-top: 2px;
}

/* Kennzahlen als Beschriftung/Wert-Paare in zwei Spalten. */
.bs-detail-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
	gap: 12px 14px;
	margin: 0;
}

.bs-detail-fact {
	min-width: 0;
}

.bs-detail-facts dt {
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--bs-faint, var(--bs-muted));
}

.bs-detail-facts dd {
	margin: 2px 0 0;
	font-size: .95rem;
	color: var(--bs-text);
}

.bs-readings {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--bs-line);
}

/* Ohne aufgeklapptes Formular stünden hier zwei Trennlinien direkt
   untereinander – die Übersicht bringt ihre eigene schon mit. */
.bs-detail-edit[hidden] + .bs-readings {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.bs-readings h4 {
	margin: 0 0 8px;
	font-size: .95rem;
}

.bs-readings ul {
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.bs-readings li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	padding: 6px 10px;
	background: var(--bs-bg);
	border-radius: var(--bs-radius);
	font-size: .86rem;
}

/* Der Zeitraum steht ungekürzt da – ein halbes Datum ist keine Angabe.
   Die Mindestbreite sorgt dafür, dass auf schmalen Geräten lieber die
   Auswahl in die zweite Zeile rutscht, als dass "26.04.2024" zu
   "26.04…" wird. */
.bs-reading-when {
	flex: 1 1 auto;
	min-width: 11.2em;
	white-space: nowrap;
	/* Als Schaltfläche: Ein Antippen klappt die Datumsfelder auf. Sie soll
	   trotzdem aussehen wie der Text, der sie vorher war – nur die
	   gestrichelte Linie verrät, dass sich hier etwas ändern lässt. Die
	   Mindesthöhe ist die Tippfläche: Ein 20 Pixel hoher Text wäre mit dem
	   Daumen nicht zu treffen. */
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	margin-block: -6px;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: start;
	text-decoration: underline dotted;
	text-underline-offset: 3px;
	cursor: pointer;
}

/* Der Ausgang des Durchgangs: klein, aber mit voller Tippfläche.
   Die Regel steht mit .simonestats davor, weil weiter unten „.simonestats
   select“ jeder Auswahl volle Breite gibt – ohne diesen Vorrang schöbe sie
   das Lesedatum aus der Zeile. */
/* Auswahl und Kreuz als Paar – so wandern sie gemeinsam in die zweite
   Zeile, wenn der Zeitraum daneben keinen Platz mehr lässt. */
.bs-reading-actions {
	display: flex;
	align-items: center;
	gap: 2px;
	margin-inline-start: auto;
}

.simonestats .bs-reading-state {
	flex: 0 0 auto;
	width: auto;
	min-height: 34px;
	max-width: 8.6em;
	padding: 2px 22px 2px 8px;
	border: 1px solid var(--bs-line);
	border-radius: 999px;
	background: var(--bs-surface);
	color: var(--bs-text);
	font: inherit;
	font-size: .76rem;
}

.bs-readings li .bs-reading-remove {
	/* Das Kreuz war 19 Pixel hoch – mit dem Daumen kaum zu treffen. Die
	   Fläche wächst, das Zeichen bleibt klein. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin-block: -8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--bs-muted);
	cursor: pointer;
}

.bs-readings li .bs-reading-remove:hover {
	color: var(--bs-danger);
}

/* Die aufgeklappte Zeile: dieselben zwei Datumsfelder wie beim Anlegen,
   darunter Abbrechen und Speichern. */
.bs-reading-edit {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 10px;
	align-items: end;
}

.bs-reading-edit .bs-field {
	min-width: 0;
}

.bs-reading-edit-actions {
	grid-column: 1 / -1;
	display: flex;
	gap: 8px;
}

.bs-reading-edit-actions .bs-btn {
	flex: 1 1 0;
	min-height: 42px;
}

/* Zwei Datumsfelder nebeneinander, darunter der Knopf über die ganze
   Breite. Als Raster mit minmax(0, 1fr) und nicht als Flexzeile: Eine
   Flexzeile wächst mit ihrem Inhalt, und ein Datumsfeld bringt auf dem
   iPhone eine Eigenbreite mit, die grösser ist als der Platz. Die Spalte
   eines Rasters tut das nicht – sie bleibt bei ihrem halben Anteil,
   egal was hineinsoll. */
.bs-reading-add {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 10px;
	align-items: end;
}

.bs-reading-add .bs-field {
	min-width: 0;
}

/* Der Ausgang steht unter den beiden Daten über die ganze Breite – als
   dritte Spalte bliebe von den Datumsfeldern nichts übrig. */
.bs-reading-add .bs-field-wide {
	grid-column: 1 / -1;
}

.bs-export-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 0;
}

.bs-login-gate .bs-empty {
	padding: 56px 24px;
}

/* Barcode-Scanner */

.bs-scanner-stage {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--bs-darker);
	border-radius: var(--bs-radius);
	overflow: hidden;
}

.bs-scanner-stage video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bs-scanner-frame {
	position: absolute;
	inset: 22% 12%;
	border: 3px solid var(--bs-teal-light);
	border-radius: 8px;
	box-shadow: 0 0 0 100vmax rgba(32, 32, 32, .35);
}

.bs-scanner-status {
	margin: 12px 0 0;
	text-align: center;
	font-size: .9rem;
	color: var(--bs-muted);
}

/* Kurzmeldungen */

.bs-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	z-index: 100001;
	max-width: min(92vw, 460px);
	padding: 12px 20px;
	border-radius: 999px;
	background: var(--bs-darker);
	color: #fff;
	font-size: .9rem;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}

.bs-toast[hidden] {
	display: none;
}

.bs-toast.is-error {
	background: var(--bs-danger);
}


/* --------------------------------------------------------------------------
   Grundgerüst der Webapp
   -------------------------------------------------------------------------- */

.simonestats {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--bs-bg);
	/* Die Seite darf sich nie seitwärts schieben lassen. Ragt doch einmal
	   etwas über den rechten Rand – auf dem iPhone reicht dafür schon ein
	   Eingabefeld, das breiter sein will, als der Platz hergibt –, wird es
	   abgeschnitten statt zum Wegschieben eingeladen. clip und nicht hidden:
	   hidden würde einen eigenen Rollbereich aufmachen und die klebende
	   Kopfzeile lösen. Die Reiterleiste rollt weiter, die hat ihren
	   eigenen Rollbereich. */
	overflow-x: clip;
}

.simonestats * {
	box-sizing: border-box;
}

.simonestats h1,
.simonestats h2,
.simonestats h3,
.simonestats h4 {
	font-family: var(--bs-heading-font);
	line-height: 1.25;
}

.simonestats a {
	color: var(--bs-teal-ink);
}

.simonestats .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Kopfzeile */

.bs-header {
	background: var(--bs-header);
	border-bottom: 1px solid #1a1a1a;
	position: sticky;
	top: 0;
	z-index: 50;
}

.bs-header-inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 16px;
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 64px;
	flex-wrap: wrap;
}

.bs-brand {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: var(--bs-text);
	margin-inline-end: auto;
}

.bs-brand-name {
	font-family: var(--bs-heading-font);
	font-weight: 700;
	font-size: 1.15rem;
	line-height: 1.15;
}

.bs-brand-sub {
	font-size: .78rem;
	opacity: .85;
}

.bs-nav,
.bs-header-actions {
	display: flex;
	align-items: center;
	gap: 2px;
	flex-wrap: wrap;
}

/* Die vier Bereiche als schmale Schaltflächen: Umriss, wenig Polster,
   gefüllt nur der aktive. Vorher war es eine Zeile mit Sinnbild über der
   Beschriftung – gut zu treffen, aber doppelt so hoch. */
.bs-nav {
	gap: 6px;
	flex-wrap: nowrap;
	/* Passt es nicht, rollt die Zeile – wie in der Vorlage. */
	overflow-x: auto;
	scrollbar-width: none;
}

.bs-nav::-webkit-scrollbar {
	display: none;
}

.bs-nav .bs-nav-link {
	position: relative;
	flex: 0 0 auto;
	padding: 6px 9px;
	border: 1px solid var(--bs-line);
	border-radius: 9px;
	font-size: .78rem;
	white-space: nowrap;
}

/* Die Schaltfläche darf klein aussehen, die Fläche zum Antippen nicht: Ein
   unsichtbarer Rahmen macht aus 31 Pixeln Höhe 43, ohne dass sich am Bild
   etwas ändert. */
.bs-nav .bs-nav-link::after {
	content: "";
	position: absolute;
	inset: -6px -2px;
}

.bs-nav .bs-nav-link.is-active {
	border-color: var(--bs-teal);
	background: rgba(var(--bs-accent-rgb), .14);
	color: var(--bs-text);
}

.bs-nav-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 12px;
	border: 0;
	border-bottom: 3px solid transparent;
	border-radius: 4px 4px 0 0;
	background: transparent;
	color: var(--bs-muted);
	font: inherit;
	font-family: var(--bs-heading-font);
	font-weight: 600;
	font-size: .92rem;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
}

.bs-nav-link:hover,
.bs-nav-link:focus-visible {
	color: var(--bs-text);
	background: rgba(255, 255, 255, .06);
}

.bs-nav-link.is-active {
	color: var(--bs-teal-ink);
	border-bottom-color: var(--bs-teal);
}

.bs-logout {
	margin: 0;
	display: inline-flex;
}

/* Hauptbereich */

.bs-main {
	flex: 1;
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding: 24px 16px 48px;
}

/* Einstellungen, Hilfe und Import sind gewöhnliche Seiten. Sie heissen
   bewusst nicht bs-page: so nennt sich weiter unten die Buchseite, die
   fest über allem liegt und seitlich hereinfährt. Trügen beide denselben
   Namen, stünden diese drei Seiten unsichtbar rechts neben dem Schirm. */
.bs-textpage > h1 {
	margin: 0 0 20px;
	font-size: 1.7rem;
}

.bs-centered {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 48px 0;
}

/* --------------------------------------------------------------------------
   Anmeldung
   -------------------------------------------------------------------------- */

/* Mittig statt oben klebend – der Rest der Seite ist ohnehin leer. */
.bs-centered-full {
	align-items: center;
	min-height: min(100vh - 90px, 780px);
	padding: 24px 16px;
	position: relative;
	overflow: hidden;
}

/* Ein weicher türkiser Schein hinter der Karte nimmt der Fläche die Leere. */
.bs-centered-full::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(46rem 30rem at 50% -10%, rgba(var(--bs-accent-rgb), .16), transparent 65%),
		radial-gradient(30rem 24rem at 88% 108%, rgba(235, 47, 95, .10), transparent 62%);
	pointer-events: none;
}

.bs-login {
	position: relative;
	width: 100%;
	padding: 34px 30px 30px;
	border: 1px solid var(--bs-line-soft);
	border-radius: 20px;
	background: linear-gradient(180deg, #3e3e3e 0%, var(--bs-surface) 100%);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, .05) inset,
		0 18px 44px rgba(0, 0, 0, .45);
}

.bs-login .bs-card-head {
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: 24px;
}

.bs-login-mark {
	display: block;
	width: 72px;
	height: 72px;
	margin: 0 auto 16px;
	border-radius: 18px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, .4);
}

.bs-login .bs-card-head h1 {
	font-size: 1.7rem;
	letter-spacing: -.01em;
	color: var(--bs-text);
}

.bs-login .bs-card-head p {
	font-size: .95rem;
}

.bs-login .bs-field {
	margin-bottom: 16px;
}

.bs-login .bs-field label {
	font-size: .8rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--bs-muted);
}

.simonestats .bs-login input {
	padding: 13px 14px;
	border-radius: 12px;
	font-size: 1rem;
}

.simonestats .bs-login .bs-btn {
	padding: 13px 18px;
	border-radius: 12px;
	font-size: 1rem;
}

/* Karten */

.bs-card {
	background: var(--bs-surface);
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius);
	box-shadow: var(--bs-shadow);
	padding: 22px 24px;
	margin-bottom: 20px;
	width: 100%;
	max-width: 780px;
}

.bs-card-narrow {
	max-width: 420px;
}

.bs-card h2 {
	margin: 0 0 12px;
	font-size: 1.15rem;
}

.bs-card h3 {
	margin: 24px 0 10px;
	font-size: 1rem;
}

.bs-card-head {
	text-align: center;
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--bs-line);
}

.bs-card-head h1 {
	margin: 0 0 4px;
	font-size: 1.5rem;
	color: var(--bs-teal-ink);
}

.bs-card-head p {
	margin: 0;
	color: var(--bs-muted);
	font-size: .92rem;
}

/* Meldungen */

.bs-messages {
	max-width: 1180px;
	margin: 16px auto 0;
	padding: 0 16px;
}

.bs-message {
	padding: 12px 16px;
	border-radius: var(--bs-radius);
	border-inline-start: 4px solid var(--bs-teal);
	background: var(--bs-surface);
	color: var(--bs-text);
	margin-bottom: 12px;
	font-size: .94rem;
}

.bs-message.is-success {
	border-inline-start-color: var(--bs-teal);
	background: var(--bs-surface);
}

.bs-message.is-error {
	border-inline-start-color: var(--bs-danger);
	background: #3d2b30;
}

.bs-message.is-warning {
	border-inline-start-color: var(--bs-warning);
	background: #3b3428;
}

.bs-error-list {
	margin: 8px 0 0 18px;
	font-size: .86rem;
}

/* Bericht des Imports: eine Zahl je Zeile, damit man nachrechnen kann. */

.bs-report-head {
	margin: 10px 0 6px;
}

.bs-report {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 4px;
}

.bs-report li {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.bs-report li strong {
	flex: 0 0 auto;
	min-width: 3.4em;
	text-align: end;
	font-variant-numeric: tabular-nums;
	color: var(--bs-teal);
}

.bs-report li.is-null strong {
	color: var(--bs-muted);
	font-weight: 400;
}

.bs-report li.is-null span {
	color: var(--bs-muted);
}

.bs-report-note {
	margin: 12px 0 0;
	font-size: .88rem;
	color: var(--bs-muted);
}

.bs-report-note.is-warning {
	color: var(--bs-warning);
}

/* Formulare ausserhalb der App */

.simonestats input[type="text"],
.simonestats input[type="email"],
.simonestats input[type="password"],
.simonestats input[type="url"],
.simonestats input[type="number"],
.simonestats input[type="date"],
.simonestats input[type="search"],
.simonestats input[type="file"],
.simonestats select,
.simonestats textarea {
	width: 100%;
	padding: 9px 10px;
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius);
	background: var(--bs-surface);
	color: var(--bs-dark);
	font: inherit;
}

.simonestats input:focus,
.simonestats select:focus,
.simonestats textarea:focus {
	outline: none;
	border-color: var(--bs-teal);
	box-shadow: 0 0 0 3px rgba(var(--bs-accent-rgb), .25);
}

.bs-field-check {
	margin: 14px 0;
}

.bs-field-check label {
	display: inline-flex;
	align-items: flex-start;
	gap: 8px;
	font-size: .94rem;
}

.bs-field-check input {
	width: auto;
	margin-top: 3px;
}

.bs-btn-block {
	width: 100%;
}

/* Checkliste bei der Einrichtung */

.bs-checklist {
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
}

.bs-checklist li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 8px 0;
	border-bottom: 1px solid var(--bs-line);
}

.bs-checklist small {
	display: block;
	color: var(--bs-muted);
	font-size: .84rem;
}

.bs-check {
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: .8rem;
	font-weight: 700;
	/* Weiss auf Türkis käme nur auf 2.3:1. */
	color: var(--bs-on-teal);
}

.bs-checklist li.is-ok .bs-check {
	background: var(--bs-teal);
}

.bs-checklist li.is-missing .bs-check {
	background: var(--bs-danger);
	color: var(--bs-on-danger);
}

/* Tabellen */

.bs-table-scroll {
	overflow-x: auto;
	margin: 0 0 16px;
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius);
}

.bs-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .9rem;
}

.bs-table th,
.bs-table td {
	padding: 8px 12px;
	text-align: start;
	border-bottom: 1px solid var(--bs-line);
	vertical-align: top;
}

.bs-table th {
	background: var(--bs-bg);
	font-family: var(--bs-heading-font);
	font-weight: 600;
	white-space: nowrap;
}

.bs-table tbody tr:last-child td {
	border-bottom: 0;
}

.bs-table code {
	font-size: .86em;
	background: var(--bs-bg);
	padding: 1px 5px;
	border-radius: 3px;
}

.bs-mapping select {
	min-width: 220px;
}

/* Automatisch erkannte Spalten hervorheben. */
.bs-mapping select.is-mapped {
	border-color: var(--bs-teal);
	box-shadow: 0 0 0 1px var(--bs-teal);
}

.bs-samples {
	color: var(--bs-muted);
	font-size: .82rem;
	max-width: 340px;
}

.bs-file-info {
	padding: 10px 14px;
	background: var(--bs-bg);
	border-radius: var(--bs-radius);
	font-size: .92rem;
}

/* Listen und Angaben */

.bs-user-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bs-user-list li {
	padding: 8px 0;
	border-bottom: 1px solid var(--bs-line);
}

.bs-user-list small {
	display: block;
	color: var(--bs-muted);
	font-size: .85rem;
}

.bs-facts {
	display: grid;
	grid-template-columns: minmax(120px, auto) 1fr;
	gap: 6px 16px;
	margin: 0;
	font-size: .9rem;
}

.bs-facts dt {
	font-weight: 600;
	color: var(--bs-muted);
}

.bs-facts dd {
	margin: 0;
	word-break: break-all;
}

/* Hilfeseite */

.bs-faq-group {
	margin: 30px 0 12px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--bs-teal);
	font-size: 1.1rem;
}

.bs-faq-item {
	background: var(--bs-surface);
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius);
	margin-bottom: 8px;
	max-width: 780px;
}

.bs-faq-item > summary {
	padding: 13px 16px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 10px;
}

.bs-faq-item > summary::-webkit-details-marker {
	display: none;
}

.bs-faq-item > summary::before {
	content: "+";
	color: var(--bs-teal-ink);
	font-size: 1.3rem;
	line-height: 1;
	font-weight: 700;
}

.bs-faq-item[open] > summary::before {
	content: "–";
}

.bs-faq-item > p {
	margin: 0;
	padding: 0 16px 16px 42px;
}

/* Fusszeile */

.bs-footer {
	background: var(--bs-bar);
	color: var(--bs-muted);
	font-size: .86rem;
	margin-top: auto;
}

.bs-footer-inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 16px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
	align-items: center;
}

.bs-footer a {
	color: var(--bs-teal-ink);
	margin-inline-end: 14px;
}

.bs-footer-links {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 0;
	align-items: center;
	/* Fest notiertes Grau blieb in der hellen Fassung auf Weiss stehen und
	   kam dort nur auf 1.6:1. */
	color: var(--bs-muted);
}

@media (max-width: 720px) {
	.bs-hide-sm {
		display: none;
	}

	.bs-brand-sub {
		display: none;
	}

	/* Der Kopf nahm auf einem 320er Schirm 187 Pixel ein – ein Fünftel der
	   Seite, bevor der erste Inhalt kam. Jetzt zwei feste Zeilen: oben Name
	   und Werkzeuge, darunter die vier Bereiche. */
	.bs-header-inner {
		gap: 6px;
		padding: 6px 12px;
		min-height: 0;
	}

	.bs-brand-name {
		font-size: 1rem;
	}

	.bs-header-actions {
		flex-wrap: nowrap;
		gap: 0;
	}

	.bs-header-actions .bs-nav-link {
		padding: 8px;
	}

	/* Eigene Zeile für die Bereiche, damit oben Platz für die Werkzeuge
	   bleibt. Die Schaltflächen selbst bleiben schmal. */
	.bs-nav {
		order: 3;
		width: 100%;
		padding-bottom: 2px;
	}

	.bs-nav .bs-nav-link {
		padding: 7px 9px;
		font-size: .78rem;
	}

	.bs-main {
		padding: 16px 12px 40px;
	}

	.bs-card {
		padding: 18px 16px;
	}
}

/* Auf den schmalsten Geräten rutschte der Name sonst in eine eigene Zeile. */
@media (max-width: 360px) {
	.bs-brand-name {
		font-size: .92rem;
	}

	.bs-header-actions .bs-nav-link {
		padding: 8px 6px;
	}
}

/* ==========================================================================
   Anpassungen an die Optik der Bookstats-App
   ========================================================================== */

/* Reste des hellen Schemas nachziehen. */

.bs-card {
	background: var(--bs-surface);
	border-color: var(--bs-line);
}

.bs-card-head {
	border-bottom-color: var(--bs-line);
}

.bs-card-head h1 {
	color: var(--bs-teal-ink);
}

.simonestats input[type="text"],
.simonestats input[type="email"],
.simonestats input[type="password"],
.simonestats input[type="url"],
.simonestats input[type="number"],
.simonestats input[type="date"],
.simonestats input[type="search"],
.simonestats input[type="file"],
.simonestats select,
.simonestats textarea,
.simonestats-app select,
.simonestats-app input,
.simonestats-app textarea {
	background: var(--bs-bar);
	border-color: var(--bs-line);
	color: var(--bs-text);
	color-scheme: dark;
}

.simonestats-app .bs-btn,
.simonestats .bs-btn {
	background: var(--bs-raised);
	color: var(--bs-text);
	border-color: var(--bs-line);
}

/* display: inline-flex würde sonst das hidden-Attribut überstimmen. */
.simonestats-app .bs-btn[hidden],
.simonestats .bs-btn[hidden] {
	display: none;
}

/* Wie in der Vorlage: die gefüllte Schaltfläche im satten Grün mit weisser
   Schrift (6.5:1), nicht im hellen Akzent mit dunkler. */
.bs-btn-primary,
.simonestats .bs-btn-primary {
	background: var(--bs-accent-fill);
	border-color: var(--bs-accent-fill);
	color: #ffffff;
}

.bs-btn-primary:hover,
.bs-btn-primary:focus {
	background: var(--bs-accent-hover);
	border-color: var(--bs-accent-hover);
	color: #ffffff;
}

.bs-btn-ghost,
.simonestats .bs-btn-ghost {
	background: transparent;
	border-color: var(--bs-line);
	color: var(--bs-text);
}

.bs-btn-ghost:hover,
.bs-btn-ghost:focus {
	border-color: var(--bs-teal);
	color: var(--bs-teal-ink);
}

.bs-icon-btn:hover {
	background: rgba(255, 255, 255, .1);
}

.bs-table th {
	background: var(--bs-bar);
	color: var(--bs-text);
}

.bs-table th,
.bs-table td {
	border-bottom-color: var(--bs-line);
}

.bs-table code,
.simonestats code {
	background: var(--bs-bar);
	color: var(--bs-teal-ink);
}

.bs-table-scroll,
.bs-file-info {
	border-color: var(--bs-line);
	background: var(--bs-bar);
}

.bs-checklist li,
.bs-user-list li {
	border-bottom-color: var(--bs-line);
}

.bs-record {
	background: var(--bs-bar);
}

.bs-faq-item {
	background: var(--bs-surface);
	border-color: var(--bs-line);
}

/* Das Suchfeld war türkis ausgefüllt und damit das lauteste Element der
   Liste – lauter als die Bücher. Jetzt ein ruhiges Feld mit Umriss, das
   türkis erst aufleuchtet, wenn man hineintippt. */

.bs-search {
	background: var(--bs-bar);
	border-color: var(--bs-line);
	color: var(--bs-muted);
	/* Pille wie die Schaltflächen daneben – nicht der alte Kasten. */
	border-radius: 999px;
}

/* Die Auswahl muss so spezifisch sein wie die allgemeinen Formularfarben
   weiter oben, sonst sitzt ein zweiter Kasten im Suchfeld. */
/* Das Feld sitzt in der Pille und ist selbst kein Kasten: kein Rahmen,
   kein eigenes Polster und vor allem kein eigener Leuchtrand beim Tippen –
   den zeigt die Pille um das Ganze herum, sonst stünde ein zweiter Kasten
   im ersten. */
.simonestats .bs-search input {
	padding: 8px 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--bs-text);
	font-weight: 500;
}

.simonestats .bs-search input:focus {
	box-shadow: none;
}

.simonestats .bs-search input::placeholder {
	color: var(--bs-faint);
	opacity: 1;
}

.bs-search .bs-icon {
	color: var(--bs-teal-ink);
}

.bs-search:focus-within {
	border-color: var(--bs-teal);
	box-shadow: 0 0 0 3px rgba(var(--bs-accent-rgb), .28);
}

/* --------------------------------------------------------------------------
   Filter-Chips über der Liste
   -------------------------------------------------------------------------- */

/* Alle vier Lesestände nebeneinander in einer Zeile. Auf einem sehr
   schmalen Telefon reicht der Platz nicht ganz – dann rollt die Zeile
   seitwärts, statt umzubrechen und die Bücher nach unten zu schieben. */
.bs-chips {
	display: flex;
	flex-wrap: nowrap;
	gap: 3px;
	margin: 0 0 12px;
	padding: 0 0 2px;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}

.bs-chips::-webkit-scrollbar {
	display: none;
}

.bs-chip {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 3px;
	/* Klein in der Schrift, aber weiter 36 Pixel hoch – darunter trifft
	   der Daumen daneben. */
	min-height: 36px;
	padding: 0 7px;
	border: 1px solid var(--bs-line);
	border-radius: 999px;
	background: transparent;
	color: var(--bs-text);
	font: inherit;
	font-size: .72rem;
	line-height: 1;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* display: inline-flex würde sonst das hidden-Attribut überstimmen. */
.bs-chip[hidden] {
	display: none;
}

.bs-chip:hover {
	border-color: var(--bs-teal);
}

.bs-chip.is-active {
	background: var(--bs-teal);
	border-color: var(--bs-teal);
	color: var(--bs-on-teal);
	font-weight: 600;
}

/* Die Zahl steht neben der Beschriftung, aber eine Spur kleiner – so
   passen alle vier Lesestände nebeneinander, ohne dass die Zahl fehlt. */
.bs-chip-count {
	color: var(--bs-muted);
	font-size: .64rem;
	font-variant-numeric: tabular-nums;
}

/* War halbdurchsichtiges Weiss – auf dem hellen Grün nicht zu lesen.
   Derselbe Ton wie die Beschriftung daneben, nur kleiner gesetzt. */
.bs-chip.is-active .bs-chip-count {
	color: var(--bs-on-teal);
}

/* --------------------------------------------------------------------------
   Bücherliste im Stil der App
   -------------------------------------------------------------------------- */

/* Jedes Buch eine eigene Karte mit Luft dazwischen, statt Zeilen in einem
   Block. Auf dem Handy ist die Karte die Einheit, die man antippt – als
   Trennstrichliste war nicht zu sehen, wo ein Eintrag aufhört. */
.bs-books.is-list {
	gap: 10px;
	background: transparent;
	border-radius: 0;
	overflow: visible;
}

.bs-books.is-list .bs-book {
	flex-direction: row;
	align-items: flex-start;
	gap: 14px;
	padding: 12px;
	border: 1px solid var(--bs-line-soft);
	border-bottom: 1px solid var(--bs-line-soft);
	border-radius: var(--bs-radius);
	background: var(--bs-surface);
	box-shadow: none;
}

.bs-books.is-list .bs-book:hover,
.bs-books.is-list .bs-book:focus-visible {
	transform: none;
	border-color: var(--bs-teal);
	background: var(--bs-surface);
	box-shadow: none;
}

.bs-books.is-list .bs-book-cover {
	/* Wie in der Vorlage: der Umschlag gross genug, um ihn zu erkennen. */
	width: 66px;
	min-width: 66px;
	aspect-ratio: 2 / 3;
	border-radius: 6px;
	border-radius: 3px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
}

.bs-books.is-list .bs-book-body {
	padding: 2px 0 0;
	flex: 1;
	min-width: 0;
}

.bs-books.is-list .bs-book-author {
	order: -1;
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--bs-muted);
	margin-bottom: 3px;
	/* Sammelbände nennen bis zu acht Autoren – eine Zeile genügt, den Rest
	   zeigt die Detailansicht. */
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.bs-books.is-list .bs-book-title {
	font-size: 1rem;
	font-weight: 500;
	font-family: var(--bs-body-font);
	color: var(--bs-text);
	white-space: normal;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bs-books.is-list .bs-book-body {
	display: flex;
	flex-direction: column;
}

/* Kachelansicht: Karten auf dunklem Grund. */

.bs-books.is-grid .bs-book {
	background: var(--bs-surface);
	border-color: var(--bs-line-soft);
}

/* Ein Sammelband mit acht Autoren machte die ganze Kachelreihe doppelt so
   hoch, weil alle Kacheln einer Reihe mitwachsen. */
.bs-books.is-grid .bs-book-title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bs-books.is-grid .bs-book-author {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bs-book-cover {
	background: linear-gradient(150deg, var(--bs-teal-dark), #1f4d4d);
}

.bs-book-title {
	color: var(--bs-text);
}

.bs-book-author,
.bs-book-meta {
	color: var(--bs-muted);
}

/* Statusabzeichen als Umriss statt als gefülltes Feld. Ausgefüllt zogen sie
   mehr Aufmerksamkeit auf sich als der Buchtitel daneben. */

.bs-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border: 1px solid var(--bs-line);
	border-radius: 999px;
	background: transparent;
	color: var(--bs-muted);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .01em;
}

.bs-badge-read {
	border-color: rgba(53, 209, 122, .45);
	background: rgba(53, 209, 122, .1);
	color: var(--bs-green-ink);
}

.bs-badge-reading {
	border-color: rgba(254, 189, 105, .45);
	background: rgba(254, 189, 105, .1);
	color: var(--bs-warning-ink);
}

.bs-badge-aborted {
	border-color: rgba(243, 129, 158, .4);
	background: rgba(243, 129, 158, .1);
	/* Eigener, hellerer Ton: --bs-danger-text käme auf der rosa unterlegten
	   Pille nur auf 3.9:1 und wäre damit zu schwach für kleine Schrift. */
	color: var(--bs-danger-ink);
}

.bs-stars {
	color: var(--bs-star);
}

/* --------------------------------------------------------------------------
   Statistik: grosser Ring als Blickfang
   -------------------------------------------------------------------------- */

.bs-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 28px 20px 32px;
	margin-bottom: 22px;
	background: var(--bs-surface);
	border-radius: var(--bs-radius);
}

.bs-hero-ring {
	width: min(260px, 62vw);
	height: auto;
}

/* Auf breiten Schirmen stünde der Ring sonst allein in einem fast leeren
   Band. Nebeneinander mit der Legende füllt er die Zeile. */
@media (min-width: 720px) {
	.bs-hero {
		flex-direction: row;
		justify-content: center;
		gap: 40px;
		padding: 24px 28px;
	}

	.bs-hero-ring {
		width: 200px;
	}

	.bs-hero-legend {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		margin: 0;
		font-size: 1rem;
	}
}

.bs-hero-ring .bs-hero-track {
	fill: none;
	stroke: var(--bs-danger);
	stroke-width: 11;
}

.bs-hero-ring .bs-hero-value {
	fill: none;
	stroke: var(--bs-teal);
	stroke-width: 11;
	stroke-linecap: butt;
	transform: rotate(-90deg);
	transform-origin: 50% 50%;
	transition: stroke-dasharray .6s ease;
}

/* Die Größen sind Nutzereinheiten der 100×100-Zeichenfläche, nicht Pixel. */

.bs-hero-number {
	fill: var(--bs-text);
	font-family: var(--bs-heading-font);
	font-size: 17px;
	font-weight: 300;
	text-anchor: middle;
}

.bs-hero-number .bs-hero-total {
	fill: var(--bs-muted);
	font-size: 9px;
}

.bs-hero-caption {
	fill: var(--bs-muted);
	font-family: var(--bs-body-font);
	font-size: 5px;
	letter-spacing: .1em;
	text-anchor: middle;
	text-transform: uppercase;
}

.bs-hero-legend {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 18px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
	font-size: .85rem;
	color: var(--bs-muted);
}

.bs-hero-legend li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.bs-hero-legend .bs-swatch {
	width: 10px;
	height: 10px;
	border-radius: 2px;
}

/* Kennzahlen und Diagramme */

.bs-tile {
	background: var(--bs-surface);
	border-color: var(--bs-line-soft);
}

/* Der Verlauf läuft vom hellen Akzent ins satte Grün und ist über den
   grössten Teil dunkel – hier bleibt Weiss richtig, nicht der dunkle Ton
   für einfarbige Akzentflächen. */
.bs-tile-accent {
	background: var(--bs-gradient);
	border-color: transparent;
	color: #ffffff;
}

.bs-tile-accent .bs-tile-label,
.bs-tile-accent .bs-tile-sub {
	color: rgba(255, 255, 255, .82);
}

.bs-tile-value {
	color: inherit;
}

.bs-panel {
	background: var(--bs-surface);
	border-color: var(--bs-line-soft);
}

.bs-chart-axis {
	stroke: var(--bs-line);
}

.bs-chart-label {
	fill: var(--bs-faint);
}

.bs-chart-value {
	fill: var(--bs-muted);
}

.bs-chart-area {
	fill: rgba(var(--bs-accent-rgb), .16);
}

.bs-chart-line,
.bs-chart-dot {
	stroke: var(--bs-teal);
	fill: none;
}

.bs-chart-dot {
	fill: var(--bs-teal);
}

.bs-row-track {
	background: var(--bs-bar);
}

.bs-row-value {
	color: var(--bs-muted);
}

/* Dialoge */

.bs-modal-box {
	background: var(--bs-surface);
}

.bs-modal-head {
	background: var(--bs-header);
	color: var(--bs-text);
}

.bs-modal-head h3 {
	color: var(--bs-text);
}

.bs-detail-summary,
.bs-readings,
.bs-form-actions {
	border-color: var(--bs-line);
}

.bs-readings li {
	background: var(--bs-bar);
}

.bs-manual {
	background: var(--bs-surface);
	border-color: var(--bs-line);
}

.bs-result {
	background: var(--bs-surface);
	border-color: var(--bs-line-soft);
}

.bs-empty h3 {
	color: var(--bs-text);
}

.bs-toast {
	background: var(--bs-teal);
	color: var(--bs-on-teal);
	font-weight: 600;
}

.bs-toast.is-error {
	background: var(--bs-danger);
	color: var(--bs-on-danger);
}

.bs-pagination button {
	background: var(--bs-surface);
	border-color: var(--bs-line);
	color: var(--bs-text);
}

.bs-pagination button.is-current {
	background: var(--bs-teal);
	border-color: var(--bs-teal);
	color: var(--bs-on-teal);
}

.bs-field label,
.bs-hint,
.bs-panel-note,
.bs-tile-label,
.bs-tile-sub,
.bs-record-label,
.bs-record-meta,
.bs-samples,
.bs-facts dt,
.bs-user-list small,
.bs-checklist small {
	color: var(--bs-muted);
}

/* --------------------------------------------------------------------------
   Feinschliff: weichere Kanten, ruhigere Tiefe, deutlichere Fokusringe
   -------------------------------------------------------------------------- */

/* Ein sichtbarer Fokusring auf allem, was sich bedienen lässt – bisher hatten
   ihn nur Schaltflächen. Wer mit der Tastatur arbeitet, muss sehen, wo er ist.
   Eingabefelder bekommen weiter unten stattdessen einen türkisen Schein;
   beides zusammen wäre ein doppelter Ring. */
.simonestats a:focus-visible,
.simonestats summary:focus-visible,
.simonestats [tabindex]:focus-visible {
	outline: 3px solid var(--bs-teal);
	outline-offset: 2px;
	border-radius: var(--bs-radius-sm);
}

/* Eingabefelder: mehr Luft und ein türkiser Rahmen beim Tippen. */
.simonestats input[type="text"],
.simonestats input[type="email"],
.simonestats input[type="password"],
.simonestats input[type="url"],
.simonestats input[type="number"],
.simonestats input[type="date"],
.simonestats input[type="search"],
.simonestats select,
.simonestats textarea {
	padding: 11px 12px;
	border-radius: var(--bs-radius-sm);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.simonestats input:focus,
.simonestats select:focus,
.simonestats textarea:focus {
	border-color: var(--bs-teal);
	box-shadow: 0 0 0 3px rgba(var(--bs-accent-rgb), .22);
	outline: none;
}

/* Das Zeichen der App auf der Anmeldeseite soll wie eine Kachel wirken,
   nicht wie ein aufgeklebtes Bild. */
.bs-login-mark {
	border: 1px solid var(--bs-line-soft);
}

/* Karten und Kacheln bekommen den gestuften Schatten. */
.simonestats .bs-card,
.simonestats-app .bs-panel,
.simonestats-app .bs-tile,
.simonestats-app .bs-hero {
	box-shadow: var(--bs-shadow);
}

.simonestats-app .bs-modal-box {
	box-shadow: var(--bs-shadow-lg);
}

/* Karten in der Liste heben sich beim Berühren leicht an. */
.bs-books.is-grid .bs-book {
	transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.bs-books.is-grid .bs-book:hover,
.bs-books.is-grid .bs-book:focus-visible {
	transform: translateY(-2px);
	border-color: var(--bs-teal);
	box-shadow: var(--bs-shadow-lg);
}

.bs-books.is-list .bs-book {
	transition: background-color .14s ease;
}

/* Schaltflächen: etwas grosszügiger und mit spürbarer Rückmeldung. */
.simonestats .bs-btn,
.simonestats-app .bs-btn {
	padding: 10px 18px;
	border-radius: var(--bs-radius-sm);
	transition: background-color .15s ease, border-color .15s ease,
		color .15s ease, transform .1s ease;
}

.simonestats .bs-btn:active {
	transform: translateY(1px);
}

.simonestats .bs-btn-primary:hover {
	background: var(--bs-accent-hover);
	border-color: var(--bs-accent-hover);
	color: #ffffff;
}

/* Der Kopfbereich bekommt eine feine Trennkante statt einer harten Linie. */
.bs-header {
	box-shadow: 0 1px 0 rgba(255, 255, 255, .04);
}

/* Überschriften etwas enger gesetzt – wirkt aufgeräumter. */
.simonestats h1,
.simonestats h2,
.simonestats h3,
.bs-panel h4 {
	letter-spacing: -.01em;
}

/* --------------------------------------------------------------------------
   Startseite: laufende Lektüre und Regalkacheln
   -------------------------------------------------------------------------- */

.bs-home-section {
	margin: 0 0 32px;
}

.bs-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 14px;
}

.bs-section-head h2 {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: -.01em;
}

.bs-section-more {
	padding: 0;
	border: 0;
	background: none;
	color: var(--bs-teal-ink);
	font: inherit;
	font-size: .9rem;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
}

.bs-section-more:hover,
.bs-section-more:focus-visible {
	text-decoration: underline;
}

/* Das Plus neben „Meine Reihen“ – rund, mit voller Tippfläche. */
.bs-section-add {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin: -8px -6px -8px 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--bs-teal-ink);
	cursor: pointer;
}

.bs-section-add:hover,
.bs-section-add:focus-visible {
	background: var(--bs-surface);
}

/* Ein Dialog, der auf dem Handy von unten kommt und auf breiten Schirmen
   in der Mitte steht. Der Rahmen scrollt, nicht die Seite darunter. */
.bs-sheet {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 0;
	background: rgba(0, 0, 0, .55);
	overflow-y: auto;
}

.bs-sheet[hidden] {
	display: none;
}

.bs-sheet-box {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 560px;
	/* dvh statt vh: Auf dem iPhone rechnet vh die Adresszeile nicht mit. */
	max-height: 92dvh;
	border-radius: var(--bs-radius) var(--bs-radius) 0 0;
	background: var(--bs-bg);
	box-shadow: 0 -8px 40px rgba(0, 0, 0, .4);
}

@media (min-width: 620px) {
	.bs-sheet {
		align-items: center;
		padding: 24px;
	}

	.bs-sheet-box {
		border-radius: var(--bs-radius);
		max-height: 84dvh;
	}
}

.bs-sheet-head,
.bs-sheet-foot {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
}

.bs-sheet-head {
	border-bottom: 1px solid var(--bs-line);
}

.bs-sheet-head h3 {
	margin: 0;
	font-size: 1.02rem;
}

.bs-sheet-close {
	margin-inline-start: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--bs-muted);
	font: inherit;
	cursor: pointer;
}

.bs-sheet-close:hover {
	color: var(--bs-text);
}

.bs-sheet-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 14px 16px;
}

.bs-sheet-foot {
	border-top: 1px solid var(--bs-line);
	justify-content: flex-end;
}

/* Wenn ein Dialog offen ist, soll nur er rollen. */
body.bs-no-scroll {
	overflow: hidden;
}

/* Die Bücherauswahl im Reihen-Dialog. */
.bs-series-picks {
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.bs-series-pick {
	display: flex;
	align-items: center;
	gap: 8px;
}

.bs-series-pick-toggle {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 10px;
	border: 1px solid var(--bs-line-soft);
	border-radius: var(--bs-radius);
	background: var(--bs-surface);
	color: var(--bs-text);
	font: inherit;
	text-align: start;
	cursor: pointer;
}

.bs-series-pick.is-chosen .bs-series-pick-toggle {
	border-color: var(--bs-teal);
}

.bs-series-pick-toggle .bs-book-cover {
	flex: 0 0 auto;
	width: 30px;
	height: 44px;
	font-size: .6rem;
}

.bs-series-pick-text {
	flex: 1 1 auto;
	min-width: 0;
}

.bs-series-pick-title,
.bs-series-pick-author {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bs-series-pick-title {
	font-size: .88rem;
}

.bs-series-pick-author {
	font-size: .76rem;
	color: var(--bs-muted);
}

.bs-series-pick-mark {
	flex: 0 0 auto;
	color: var(--bs-teal-ink);
	font-size: 1rem;
}

/* Drei Klassen, damit die Regel gegen „.simonestats input[type=text]“
   ankommt – ein Attributwähler zählt dort so viel wie eine Klasse, und
   sonst nähme das Bandfeld die ganze Zeile ein. */
.simonestats .bs-series-pick .bs-series-pick-no {
	flex: 0 0 auto;
	width: 4.4em;
	min-height: 38px;
	padding: 4px 8px;
	text-align: center;
}

/* Die Kachel nimmt die Zeile ganz ein. Am Rand stand einmal ein Stift, bei
   jeder Reihe – auch bei den vielen, die man nie bearbeitet; die Namen
   mussten sich derweil in den Rest quetschen. Bearbeitet wird jetzt in der
   aufgeklappten Reihe. */
.bs-series-row {
	display: flex;
	align-items: stretch;
	min-width: 0;
}

.bs-series-row .bs-series-tile {
	flex: 1 1 auto;
	min-width: 0;
}

.bs-current {
	display: grid;
	gap: 14px;
}

@media (min-width: 900px) {
	.bs-current {
		grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	}
}

.bs-current-card {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 16px;
	border: 1px solid var(--bs-line-soft);
	border-radius: var(--bs-radius);
	background: var(--bs-surface);
	box-shadow: var(--bs-shadow);
}

.bs-current-cover {
	flex: 0 0 auto;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.bs-current-cover .bs-book-cover {
	width: 78px;
	height: 116px;
	border-radius: var(--bs-radius-sm);
}

.bs-current-body {
	flex: 1 1 auto;
	min-width: 0;
}

.bs-current-title {
	display: block;
	width: 100%;
	/* Die Fläche zum Antippen wächst, das Aussehen bleibt: Das Polster wird
	   durch denselben negativen Rand wieder ausgeglichen. */
	padding: 8px 0;
	margin: -8px 0;
	border: 0;
	background: none;
	color: var(--bs-text);
	font-family: var(--bs-heading-font);
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
}

.bs-current-title:hover {
	color: var(--bs-teal-ink);
}

.bs-current-author {
	margin: 4px 0 0;
	color: var(--bs-muted);
	font-size: .9rem;
}

.bs-current-empty {
	padding: 28px 20px;
	border: 1px dashed var(--bs-line);
	border-radius: var(--bs-radius);
	text-align: center;
}

.bs-current-empty h3 {
	margin: 10px 0 6px;
	font-size: 1.05rem;
}

.bs-current-empty p {
	margin: 0;
	color: var(--bs-muted);
	font-size: .9rem;
}

/* Fortschritt: erst die Zahlen, darunter der Schieber – und der ist zugleich
   der Balken. Der zurückgelegte Teil kommt über --bs-anteil aus dem
   JavaScript; die Standarddarstellung eines Schiebers wird dafür komplett
   abgeschaltet, sonst zeichnet jeder Browser seine eigene Schiene. */

.bs-progressbar {
	margin-top: 14px;
}

.bs-progressbar-meta {
	margin: 0 0 8px;
	color: var(--bs-muted);
	font-size: .85rem;
	font-variant-numeric: tabular-nums;
}

/* Die Klasse vorn ist nötig: ".simonestats-app input" weiter oben gibt allen
   Feldern eine dunkle Fläche und würde den Schieber sonst in einen Kasten
   sperren. */
.simonestats .bs-progressbar-range {
	--bs-anteil: 0%;

	display: block;
	width: 100%;
	/* Sichtbar bleibt die 8 Pixel schmale Schiene; der Rest ist Fläche für
	   den Daumen. Auf 20 Pixel liess sich der Griff kaum fassen. */
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color-scheme: normal;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.bs-progressbar-range::-webkit-slider-runnable-track {
	height: 8px;
	border-radius: 999px;
	background: linear-gradient(
		to right,
		var(--bs-teal) 0 var(--bs-anteil),
		var(--bs-bar) var(--bs-anteil) 100%
	);
}

.bs-progressbar-range::-webkit-slider-thumb {
	width: 18px;
	height: 18px;
	/* (8px Schiene − 18px Griff) / 2 */
	margin-top: -5px;
	border: 2px solid var(--bs-surface);
	border-radius: 50%;
	background: var(--bs-teal);
	box-shadow: var(--bs-shadow);
	-webkit-appearance: none;
	appearance: none;
}

.bs-progressbar-range::-moz-range-track {
	height: 8px;
	border-radius: 999px;
	background: var(--bs-bar);
}

.bs-progressbar-range::-moz-range-progress {
	height: 8px;
	border-radius: 999px;
	background: var(--bs-teal);
}

.bs-progressbar-range::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border: 2px solid var(--bs-surface);
	border-radius: 50%;
	background: var(--bs-teal);
}

.bs-progressbar-range:focus-visible {
	outline: 2px solid var(--bs-teal);
	outline-offset: 4px;
}

.bs-progressbar-hint {
	margin: 0;
	color: var(--bs-faint);
	font-size: .85rem;
}

.bs-shelf-tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

@media (min-width: 720px) {
	.bs-shelf-tiles {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.bs-shelf-tile {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 18px 16px;
	border: 1px solid var(--bs-line-soft);
	border-radius: var(--bs-radius);
	background: var(--bs-surface);
	color: var(--bs-text);
	text-decoration: none;
	box-shadow: var(--bs-shadow);
	transition: border-color .15s ease, transform .15s ease;
}

.bs-shelf-tile:hover,
.bs-shelf-tile:focus-visible {
	border-color: var(--bs-teal);
	transform: translateY(-2px);
}

.bs-shelf-tile-icon {
	color: var(--bs-teal-ink);
	line-height: 0;
}

.bs-shelf-tile-label {
	color: var(--bs-muted);
	font-size: .85rem;
}

.bs-shelf-tile-count {
	font-family: var(--bs-heading-font);
	font-size: 1.7rem;
	font-weight: 300;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

/* --------------------------------------------------------------------------
   Reihen
   -------------------------------------------------------------------------- */

/* Buchreihen als Kacheln: Name, Zahl der Bände und die ersten Umschläge
   als Stapel. Ein Antippen öffnet die Liste, auf die Reihe gefiltert. */

.bs-series {
	display: grid;
	/* minmax(0, …): Ohne das wächst die Spalte auf die Breite des längsten
	   Reihenbandes – und die ganze Seite rollt seitwärts. */
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
}

@media (min-width: 560px) {
	.bs-series {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.bs-series {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.bs-series-tile {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	padding: 10px 12px;
	border: 1px solid var(--bs-line-soft);
	border-radius: var(--bs-radius);
	background: var(--bs-surface);
	color: var(--bs-text);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color .15s ease, transform .15s ease;
}

.bs-series-tile:hover,
.bs-series-tile:focus-visible {
	border-color: var(--bs-teal);
	transform: translateY(-2px);
}

/* Drei Umschläge, versetzt – wie Bücher, die schräg im Regal lehnen. Der
   vorderste steht links und deckt die anderen zum Teil ab. Der Versatz ist
   bewusst gross und jeder Rücken bekommt eine dunkle Kante: Viele Bücher
   haben noch keinen Umschlag, und drei fast gleiche Platzhalter dicht
   nebeneinander sähen sonst nur nach Schliere aus. */
.bs-series-stack {
	position: relative;
	flex: 0 0 58px;
	height: 54px;
}

.bs-series-stack .bs-book-cover {
	position: absolute;
	top: 0;
	/* 36 zu 54 ist genau 2:3 – das Seitenverhältnis eines Buches. */
	width: 36px;
	height: 54px;
	border-radius: 3px;
	box-shadow: -1px 0 0 rgba(0, 0, 0, .55), 1px 2px 5px rgba(0, 0, 0, .45);
}

.bs-series-stack .bs-book-cover img {
	border-radius: 3px;
}

.bs-series-stack .bs-book-cover:nth-child(1) { left: 0; z-index: 3; }
.bs-series-stack .bs-book-cover:nth-child(2) { left: 11px; z-index: 2; }
.bs-series-stack .bs-book-cover:nth-child(3) { left: 22px; z-index: 1; }

/* Ohne Umschlag springen die Anfangsbuchstaben ein. Die sind für einen
   grossen Umschlag gesetzt und müssen hier deutlich kleiner werden. */
.bs-series-stack .bs-book-initials {
	font-size: .68rem;
	letter-spacing: 0;
}

/* Von den beiden hinteren Rücken sieht man elf Pixel. Ein Buchstabe hat
   darin keinen Platz – er stünde nur als Bruchstück am Rand. */
.bs-series-stack .bs-book-cover:not(:first-child) .bs-book-initials {
	display: none;
}

.bs-series-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.bs-series-name {
	min-width: 0;
	overflow: hidden;
	font-family: var(--bs-heading-font);
	font-size: .98rem;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bs-series-tile:hover .bs-series-name {
	color: var(--bs-teal-ink);
}

.bs-series-count {
	color: var(--bs-muted);
	font-size: .85rem;
	white-space: nowrap;
}


/* --------------------------------------------------------------------------
   Volle Liste: Kopf und Filterbereich
   -------------------------------------------------------------------------- */

.bs-filter-open.is-active {
	border-color: var(--bs-teal);
	color: var(--bs-teal-ink);
}

.bs-filter-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--bs-teal);
	color: var(--bs-on-teal);
	font-size: .75rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.bs-filter-badge[hidden] {
	display: none;
}

/* Derselbe Notausgang wie bei der Buchseite: align-items schiebt den Kasten
   an den unteren Rand, macht aber alles unerreichbar, was oben hinausragt –
   und auf dem iPhone rechnet vh mit mehr Höhe, als wirklich zu sehen ist.
   Mit margin statt align-items und einem rollbaren Rahmen kommt man auch
   dann noch an die Kopfzeile. */
.bs-filter-panel {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: flex;
	justify-content: center;
	overflow-y: auto;
}

.bs-filter-panel[hidden] {
	display: none;
}

@media (min-width: 720px) {
	.bs-filter-panel {
		padding: 24px;
	}
}

.bs-filter-box {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 560px;
	/* Unten angeschlagen – aber als Aussenabstand, nicht über align-items. */
	margin-top: auto;
	/* Auf dem Handy von unten hereingeschoben, mit Luft zum Rand. dvh statt
	   vh, weil iOS die Adressleiste sonst nicht mitrechnet. */
	max-height: 88vh;
	max-height: 88dvh;
	border-radius: var(--bs-radius) var(--bs-radius) 0 0;
	background: var(--bs-surface);
	box-shadow: var(--bs-shadow-lg);
}

@media (min-width: 720px) {
	.bs-filter-box {
		margin: auto;
		max-height: 80vh;
		max-height: 80dvh;
		border-radius: var(--bs-radius);
	}
}

/* Kopfzeile des Filterbereichs: Überschrift links, "Schliessen" als Wort
   rechts – ein Kreuz auf farbigem Grund wirkte hier wie eine Warnung. */
.bs-filter-head {
	background: transparent;
	color: var(--bs-text);
	padding: 16px 20px 6px;
}

.bs-filter-head h3 {
	color: var(--bs-text);
	font-size: 1.2rem;
}

.bs-filter-close {
	flex: 0 0 auto;
	min-height: 40px;
	padding: 8px 4px;
	border: 0;
	background: none;
	color: var(--bs-teal-ink);
	font: inherit;
	font-size: .92rem;
	cursor: pointer;
}

.bs-filter-close:hover {
	text-decoration: underline;
}

.bs-filter-body {
	flex: 1 1 auto;
	padding: 4px 20px 20px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.bs-filter-group {
	padding: 16px 0;
	border-top: 1px solid var(--bs-line-soft);
}

.bs-filter-group:first-child {
	border-top: 0;
}

.bs-filter-group[hidden] {
	display: none;
}

.bs-filter-group h4 {
	margin: 0 0 10px;
	color: var(--bs-text);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: -.01em;
}

.simonestats .bs-filter-search {
	width: 100%;
	margin: 0 0 8px;
	padding: 9px 12px;
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius-sm);
	background: var(--bs-bg);
	color: var(--bs-text);
	font: inherit;
	font-size: .9rem;
}

/* Untereinander mit Kästchen statt als Chip-Feld: So liest man eine Auswahl
   von oben nach unten, ohne die Zeilen abzusuchen. */
.bs-filter-options {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.bs-filter-option {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 40px;
	padding: 6px 8px;
	border: 0;
	border-radius: var(--bs-radius-sm);
	font-size: .95rem;
	cursor: pointer;
	transition: background-color .12s ease;
}

.bs-filter-option[hidden] {
	display: none;
}

.bs-filter-option:hover {
	background: rgba(255, 255, 255, .05);
}

/* Zusammengefaltet: nur die ersten Werte, es sei denn, es wird gesucht. */
.bs-filter-option.is-extra {
	display: none;
}

.bs-filter-group.is-open .bs-filter-option.is-extra,
.bs-filter-group.is-searching .bs-filter-option.is-extra {
	display: flex;
}

.bs-filter-group.is-searching .bs-filter-option[hidden] {
	display: none;
}

.bs-filter-option input {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--bs-teal);
}

.bs-filter-text {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bs-filter-num {
	flex: 0 0 auto;
	color: var(--bs-faint);
	font-size: .82rem;
	font-variant-numeric: tabular-nums;
}

.bs-filter-option:has(input:checked) {
	background: rgba(var(--bs-accent-rgb), .12);
}

.bs-filter-option:has(input:checked) .bs-filter-text {
	color: var(--bs-text);
	font-weight: 600;
}

.bs-filter-more {
	margin-top: 10px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--bs-teal-ink);
	font: inherit;
	font-size: .85rem;
	cursor: pointer;
}

.bs-filter-more[hidden] {
	display: none;
}

.bs-filter-more:hover {
	text-decoration: underline;
}

.bs-filter-foot {
	display: flex;
	gap: 10px;
	padding: 14px 20px;
	border-top: 1px solid var(--bs-line-soft);
	/* Auf dem Handy bleibt unter dem Bereich die Systemleiste. */
	padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
}

.bs-filter-foot .bs-btn {
	flex: 1 1 0;
	justify-content: center;
}

/* Wer Bewegung nicht mag, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
	.simonestats *,
	.simonestats *::before,
	.simonestats *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}

/* --------------------------------------------------------------------------
   Helle Fassung
   --------------------------------------------------------------------------
   Die Dunkle ist die Voreinstellung und steckt weiter oben in :root. Hier
   werden nur die Farbwerte getauscht – die Regeln selbst bleiben dieselben.
   Alle Paare sind auf mindestens 4.5:1 geprüft.
   -------------------------------------------------------------------------- */

:root[data-theme="light"] {
	color-scheme: light;
}

/* Die dunklen Werte hängen am body, nicht an :root – die hellen müssen
   deshalb an denselben Stellen greifen, sonst gewinnen die dunklen. */
:root[data-theme="light"] .simonestats,
:root[data-theme="light"] .simonestats-app,
:root[data-theme="light"] .simonestats-site {

	--bs-bg: #eef2ee;
	--bs-surface: #ffffff;
	--bs-raised: #f6f8f6;
	--bs-bar: #e8ede9;
	--bs-header: #ffffff;

	--bs-line: #d6dfd8;
	--bs-line-soft: #e6ebe7;

	--bs-text: #16211b;
	--bs-muted: #55635b;
	--bs-faint: #66746c;

	/* Das helle Akzentgrün trägt auf Weiss keinen Text (2.4:1), als Fläche
	   mit weisser Schrift aber sehr wohl. Darum zwei Töne. */
	--bs-accent: #256b47;
	--bs-accent-light: #3f9c6b;
	--bs-accent-mid: #2d7d53;
	--bs-accent-fill: #2b6e4c;
	--bs-accent-hover: #35845b;
	--bs-accent-deep: #1c4d34;
	--bs-accent-rgb: 37, 107, 71;
	--bs-teal-ink: #1f5c3d;
	--bs-teal-dark: #1f5c3d;

	/* Umgekehrt zur dunklen Fassung: Hier ist der Akzent selbst dunkel und
	   trägt weisse Schrift (6.3:1). */
	--bs-on-teal: #ffffff;

	/* Gelb-Orange braucht auf Weiss mehr Tiefe. */
	--bs-star: #9c6400;

	/* Dieselben Töne wie oben wären auf Weiss zu hell für kleine Schrift. */
	--bs-green-ink: #0b6b36;
	--bs-warning-ink: #8a5a00;
	--bs-danger-ink: #b0143d;
	--bs-danger-text: #b0143d;

	--bs-dark: var(--bs-text);
	--bs-shadow: 0 1px 2px rgba(16, 30, 34, .08), 0 6px 18px rgba(16, 30, 34, .08);
	--bs-shadow-lg: 0 2px 6px rgba(16, 30, 34, .1), 0 18px 40px rgba(16, 30, 34, .14);
}

/* Formularfelder folgen der hellen Fassung. */
:root[data-theme="light"] .simonestats-app select,
:root[data-theme="light"] .simonestats-app input,
:root[data-theme="light"] .simonestats-app textarea,
:root[data-theme="light"] .simonestats select,
:root[data-theme="light"] .simonestats input,
:root[data-theme="light"] .simonestats textarea {
	color-scheme: light;
}

/* Stellen, die eine dunkle Fläche fest eingebaut haben. */
:root[data-theme="light"] .bs-login {
	background: linear-gradient(180deg, #ffffff 0%, #fbfcfc 100%);
}

:root[data-theme="light"] .bs-centered-full::before {
	background:
		radial-gradient(46rem 30rem at 50% -10%, rgba(var(--bs-accent-rgb), .18), transparent 65%),
		radial-gradient(30rem 24rem at 88% 108%, rgba(235, 47, 95, .10), transparent 62%);
}

:root[data-theme="light"] .bs-message.is-error {
	background: #fdeef1;
}

:root[data-theme="light"] .bs-message.is-warning {
	background: #fdf4e4;
}

/* Die Kopfzeile bekommt eine sichtbare Kante statt eines Lichtsaums. */
:root[data-theme="light"] .bs-header {
	box-shadow: 0 1px 0 var(--bs-line);
}

/* --------------------------------------------------------------------------
   Umschalter Hell/Dunkel
   -------------------------------------------------------------------------- */

.bs-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 7px 10px;
	border: 1px solid transparent;
	border-radius: var(--bs-radius-sm);
	background: none;
	color: var(--bs-teal-ink);
	font: inherit;
	cursor: pointer;
}

.bs-theme-toggle:hover {
	border-color: var(--bs-line);
}

/* Gezeigt wird das Zeichen der Fassung, in die man wechselt: In der dunklen
   Fassung die Sonne, in der hellen der Mond. */
.bs-theme-toggle .bs-theme-moon {
	display: none;
}

:root[data-theme="light"] .bs-theme-toggle .bs-theme-moon {
	display: inline-flex;
}

:root[data-theme="light"] .bs-theme-toggle .bs-theme-sun {
	display: none;
}

/* Umschlag von Hand setzen */

.simonestats .bs-btn-tiny {
	/* Klein im Bild, aber mit genug Fläche zum Antippen. */
	min-height: 36px;
	padding: 5px 10px;
	font-size: .74rem;
	border-radius: 8px;
	white-space: nowrap;
}

.bs-detail-cover {
	flex: 0 0 auto;
	width: 96px;
	min-width: 0;
	aspect-ratio: 2 / 3;
	height: auto;
	background: none;
	overflow: visible;
}

.bs-detail-cover img,
.bs-detail-cover .bs-book-initials {
	width: 100%;
	aspect-ratio: 2 / 3;
	border-radius: 6px;
	background: linear-gradient(150deg, var(--bs-teal-dark), #1f4d4d);
}

.bs-detail-cover .bs-book-initials {
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, .9);
}

/* Die Umschlagknöpfe sitzen am Fuss der Textspalte, also auf einer Höhe mit
   dem unteren Rand des Bildes. Unter dem Umschlag hätten sie dessen Spalte
   in die Länge gezogen und daneben eine leere Fläche gelassen. */
.bs-detail-cover-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: auto;
	padding-top: 4px;
}

/* --------------------------------------------------------------------------
   Helle Fassung: Nachbesserungen für Fortschritt und Filter
   -------------------------------------------------------------------------- */

/* Auf Weiss braucht die leere Schiene etwas mehr Zeichnung. */
:root[data-theme="light"] .bs-progressbar-range::-webkit-slider-runnable-track {
	background: linear-gradient(
		to right,
		var(--bs-teal-ink) 0 var(--bs-anteil),
		#dde3e6 var(--bs-anteil) 100%
	);
}

:root[data-theme="light"] .bs-progressbar-range::-moz-range-track {
	background: #dde3e6;
}

:root[data-theme="light"] .bs-progressbar-range::-moz-range-progress,
:root[data-theme="light"] .bs-progressbar-range::-moz-range-thumb {
	background: var(--bs-teal-ink);
}

:root[data-theme="light"] .bs-progressbar-range::-webkit-slider-thumb {
	background: var(--bs-teal-ink);
}

:root[data-theme="light"] .bs-filter-option:has(input:checked) {
	background: rgba(7, 113, 112, .1);
	border-color: var(--bs-teal-ink);
}

:root[data-theme="light"] .bs-filter-open.is-active {
	border-color: var(--bs-teal-ink);
}

/* --------------------------------------------------------------------------
   Erfassungsmaske: Dauer, Umschlag, weitere Angaben
   -------------------------------------------------------------------------- */

/* Ein ausgeblendetes Feld darf im Raster keinen Platz belegen. */
.bs-field[hidden] {
	display: none;
}

.bs-field-label {
	font-size: .82rem;
	font-weight: 600;
	color: var(--bs-muted);
}

/* Stunden und Minuten stehen nebeneinander in einer Zeile. */
.bs-duration {
	display: flex;
	align-items: center;
	gap: 6px;
}

.simonestats .bs-duration input {
	width: 100%;
	min-width: 0;
	/* Breiter muss keine Stunden- oder Minutenzahl sein. Ohne die Schranke
	   zieht sich das Paar über die ganze Spalte, und "Min" klebt am Rand. */
	max-width: 96px;
	text-align: right;
}

.bs-duration-unit {
	flex: 0 0 auto;
	color: var(--bs-muted);
	font-size: .85rem;
}

.bs-cover-pick {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.bs-cover-preview {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	aspect-ratio: 2 / 3;
	border: 1px dashed var(--bs-line);
	border-radius: var(--bs-radius-sm);
	background: var(--bs-bar);
	overflow: hidden;
}

.bs-cover-preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bs-cover-placeholder {
	color: var(--bs-faint);
	line-height: 0;
}

.bs-cover-placeholder[hidden] {
	display: none;
}

.bs-cover-actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	min-width: 0;
}

.bs-cover-actions .bs-hint {
	margin: 0;
	font-size: .8rem;
}

/* Die Dateiauswahl steckt in der Schaltfläche; der eigentliche Knopf des
   Browsers lässt sich nicht gestalten. */
.bs-btn-file {
	position: relative;
	overflow: hidden;
	cursor: pointer;
}

.simonestats .bs-btn-file input[type="file"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	opacity: 0;
	cursor: pointer;
}

.bs-more-fields {
	display: block;
	margin-top: 4px;
	padding-top: 14px;
	border-top: 1px solid var(--bs-line-soft);
}

.bs-more-fields > summary {
	color: var(--bs-teal-ink);
	font-size: .9rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.bs-more-fields > summary::-webkit-details-marker {
	display: none;
}

.bs-more-fields > summary::before {
	content: "＋ ";
}

.bs-more-fields[open] > summary::before {
	content: "－ ";
}

.bs-more-fields > .bs-field-grid {
	margin-top: 14px;
}

/* Klappentext und Notizen in der Detailansicht */

.bs-detail-blurb,
.bs-detail-notes {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--bs-line-soft);
}

.bs-detail-blurb h4,
.bs-detail-notes h4 {
	margin: 0 0 8px;
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--bs-muted);
}

.bs-detail-blurb p,
.bs-detail-notes p {
	margin: 0 0 10px;
	font-size: .93rem;
	line-height: 1.6;
}

.bs-detail-blurb p:last-child,
.bs-detail-notes p:last-child {
	margin-bottom: 0;
}

/* Die eigenen Notizen heben sich vom Werbetext des Verlags ab. */
.bs-detail-notes {
	color: var(--bs-text);
}

.bs-detail-blurb p {
	color: var(--bs-muted);
}

/* Ein leeres Regal braucht einen nächsten Schritt, keine Sackgasse. */
.bs-empty-action {
	margin-top: 14px;
}

/* --------------------------------------------------------------------------
   Buchseite: fährt von rechts herein statt als Dialog aufzuklappen
   --------------------------------------------------------------------------
   Ein Dialog über der Liste liess offen, wo man ist. Eine Seite, die
   hereinfährt und sich nach rechts wegwischen lässt, beantwortet das von
   selbst – und die Zurück-Taste des Telefons tut, was man erwartet.
   -------------------------------------------------------------------------- */

/* Die Buchseite. Sie liegt fest über allem und fährt von rechts herein –
   der Name gehört ihr allein, siehe die Notiz bei bs-textpage. */
.bs-page {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	flex-direction: column;
	background: var(--bs-bg);
	transform: translateX(100%);
	transition: transform .28s cubic-bezier(.22, .68, .3, 1);
	will-change: transform;
}

.bs-page[hidden] {
	display: none;
}

.bs-page.is-open {
	transform: none;
}

/* Während der Finger die Seite schiebt, darf nichts nachlaufen. */
.bs-page.is-dragging {
	transition: none;
}

.bs-page-sheet {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 820px;
	height: 100%;
	margin: 0 auto;
	min-height: 0;
}

.bs-page-head {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	padding: 10px 12px;
	padding-top: max(10px, env(safe-area-inset-top));
	border-bottom: 1px solid var(--bs-line-soft);
	background: var(--bs-header);
}

.bs-page-head h3 {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	color: var(--bs-text);
	font-size: 1.05rem;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bs-page-back {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--bs-text);
	cursor: pointer;
}

.bs-page-back:hover,
.bs-page-back:focus-visible {
	background: var(--bs-raised);
}

.bs-page-body {
	flex: 1 1 auto;
	min-height: 0;
	padding: 18px 16px;
	padding-bottom: calc(40px + env(safe-area-inset-bottom));
	overflow-y: auto;
	overscroll-behavior: contain;
}

@media (min-width: 720px) {
	.bs-page-body {
		padding: 24px;
	}
}

/* Wer Bewegung nicht mag, bekommt die Seite ohne Fahrt. */
@media (prefers-reduced-motion: reduce) {
	.bs-page {
		transition: none;
	}
}


/* --------------------------------------------------------------------------
   Buchseite: Umschlag gross, Reihe unter dem Titel, Durchgänge zugeklappt
   -------------------------------------------------------------------------- */

/* Der Umschlag ist jetzt eine Schaltfläche – ein Antippen zeigt das Bild
   in voller Grösse. Als Knopf brächte er Rahmen und Grundfarbe des
   Browsers mit; beides muss weg, damit er aussieht wie zuvor. */
.simonestats button.bs-detail-cover {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	cursor: zoom-in;
	transition: transform .12s ease;
}

.simonestats button.bs-detail-cover:hover,
.simonestats button.bs-detail-cover:focus-visible {
	transform: scale(1.03);
}

/* Der Titel steht neben dem Umschlag, nicht mehr nur in der Kopfzeile.
   Er ist die Hauptsache der Spalte und darf umbrechen – die Kopfzeile
   kürzt lange Titel, hier soll man sie ganz lesen können. */
.bs-detail-name {
	font-family: var(--bs-heading-font);
	font-size: 1.08rem;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -.01em;
}

/* Das Bild in voller Grösse: Es deckt die Seite zu, damit der Umschlag so
   viel Platz bekommt, wie der Bildschirm hergibt. Ein Klick irgendwohin
   schliesst wieder – wie man es von der Fotoansicht kennt. */
.bs-lightbox {
	position: fixed;
	inset: 0;
	z-index: 80;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(8, 16, 18, .96);
	cursor: zoom-out;
}

.bs-lightbox[hidden] {
	display: none;
}

.bs-lightbox img {
	/* Die Breite setzt das JavaScript: Ein 200 Pixel breites Vorschaubild
	   von Google Books muss hochgerechnet werden, sonst bleibt es eine
	   Briefmarke auf schwarzem Grund. */
	max-width: 100%;
	height: auto;
	/* Nicht 100%: Der Schliessknopf sitzt oben rechts und soll nicht auf
	   dem Bild liegen. */
	max-height: calc(100% - 40px);
	object-fit: contain;
	border-radius: 6px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
}

.bs-lightbox-close {
	position: absolute;
	top: calc(10px + env(safe-area-inset-top));
	right: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 44 Pixel: die kleinste Fläche, die der Daumen sicher trifft. */
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
}

.bs-lightbox-close:hover,
.bs-lightbox-close:focus-visible {
	background: rgba(255, 255, 255, .22);
}

/* „LESEVORGÄNGE" so gesetzt wie „KLAPPENTEXT" darüber: gleiche Grösse,
   gleiche Grossbuchstaben, gleiche Farbe. Vorher war die Überschrift
   grösser und schwarz und sprang aus der Seite heraus. */
.bs-readings h4 {
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--bs-muted);
}

/* Der Abschnitt bekommt dieselbe dünne Linie wie Klappentext und Notizen –
   er steht in derselben Folge von Abschnitten. */
.bs-detail-edit[hidden] + .bs-readings {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--bs-line-soft);
}

/* „Erneut lesen": ein Knopf statt drei offener Felder. */
.bs-reading-again {
	width: 100%;
	justify-content: center;
}

.bs-reading-again[hidden] {
	display: none;
}

/* Reihe und Band unter dem Titel: „Abby Lynn, Band 3". Bei einem dritten
   Band ist das die halbe Auskunft über das Buch. */
.bs-book-series {
	display: block;
	margin-bottom: 2px;
	color: var(--bs-teal-ink);
	font-size: .82rem;
}

.bs-table-series {
	display: block;
	margin-top: 2px;
	color: var(--bs-muted);
	font-size: .8rem;
}


/* --------------------------------------------------------------------------
   Reihen: sortieren und an Ort und Stelle aufklappen
   -------------------------------------------------------------------------- */

/* Sortierung und Plus stehen zusammen am rechten Rand. Die Überschrift
   richtet sich an der Grundlinie aus, die Knöpfe an ihrer Mitte. */
.bs-section-tools {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 4px;
	align-self: center;
}

/* Anders als in der Werkzeugleiste der Liste soll der Knopf hier nicht die
   Zeile füllen – er teilt sie mit der Überschrift. */
.bs-series-sort {
	flex: 0 0 auto;
	font-size: .8rem;
}

.bs-series-block {
	min-width: 0;
}

/* Aufgeklappt gehören Kachel und Bände sichtbar zusammen: Die Kachel gibt
   unten ihre Rundung auf, damit der Kasten darunter anschliesst. */
.bs-series-block.is-open .bs-series-tile {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-color: var(--bs-teal);
	transform: none;
}

/* Das Zeichen rechts sagt, ob noch etwas kommt. Es steht am Rand, damit es
   nicht mit dem Namen der Reihe konkurriert. */
.bs-series-caret {
	flex: 0 0 auto;
	margin-left: auto;
	padding-left: 6px;
	color: var(--bs-muted);
	font-size: .95rem;
	line-height: 1;
}

.bs-series-tile:hover .bs-series-caret {
	color: var(--bs-teal-ink);
}

/* Der Untertitel nennt jetzt auch den Autor und kann darum lang werden –
   er kürzt mit Auslassungspunkten, statt die Kachel zu sprengen. */
.bs-series-count {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Die Bände hängen unter der Kachel, im selben Kasten. Die Reihe daneben
   im Raster behält ihre Höhe – der Block wächst nur für sich. */
.bs-series-books {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 10px;
	border: 1px solid var(--bs-teal);
	border-top: 0;
	border-radius: 0 0 var(--bs-radius) var(--bs-radius);
	background: var(--bs-bg);
}

/* Innerhalb der Reihe steht der Band als Zeile, nicht als Kachel: Er ist
   schon einsortiert, das Bild darf klein bleiben. */
.bs-series-books .bs-book {
	flex-direction: row;
	align-items: center;
	gap: 10px;
	padding: 8px 10px 8px 8px;
	box-shadow: none;
}

.bs-series-books .bs-book-cover {
	width: 38px;
	min-width: 38px;
	aspect-ratio: 2 / 3;
	border-radius: 3px;
}

.bs-series-books .bs-book-body {
	min-width: 0;
	padding: 0;
}

.bs-series-books .bs-book-initials {
	font-size: .7rem;
	letter-spacing: 0;
}

/* In der aufgeklappten Reihe steht die Reihe schon in der Überschrift –
   „Abby Lynn, Band 3" bei jedem Band wäre dreimal dasselbe. Nur die
   Bandnummer bleibt: Sie ist es, was die Bände unterscheidet. */
.bs-series-books .bs-book-series {
	color: var(--bs-muted);
}

/* Bearbeitet wird die Reihe dort, wo sie offen liegt – unter ihren Bänden,
   über die ganze Breite. */
.bs-series-edit {
	justify-content: center;
	width: 100%;
	font-size: .82rem;
}


/* --------------------------------------------------------------------------
   Hörbuchhüllen: quadratisch, wo bisher ein Buchrücken stand
   -------------------------------------------------------------------------- */

/* Ein Hörbuch hat keinen Rücken: Sein Bild ist so hoch wie breit – in der
   Liste, in den Kacheln, auf der Startseite und auf der Buchseite. */
.bs-book-cover.is-audio {
	aspect-ratio: 1 / 1;
}

/* Die Listenregel nennt drei Klassen und behielte sonst ihr 2:3. Breite
   bleibt Breite: So stehen Bücher und Hörbücher in einer gemischten Liste
   mit derselben Textspalte untereinander. */
.bs-books.is-list .bs-book-cover.is-audio,
.bs-books.is-grid .bs-book-cover.is-audio,
.bs-series-books .bs-book-cover.is-audio {
	aspect-ratio: 1 / 1;
	height: auto;
}

/* Ein Buchumschlag, der als Hörbuch geführt wird, wird auf das Quadrat
   beschnitten – von oben, wie auf dem Brett: Der Titel steht oben und soll
   stehen bleiben. Eine echte, quadratische Hülle füllt das Quadrat ganz
   aus, dann schneidet nichts. */
.bs-book-cover.is-audio img,
.bs-detail-cover.is-audio img,
.bs-cover-preview.is-audio img {
	object-position: center top;
}

/* Wo Höhe und Breite fest stehen, hilft das Seitenverhältnis nicht: Dort
   wird die Höhe auf die Breite gesetzt. */
.bs-current-cover .bs-book-cover.is-audio {
	height: 78px;
}

.bs-series-pick-toggle .bs-book-cover.is-audio {
	height: 30px;
}

/* Im Stapel der Reihe bleibt die Höhe des Kastens: Die Hüllen rücken in
   die Mitte, statt oben zu kleben. */
.bs-series-stack .bs-book-cover.is-audio {
	top: 9px;
	height: 36px;
}

/* Ohne Bild steht auf der Buchseite ein Kasten mit den Anfangsbuchstaben.
   Der hat kein eigenes Format und bekommt darum eines: beim Hörbuch das
   Quadrat, beim Buch weiter zwei zu drei. */
.bs-detail-cover.is-audio .bs-book-initials {
	aspect-ratio: 1 / 1;
	height: auto;
}

/* Und in der Maske zeigt die Vorschau schon beim Erfassen, welche Form das
   Bild später bekommt. */
.bs-cover-preview.is-audio {
	aspect-ratio: 1 / 1;
}


/* --------------------------------------------------------------------------
   Hülle in der Mitte, weiterer Durchgang im eigenen Fenster
   -------------------------------------------------------------------------- */

/* Die Karte ist höher als die quadratische Hülle – Titel, Autor und Marke
   brauchen mehr Platz als 66 Pixel. Oben angeschlagen liesse die Hülle
   darunter ein Loch; sie steht darum auf halber Höhe. Ein Buchumschlag ist
   fast so hoch wie die Karte und bleibt, wo er ist. */
.bs-books.is-list .bs-book-cover.is-audio {
	align-self: center;
}

/* Das Fenster für einen weiteren Durchgang liegt über der Buchseite. Es
   ist derselbe Kasten wie beim Bearbeiten einer Reihe, nur hängt er
   innerhalb der Seite – die legt sich mit ihrer eigenen Ebene über alles
   andere. */
.bs-page .bs-sheet {
	z-index: 90;
}

/* Die beiden Datumsfelder nebeneinander, der Ausgang darunter: So steht es
   auch in der Erfassungsmaske. */
.bs-sheet-body .bs-reading-add {
	margin: 0;
}


/* --------------------------------------------------------------------------
   Der Umschlag auf der Buchseite behält sein eigenes Format
   -------------------------------------------------------------------------- */

/* Bisher stand er in einem Kasten von zwei zu drei, und das Bild wurde
   hineingeschnitten. Kein Umschlag hält sich daran: Gemessen an den
   abgelegten Bildern reicht das Verhältnis von 1.40 bis 1.56, ein
   Kinderbuch ist noch breiter. Der Kasten war ausserdem so hoch wie die
   Textspalte daneben – bei einem langen Titel also höher, und das Bild
   wurde entsprechend stärker beschnitten. Jetzt gibt die Breite den Ton
   an und die Höhe folgt dem Bild: nichts wird gestreckt, nichts
   abgeschnitten. */
.bs-detail-cover {
	/* Nicht auf die Höhe der Textspalte ziehen. */
	align-self: flex-start;
	aspect-ratio: auto;
	height: auto;
}

.bs-detail-cover img {
	height: auto;
	aspect-ratio: auto;
	/* Der Kasten folgt dem Bild – zu beschneiden gibt es nichts mehr. */
	object-fit: contain;
}


/* --------------------------------------------------------------------------
   Lesezeichen: wo sie gerade steht
   -------------------------------------------------------------------------- */

/* Unter dem Schieber auf der Startseite. Der Schieber sagt, wie weit – das
   Lesezeichen sagt, wo: "Kapitel 12". Die Beschriftung steht klein darüber,
   nicht daneben: Neben dem Feld bliebe auf einem 390 Pixel breiten Telefon
   für den Text kaum die halbe Zeile. */
.bs-bookmark {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 4px;
	margin-top: 10px;
}

.bs-bookmark-label {
	flex: 0 0 auto;
	color: var(--bs-muted);
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.simonestats .bs-bookmark-input {
	flex: 1 1 auto;
	min-width: 0;
	/* 36 Pixel: die kleinste Fläche, die der Daumen sicher trifft. */
	min-height: 36px;
	padding: 6px 10px;
	border: 1px solid var(--bs-line-soft);
	border-radius: var(--bs-radius-sm);
	background: var(--bs-bg);
	color: var(--bs-text);
	font: inherit;
	font-size: .84rem;
}

.simonestats .bs-bookmark-input:focus {
	border-color: var(--bs-teal);
	outline: none;
}