/* Gestaltung 2026 – Grundlage für alle Seiten im neuen Layout
   Farben als Variablen, Hell/Dunkel über data-theme. Aus Gestaltung-Muster-2026/stil.css übernommen. */

@font-face { font-family: "Literata"; src: url(Schriften/literata.woff2) format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Literata"; src: url(Schriften/literata-kursiv.woff2) format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url(Schriften/sourcesans3.woff2) format("woff2"); font-weight: 400 600; font-display: swap; }

:root {
	--grund: #FAFAF7;        /* Seitenfläche */
	--flaeche: #EEF2F5;      /* Morgenhimmel, für abgesetzte Bänder */
	--karte: #FFFFFF;
	--tinte: #2B2724;        /* Text */
	--leise: #6A635B;        /* Nebentext */
	--linie: #E2DED6;
	--gold: #D9A12B;         /* Emblem, Zierlinien */
	--link: #8A5A00;         /* Links, Knöpfe – dunkles Gold, gut lesbar */
	--link-hover: #5E3D00;
	--himmel: #47698C;       /* zweiter Akzent, sparsam */
	--fokus: #2F6FB3;
	--schrift-text: "Literata", Georgia, "Times New Roman", serif;
	--schrift-ui: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
	--lesegroesse: 1.3125rem;
	--kopfhoehe: 4.25rem;
	color-scheme: light;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--grund: #12161C; --flaeche: #19202A; --karte: #1C232D; --tinte: #ECE7DD; --leise: #A8A196;
		--linie: #2C3540; --gold: #E0AC3E; --link: #EBC060; --link-hover: #F7D88E; --himmel: #8FB0D3; --fokus: #8FC1FF;
		color-scheme: dark;
	}
}
:root[data-theme="dark"] {
	--grund: #12161C; --flaeche: #19202A; --karte: #1C232D; --tinte: #ECE7DD; --leise: #A8A196;
	--linie: #2C3540; --gold: #E0AC3E; --link: #EBC060; --link-hover: #F7D88E; --himmel: #8FB0D3; --fokus: #8FC1FF;
	color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopfhoehe) + 1.5rem); }
body {
	margin: 0; background: var(--grund); color: var(--tinte);
	font-family: var(--schrift-text); font-size: 1.0625rem; line-height: 1.65;
	font-optical-sizing: auto; text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { font-weight: 400; line-height: 1.2; margin: 0 0 0.6em; text-wrap: balance; hyphens: manual; }
p { margin: 0 0 1em; }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rahmen { width: min(100% - 2rem, 72rem); margin-inline: auto; }

/* ---------- Kopf ---------- */
.kopf {
	position: sticky; top: 0; z-index: 20;
	background: var(--karte);   /* Kopfleiste immer weiß (im Dunkelmodus dunkel) */
	border-bottom: 1px solid var(--linie);
	font-family: var(--schrift-ui);
}
.kopf .rahmen { display: flex; align-items: center; gap: 1.5rem; min-height: var(--kopfhoehe); }
.marke { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--tinte); flex-shrink: 0; }
.marke img { width: 2.9rem; height: 2.9rem; }
.marke span { font-family: var(--schrift-text); font-size: 1.1rem; line-height: 1.15; white-space: nowrap; }
.marke:hover { color: var(--tinte); }
.hauptmenue { margin-left: auto; }
.hauptmenue ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.25rem; }
.hauptmenue a {
	display: block; padding: 0.5rem 0.75rem; color: var(--tinte); text-decoration: none;
	font-size: 1rem; border-radius: 6px; white-space: nowrap;
}
.hauptmenue a:hover { background: color-mix(in srgb, var(--tinte) 7%, transparent); color: var(--tinte); }
.hauptmenue a[aria-current] { box-shadow: inset 0 -2px 0 var(--gold); border-radius: 0; }
.werkzeuge { display: flex; align-items: center; gap: 0.25rem; }
.knopf-rund {
	display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%;
	border: 0; background: transparent; color: var(--tinte); cursor: pointer; font: inherit;
}
.knopf-rund:hover { background: color-mix(in srgb, var(--tinte) 7%, transparent); }
.knopf-rund svg { width: 1.25rem; height: 1.25rem; }
.sprache {
	font: inherit; font-size: 0.95rem; color: var(--tinte); background: transparent;
	border: 1px solid var(--linie); border-radius: 6px; padding: 0.3rem 0.4rem; cursor: pointer;
}
.menueknopf { display: none; }
.menue-extra { display: none; }

.suchleiste { border-top: 1px solid var(--linie); padding: 0.75rem 0; }
.suchleiste[hidden] { display: none; }
.suchleiste form { display: flex; gap: 0.5rem; }
.suchleiste input {
	flex: 1; font: inherit; font-size: 1.05rem; padding: 0.6rem 0.8rem; color: var(--tinte);
	background: var(--karte); border: 1px solid var(--linie); border-radius: 6px;
}

@media (max-width: 1100px) {
	.kopf .rahmen { gap: 0.5rem; }
	.menueknopf { display: inline-grid; }
	.hauptmenue {
		position: absolute; inset: 100% 0 auto 0; background: var(--grund);
		border-bottom: 1px solid var(--linie); padding: 0.5rem 1rem 1rem; display: none;
	}
	.hauptmenue.offen { display: block; }
	.hauptmenue ul { flex-direction: column; }
	.hauptmenue a { font-size: 1.15rem; padding: 0.8rem 0.5rem; border-bottom: 1px solid var(--linie); border-radius: 0; }
	.hauptmenue a[aria-current] { box-shadow: inset 3px 0 0 var(--gold); padding-left: 0.9rem; }
	.werkzeuge { margin-left: auto; }
}
@media (max-width: 560px) {
	.marke { gap: .5rem; }
	.marke span { font-size: clamp(.85rem, 4.1vw, 1.05rem); }
	.marke img { width: 2.3rem; height: 2.3rem; }
	.werkzeuge > [data-suche], .werkzeuge > [data-thema-umschalten], .werkzeuge > .sprache { display: none; }
	.menue-extra { display: grid; gap: .75rem; padding-top: 1rem; font-family: var(--schrift-ui); }
	.menue-extra form { display: flex; gap: .5rem; }
	.menue-extra input { flex: 1; min-width: 0; font: inherit; font-size: 1.05rem; padding: .55rem .75rem; color: var(--tinte); background: var(--karte); border: 1px solid var(--linie); border-radius: 6px; }
	.menue-extra .zeile { display: flex; gap: .75rem; align-items: center; }
	.menue-extra .sprache { display: block; }
}

/* ---------- Knöpfe ---------- */
.knopf {
	display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--schrift-ui); font-size: 1rem;
	padding: 0.6rem 1.1rem; border-radius: 999px; text-decoration: none; cursor: pointer;
	background: var(--link); color: var(--grund); border: 1px solid var(--link);
}
.knopf:hover { background: var(--link-hover); border-color: var(--link-hover); color: var(--grund); }
.knopf.zart { background: transparent; color: var(--link); }
.knopf.zart:hover { background: var(--flaeche); color: var(--link-hover); }
.knopf svg { width: 1.1rem; height: 1.1rem; }

/* ---------- Aufklappmenüs (Stimmen, Merken, Merkliste) ---------- */
.aufklapp { position: relative; }
.aufklapp[hidden] { display: none; }
.menue {
	position: absolute; top: calc(100% + .4rem); left: 0; z-index: 30; min-width: 15rem; max-width: min(24rem, calc(100vw - 2rem));
	padding: .35rem; background: var(--karte); border: 1px solid var(--linie); border-radius: 8px;
	box-shadow: 0 8px 24px color-mix(in srgb, var(--tinte) 12%, transparent); font-family: var(--schrift-ui); font-size: .95rem;
}
.menue[hidden] { display: none; }
.menue > button { display: block; width: 100%; text-align: left; font: inherit; color: var(--tinte); background: none; border: 0; border-radius: 5px; padding: .5rem .7rem .5rem 1.8rem; cursor: pointer; }
.menue > button:hover, .menue > button:focus-visible { background: var(--flaeche); }
.menue > button[aria-checked="true"] { font-weight: 600; }
.menue > button[aria-checked="true"]::before { content: "✓"; position: absolute; margin-left: -1.2rem; color: var(--link); }
.menue .auszug { display: block; color: var(--leise); font-size: .88rem; margin-top: .15rem; }

/* Merkliste in der Kopfleiste */
.merkknopf { position: relative; }
.merkknopf .zahl { position: absolute; top: .1rem; right: .05rem; min-width: 1.05rem; height: 1.05rem; padding: 0 .2rem; border-radius: 999px; background: var(--link); color: var(--grund); font-size: .7rem; line-height: 1.05rem; text-align: center; }
.merkknopf .zahl:empty { display: none; }
.merkliste { left: auto; right: 0; width: 24rem; max-height: calc(100vh - var(--kopfhoehe) - 2rem); overflow-y: auto; padding: .5rem; }
.merkliste .ueberschrift { margin: .6rem .5rem .3rem; color: var(--leise); font-size: .85rem; }
.merkliste .ueberschrift:first-child { margin-top: .2rem; }
.merkliste .eintrag { display: flex; align-items: flex-start; gap: .25rem; }
.merkliste .eintrag a { flex: 1; display: block; padding: .45rem .5rem; border-radius: 5px; color: var(--tinte); text-decoration: none; }
.merkliste .eintrag a:hover { background: var(--flaeche); }
.merkliste .eintrag .titel { display: block; }
.merkliste .eintrag .knopf-rund { width: 2rem; height: 2rem; color: var(--leise); flex-shrink: 0; margin-top: .2rem; }
.merkliste .eintrag .knopf-rund svg { width: 1rem; height: 1rem; }
.merkliste .leer, .merkliste .hinweis { margin: .3rem .5rem .5rem; color: var(--leise); font-size: .88rem; line-height: 1.4; }
.merkliste .hinweis { border-top: 1px solid var(--linie); padding-top: .5rem; margin-top: .6rem; font-size: .8rem; }
@media (max-width: 560px) { .merkliste { position: fixed; top: var(--kopfhoehe); left: 1rem; right: 1rem; width: auto; max-width: none; } }

/* ---------- Fuß ---------- */
.fuss { margin-top: 7rem; border-top: 1px solid var(--linie); font-family: var(--schrift-ui); color: var(--leise); font-size: 0.95rem; }
.fuss .rahmen { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; align-items: center; padding: 2.5rem 0 4rem; }
.fuss img { width: 2.2rem; height: 2.2rem; }
.fuss nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-left: auto; }
.fuss a { color: var(--leise); }
.fuss a:hover { color: var(--tinte); }


@media (prefers-reduced-motion: no-preference) {
	.hauptmenue a, .knopf, .knopf-rund { transition: background-color .15s, color .15s; }
}