/* ==========================================================================
   Cellia – Stylesheet
   --------------------------------------------------------------------------
   Übernimmt die Farbwelt und Formensprache des bisherigen Tailwind-Frontends
   (siehe cellia/tailwind.config.js), aber als handgeschriebenes CSS ohne
   Build-Schritt. Farben liegen als Custom Properties vor; der Dark Mode
   schaltet ausschließlich diese Tokens um.
   ========================================================================== */

/* --------------------------------------------------------------- Tokens */
:root {
	/* Palette – identisch zu den Werten aus tailwind.config.js */
	--indigo-50:  #f8fafb;
	--indigo-100: #ebf1fc;
	--indigo-200: #d4d9f9;
	--indigo-300: #b0b4ef;
	--indigo-400: #908ae3;
	--indigo-500: #7665d8;
	--indigo-600: #6048c5;
	--indigo-700: #4836a1;
	--indigo-800: #3e1b81;
	--indigo-900: #1b1644;

	--purple-100: #f7eff7;
	--purple-200: #efd0f0;
	--purple-300: #dda6dd;
	--purple-400: #d579c5;
	--purple-500: #bb62bc;
	--purple-600: #a83994;
	--purple-700: #812b70;

	--violet-300: #c4b5fd;
	--violet-500: #8b5cf6;
	--violet-700: #6d28d9;
	--violet-800: #5b21b6;

	--gray-100: #edeeef;
	--gray-200: #d8dbdf;
	--gray-400: #879397;
	--gray-500: #6b7375;
	--gray-700: #454346;
	--gray-800: #302e32;
	--gray-900: #1f1e21;

	--slate-200: #e2e8f0;
	--white: #ffffff;

	--red-500: #ef4444;
	--red-600: #dc2626;
	--amber-400: #fbbf24;
	--amber-500: #f59e0b;

	/* Semantische Rollen – nur diese werden im Dark Mode überschrieben */
	--page-bg:        var(--indigo-100);
	--page-fg:        var(--gray-900);
	--muted-fg:       var(--gray-500);
	--accent:         var(--violet-700);
	--accent-soft:    var(--purple-500);
	--accent-contrast:var(--white);
	--surface:        var(--white);
	--surface-2:      var(--indigo-200);
	--surface-3:      var(--indigo-50);
	--card-bg:        var(--violet-700);
	--card-fg:        var(--white);
	--border:         rgba(72, 54, 161, .16);
	--shadow-color:   var(--indigo-300);
	--footer-bg:      var(--white);
	--star-active:    var(--amber-500);

	--radius:    .5rem;
	--radius-lg: 1rem;
	--radius-xl: 1.5rem;
	--shadow-sm: 0 1px 2px 0 rgba(27, 22, 68, .12);
	--shadow:    0 1px 3px 0 rgba(27, 22, 68, .15), 0 1px 2px -1px rgba(27, 22, 68, .12);
	--shadow-md: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -2px var(--shadow-color);
	--shadow-lg: 0 10px 15px -3px rgba(27, 22, 68, .2), 0 4px 6px -4px rgba(27, 22, 68, .15);

	/* Breite des Inhalts. Auf großen Bildschirmen bleibt sonst viel Rand
	   ungenutzt; über 104rem werden Fließtexte unangenehm lang. */
	--content-width: 104rem;
	--transition: 150ms ease;
}

html.dark {
	--page-bg:        var(--indigo-900);
	--page-fg:        var(--white);
	--muted-fg:       var(--indigo-300);
	--accent:         var(--purple-400);
	--accent-soft:    var(--purple-500);
	--accent-contrast:var(--white);
	--surface:        var(--indigo-800);
	--surface-2:      var(--indigo-800);
	--surface-3:      #241d55;
	--card-bg:        var(--indigo-800);
	--card-fg:        var(--white);
	--border:         rgba(255, 255, 255, .14);
	--shadow-color:   var(--indigo-900);
	--footer-bg:      var(--gray-900);
	--star-active:    var(--amber-400);
}

/* ---------------------------------------------------------------- Reset */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--page-bg);
	color: var(--page-fg);
	font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
	font-size: 1rem;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.2; font-weight: 600; }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { max-width: 100%; }

a {
	color: inherit;
	text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
	text-underline-offset: .2em;
}
a:hover { text-decoration-color: currentColor; }

button { font: inherit; color: inherit; }

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: 3px;
}

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

/* Inline-SVGs übernehmen grundsätzlich die Textfarbe. Outline-Icons setzen
   fill="none" direkt am Pfad und bleiben davon unberührt. */
svg { fill: currentColor; }

.icon { width: 1.25rem; height: 1.25rem; fill: currentColor; flex: none; }
.icon--sm { width: 1rem;   height: 1rem; }
.icon--lg { width: 2rem;   height: 2rem; }

/* --------------------------------------------------------------- Layout */
.page-main {
	flex: 1 0 auto;
	width: 100%;
	max-width: var(--content-width);
	margin-inline: auto;
	padding: 1.5rem 1.25rem 3rem;
}
@media (min-width: 768px) { .page-main { padding: 2rem; } }

.section { margin-bottom: 3rem; }
.section:last-child { margin-bottom: 0; }

.section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .75rem;
	margin-bottom: 1rem;
}
.section__title {
	margin: 0;
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
	font-weight: 500;
	color: var(--accent);
}
html.dark .section__title { color: var(--white); }

.section__meta { color: var(--muted-fg); font-size: .9rem; }
.section__link {
	margin-left: auto;
	display: inline-flex; align-items: center; gap: .25rem;
	color: var(--accent); font-weight: 600; font-size: .9rem;
	text-decoration: none;
}
.section__link:hover { text-decoration: underline; }

/* --------------------------------------------------------------- Header */
.site-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem 1rem;
	width: 100%;
	max-width: var(--content-width);
	margin-inline: auto;
	padding: 1rem 1.25rem .25rem;
}
@media (min-width: 768px) { .site-header { padding: 1.5rem 2rem .5rem; } }

/* Im Editor drei Spalten, damit der Titel wirklich mittig sitzt und nicht
   von der Breite der Seitenbereiche verschoben wird. */
.site-header--admin {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
}
.site-header--admin .site-header__logo { justify-self: start; }
.site-header--admin .site-header__tools { justify-self: end; margin-left: 0; }

.site-header__title {
	margin: 0;
	font-size: clamp(1.25rem, 1rem + 1.1vw, 1.9rem);
	font-weight: 600;
	letter-spacing: .01em;
	text-align: center;
	white-space: nowrap;
	color: var(--accent);
}
html.dark .site-header__title { color: var(--white); }

@media (max-width: 720px) {
	.site-header--admin { grid-template-columns: auto 1fr; }
	.site-header--admin .site-header__title {
		order: 3;
		grid-column: 1 / -1;
		text-align: left;
		white-space: normal;
	}
}

.site-header__logo { display: inline-flex; filter: drop-shadow(0 1px 1px rgba(0,0,0,.12)); }
.site-header__logo .logo__variant { height: 2.5rem; width: auto; }
.site-header__search { flex: 1 1 18rem; min-width: 0; max-width: 34rem; }
.site-header__tools { display: flex; align-items: center; gap: .25rem; margin-left: auto; }

/* Logo: zwei Fassungen, je nach Farbschema eine sichtbar */
.logo__variant { display: block; }
.logo__variant--dunkel { display: none; }
html.dark .logo__variant--hell { display: none; }
html.dark .logo__variant--dunkel { display: block; }

/* --------------------------------------------------------------- Footer */
.site-footer {
	flex: none;
	background: var(--footer-bg);
	color: var(--page-fg);
	border-top: 1px solid var(--border);
}
.site-footer__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
	align-items: center;
	max-width: var(--content-width);
	margin-inline: auto;
	padding: 2rem 1.25rem;
}
@media (min-width: 768px) { .site-footer__inner { padding: 2rem; } }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 1rem; }
.site-footer a { color: var(--accent); }
.site-footer__editor { display: inline-flex; align-items: center; gap: .3rem; }
.site-footer__editor .icon { fill: currentColor; }
html.dark .site-footer a { color: var(--purple-300); }

/* --------------------------------------------------------------- Suche */
.searchbar { position: relative; width: 100%; }

.searchbar__field {
	display: flex;
	align-items: center;
	gap: .5rem;
	background: var(--surface);
	border: 1px solid transparent;
	border-radius: 999px;
	box-shadow: var(--shadow);
	padding: 0 .75rem;
	color: var(--accent);
	transition: box-shadow var(--transition), border-color var(--transition);
}
html.dark .searchbar__field { color: var(--white); }
.searchbar__field:focus-within {
	border-color: var(--accent);
	box-shadow: var(--shadow-md);
}

.searchbar__input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	color: var(--page-fg);
	padding: .625rem 0;
	font-size: .95rem;
}
.searchbar__input::placeholder { color: color-mix(in srgb, var(--page-fg) 55%, transparent); }
.searchbar__input:focus { outline: none; }
.searchbar__input::-webkit-search-cancel-button { display: none; }

.searchbar__clear,
.searchbar__spinner { display: none; flex: none; }
.searchbar.is-filled .searchbar__clear { display: inline-flex; }
.searchbar.is-loading .searchbar__spinner { display: inline-flex; }

.searchbar__clear {
	border: 0; background: transparent; padding: .25rem;
	border-radius: 999px; cursor: pointer; color: var(--muted-fg);
}
.searchbar__clear:hover { color: var(--page-fg); background: color-mix(in srgb, var(--page-fg) 8%, transparent); }

.searchbar__spinner {
	width: 1rem; height: 1rem; border-radius: 50%;
	border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent);
	border-top-color: var(--accent);
	animation: cellia-spin .6s linear infinite;
}
@keyframes cellia-spin { to { transform: rotate(360deg); } }

.searchbar--hero .searchbar__field { padding: .375rem .75rem .375rem 1rem; }
.searchbar--hero .searchbar__input { padding: .875rem 0; font-size: 1.05rem; }

/* Ergebnis-Dropdown der Live-Suche */
.search-results {
	position: absolute;
	z-index: 40;
	inset-inline: 0;
	top: calc(100% + .5rem);
	background: var(--surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	border: 1px solid var(--border);
	overflow: hidden;
	display: none;
	text-align: left;
}
.search-results.is-open { display: block; }

.search-results__list { max-height: min(60vh, 26rem); overflow-y: auto; }

.search-results__item a {
	display: flex;
	flex-direction: column;
	gap: .125rem;
	padding: .625rem 1rem;
	text-decoration: none;
	border-bottom: 1px solid var(--border);
}
.search-results__item:last-child a { border-bottom: 0; }
.search-results__item a:hover,
.search-results__item.is-active a {
	background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.search-results__title { font-weight: 600; }
.search-results__subtitle { font-size: .82rem; color: var(--muted-fg); }

.search-results__footer {
	display: block;
	padding: .625rem 1rem;
	background: color-mix(in srgb, var(--accent) 8%, transparent);
	color: var(--accent);
	font-weight: 600;
	font-size: .88rem;
	text-decoration: none;
	text-align: center;
}
html.dark .search-results__footer { color: var(--purple-300); }
.search-results__footer:hover { text-decoration: underline; }

.search-results__empty { padding: 1rem; color: var(--muted-fg); font-size: .9rem; }

/* -------------------------------------------------------------- Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .5rem 1rem;
	border-radius: 999px;
	border: 1px solid transparent;
	background: var(--accent);
	color: var(--accent-contrast);
	font-weight: 600;
	font-size: .9rem;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--transition), color var(--transition),
		border-color var(--transition), box-shadow var(--transition);
}
.btn:hover { background: color-mix(in srgb, var(--accent) 85%, black); }

.btn--ghost {
	background: var(--surface);
	color: var(--accent);
	box-shadow: var(--shadow-sm);
}
html.dark .btn--ghost { color: var(--white); }
.btn--ghost:hover { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }

.btn--outline {
	background: transparent;
	border-color: color-mix(in srgb, var(--accent) 45%, transparent);
	color: var(--accent);
}
html.dark .btn--outline { color: var(--purple-300); }
.btn--outline:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }

.btn--danger { background: transparent; color: var(--red-600); border-color: color-mix(in srgb, var(--red-500) 50%, transparent); }
.btn--danger:hover { background: color-mix(in srgb, var(--red-500) 12%, transparent); }
html.dark .btn--danger { color: #fca5a5; }

.btn--sm { padding: .3rem .7rem; font-size: .82rem; }
.btn--block { width: 100%; }

/* Runder Icon-Button – Basis für Stern, Listen-Button, Viewer-Steuerung */
.icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: color-mix(in srgb, var(--surface) 92%, transparent);
	color: var(--accent);
	box-shadow: var(--shadow-sm);
	cursor: pointer;
	transition: background var(--transition), color var(--transition), transform var(--transition);
}
html.dark .icon-btn { color: var(--white); }
.icon-btn:hover { background: var(--surface); transform: translateY(-1px); }
.icon-btn:active { transform: none; }
.icon-btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

.icon-btn--plain { background: transparent; box-shadow: none; }
.icon-btn--plain:hover { background: color-mix(in srgb, var(--page-fg) 8%, transparent); }

/* Zustände der beiden Aktions-Buttons */
.icon-btn--star.is-active { color: var(--star-active); }
.icon-btn--star .icon-btn__on  { display: none; }
.icon-btn--star .icon-btn__off { display: block; }
.icon-btn--star.is-active .icon-btn__on  { display: block; }
.icon-btn--star.is-active .icon-btn__off { display: none; }

.icon-btn--list.is-active { color: var(--purple-600); }
html.dark .icon-btn--list.is-active { color: var(--purple-300); }
.icon-btn--list .icon-btn__on  { display: none; }
.icon-btn--list .icon-btn__off { display: block; }
.icon-btn--list.is-active .icon-btn__on  { display: block; }
.icon-btn--list.is-active .icon-btn__off { display: none; }

.icon-btn.is-busy { opacity: .6; pointer-events: none; }

/* Aktionsgruppe (Stern + Liste) */
.item-actions { display: inline-flex; gap: .375rem; }

/* -------------------------------------------------- Kacheln / Strukturen */
.tile-grid {
	display: grid;
	gap: .75rem;
	grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}

.tile {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: .25rem;
	min-height: 5.5rem;
	padding: 1.25rem;
	border-radius: var(--radius);
	background: var(--card-bg);
	color: var(--card-fg);
	font-weight: 600;
	box-shadow: var(--shadow-md);
	text-align: center;
	align-items: center;
	transition: transform var(--transition), box-shadow var(--transition);
}
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.tile__link { color: inherit; text-decoration: none; }
.tile__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tile__count { font-weight: 400; font-size: .82rem; opacity: .85; }
.tile__lock { position: absolute; top: .625rem; right: .625rem; opacity: .8; }

/* Die vier großen Einstiegskacheln auf der Startseite */
.entry-grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.entry-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .35rem;
	padding: 1.75rem 1.5rem;
	border-radius: var(--radius-lg);
	background: var(--card-bg);
	color: var(--card-fg);
	box-shadow: var(--shadow-md);
	text-decoration: none;
	overflow: hidden;
	transition: transform var(--transition), box-shadow var(--transition);
}
.entry-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.entry-tile__icon {
	width: 2.5rem; height: 2.5rem;
	margin-bottom: .35rem;
	/* Kachelschrift ist in beiden Themes weiß – das Icon zieht mit. */
	fill: var(--card-fg);
	opacity: .9;
}
.entry-tile__title { font-size: 1.35rem; font-weight: 600; }
.entry-tile__meta { font-size: .85rem; opacity: .85; }
.entry-tile::after {
	/* dezenter Lichtschein oben rechts, damit die Kacheln nicht flach wirken */
	content: "";
	position: absolute;
	top: -40%; right: -20%;
	width: 70%; aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255,255,255,.16), transparent 70%);
	pointer-events: none;
}

/* ---------------------------------------------------------- Schnittkarte */
.slice-grid {
	display: grid;
	gap: .75rem;
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}

.slice-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .35rem;
	min-height: 8rem;
	padding: 1rem 1rem .875rem;
	border-radius: var(--radius);
	background: var(--card-bg);
	color: var(--card-fg);
	box-shadow: var(--shadow-md);
	transition: transform var(--transition), box-shadow var(--transition);
}
.slice-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.slice-card__title {
	margin: 0;
	font-size: 1.02rem;
	font-weight: 600;
	/* Platz für die beiden Buttons oben rechts freihalten */
	padding-right: 5rem;
}
.slice-card__link { color: inherit; text-decoration: none; }
.slice-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

.slice-card__meta {
	margin-top: auto;
	display: flex;
	flex-wrap: wrap;
	gap: .35rem .5rem;
	font-size: .8rem;
	opacity: .9;
}
.slice-card__meta span { display: inline-flex; align-items: center; gap: .25rem; }

.slice-card__badges { display: flex; gap: .35rem; }
.slice-card__badge {
	display: inline-flex; align-items: center; gap: .25rem;
	padding: .1rem .45rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, .18);
	font-size: .72rem;
	font-weight: 600;
}

/* Buttons liegen über dem Karten-Link, deshalb eigener Stapelkontext */
.slice-card__actions {
	position: absolute;
	top: .625rem;
	right: .625rem;
	z-index: 2;
	display: flex;
	gap: .35rem;
}
.slice-card__actions .icon-btn {
	width: 2rem; height: 2rem;
	background: rgba(255, 255, 255, .92);
	color: var(--violet-700);
}
html.dark .slice-card__actions .icon-btn { background: rgba(255,255,255,.14); color: var(--white); }
.slice-card__actions .icon-btn--star.is-active { color: var(--amber-500); }
.slice-card__actions .icon-btn--list.is-active { color: var(--purple-600); }
html.dark .slice-card__actions .icon-btn--list.is-active { color: var(--purple-300); }

/* ------------------------------------------------------------ Schnittliste */
.slice-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.slice-row {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: .9rem 1.1rem;
	border-radius: var(--radius-lg);
	background: var(--surface);
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--transition), transform var(--transition);
}
.slice-row:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.slice-row__body { display: flex; flex-direction: column; gap: .3rem; min-width: 0; flex: 1; }
.slice-row__title { margin: 0; font-size: 1.25rem; font-weight: 600; line-height: 1.25; }
.slice-row__link { text-decoration: none; color: inherit; }
.slice-row__link:hover { color: var(--accent); }
html.dark .slice-row__link:hover { color: var(--purple-300); }
.slice-row__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .3rem 1rem;
	margin: 0;
	font-size: .82rem;
	color: var(--muted-fg);
}
.slice-row__actions { display: flex; gap: .35rem; flex: none; }
@media (max-width: 600px) {
	.slice-row { align-items: flex-start; }
	.slice-row__actions { flex-direction: column; }
}

.slice-row__badges { display: inline-flex; gap: .35rem; }
.slice-row__badge {
	display: inline-flex; align-items: center; gap: .25rem;
	padding: .1rem .5rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--accent) 14%, transparent);
	color: var(--accent);
	font-size: .72rem;
	font-weight: 600;
}
html.dark .slice-row__badge { color: var(--purple-300); }
.slice-row__actions .icon-btn--star.is-active { color: var(--star-active); }
.slice-row__actions .icon-btn--list.is-active { color: var(--purple-600); }
html.dark .slice-row__actions .icon-btn--list.is-active { color: var(--purple-300); }

/* ------------------------------------------------------- Filter-Sidebar */
.browse {
	display: flex;
	align-items: flex-start;
	gap: 1.5rem;
}

.filters {
	flex: 0 0 18rem;
	width: 18rem;
	position: sticky;
	top: 1rem;
	max-height: calc(100vh - 2rem);
	display: flex;
	flex-direction: column;
	background: var(--surface-2);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	transition: width var(--transition), flex-basis var(--transition);
}

.filters__head {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .75rem .875rem;
	border-bottom: 1px solid var(--border);
}
.filters__title {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	color: var(--accent);
}
html.dark .filters__title { color: var(--white); }

.filters__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.35rem;
	height: 1.35rem;
	padding: 0 .35rem;
	border-radius: 999px;
	background: var(--accent);
	color: var(--accent-contrast);
	font-size: .72rem;
	font-weight: 700;
}
.filters__badge:empty, .filters__badge[hidden] { display: none; }

.filters__toggle {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem; height: 2rem;
	border: 0; border-radius: 999px;
	background: transparent;
	color: var(--accent);
	cursor: pointer;
}
html.dark .filters__toggle { color: var(--white); }
.filters__toggle:hover { background: color-mix(in srgb, var(--page-fg) 8%, transparent); }
.filters__toggle .icon { transition: transform var(--transition); }

.filters__body { overflow-y: auto; padding: .5rem; scroll-behavior: smooth; }
.filters__footer { padding: .5rem .875rem .875rem; }

/* Eingeklappter Zustand: schmale Leiste mit vertikaler Beschriftung */
.filters.is-collapsed { flex-basis: 3rem; width: 3rem; }
.filters.is-collapsed .filters__head {
	flex-direction: column-reverse;
	justify-content: flex-end;
	gap: .75rem;
	padding: .75rem .5rem;
	border-bottom: 0;
	height: 100%;
}
.filters.is-collapsed .filters__title {
	writing-mode: vertical-rl;
	text-orientation: mixed;
	gap: .625rem;
	white-space: nowrap;
}
.filters.is-collapsed .filters__toggle { margin-left: 0; }
.filters.is-collapsed .filters__toggle .icon { transform: rotate(180deg); }
.filters.is-collapsed .filters__body,
.filters.is-collapsed .filters__footer { display: none; }

/* Aufklappbare Filtergruppen */
.filter-group { border-bottom: 1px solid var(--border); }
.filter-group:last-child { border-bottom: 0; }

.filter-group__summary {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .55rem .625rem;
	border-radius: var(--radius);
	font-size: .9rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	user-select: none;
}
.filter-group__summary::-webkit-details-marker { display: none; }
.filter-group__summary:hover { background: color-mix(in srgb, var(--page-fg) 6%, transparent); }
.filter-group__summary .icon { margin-left: auto; transition: transform var(--transition); }
.filter-group[open] > .filter-group__summary .icon { transform: rotate(90deg); }

.filter-group__count {
	font-weight: 500;
	font-size: .78rem;
	color: var(--muted-fg);
}

.filter-group__body { padding: .125rem .625rem .625rem 1.5rem; }

.filter-option {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .2rem 0;
	font-size: .88rem;
	cursor: pointer;
}
.filter-option:hover { color: var(--accent); }
html.dark .filter-option:hover { color: var(--purple-300); }
.filter-option input {
	flex: none;
	width: 1rem; height: 1rem;
	accent-color: var(--violet-700);
	cursor: pointer;
}
html.dark .filter-option input { accent-color: var(--purple-500); }
.filter-option__label { flex: 1 1 auto; min-width: 0; }
.filter-option__count { flex: none; font-size: .75rem; color: var(--muted-fg); font-variant-numeric: tabular-nums; }

/* Filter als Schaltfläche auf schmalen Bildschirmen */
.filters__mobile-toggle { display: none; }

@media (max-width: 899px) {
	.browse { flex-direction: column; }
	.filters {
		position: static;
		width: 100%;
		flex-basis: auto;
		max-height: none;
		order: -1;
	}
	.filters.is-collapsed { width: 100%; flex-basis: auto; }
	.filters.is-collapsed .filters__head {
		flex-direction: row;
		height: auto;
		padding: .75rem .875rem;
	}
	.filters.is-collapsed .filters__title { writing-mode: horizontal-tb; }
	.filters.is-collapsed .filters__toggle { margin-left: auto; }
	/* Hier wird nach oben/unten geklappt, nicht nach links – Pfeil entsprechend. */
	.filters__toggle .icon { transform: rotate(90deg); }
	.filters.is-collapsed .filters__toggle .icon { transform: rotate(-90deg); }
	.filters__body { max-height: 60vh; }
}

.browse__main { flex: 1 1 0; min-width: 0; }

.browse__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem 1rem;
	margin-bottom: 1rem;
}
.browse__search { flex: 1 1 20rem; min-width: 0; max-width: 32rem; }
.browse__count { color: var(--muted-fg); font-size: .9rem; white-space: nowrap; }

/* Aktive Filter als entfernbare Chips */
.active-filters { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.chip {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .2rem .5rem .2rem .7rem;
	border-radius: 999px;
	background: var(--surface);
	color: var(--accent);
	font-size: .8rem;
	font-weight: 600;
	box-shadow: var(--shadow-sm);
	text-decoration: none;
}
html.dark .chip { color: var(--white); }
.chip:hover { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.chip .icon { width: .85rem; height: .85rem; opacity: .7; }

/* ------------------------------------------------------------ Brotkrumen */
.breadcrumbs { margin-bottom: 1rem; }
.breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem;
	font-size: .88rem;
	color: var(--accent);
}
html.dark .breadcrumbs__list { color: var(--white); }
.breadcrumbs__item { display: inline-flex; align-items: center; gap: .35rem; }
.breadcrumbs__item .icon { width: .95rem; height: .95rem; opacity: .6; }
.breadcrumbs__item a { text-decoration: none; }
.breadcrumbs__item a:hover { text-decoration: underline; }
.breadcrumbs__item[aria-current="page"] { font-weight: 700; text-decoration: underline; }

/* ---------------------------------------------------------- Paginierung */
.pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: .5rem;
	margin-top: 1.5rem;
	font-size: .88rem;
}
.pagination__label { color: var(--accent); }
html.dark .pagination__label { color: var(--purple-300); }
.pagination__select {
	padding: .35rem 2rem .35rem .65rem;
	border: 1px solid transparent;
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--page-fg);
	box-shadow: var(--shadow-sm);
	font: inherit;
}
.pagination__link {
	display: inline-flex; align-items: center; justify-content: center;
	width: 2rem; height: 2rem;
	border-radius: 999px;
	color: var(--accent);
	text-decoration: none;
}
html.dark .pagination__link { color: var(--purple-300); }
.pagination__link:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.pagination__link.is-disabled { opacity: .4; pointer-events: none; }
.pagination__perpage { display: inline-flex; align-items: center; gap: .5rem; margin-right: auto; }
.pagination__perpage a { color: var(--accent-soft); text-decoration: none; }
.pagination__perpage a.is-active { font-weight: 700; color: var(--accent); text-decoration: underline; }
html.dark .pagination__perpage a.is-active { color: var(--white); }

/* --------------------------------------------------------- Startseite */
.hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
	padding: 1rem 0 2.5rem;
	text-align: center;
}
.hero__logo { width: min(100%, 32rem); filter: drop-shadow(0 2px 3px rgba(0,0,0,.14)); }
.hero__tagline { max-width: 42rem; color: var(--muted-fg); margin: 0; }
.hero__search { width: min(100%, 46rem); margin-top: .5rem; }

/* Einleitung: Überschrift bewusst mit viel Luft nach unten, darunter die
   Absätze als eigenständige Kacheln über die volle Breite. */
.intro__heading { margin-bottom: 2.5rem; }
@media (min-width: 768px) { .intro__heading { margin-bottom: 3rem; } }

/* Drei Kacheln unter der Begrüßung: weißer Grund, lila Schrift – auch im
   Dunkelmodus, damit sie sich vom Rest der Seite abheben. */
.intro-points {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.intro-point {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 3rem 2rem;
	text-align: center;
	border-radius: var(--radius-lg);
	background: var(--white);
	/* Dasselbe dunkle Lila wie der Seitenhintergrund im Dunkelmodus. */
	color: var(--indigo-900);
	box-shadow: var(--shadow-md);
}

/* Überschrift und Symbolwahl einer Begrüßungskachel im Editor */
.content-point__head { display: flex; gap: .5rem; align-items: center; }
.content-point__head > .form-input { flex: 1; min-width: 0; }
.content-point__icon { display: inline-flex; align-items: center; gap: .5rem; }
.content-point__icon .form-input { width: auto; }
.content-point__preview { display: inline-flex; width: 2rem; }
.content-point__preview .icon { width: 1.75rem; height: 1.75rem; }

/* Symbol über der Überschrift – die Outline-Icons zeichnen mit stroke. */
.intro-point__icon {
	width: 6rem;
	height: 6rem;
	align-self: center;
	fill: none;
	color: var(--violet-700);
}

/* Größe und Gewicht wie bei den Einstiegskacheln „Alles“, „Organsysteme“ … */
.intro-point__title {
	margin: 0px;
	font-size: 1.35rem;
	font-weight: 600;
	border-bottom: solid 1px lightgray;
	padding-bottom: 0.5em;
}

.intro-point__text { margin: 0; }


/* "Mein Bereich": zwei gleich breite Spalten – links Favoriten,
   rechts die eigenen Listen. Unter 860 px stapeln sie. */
.my-area {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
}
@media (min-width: 860px) { .my-area { grid-template-columns: 1fr 1fr; } }

.my-area__col {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	padding: 1.25rem;
	border-radius: var(--radius-lg);
	background: var(--surface);
	box-shadow: var(--shadow-sm);
}

.my-area__head {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding-bottom: .75rem;
	border-bottom: 1px solid var(--border);
}
.my-area__title {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--accent);
}
html.dark .my-area__title { color: var(--purple-300); }
.my-area__head .section__link { margin-left: auto; }

/* Kompakte Zeilenliste – in der halben Spaltenbreite lesen sich Titelzeilen
   besser als die großen Kacheln. */
.mini-list { display: flex; flex-direction: column; }
.mini-item {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .5rem 0;
	border-bottom: 1px solid var(--border);
}
.mini-item:last-child { border-bottom: 0; }
.mini-item__link {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 500;
	text-decoration: none;
}
.mini-item__link:hover { text-decoration: underline; }
.mini-item__meta { flex: none; font-size: .8rem; color: var(--muted-fg); }
.mini-item .item-actions { flex: none; }
.mini-item .icon-btn { width: 2rem; height: 2rem; background: transparent; box-shadow: none; }
.mini-item .icon-btn:hover { background: color-mix(in srgb, var(--page-fg) 8%, transparent); }

.empty--compact {
	padding: 1.25rem 1rem;
	box-shadow: none;
	background: var(--page-bg);
	font-size: .9rem;
}

/* Logo-Leiste der beteiligten Institute – volle Breite, direkt über dem Footer */
/* Raster statt Flexbox: die Kacheln teilen sich die volle Breite gleichmäßig
   auf und behalten dabei überall dieselbe Größe. */
.logo-wall {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1rem;
	width: 100%;
}

/* Jedes Logo sitzt auf weißem Grund: Institutslogos sind meist für weißen
   Hintergrund gezeichnet und wären im Dark Mode sonst kaum zu erkennen. */
.logo-wall__item {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 7rem;
	padding: 1.5rem;
	border-radius: var(--radius-lg);
	background: var(--white);
	border: 1px solid rgba(27, 22, 68, .08);
	box-shadow: var(--shadow-sm);
	transition: transform var(--transition), box-shadow var(--transition);
}
a.logo-wall__item:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}
.logo-wall__item img {
	max-height: 3.5rem;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}
/* Seite „Kontakt“ */
.about { max-width: 60rem; margin-inline: auto; }
.about__intro { max-width: 70ch; font-size: 1.05rem; color: color-mix(in srgb, var(--page-fg) 85%, transparent); }
.about__contact { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.about__contact-item { padding: 1.1rem 1.25rem; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.about__contact-item p { margin: .35rem 0 0; }
.about a { color: var(--accent); }
html.dark .about a { color: var(--purple-300); }
.institute-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
.institute {
	display: flex;
	gap: 1rem;
	align-items: center;
	padding: 1rem;
	border-radius: var(--radius-lg);
	background: var(--surface);
	box-shadow: var(--shadow-sm);
}
/* Logos wie in der Logoleiste auf weißem Grund. */
.institute__logo {
	display: flex; align-items: center; justify-content: center;
	flex: none; width: 6.5rem; height: 4.5rem; padding: .5rem;
	border-radius: var(--radius); background: var(--white);
}
.institute__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.institute__body { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.institute__name { line-height: 1.3; }
.institute__link { display: inline-flex; align-items: center; gap: .35rem; font-size: .9rem; text-decoration: none; overflow-wrap: anywhere; }
.institute__link:hover { text-decoration: underline; }

.logo-wall__intro {
	max-width: 70ch;
	margin: 0 0 1.25rem;
	color: color-mix(in srgb, var(--page-fg) 78%, transparent);
}

.logo-wall__empty {
	grid-column: 1 / -1;
	padding: 1.5rem;
	border-radius: var(--radius-lg);
	background: var(--surface);
	box-shadow: var(--shadow-sm);
	color: var(--muted-fg);
	font-size: .9rem;
	text-align: center;
}

/* Letzter Abschnitt vor dem Footer braucht etwas mehr Luft nach unten. */
.section--last { margin-bottom: 1rem; }

/* Schnitt des Monats */
.monthly {
	display: grid;
	gap: 1.5rem;
	align-items: center;
	padding: 1.25rem;
	border-radius: var(--radius-lg);
	background: var(--surface);
	box-shadow: var(--shadow-md);
}
@media (min-width: 800px) { .monthly { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); padding: 1.5rem; } }

.monthly__preview {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--surface-3);
	display: flex;
	align-items: center;
	justify-content: center;
}
.monthly__preview img {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
}
/* Liegt hinter dem Bild und wird sichtbar, wenn kein Vorschaubild lädt. */
.monthly__preview-fallback {
	color: var(--accent-soft);
	display: inline-flex;
	padding: 1rem;
}

.monthly__body { display: flex; flex-direction: column; gap: .75rem; align-items: flex-start; }
.monthly__eyebrow {
	display: inline-flex; align-items: center; gap: .4rem;
	font-size: .8rem; font-weight: 700; letter-spacing: .04em;
	text-transform: uppercase; color: var(--accent-soft);
}
.monthly__title { margin: 0; font-size: 1.6rem; }
.monthly__text { color: color-mix(in srgb, var(--page-fg) 85%, transparent); margin: 0; }
.monthly__actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .25rem; }

/* Leerzustände und Anmelde-Hinweise */
.empty {
	padding: 1.75rem;
	border-radius: var(--radius-lg);
	background: var(--surface);
	box-shadow: var(--shadow-sm);
	color: var(--muted-fg);
	text-align: center;
}
.empty__title { color: var(--page-fg); font-weight: 600; margin-bottom: .35rem; }
.empty__actions { margin-top: 1rem; display: flex; justify-content: center; gap: .5rem; flex-wrap: wrap; }

/* ----------------------------------------------------- Schnitt-Detailseite */
.slice-view { display: flex; flex-direction: column; gap: 1.5rem; }

/* Ab Desktopbreite steht der Kasten mit den Angaben rechts neben dem
   Schnitt und bleibt beim Blättern stehen. Darunter läuft er voll. */
@media (min-width: 1100px) {
	.slice-view {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(20rem, 28rem);
	}
	/* Der Schnitt behält sein Seitenverhältnis, der Kasten daneben füllt
	   die ganze Höhe der Zeile. */
	.slice-view__stage { align-self: start; }
	.slice-view__body { height: 100%; }
	.slice-view > .section { grid-column: 1 / -1; }
}

.slice-view__stage {
	position: relative;
	border-radius: var(--radius-lg);
	background: var(--surface);
	box-shadow: var(--shadow-md);
	padding: .5rem;
}

/* Aktionsleiste oben rechts über dem Schnitt */
.slice-view__actions {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 30;
	display: flex;
	gap: .5rem;
	padding: .35rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--surface) 82%, transparent);
	backdrop-filter: blur(6px);
	box-shadow: var(--shadow);
}
.slice-view__actions .icon-btn { background: transparent; box-shadow: none; }
.slice-view__actions .icon-btn:hover { background: color-mix(in srgb, var(--page-fg) 10%, transparent); }

.viewer { position: relative; }
.viewer__canvas {
	width: 100%;
	height: 70vh;
	min-height: 22rem;
	border-radius: var(--radius);
	overflow: hidden;
	background: #0d0b1f;
}
@media (min-width: 768px) { .viewer__canvas { height: auto; aspect-ratio: 16 / 9; } }

.viewer__controls { position: absolute; display: flex; gap: .5rem; z-index: 20; }
.viewer__controls--tl { top: .75rem; left: .75rem; flex-direction: column; }
.viewer__controls--bl { bottom: .75rem; left: .75rem; flex-direction: column; }
.viewer__controls--br { bottom: .75rem; right: .75rem; }

.viewer__btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 2.5rem; height: 2.5rem;
	border: 0; border-radius: var(--radius);
	background: rgba(120, 120, 140, .35);
	backdrop-filter: blur(4px);
	color: var(--white);
	cursor: pointer;
	transition: background var(--transition);
}
.viewer__btn:hover { background: rgba(120, 120, 140, .55); }
.viewer__btn .icon { width: 1.5rem; height: 1.5rem; }

/* Annotationen ausblenden (wie hideAnno im alten Frontend) */
.viewer.hide-annotations .a9s-annotationlayer,
.viewer.hide-annotations .r6o-editor { display: none; }

.slice-view__body {
	display: grid;
	gap: 2rem;
	padding: 1.25rem;
	border-radius: var(--radius-lg);
	background: var(--surface);
	box-shadow: var(--shadow-md);
}
/* Im Kasten steht alles untereinander – Angaben, Zusatzmaterial,
   Schnitteigenschaften und Suchbegriffe. */
.slice-view__aside { border-top: 2px solid var(--accent-soft); padding-top: 1.25rem; }
@media (min-width: 768px) { .slice-view__body { padding: 1.75rem; } }

.slice-view__title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 500; margin-bottom: 1rem; }

.meta-list {
	display: grid;
	grid-template-columns: minmax(auto, max-content) 1fr;
	gap: .5rem 1rem;
	margin: 0;
}
.meta-list dt { font-weight: 600; color: var(--accent); }
html.dark .meta-list dt { color: var(--purple-400); }
.meta-list dd { margin: 0; }
.meta-list dd a { color: inherit; }

.subheading { font-size: 1.5rem; font-weight: 500; margin: 1.75rem 0 .75rem; }
.subheading:first-child { margin-top: 0; }

.tag-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.tag {
	display: inline-flex;
	padding: .25rem .75rem;
	border-radius: 999px;
	background: var(--surface-3);
	color: var(--page-fg);
	font-size: .85rem;
	text-decoration: none;
	box-shadow: var(--shadow-sm);
}
.tag:hover { background: color-mix(in srgb, var(--accent) 14%, var(--surface-3)); }

/* Zusatzmaterial */
.material-list { display: flex; flex-direction: column; gap: .625rem; }
.material {
	display: inline-flex;
	align-items: center;
	gap: .75rem;
	text-decoration: none;
	color: var(--accent);
	font-weight: 500;
}
html.dark .material { color: var(--purple-300); }
.material:hover { text-decoration: underline; }
.material__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 2.5rem; height: 2.5rem;
	border-radius: 999px;
	background: var(--white);
	color: var(--purple-500);
	box-shadow: var(--shadow-sm);
	flex: none;
}

.bonus-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.bonus {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .25rem .875rem .25rem .35rem;
	border-radius: 999px;
	background: var(--slate-200);
	color: var(--violet-700);
	font-size: .85rem;
	font-weight: 600;
}
html.dark .bonus { background: var(--indigo-800); color: var(--white); }
.bonus__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 1.75rem; height: 1.75rem;
	border-radius: 999px;
	background: var(--white);
	color: var(--purple-500);
	box-shadow: var(--shadow-sm);
}

/* -------------------------------------------------------------- Kursseite */
.course-banner {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 9rem;
	padding: 1.5rem;
	margin-bottom: 1.5rem;
	border-radius: var(--radius-lg);
	background: var(--indigo-800);
	color: var(--white);
	font-size: clamp(1.5rem, 1rem + 2.5vw, 2.75rem);
	font-weight: 500;
	text-align: center;
	box-shadow: var(--shadow-md);
}
@media (min-width: 768px) { .course-banner { min-height: 12rem; } }

.course-intro { display: grid; gap: 1.5rem; margin-bottom: 2rem; }
.course-intro__main { display: grid; gap: 1.5rem; }
@media (min-width: 720px) {
	.course-intro__main { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
}

/* Material rechts in einem Kasten – erst ab Desktopbreite. */
@media (min-width: 1024px) {
	.course-intro--with-materials {
		grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
		align-items: start;
	}
	.course-materials {
		grid-column: 2;
		padding: 1.25rem 1.5rem 1.5rem;
		border-radius: var(--radius-lg);
		background: var(--surface);
		box-shadow: var(--shadow-md);
	}
	.course-materials .subheading { margin-top: 0; font-size: 1.25rem; }
}
.course-goals { padding-left: 1.25rem; list-style: disc; }
.course-goals li { margin-bottom: .25rem; }

.panel {
	padding: 1.5rem;
	border-radius: var(--radius-lg);
	background: var(--surface);
	box-shadow: var(--shadow-md);
}
.panel--narrow { max-width: 30rem; margin-inline: auto; }

/* Sichtbarkeit eines Schnitts im Editor */
.visibility-badge {
	display: inline-flex;
	align-self: flex-start;
	width: fit-content;
	align-items: center;
	gap: .25rem;
	margin-left: .4rem;
	padding: .05rem .5rem;
	border-radius: 999px;
	border: 1px solid var(--border);
	font-size: .72rem;
	font-weight: 500;
	vertical-align: middle;
	color: var(--muted-fg);
}
.visibility-badge .icon { width: .8rem; height: .8rem; }
.visibility-badge--course { border-color: var(--accent); color: var(--accent); }
html.dark .visibility-badge--course { color: var(--purple-300); border-color: var(--purple-300); }
.bulk-visibility { margin: 0 0 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.bulk-visibility__row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .35rem; }
.bulk-visibility__row .form-input { width: auto; min-width: 12rem; }
.locked-slice__title { display: flex; align-items: center; justify-content: center; gap: .5rem; text-align: center; }
.locked-slice__text { text-align: center; color: var(--muted-fg); }
.locked-slice__courses { list-style: none; margin: 1.25rem 0 .5rem; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.locked-slice__courses .btn { justify-content: center; gap: .4rem; }

.form-field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
/* display: flex sticht die Vorgabe des Browsers für [hidden] aus – hier
   wieder geradegerückt, damit ausgeblendete Felder auch verschwinden. */
.form-field[hidden] { display: none; }
.form-field label { font-size: .85rem; font-weight: 600; }

/* Beschriftung mit Info-Symbol daneben – das Symbol ist ein Knopf und darf
   deshalb nicht im <label> stehen. */
.form-label { display: flex; align-items: center; gap: .35rem; }
.form-label label { margin: 0; }
.form-input {
	width: 100%;
	padding: .55rem .75rem;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--page-bg);
	color: var(--page-fg);
	font: inherit;
}
.form-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.form-error { color: var(--red-600); font-size: .85rem; margin-bottom: .75rem; }
html.dark .form-error { color: #fca5a5; }

/* ------------------------------------------------------------ Listenseite */
.list-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }

.list-card {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: 1.25rem;
	border-radius: var(--radius-lg);
	background: var(--surface);
	box-shadow: var(--shadow-md);
}
.list-card__title { margin: 0; font-size: 1.15rem; }
.list-card__title a { text-decoration: none; }
.list-card__title a:hover { text-decoration: underline; }
.list-card__meta { font-size: .82rem; color: var(--muted-fg); }
.list-card__preview { display: flex; flex-direction: column; gap: .15rem; font-size: .85rem; color: var(--muted-fg); }
.list-card__actions { display: flex; gap: .5rem; margin-top: auto; padding-top: .5rem; }

/* ------------------------------------------------------------------ Modal */
.modal[hidden] { display: none; }
.modal {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}
.modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 12, 40, .55);
	backdrop-filter: blur(2px);
	border: 0;
	padding: 0;
	cursor: pointer;
}
.modal__panel {
	position: relative;
	width: min(100%, 26rem);
	max-height: min(85vh, 40rem);
	display: flex;
	flex-direction: column;
	background: var(--surface);
	color: var(--page-fg);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
}
.modal__head {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: 1rem 1rem .75rem 1.25rem;
	border-bottom: 1px solid var(--border);
}
.modal__title { margin: 0; font-size: 1.05rem; }
.modal__close { margin-left: auto; }
.modal__body { padding: .5rem .75rem; overflow-y: auto; }
.modal__foot { padding: .75rem 1.25rem 1.25rem; border-top: 1px solid var(--border); }
.modal__status { font-size: .85rem; color: var(--muted-fg); padding: .5rem .5rem 0; }
.modal__status--error { color: var(--red-600); }
html.dark .modal__status--error { color: #fca5a5; }

.list-option {
	display: flex;
	align-items: center;
	gap: .625rem;
	width: 100%;
	padding: .55rem .625rem;
	border: 0;
	border-radius: var(--radius);
	background: transparent;
	text-align: left;
	cursor: pointer;
	font-size: .92rem;
}
.list-option:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.list-option__check {
	display: inline-flex; align-items: center; justify-content: center;
	width: 1.25rem; height: 1.25rem;
	border: 2px solid color-mix(in srgb, var(--page-fg) 35%, transparent);
	border-radius: .3rem;
	flex: none;
	color: transparent;
}
.list-option.is-selected .list-option__check {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-contrast);
}
.list-option__title { flex: 1 1 auto; min-width: 0; }
.list-option__count { font-size: .78rem; color: var(--muted-fg); }
.list-option.is-busy { opacity: .55; pointer-events: none; }

.new-list-form { display: flex; gap: .5rem; }
.new-list-form .form-input { flex: 1 1 auto; }

/* --------------------------------------------------------------- Toasts */
.toast-stack {
	position: fixed;
	left: 50%;
	bottom: 1.25rem;
	transform: translateX(-50%);
	z-index: 100;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	pointer-events: none;
}
.toast {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .6rem 1rem;
	border-radius: 999px;
	background: var(--indigo-800);
	color: var(--white);
	box-shadow: var(--shadow-lg);
	font-size: .88rem;
	pointer-events: auto;
	animation: cellia-toast-in 180ms ease;
}
.toast a { color: var(--purple-300); }
.toast--error { background: var(--red-600); }
@keyframes cellia-toast-in {
	from { opacity: 0; transform: translateY(.5rem); }
	to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------- Farbschema-Menü */
.scheme { position: relative; }
.scheme__menu {
	position: absolute;
	right: 0;
	top: calc(100% + .35rem);
	z-index: 50;
	min-width: 9rem;
	padding: .25rem;
	border-radius: var(--radius);
	background: var(--surface);
	box-shadow: var(--shadow-lg);
	border: 1px solid var(--border);
}
.scheme__menu[hidden] { display: none; }
.scheme__option {
	display: flex;
	align-items: center;
	gap: .5rem;
	width: 100%;
	padding: .45rem .6rem;
	border: 0;
	border-radius: .375rem;
	background: transparent;
	cursor: pointer;
	font-size: .88rem;
	text-align: left;
}
.scheme__option:hover { background: var(--accent); color: var(--accent-contrast); }
.scheme__option.is-active { font-weight: 700; }

/* --------------------------------------------------------------- Sonstiges */
.prose { max-width: 65ch; }
.prose h1 { font-size: 2rem; }
.prose h2 { font-size: 1.4rem; margin-top: 2rem; }
.prose a  { color: var(--accent); }
html.dark .prose a { color: var(--purple-300); }

.user-menu { display: inline-flex; align-items: center; }
.user-menu .my-menu__list { min-width: 13rem; }
.user-menu__name {
	margin: 0;
	padding: .45rem .65rem .5rem;
	border-bottom: 1px solid var(--border);
	margin-bottom: .25rem;
	font-size: .82rem;
	font-weight: 600;
	color: var(--muted-fg);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Initialen im Kreis statt des vollen Namens. */
.avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--surface-2);
	color: var(--accent);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .02em;
	cursor: pointer;
	user-select: none;
	list-style: none;
	transition: box-shadow var(--transition);
}
.avatar::-webkit-details-marker { display: none; }
.avatar:hover,
.user-menu[open] .avatar { box-shadow: 0 0 0 2px var(--purple-400); }
.avatar:focus-visible { outline: 2px solid var(--purple-400); outline-offset: 2px; }
html.dark .avatar { background: rgba(255, 255, 255, .12); color: var(--white); }

/* --------------------------------------------------------- Mein Bereich */
.my-menu { position: relative; }
.my-menu__button {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .4rem .9rem;
	border-radius: 999px;
	/* Das Rosa aus dem Logo, eine Stufe dunkler – auf dem hellen Ton wäre
	   weiße Schrift zu schwach lesbar. */
	background: var(--purple-600);
	color: var(--white);
	font-size: .85rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	white-space: nowrap;
	transition: background var(--transition);
}
.my-menu__button::-webkit-details-marker { display: none; }
.my-menu__button:hover,
.my-menu[open] .my-menu__button { background: var(--purple-700); }
.my-menu__button:focus-visible { outline: 2px solid var(--purple-400); outline-offset: 2px; }
.my-menu__button .icon { fill: currentColor; }

.my-menu__list {
	position: absolute;
	right: 0;
	top: calc(100% + .35rem);
	z-index: 50;
	min-width: 12rem;
	padding: .25rem;
	border-radius: var(--radius);
	background: var(--surface);
	box-shadow: var(--shadow-lg);
	border: 1px solid var(--border);
}
.my-menu__item {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .5rem .65rem;
	border-radius: .375rem;
	color: var(--page-fg);
	font-size: .88rem;
	text-decoration: none;
}
.my-menu__item:hover,
.my-menu__item:focus-visible { background: var(--accent); color: var(--accent-contrast); }

/* Auf schmalen Bildschirmen nur das Symbol. */
@media (max-width: 560px) {
	.my-menu__label { display: none; }
	.my-menu__button { padding: .45rem; }
}

@media print {
	.site-header__tools, .filters, .slice-view__actions, .viewer__controls, .site-footer { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
}

/* ==========================================================================
   Redaktionsbereich (/admin)
   --------------------------------------------------------------------------
   Nutzt dieselben Farbtokens wie das Frontend, setzt aber auf dichtere
   Darstellung: Tabellen statt Kacheln, kompaktere Formulare.
   ========================================================================== */

/* Seitenleiste: ausgeklappt mit Beschriftung, eingeklappt nur Symbole.
   Auf schmalen Bildschirmen steht sie als Leiste über dem Inhalt. */
.admin-shell {
	flex: 1 0 auto;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: 0 1.5rem;
	width: 100%;
	max-width: var(--content-width);
	margin-inline: auto;
	padding: 1.5rem 1.25rem 0;
}
@media (min-width: 768px) { .admin-shell { padding: 2rem 2rem 0; } }

.page-main--admin { max-width: none; margin: 0; padding: 0 0 3rem; }

.admin-sidebar {
	position: sticky;
	top: 1rem;
	display: flex;
	flex-direction: column;
	gap: .25rem;
	width: 13.5rem;
	max-height: calc(100vh - 2rem);
	overflow-y: auto;
	padding: .5rem;
	border-radius: var(--radius-lg);
	background: var(--surface);
	box-shadow: var(--shadow-sm);
	transition: width var(--transition);
}

.admin-sidebar__toggle,
.admin-side-link {
	display: flex;
	align-items: center;
	gap: .65rem;
	min-height: 2.5rem;
	padding: .5rem .75rem;
	border-radius: var(--radius);
	font: inherit;
	font-size: .92rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	color: var(--muted-fg);
}

.admin-sidebar__toggle {
	margin-bottom: .25rem;
	border: 0;
	background: transparent;
	cursor: pointer;
	font-size: .82rem;
	font-weight: 500;
}
.admin-sidebar__chevron { transition: transform var(--transition); }

.admin-sidebar__nav { display: flex; flex-direction: column; gap: .2rem; }

.admin-sidebar__toggle:hover,
.admin-side-link:hover { background: color-mix(in srgb, var(--page-fg) 8%, transparent); color: var(--page-fg); }
.admin-side-link.is-active { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
html.dark .admin-side-link.is-active { color: var(--purple-300); }

.admin-side-link--help {
	margin-top: .5rem;
	padding-top: .75rem;
	border-top: 1px solid var(--border);
	border-radius: 0 0 var(--radius) var(--radius);
}
.admin-side-link__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 1.15rem;
	height: 1.15rem;
	border: 1.5px solid currentColor;
	border-radius: 999px;
	font-size: .72rem;
	font-weight: 700;
	line-height: 1;
}

/* Eingeklappt: Beschriftung nur noch für Screenreader. */
html.admin-nav-collapsed .admin-sidebar { width: 3.5rem; }
html.admin-nav-collapsed .admin-sidebar__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
html.admin-nav-collapsed .admin-sidebar__toggle,
html.admin-nav-collapsed .admin-side-link { justify-content: center; padding-inline: 0; }
html.admin-nav-collapsed .admin-sidebar__chevron { transform: rotate(180deg); }

@media (max-width: 767px) {
	.admin-shell { grid-template-columns: minmax(0, 1fr); }
	.admin-sidebar {
		position: static;
		width: auto;
		max-height: none;
		margin-bottom: 1.25rem;
	}

	/* Eingeklappt: Symbole nebeneinander in einer Zeile. */
	html.admin-nav-collapsed .admin-sidebar { width: auto; flex-direction: row; flex-wrap: wrap; }
	html.admin-nav-collapsed .admin-sidebar__nav { flex-direction: row; flex-wrap: wrap; }
	html.admin-nav-collapsed .admin-sidebar__toggle { margin: 0; order: 2; margin-left: auto; }
	html.admin-nav-collapsed .admin-sidebar__toggle,
	html.admin-nav-collapsed .admin-side-link { width: 2.5rem; }
	html.admin-nav-collapsed .admin-side-link--help { margin: 0; padding-top: .5rem; border-top: 0; }
	.admin-sidebar__chevron { transform: rotate(90deg); }
	html.admin-nav-collapsed .admin-sidebar__chevron { transform: rotate(-90deg); }
}

/* Rückmeldung nach dem Speichern */
.notice {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0 0 1.25rem;
	padding: .7rem 1rem;
	border-radius: var(--radius);
	font-size: .9rem;
}
.notice--ok {
	background: color-mix(in srgb, #16a34a 14%, transparent);
	color: #15803d;
}
html.dark .notice--ok { color: #86efac; }
.notice--error {
	background: color-mix(in srgb, var(--red-500) 14%, transparent);
	color: var(--red-600);
}
html.dark .notice--error { color: #fca5a5; }

/* -------------------------------------------------------------- Werkzeugleiste */
.admin-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
	margin-bottom: 1.25rem;
}
.admin-toolbar__search { flex: 1 1 20rem; min-width: 0; max-width: 30rem; }
.admin-toolbar__sort { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--muted-fg); }
.admin-toolbar__sort select { width: auto; }
.admin-toolbar__views { display: inline-flex; gap: .35rem; margin-left: auto; }
.admin-toolbar__views .chip.is-active { background: var(--accent); color: var(--accent-contrast); }

/* -------------------------------------------------------------- Tabellen */
/* position: relative hält auch die absolut positionierten, nur für
   Screenreader sichtbaren Beschriftungen im Scrollbereich – sonst ragen sie
   rechts aus der Seite und erzeugen seitliches Scrollen. */
.admin-table-wrap {
	position: relative;
	overflow-x: auto;
	border-radius: var(--radius-lg);
	background: var(--surface);
	box-shadow: var(--shadow-sm);
}

.admin-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.admin-table th, .admin-table td {
	padding: .6rem .875rem;
	text-align: left;
	border-bottom: 1px solid var(--border);
	vertical-align: middle;
}
.admin-table thead th {
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--muted-fg);
	white-space: nowrap;
}
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.admin-table__link { font-weight: 600; text-decoration: none; }
.admin-table__link:hover { text-decoration: underline; }
.admin-table__id { display: block; font-size: .72rem; color: var(--muted-fg); }
.admin-table__mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; }
.admin-table__date { white-space: nowrap; color: var(--muted-fg); font-size: .82rem; }
.admin-table__muted { color: var(--muted-fg); }
.admin-table__actions { white-space: nowrap; text-align: right; }
.admin-table__actions .btn { margin-right: .35rem; }

.admin-flags { display: inline-flex; flex-wrap: wrap; gap: .3rem; }
.admin-flag {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	padding: .1rem .45rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--accent) 14%, transparent);
	color: var(--accent);
	font-size: .72rem;
	font-weight: 600;
	white-space: nowrap;
}
html.dark .admin-flag { color: var(--purple-300); }

/* ------------------------------------------------------------- Kursgruppen */
.admin-group {
	margin-bottom: .5rem;
	border-radius: var(--radius);
	background: var(--surface);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}
.admin-group__summary {
	display: flex;
	align-items: center;
	gap: .625rem;
	padding: .7rem .875rem;
	cursor: pointer;
	list-style: none;
	font-size: .92rem;
}
.admin-group__summary::-webkit-details-marker { display: none; }
.admin-group__summary:hover { background: color-mix(in srgb, var(--page-fg) 5%, transparent); }
.admin-group__title { font-weight: 600; }
.admin-group__title.is-muted { color: var(--muted-fg); font-weight: 500; }
.admin-group__count { margin-left: auto; font-size: .8rem; color: var(--muted-fg); }
.admin-group__summary > .icon:last-child { transition: transform var(--transition); }
.admin-group[open] > .admin-group__summary > .icon:last-child { transform: rotate(90deg); }
.admin-group__empty { margin: 0; padding: .75rem 1.5rem 1rem; color: var(--muted-fg); font-size: .85rem; }
.admin-group .admin-table-wrap { box-shadow: none; border-radius: 0; background: transparent; }

/* --------------------------------------------------------------- Formular */
/* Reiter über dem Bearbeitungsbereich */
.edit-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem;
	margin-bottom: -1px;
	border-bottom: 2px solid var(--border);
}
.edit-tab {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .6rem 1.1rem;
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
	color: var(--muted-fg);
	font: inherit;
	font-size: .92rem;
	font-weight: 600;
	cursor: pointer;
}
.edit-tab:hover { color: var(--page-fg); }
.edit-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
html.dark .edit-tab.is-active { color: var(--purple-300); border-bottom-color: var(--purple-400); }
.edit-tab__count {
	padding: .05rem .4rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--accent) 18%, transparent);
	font-size: .72rem;
}

.admin-edit { padding-top: 1.25rem; }
.edit-panel[hidden] { display: none; }
.edit-panel { display: flex; flex-direction: column; gap: 1.25rem; padding-top: 1.25rem; }

/* Zuordnungslisten im Kurs-Editor: Titel links, Knopf rechts. */
.assign-list { display: flex; flex-direction: column; gap: .15rem; }
.assign-list__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .45rem .6rem;
	border-radius: var(--radius);
}
.assign-list__item:hover { background: var(--page-bg); }
.assign-list__text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.assign-list__title { font-weight: 600; }
.assign-list__item form { flex: none; margin: 0; }

[data-picker-results].is-loading { opacity: .55; transition: opacity var(--transition); }

/* Mehrfachauswahl: Häkchenspalte und Leiste mit der Sammelaktion */
.admin-table__check { width: 2.5rem; padding-right: 0 !important; }
.admin-table__check input,
.bulk-check,
[data-bulk-all] { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); cursor: pointer; }
.assign-list__item .bulk-check { flex: none; margin-right: -.25rem; }
.assign-list__item .assign-list__text { flex: 1; }
.bulk-select-all { margin: 0 0 .5rem .6rem; }

.bulk-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .75rem;
	margin-top: 1rem;
	padding: .75rem 1rem;
	border-radius: var(--radius-lg);
	background: var(--surface);
	box-shadow: var(--shadow-md);
}
.bulk-bar--sticky { position: sticky; bottom: .75rem; z-index: 5; }
.bulk-bar__count { font-weight: 600; font-size: .9rem; }
.bulk-bar:not(.has-selection) .bulk-bar__count { color: var(--muted-fg); font-weight: 400; }
.bulk-bar__action { flex: 1 1 14rem; width: auto; min-width: 0; max-width: 26rem; }
.bulk-bar__hint { flex-basis: 100%; margin: 0; }

/* Unterordner im Kurs-Editor: Name, Anzahl, Sortieren und Löschen in einer Zeile. */
.folder-list { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.folder-list__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem 1rem;
	padding: .45rem .6rem;
	border-radius: var(--radius);
}
.folder-list__item:hover { background: var(--page-bg); }
.folder-list__rename { display: flex; flex: 1 1 18rem; gap: .5rem; margin: 0; min-width: 0; }
.folder-list__rename .form-input { flex: 1; min-width: 0; }
.folder-list__count { color: var(--muted-fg); font-size: .85rem; white-space: nowrap; }
.folder-list__actions { display: flex; gap: .25rem; }
.folder-list__actions form { margin: 0; }

/* Ankreuz-Tabelle Schnitt × Ordner */
.folder-matrix tbody th { font-weight: 400; }
.folder-matrix__col { text-align: center !important; white-space: nowrap; }
.folder-matrix input[type="checkbox"] { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); }

/* Der Viewer darf im eigenen Reiter deutlich größer sein. */
.admin-anno { position: static; }
.anno-viewer .viewer__canvas { height: min(62vh, 40rem); }

.slice-edit__head { align-items: center; gap: .75rem 1rem; }
.slice-edit__head .btn { flex: none; }

.admin-form { display: flex; flex-direction: column; gap: 1.25rem; }
.admin-form .panel { padding: 1.25rem; }
.admin-form__actions {
	position: sticky;
	bottom: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	padding: .875rem 1.25rem;
	border-radius: var(--radius-lg);
	background: var(--surface);
	box-shadow: var(--shadow-md);
}

.form-row { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.form-hint { margin: .25rem 0 0; font-size: .8rem; color: var(--muted-fg); }
textarea.form-input { resize: vertical; min-height: 4rem; font-family: inherit; }

.link-button {
	border: 0;
	background: none;
	padding: 0;
	color: var(--accent);
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}
html.dark .link-button { color: var(--purple-300); }

.checkbox-grid {
	display: grid;
	gap: .1rem .75rem;
	grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	max-height: 16rem;
	overflow-y: auto;
}

/* ------------------------------------------------------------------- Tags */
.tag-picker { display: flex; flex-direction: column; gap: .75rem; }
.tag-picker__chosen { display: flex; flex-wrap: wrap; gap: .4rem; min-height: 1.5rem; }
.tag-picker__chosen:empty::before {
	content: "Noch keine Tags gewählt.";
	color: var(--muted-fg);
	font-size: .85rem;
}

.tag-chip {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .2rem .4rem .2rem .7rem;
	border-radius: 999px;
	background: var(--surface-3);
	font-size: .85rem;
}
.tag-chip__remove {
	border: 0;
	background: none;
	padding: 0 .15rem;
	color: var(--muted-fg);
	cursor: pointer;
	line-height: 1;
}
.tag-chip__remove:hover { color: var(--red-600); }

.tag-picker__add { position: relative; display: flex; gap: .5rem; }
.tag-picker__add .form-input { flex: 1 1 auto; }

.tag-picker__suggestions {
	position: absolute;
	z-index: 30;
	top: calc(100% + .25rem);
	left: 0;
	right: 6rem;
	max-height: 14rem;
	overflow-y: auto;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
}
.tag-picker__suggestion {
	display: block;
	width: 100%;
	padding: .45rem .75rem;
	border: 0;
	background: none;
	text-align: left;
	font: inherit;
	cursor: pointer;
}
.tag-picker__suggestion:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* Zugriffsstufen als Liste mit Erklärung darunter. */
.role-options { display: flex; flex-direction: column; gap: .35rem; }
.role-options .filter-option { align-items: flex-start; }
.role-options .filter-option__label { display: flex; flex-direction: column; gap: .1rem; }

/* Grundstufe links, Kursrechte daneben. */
.access-grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	align-items: start;
}
@media (max-width: 780px) { .access-grid { grid-template-columns: 1fr; } }

.access-list {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	max-height: 18rem;
	overflow-y: auto;
}
.access-list__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .35rem .5rem;
	border-radius: var(--radius);
}
.access-list__item:hover { background: var(--page-bg); }
.access-list__title { font-size: .9rem; min-width: 0; }
.access-list__choice { display: flex; gap: .6rem; flex: none; }
.access-option {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	font-size: .82rem;
	color: var(--muted-fg);
	cursor: pointer;
}
.access-option input:checked + span { color: var(--accent); font-weight: 600; }
html.dark .access-option input:checked + span { color: var(--purple-300); }

/* Knopf in einer Tabellenzelle, ohne eigenen Absatz. */
.inline-form { display: inline; }

/* Auswahlfeld mit Vorschlagsliste (Schnitt des Monats). */
.combo { position: relative; }
.combo__list {
	position: absolute;
	z-index: 30;
	top: calc(100% + .25rem);
	left: 0;
	right: 0;
	max-height: 16rem;
	overflow-y: auto;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
}
.combo__option {
	display: flex;
	flex-direction: column;
	gap: .1rem;
	width: 100%;
	padding: .45rem .75rem;
	border: 0;
	background: none;
	text-align: left;
	font: inherit;
	cursor: pointer;
}
.combo__option:hover,
.combo__option:focus-visible { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.combo__title { font-weight: 600; }
.combo__meta,
.combo__empty { font-size: .78rem; color: var(--muted-fg); }
.combo__empty { padding: .5rem .75rem; }

/* ------------------------------------------------------- Zusatzmaterial */
.materials { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .75rem; }
.material-row {
	display: grid;
	gap: .5rem;
	grid-template-columns: 7rem minmax(0, 1fr) minmax(0, 1.4fr) auto auto;
	align-items: center;
}
@media (max-width: 720px) { .material-row { grid-template-columns: 1fr 1fr; } }
.material-row__status { font-size: .78rem; color: var(--muted-fg); white-space: nowrap; }
.material-row__file input { font-size: .8rem; max-width: 12rem; }

/* -------------------------------------------------------- Annotationen */
.anno-toolbar { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .75rem; }
.anno-toolbar .btn.is-active { background: var(--accent); color: var(--accent-contrast); }

.anno-viewer .viewer__canvas { aspect-ratio: auto; }
.anno-actions { display: flex; align-items: center; gap: .75rem; margin-top: .75rem; }
.anno-status { font-size: .82rem; color: var(--muted-fg); }
.anno-status.is-dirty { color: var(--red-600); font-weight: 600; }
html.dark .anno-status.is-dirty { color: #fca5a5; }

/* --------------------------------------------------- Eigene Notizen */
/* Unter dem Viewer auf der Schnittseite: Umschalter, Werkzeuge, Liste. */
.notes { margin-top: .75rem; }
.notes__head { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.notes__count {
	margin-left: .35rem;
	padding: .05rem .4rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--accent) 18%, transparent);
	font-size: .72rem;
}
.notes__status { font-size: .8rem; color: var(--muted-fg); }
.notes__status.is-error { color: #b91c1c; }
html.dark .notes__status.is-error { color: #fca5a5; }

.notes__panel {
	margin-top: .75rem;
	padding: 1rem;
	border-radius: var(--radius-lg);
	background: var(--surface);
	box-shadow: var(--shadow-sm);
}
.notes__panel[hidden] { display: none; }

/* Werkzeuge links, Fragezeichen rechts daneben. */
.notes__tools {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: .75rem;
}
.notes__tools .anno-toolbar { margin-bottom: 0; }

.notes__help {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border: 1px solid var(--border);
	border-radius: 50%;
	background: var(--surface);
	color: var(--accent);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	transition: background var(--transition), color var(--transition);
}
.notes__help:hover,
.notes__help:focus-visible { background: var(--accent); color: #fff; border-color: var(--accent); }
html.dark .notes__help { color: var(--purple-300); }
html.dark .notes__help:hover,
html.dark .notes__help:focus-visible { color: #fff; }

/* Die Erklärung darf breiter sein als der Listendialog. */
.notes-help { width: min(100%, 34rem); }
.notes-help__body { padding: 1rem 1.25rem 1.25rem; font-size: .92rem; line-height: 1.55; }
.notes-help__body p { margin: 0 0 .75rem; }
.notes-help__heading { margin: 1rem 0 .35rem; font-size: .95rem; }
.notes-help__steps { margin: 0 0 .75rem; padding-left: 1.4rem; list-style: decimal; }
.notes-help__steps li { margin-bottom: .35rem; }
.notes-help kbd {
	display: inline-block;
	padding: .05rem .4rem;
	border: 1px solid var(--border);
	border-bottom-width: 2px;
	border-radius: 4px;
	background: var(--page-bg);
	font: inherit;
	font-size: .85em;
	white-space: nowrap;
}

.notes__signin {
	display: flex;
	align-items: center;
	gap: .4rem;
	margin-top: .75rem;
	font-size: .85rem;
	color: var(--muted-fg);
}

.anno-list { margin-top: 1rem; display: flex; flex-direction: column; max-height: 14rem; overflow-y: auto; }
.anno-list__item { border-bottom: 1px solid var(--border); }
.anno-list__item:last-child { border-bottom: 0; }
.anno-list__label {
	display: block;
	width: 100%;
	padding: .4rem .25rem;
	border: 0;
	background: none;
	text-align: left;
	font: inherit;
	font-size: .85rem;
	cursor: pointer;
}
.anno-list__label:hover { color: var(--accent); }
.anno-list__empty { padding: .5rem .25rem; color: var(--muted-fg); font-size: .85rem; }

/* -------------------------------------------------------------- Sonstiges */
/* display: flex sticht [hidden] aus – deshalb ausdrücklich. */
.admin-new-course { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1.25rem; }
.admin-new-course[hidden] { display: none; }
.admin-new-course .form-input { flex: 1 1 14rem; min-width: 0; }
.admin-toolbar__new { margin-left: auto; }

.admin-danger {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-top: 1.5rem;
	border: 1px solid color-mix(in srgb, var(--red-500) 35%, transparent);
}
.admin-danger > div { flex: 1 1 20rem; }
.admin-danger .btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ------------------------------------------------------- Statistik (/admin) */

/* Die drei Zahlen ganz oben */
.headline-grid {
	display: grid;
	gap: 1rem;
	/* Fünf Kacheln – schmalere Mindestbreite, damit sie auf üblichen
	   Bildschirmen in einer Reihe bleiben und erst darunter umbrechen. */
	grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
	margin-bottom: 1.5rem;
}
.headline-card {
	padding: 1.25rem 1.25rem 1rem;
	border-radius: var(--radius-lg);
	background: var(--card-bg);
	color: var(--card-fg);
	box-shadow: var(--shadow-md);
}
.headline-card__value {
	font-size: clamp(2rem, 1.4rem + 1.7vw, 2.9rem);
	font-weight: 700;
	line-height: 1;
}
.headline-card__label { margin-top: .35rem; font-size: .95rem; opacity: .9; }
.headline-card__note { margin-top: .5rem; font-size: .78rem; opacity: .7; }

.stat-inline {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	margin: 0 0 1rem;
	font-size: .9rem;
	color: var(--muted-fg);
}
.stat-inline strong { color: var(--page-fg); font-size: 1.05rem; }

/* Die Abschnitte der Statistik stehen sonst Kante an Kante – ein kleiner
   Abstand trennt etwa Fachsemester von Anmeldungen. Die Kacheln innerhalb
   von .stat-columns behalten ihren Rasterabstand. */
.area-tabs ~ .panel,
.area-tabs ~ .stat-columns { margin-top: 1.25rem; }

.stat-columns {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
	margin-top: 1rem;
}
.stat-subheading {
	margin: 1.25rem 0 .5rem;
	font-size: .95rem;
	font-weight: 700;
}
.stat-columns > div > .stat-subheading:first-child { margin-top: 0; }

/* Aufklappbare Restliste – <details>, damit sie ohne JavaScript funktioniert. */
.more { margin-top: .75rem; }

.more__toggle {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .4rem .9rem;
	border-radius: var(--radius);
	background: var(--page-bg);
	box-shadow: var(--shadow-sm);
	color: var(--accent);
	font-size: .88rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}
.more__toggle::-webkit-details-marker { display: none; }
.more__toggle::after {
	content: '';
	width: .5rem;
	height: .5rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform .15s ease;
}
.more[open] .more__toggle::after { transform: translateY(2px) rotate(-135deg); }
.more__toggle:hover { color: var(--page-fg); }

/* Nur die jeweils passende Beschriftung zeigen. */
.more__close, .more[open] .more__open { display: none; }
.more[open] .more__close { display: inline; }

.more__body { margin-top: .6rem; }

/* Balken ohne Diagrammbibliothek – Breite kommt aus dem style-Attribut. */
.bar-list { display: flex; flex-direction: column; gap: .4rem; }
.bar-list--compact { gap: .2rem; }
.bar {
	display: grid;
	grid-template-columns: minmax(6rem, 11rem) 1fr auto;
	align-items: center;
	gap: .625rem;
	font-size: .85rem;
}
.bar-list--compact .bar { grid-template-columns: 6.5rem 1fr auto; font-size: .8rem; }
.bar__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar__label a { text-decoration: none; }
.bar__label a:hover { text-decoration: underline; }
.bar__rank { color: var(--muted-fg); font-variant-numeric: tabular-nums; }
.bar__track {
	height: .55rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--page-fg) 10%, transparent);
	overflow: hidden;
}
.bar-list--compact .bar__track { height: .45rem; }
.bar__fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--accent);
}
html.dark .bar__fill { background: var(--purple-400); }
.bar__value {
	font-variant-numeric: tabular-nums;
	color: var(--muted-fg);
	min-width: 2.5rem;
	text-align: right;
}

/* --------------------------------------------------------- Inhalte (/admin) */
.content-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .75rem;
	margin-bottom: .25rem;
}
.content-head .subheading { margin: 0; }

.origin {
	margin-left: auto;
	font-size: .78rem;
	color: var(--muted-fg);
}
.origin--edited { color: var(--accent); font-weight: 600; }
html.dark .origin--edited { color: var(--purple-300); }
.origin code { font-size: .95em; }

.content-point {
	display: grid;
	gap: .5rem;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	margin-bottom: .75rem;
	padding-bottom: .75rem;
	border-bottom: 1px solid var(--border);
}
.content-point:last-of-type { border-bottom: 0; }
@media (max-width: 720px) { .content-point { grid-template-columns: 1fr; } }

.content-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	align-items: center;
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--border);
}

.logo-rows { display: flex; flex-direction: column; gap: .5rem; }
/* Direktlink mit Kopierknopf */
.copy-field { margin: .75rem 0 0; }
.copy-field__row { display: flex; gap: .5rem; align-items: stretch; }
.copy-field__input {
	flex: 1;
	min-width: 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .85rem;
	cursor: text;
}
.copy-field__button { flex: none; min-width: 7rem; }
.copy-field__status { min-height: 1.1em; font-size: .8rem; color: var(--muted-fg); }

.logo-rows { display: flex; flex-direction: column; gap: .75rem; }
.logo-row {
	display: grid;
	gap: .5rem .75rem;
	grid-template-columns: 6rem minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
	align-items: center;
}
.logo-row--new { padding-top: .75rem; border-top: 1px dashed var(--border); }
@media (max-width: 1180px) {
	.logo-row { grid-template-columns: 5rem 1fr; }
	.logo-row > .form-input,
	.logo-row > .logo-row__remove { grid-column: 2; }
}
.logo-row__upload { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; min-width: 0; }
.logo-row__pick { cursor: pointer; }
/* Das echte Dateifeld bleibt für Tastatur und Screenreader erreichbar. */
.logo-row__pick:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.logo-row__filename {
	max-width: 100%;
	font-size: .72rem;
	color: var(--muted-fg);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.logo-row__remove { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; color: var(--muted-fg); cursor: pointer; white-space: nowrap; }
.logo-row:has(.logo-row__remove input:checked) { opacity: .45; }
.logo-row__preview {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 3rem;
	padding: .25rem;
	border-radius: var(--radius);
	background: var(--white);
	border: 1px solid var(--border);
	overflow: hidden;
}
.logo-row__preview img { max-height: 100%; max-width: 100%; object-fit: contain; }
.logo-row__missing { font-size: .68rem; color: var(--gray-500); text-align: center; }

/* Verlauf unter den Einträgen */
.month-history { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.month-history__title {
	display: flex; align-items: center; gap: .4rem;
	margin: 0 0 .75rem; font-size: 1rem; font-weight: 600;
}
.month-history__list { list-style: none; margin: 0; padding: 0; }
.month-history__row {
	display: grid;
	grid-template-columns: 10rem minmax(0, 1fr) auto;
	align-items: center;
	gap: .35rem 1rem;
	padding: .55rem .75rem;
	border-bottom: 1px solid var(--border);
	font-size: .9rem;
}
.month-history__list > .month-history__row:last-child { border-bottom: 0; }
.month-history__row.is-current {
	border-left: 3px solid var(--accent);
	border-radius: var(--radius);
	background: color-mix(in srgb, var(--accent) 10%, transparent);
	font-weight: 600;
}
.month-history__month { white-space: nowrap; color: var(--muted-fg); }
.month-history__row.is-current .month-history__month { color: inherit; }
.month-history__slice a { text-decoration: none; }
.month-history__slice a:hover { text-decoration: underline; }
.month-history__tags { display: inline-flex; align-items: center; gap: .4rem; }
.month-history__badge {
	padding: .1rem .55rem;
	border-radius: 999px;
	border: 1px solid var(--border);
	font-size: .75rem;
	font-weight: 500;
	color: var(--muted-fg);
	white-space: nowrap;
}
.month-history__badge--current { border-color: var(--accent); background: var(--accent); color: var(--accent-contrast); }
.month-history__view { display: inline-flex; color: var(--muted-fg); }
.month-history__view:hover { color: var(--accent); }
@media (max-width: 640px) {
	.month-history__row { grid-template-columns: minmax(0, 1fr); }
	.month-history__tags { flex-wrap: wrap; }
}

.month-rows { display: flex; flex-direction: column; gap: 1rem; }
.month-row {
	display: grid;
	gap: 0 1rem;
	grid-template-columns: 10rem 8rem minmax(0, 1fr);
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--border);
}
.month-row:last-child { border-bottom: 0; }
.month-row.is-current { border-left: 3px solid var(--accent); padding-left: .875rem; }
.month-row__text { grid-column: 3; grid-row: 1 / span 2; }
.month-row__image { grid-column: 1 / span 2; }
@media (max-width: 860px) {
	.month-row { grid-template-columns: 1fr 1fr; }
	.month-row__text, .month-row__image { grid-column: 1 / -1; grid-row: auto; }
}

/* Hilfeseite der Redaktion */
/* Hilfe: Reiter oben, darunter eine Seite je Thema */
.help-tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: thin; }
.help-tabs .edit-tab { text-decoration: none; white-space: nowrap; }

/* Kursseite: Unterordner als Reiter über der Schnittliste */
.course-tabs {
	overflow-x: auto;
	flex-wrap: nowrap;
	margin-bottom: 1.5rem;
	scrollbar-width: thin;
}
.course-tabs .edit-tab { text-decoration: none; white-space: nowrap; }

.help-page {
	margin-top: 1.25rem;
	max-width: 52rem;
	padding: 1.5rem clamp(1rem, 3vw, 2.25rem) 2rem;
	line-height: 1.65;
}
.help-page p, .help-page li, .help-page dd { color: color-mix(in srgb, var(--page-fg) 88%, transparent); }
.help-page__title { margin: 0 0 .5rem; font-size: 1.6rem; font-weight: 600; }
.help-page__lead { margin: 0 0 1.25rem; font-size: 1.05rem; }
.help-page h3 {
	margin: 2.25rem 0 .75rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--border);
	font-size: 1.15rem;
	font-weight: 600;
	scroll-margin-top: 1rem;
}
.help-page ul { padding-left: 1.25rem; list-style: disc; }
.help-page .help-toc, .help-page .help-links { list-style: none; }
.help-page a { color: var(--accent); }
html.dark .help-page a { color: var(--purple-300); }

.help-toc {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem 1rem;
	padding: .75rem 1rem;
	border-radius: var(--radius);
	background: var(--page-bg);
	font-size: .9rem;
}
.help-toc strong { flex-basis: 100%; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted-fg); }

/* Nummerierte Schritte */
.help-steps { list-style: none; counter-reset: step; margin: .75rem 0 1rem; padding: 0; }
.help-steps > li {
	position: relative;
	counter-increment: step;
	padding: .15rem 0 .6rem 2.5rem;
}
.help-steps > li::before {
	content: counter(step);
	position: absolute;
	left: 0;
	top: .1rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.7rem;
	height: 1.7rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--accent) 18%, transparent);
	color: var(--accent);
	font-size: .85rem;
	font-weight: 700;
}
html.dark .help-steps > li::before { color: var(--purple-300); }
.help-steps ul { margin: .35rem 0 0; }

/* Begriffe mit Erklärung */
.help-terms { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: .5rem 1.25rem; margin: .75rem 0 1rem; }
.help-terms dt { font-weight: 600; }
.help-terms dd { margin: 0; }
@media (max-width: 600px) {
	.help-terms { grid-template-columns: 1fr; gap: .1rem; }
	.help-terms dd { margin-bottom: .6rem; }
}

/* Häufige Fragen */
.help-faq dt { margin-top: 1.25rem; font-weight: 600; }
.help-faq dt:first-child { margin-top: .5rem; }
.help-faq dd { margin: .3rem 0 0; }

/* Hinweis und Warnung */
.help-note {
	margin: 1rem 0;
	padding: .75rem 1rem;
	border-left: 3px solid var(--accent);
	border-radius: 0 var(--radius) var(--radius) 0;
	background: color-mix(in srgb, var(--accent) 8%, transparent);
	font-size: .93rem;
}
.help-note--warn {
	border-left-color: var(--red-500);
	background: color-mix(in srgb, var(--red-500) 10%, transparent);
}

/* Bezeichnungen von Knöpfen und Reitern im Fließtext */
.help-ui {
	padding: .05rem .4rem;
	border-radius: .3rem;
	background: color-mix(in srgb, var(--page-fg) 9%, transparent);
	font-size: .9em;
	font-weight: 600;
	white-space: nowrap;
}
.help-page kbd {
	padding: .05rem .4rem;
	border: 1px solid var(--border);
	border-bottom-width: 2px;
	border-radius: .3rem;
	font: inherit;
	font-size: .85em;
}
.help-links { columns: 2 18rem; padding-left: 0; }
.help-links li { break-inside: avoid; margin-bottom: .3rem; }

/* Live-Suche in der Schnittliste */
.admin-toolbar.is-loading .searchbar__field { border-color: var(--accent); }
.admin-results.is-loading { opacity: .55; transition: opacity var(--transition); }
.admin-toolbar__submit { display: inline-flex; }

/* -------------------------------------------------- Diagramm (Inline-SVG) */
.chart-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem 1rem;
	margin-bottom: .5rem;
}
.chart-head .subheading { margin: 0; }

/* Zeitraumwahl */
.range-switch {
	margin-left: auto;
	display: inline-flex;
	flex-wrap: wrap;
	gap: .2rem;
	padding: .2rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--page-fg) 7%, transparent);
}
.range-switch__item {
	padding: .3rem .8rem;
	border-radius: 999px;
	font-size: .82rem;
	font-weight: 600;
	color: var(--muted-fg);
	text-decoration: none;
	white-space: nowrap;
}
.range-switch__item:hover { color: var(--page-fg); }
.range-switch__item.is-active { background: var(--accent); color: var(--accent-contrast); }

.chart-summary { margin: 0 0 .25rem; color: var(--muted-fg); font-size: .9rem; }
.chart-summary strong { color: var(--page-fg); font-size: 1.35rem; }
.chart-lead { margin: 0 0 .5rem; color: var(--muted-fg); font-size: .85rem; }

.chart { margin: 0 0 .5rem; }
.chart__svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Fläche unter der ersten Reihe */
.chart__area { fill: color-mix(in srgb, var(--accent) 22%, transparent); stroke: none; }
html.dark .chart__area { fill: color-mix(in srgb, var(--purple-400) 26%, transparent); }

.chart__line {
	fill: none;
	stroke: var(--accent);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
}
html.dark .chart__line { stroke: var(--purple-400); }

/* Weitere Reihen gestrichelt und zurückhaltender */
.chart__line--dotted {
	stroke: color-mix(in srgb, var(--page-fg) 55%, transparent);
	stroke-width: 2.5;
	stroke-dasharray: 1 5;
}

.chart__dot {
	fill: var(--surface);
	stroke: var(--accent);
	stroke-width: 2.5;
}
html.dark .chart__dot { stroke: var(--purple-400); }

/* Stehende Balken – etwa für die Fachsemester. */
.chart__column {
	fill: var(--accent);
	transition: fill .15s ease;
}

.chart__column:hover { fill: color-mix(in srgb, var(--accent) 75%, var(--page-fg)); }

/* Semester ohne eine einzige Person: nur ein Stummel auf der Grundlinie. */
.chart__column--zero { fill: color-mix(in srgb, var(--page-fg) 20%, transparent); }

html.dark .chart__column { fill: var(--purple-400); }
html.dark .chart__column:hover { fill: color-mix(in srgb, var(--purple-400) 75%, #fff); }
html.dark .chart__column--zero { fill: color-mix(in srgb, var(--page-fg) 28%, transparent); }

.chart__grid { stroke: color-mix(in srgb, var(--page-fg) 12%, transparent); stroke-width: 1; }
.chart__grid--v { stroke: color-mix(in srgb, var(--page-fg) 7%, transparent); }
.chart__tick,
.chart__label { fill: var(--muted-fg); font-size: 12px; font-family: inherit; }
.chart__axis-title {
	fill: var(--muted-fg);
	font-size: 12px;
	font-family: inherit;
	font-weight: 600;
}

/* Legende */
.chart__legend {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem 1.5rem;
	margin-top: .25rem;
	font-size: .85rem;
	color: var(--muted-fg);
}
.chart__legend-item { display: inline-flex; align-items: center; gap: .5rem; }
.chart__swatch {
	display: inline-block;
	width: 2.25rem;
	height: .7rem;
	border-radius: 3px;
	background: color-mix(in srgb, var(--accent) 22%, transparent);
	border: 2px solid var(--accent);
}
html.dark .chart__swatch {
	background: color-mix(in srgb, var(--purple-400) 26%, transparent);
	border-color: var(--purple-400);
}
.chart__swatch--dotted {
	background: none;
	border: 0;
	height: 0;
	border-top: 3px dotted color-mix(in srgb, var(--page-fg) 55%, transparent);
	border-radius: 0;
}

@media (max-width: 640px) {
	.range-switch { margin-left: 0; width: 100%; justify-content: space-between; }
}

/* ------------------------------------------------------------ Info-Symbol */
.info { position: relative; display: inline-flex; vertical-align: middle; }

.info__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.15rem;
	height: 1.15rem;
	padding: 0;
	border: 1px solid color-mix(in srgb, var(--page-fg) 30%, transparent);
	border-radius: 999px;
	background: transparent;
	color: var(--muted-fg);
	font-size: .72rem;
	font-weight: 700;
	font-family: Georgia, "Times New Roman", serif;
	line-height: 1;
	cursor: help;
	transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.info__button:hover,
.info__button:focus-visible {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-contrast);
}

.info__bubble {
	position: absolute;
	z-index: 60;
	bottom: calc(100% + .5rem);
	left: 50%;
	transform: translateX(-50%);
	width: max-content;
	max-width: 22rem;
	padding: .55rem .75rem;
	border-radius: var(--radius);
	background: var(--indigo-900);
	color: #fff;
	font-size: .8rem;
	font-weight: 400;
	line-height: 1.45;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: var(--shadow-lg);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--transition), visibility var(--transition);
	pointer-events: none;
}
html.dark .info__bubble { background: var(--gray-900); border: 1px solid var(--border); }

/* Kleine Spitze zur Schaltfläche hin */
.info__bubble::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: var(--indigo-900);
}
html.dark .info__bubble::after { border-top-color: var(--gray-900); }

/* :hover am Umschlag statt nur an der Schaltfläche, damit die Blase beim
   Hinüberfahren offen bleibt. :focus zusätzlich zu :focus-visible, sonst
   zeigt ein Klick – und damit auch die Berührung auf dem Tablet – nichts. */
.info:hover .info__bubble,
.info__button:focus + .info__bubble,
.info__button:focus-visible + .info__bubble {
	opacity: 1;
	visibility: visible;
}

/* Am rechten Rand würde die mittige Blase aus dem Bild laufen. */
.info--right .info__bubble { left: auto; right: 0; transform: none; }
.info--right .info__bubble::after { left: auto; right: .45rem; transform: none; }

@media (max-width: 640px) {
	.info__bubble { max-width: min(80vw, 22rem); }
}

/* --------------------------------------------------------- Suchbegriffe */
.term-list { display: flex; flex-direction: column; }
.term {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: baseline;
	gap: .75rem;
	padding: .4rem 0;
	border-bottom: 1px solid var(--border);
	font-size: .88rem;
}
.term:last-child { border-bottom: 0; }
.term__word {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 600;
}
.term__meta { font-size: .78rem; color: var(--muted-fg); white-space: nowrap; }
.term__meta em { font-style: normal; color: var(--red-600); }
html.dark .term__meta em { color: #fca5a5; }
.term__count {
	font-variant-numeric: tabular-nums;
	color: var(--muted-fg);
	min-width: 2.5rem;
	text-align: right;
}
.term--empty .term__word { color: var(--red-600); }
html.dark .term--empty .term__word { color: #fca5a5; }

/* Überschriften tragen jetzt Info-Symbole – Abstand dafür. */
.subheading .info,
.stat-subheading .info,
.headline-card__label .info { margin-left: .35rem; }
.headline-card__label .info .info__button {
	border-color: rgba(255, 255, 255, .5);
	color: rgba(255, 255, 255, .85);
}
.headline-card__label .info .info__button:hover,
.headline-card__label .info .info__button:focus-visible {
	background: #fff;
	border-color: #fff;
	color: var(--card-bg);
}

/* ----------------------------------------------- Bereichs-Kacheln (Statistik) */
.area-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-bottom: 1.5rem;
}
.area-tab {
	flex: 1 1 8rem;
	padding: .7rem 1.25rem;
	border-radius: var(--radius);
	background: var(--surface);
	box-shadow: var(--shadow-sm);
	color: var(--muted-fg);
	font-size: .95rem;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: background var(--transition), color var(--transition),
		box-shadow var(--transition), transform var(--transition);
}
.area-tab:hover {
	color: var(--page-fg);
	transform: translateY(-1px);
	box-shadow: var(--shadow-md);
}
.area-tab.is-active {
	background: var(--card-bg);
	color: var(--card-fg);
	box-shadow: var(--shadow-md);
}