/* MOOD — Die vier festen Leisten */

body {
	padding-top: var(--md-bar-t);
	padding-bottom: var(--md-bar-b);
	padding-inline: var(--md-rail);
}

.md-chrome { position: fixed; z-index: 40; }

.md-bar-t {
	top: 0; left: 0; right: 0;
	height: var(--md-bar-t);
	border-bottom: 1px solid var(--md-rule-hair);
}
.md-bar-b {
	bottom: 0; left: 0; right: 0;
	height: var(--md-bar-b);
	border-top: 1px solid var(--md-rule-hair);
}
.md-bar-t, .md-bar-b {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding-inline: clamp(.75rem, 2vw, 1.35rem);
}

.md-rail {
	top: var(--md-bar-t); bottom: var(--md-bar-b);
	width: var(--md-rail);
	display: flex;
	flex-direction: column;
	align-items: center;
}
.md-rail--l { left: 0;  border-right: 1px solid var(--md-rule-hair); justify-content: center; }
.md-rail--r { right: 0; border-left: 1px solid var(--md-rule-hair); justify-content: flex-end; padding-bottom: 1.1rem; }

/* Symbole — 1,25 px, dieselbe Staerke wie die Linien des Layouts. */
.md-i {
	width: 18px; height: 18px;
	fill: none; stroke: currentColor;
	stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round;
}

/* Kopfleiste links */
.md-bar-t__l {
	flex: 1 1 auto; min-width: 0;
	display: flex; align-items: center;
	gap: clamp(.5rem, 1.4vw, .9rem);
}
.md-barnav {
	flex: 1 1 auto; min-width: 0;
	display: flex; align-items: center;
	gap: clamp(.9rem, 2.2vw, 1.8rem);
	margin: 0; padding: 0 0 0 clamp(.5rem, 1.4vw, .9rem);
	list-style: none;
	border-left: 1px solid var(--md-rule-hair);
}
.md-barnav a {
	display: flex; align-items: center; gap: .6rem;
	white-space: nowrap;
	font-size: var(--md-t-kicker);
	font-weight: 500;
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
	color: var(--md-ink-faint);
	transition: color var(--md-dur) var(--md-ease);
}
.md-barnav a::before {
	content: ""; width: 0; height: 1px;
	background: currentColor;
	transition: width var(--md-dur) var(--md-ease);
}
.md-barnav a:hover { color: var(--md-ink); }
.md-barnav a:hover::before { width: var(--md-dash); }

/* Der letzte Eintrag oeffnet die Sammlung statt zu verlinken. */
.md-barnav__more {
	display: flex; align-items: center; gap: .6rem;
	margin: 0; padding: 0;
	background: none; border: 0;
	white-space: nowrap;
	font-family: inherit;
	font-size: var(--md-t-kicker);
	font-weight: 500;
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
	color: var(--md-ink-faint);
	cursor: pointer;
	transition: color var(--md-dur) var(--md-ease);
}
.md-barnav__more::before {
	content: ""; width: 0; height: 1px;
	background: currentColor;
	transition: width var(--md-dur) var(--md-ease);
}
.md-barnav__more:hover { color: var(--md-ink); }
.md-barnav__more:hover::before { width: var(--md-dash); }

/* Die Sammlung — was sonst noch in den Leisten liegen wuerde */
.md-shelf {
	position: fixed;
	inset: 0;
	z-index: 9995;
	display: grid;
	place-items: safe center;
	padding: clamp(1rem, 4vw, 3rem);
	background: rgb(0 0 0 / .82);
	overflow-y: auto;
}
.md-shelf[hidden] { display: none; }
.md-shelf__sheet {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: clamp(1.5rem, 4vw, 3rem);
	width: min(34rem, 100%);
	padding: clamp(1.75rem, 4vw, 2.5rem);
	background: var(--md-scrim-solid);
	border: 1px solid var(--md-rule-soft);
}
.md-shelf__g { display: grid; align-content: start; gap: .1rem; }
.md-shelf__t {
	margin: 0 0 .7rem;
	padding-bottom: .45rem;
	border-bottom: 1px solid var(--md-rule-hair);
	font-size: var(--md-t-micro);
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
	color: var(--md-ink-faint);
}
.md-shelf__g a {
	display: flex; align-items: center; gap: .7rem;
	padding: .35rem 0;
	font-family: var(--md-f-serif);
	font-weight: 700;
	font-size: var(--md-t-head);
	letter-spacing: var(--md-ls-head);
	text-transform: uppercase;
	color: var(--md-ink-dim);
	transition: color var(--md-dur) var(--md-ease);
}
.md-shelf__g a::before {
	content: ""; flex: 0 0 var(--md-dash); height: 1px;
	background: var(--md-rule-soft);
	transition: background var(--md-dur) var(--md-ease);
}
.md-shelf__g a:hover { color: var(--md-ink-bright); }
.md-shelf__g a:hover::before { background: var(--md-ink-faint); }

/* Kopfleiste rechts — der eigene Charakter */
.md-me { flex: 0 0 auto; display: flex; align-items: center; gap: clamp(.6rem, 1.6vw, 1.15rem); }
.md-me__id { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.md-me__av {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px; height: 26px;
	padding: 2px;
	border: 1px solid var(--md-rule-soft);
	color: var(--md-ink-faint);
}
/* Ohne eigenes Bild steht das Wappen als Marke im Feld — mittig, nicht
   auf der Schriftlinie. */
.md-me__av svg { width: 11px; height: 15px; fill: currentColor; stroke: none; }
.md-me__av img { display: block; width: 100%; height: 100%; object-fit: cover; filter: var(--md-photo-filter); }
.md-me__name {
	font-family: var(--md-f-serif);
	font-weight: 700;
	font-size: .64rem;
	letter-spacing: var(--md-ls-head);
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--md-ink);
}
.md-me__acts { display: flex; align-items: center; gap: .1rem; margin: 0; padding: 0; list-style: none; }
.md-me__acts li { display: flex; }

.md-ico {
	position: relative;
	display: grid; place-items: center;
	width: 34px; height: 34px;
	color: var(--md-ink-faint);
	transition: color var(--md-dur) var(--md-ease);
}
.md-ico:hover { color: var(--md-ink); }
.md-ico--home { color: var(--md-ink-dim); }

/* Zaehler tragen Helligkeit, nicht Farbe — Rot bleibt Wappen und Warnung. */
.md-ico__n {
	position: absolute; top: 5px; right: 3px;
	font-size: .5rem; line-height: 1;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
	color: var(--md-ink-bright);
}
.md-ico__n:empty { display: none; }

/* Schienen */
.md-rail__i {
	display: flex; flex-direction: column; align-items: center; gap: .7rem;
	padding: .95rem 0;
	color: var(--md-ink-faint);
	transition: color var(--md-dur) var(--md-ease);
}
.md-rail__i:hover { color: var(--md-ink); }
.md-rail__l {
	writing-mode: vertical-rl;
	font-size: .55rem;
	letter-spacing: .22em;
	text-transform: uppercase;
}
.md-rail__i[aria-current="page"] { color: var(--md-ink); }

/* Fussleiste */
.md-bar-b__side { display: flex; align-items: center; gap: clamp(.9rem, 2.2vw, 1.75rem); }
.md-bar-b__side--r { gap: clamp(.75rem, 1.8vw, 1.25rem); }
.md-bar-b__side--r .md-modes {
	padding-left: clamp(.75rem, 1.8vw, 1.25rem);
	border-left: 1px solid var(--md-rule-hair);
}

.md-flat {
	font-size: var(--md-t-kicker);
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--md-ink-faint);
	transition: color var(--md-dur) var(--md-ease);
}
.md-flat:hover { color: var(--md-ink); }

/* Auswahlfeld ohne Kasten — nur Grundlinie und Winkel. */
.md-select { position: relative; display: inline-flex; align-items: center; color: var(--md-ink-faint); }
.md-select form { margin: 0; display: flex; align-items: center; gap: .5rem; }
.md-select select {
	appearance: none; -webkit-appearance: none; -moz-appearance: none;
	margin: 0; padding: .2rem 1.35rem .25rem 0;
	max-width: 11rem;
	background: none; border: 0; border-bottom: 1px solid var(--md-rule-soft);
	font-family: inherit;
	font-size: var(--md-t-kicker);
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
	color: var(--md-ink-dim);
	cursor: pointer;
}
.md-select select:hover { color: var(--md-ink); }
.md-select option { background: var(--md-scrim-solid); color: var(--md-ink); }
.md-select input[type="submit"],
.md-select .button { display: none; }
.md-select::after {
	content: "";
	position: absolute; right: .45rem;
	width: 5px; height: 5px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	pointer-events: none;
}

/* Akzentwahl — die einzige gefuellte Flaeche des Themes. */
.md-accents { display: flex; align-items: center; gap: .5rem; }
.md-accents button {
	width: 11px; height: 11px; padding: 0;
	margin: 0; border: 0; border-radius: 50%;
	background: var(--md-dot);
	cursor: pointer;
	transition: box-shadow .2s var(--md-ease);
}
.md-accents button:hover { box-shadow: 0 0 0 1px var(--md-abyss), 0 0 0 2px var(--md-rule-soft); }
.md-accents button[aria-pressed="true"] { box-shadow: 0 0 0 1px var(--md-abyss), 0 0 0 2px var(--md-rule); }

.md-accents button[data-accent="blut"]  { --md-dot: #b8383a; }
.md-accents button[data-accent="farn"]  { --md-dot: #6f9a68; }
.md-accents button[data-accent="rost"]  { --md-dot: #bd7a41; }
.md-accents button[data-accent="nebel"] { --md-dot: #6f93a8; }
.md-accents button[data-accent="heide"] { --md-dot: #9b7aa8; }
:root[data-theme="light"] .md-accents button[data-accent="blut"]  { --md-dot: #9b2b2e; }
:root[data-theme="light"] .md-accents button[data-accent="farn"]  { --md-dot: #3f6b3f; }
:root[data-theme="light"] .md-accents button[data-accent="rost"]  { --md-dot: #8a5320; }
:root[data-theme="light"] .md-accents button[data-accent="nebel"] { --md-dot: #3d6377; }
:root[data-theme="light"] .md-accents button[data-accent="heide"] { --md-dot: #63466f; }
@media (prefers-color-scheme: light) {
	:root:not([data-theme="dark"]) .md-accents button[data-accent="blut"]  { --md-dot: #9b2b2e; }
	:root:not([data-theme="dark"]) .md-accents button[data-accent="farn"]  { --md-dot: #3f6b3f; }
	:root:not([data-theme="dark"]) .md-accents button[data-accent="rost"]  { --md-dot: #8a5320; }
	:root:not([data-theme="dark"]) .md-accents button[data-accent="nebel"] { --md-dot: #3d6377; }
	:root:not([data-theme="dark"]) .md-accents button[data-accent="heide"] { --md-dot: #63466f; }
}

/* Schmale Sicht — die Schienen fallen zuerst, sie tragen Wege, keine Inhalte. */
@media (max-width: 1080px) {
	:root { --md-rail: 0px; }
	.md-rail { display: none; }
}
@media (max-width: 760px) {
	:root { --md-bar-t: 46px; --md-bar-b: 42px; }
	.md-me__name { display: none; }
	.md-barnav { overflow-x: auto; scrollbar-width: none; }
	.md-barnav::-webkit-scrollbar { display: none; }
	.md-bar-b__side--l { display: none; }
	.md-bar-b { justify-content: flex-end; }
	.md-modes { gap: .85rem; }
	.md-accents { gap: .45rem; }
}