/* Variablen */
:root {
	/* Farben: Primär – Krieglsteiner Navy #1D3557 */
	--color-primary-100: #eaeef4;
	--color-primary-200: #d2dae6;
	--color-primary-300: #a9b8cf;
	--color-primary-400: #6f86aa;
	--color-primary-500: #1d3557; /* Base */
	--color-primary-600: #182d4a;
	--color-primary-700: #14253d;
	--color-primary-800: #0f1c2f;
	--color-primary-900: #0a1322;
	/* Farben: Akzent – Krieglsteiner Gold #C8A45D (dezent einsetzen) */
	--color-accent-100: #f8f2e3;
	--color-accent-200: #efe2bf;
	--color-accent-300: #e3cf9a;
	--color-accent-500: #c8a45d; /* Base */
	--color-accent-700: #a4823f;
	--color-accent-900: #6f5726;
	/* Farben: Sekundär – warme Grautöne */
	--color-secondary-100: #f7f7f5;
	--color-secondary-200: #ececea;
	--color-secondary-300: #d9d9d6;
	--color-secondary-500: #7c7c79;
	--color-secondary-700: #4b4b49;
	--color-secondary-900: #22221f;
	/* Farben: Neutral */
	--color-black: #000000;
	--color-white: #ffffff;
	--color-text: #2b3446;
	--color-success: #22c55e;
	--color-warning: #facc15;
	--color-error:   #ef4444;
	/* Schrift der Überschriften und Auszeichnungen */
	--font-serif: "Cinzel", "Times New Roman", serif;
	/* Werte */
	--sidebar-w: 300px;
	--topbar-h: 72px;
	--value-header-height: 0px;
	/* Klare Kanten: keine Rundungen */
	--radius: 0;
	/* Schnittwinkel der "Wappenschulter" (abgeschnittene Ecken) */
	--cut: 34px;
	--top-gap: 4px;
	--side-gap: 16px;
}

/* Fonts: Cinzel (Markenschrift, Überschriften und Auszeichnungen) und Karla
   (Leseschrift) liegen lokal unter /fonts (variable Schriften, je ein Satz für
   Latin und Latin Extended). Es wird nichts von Google geladen.
   Lizenz beider Schriften: SIL Open Font License. */
@font-face {
	font-family: "Cinzel";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("/fonts/cinzel-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Cinzel";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("/fonts/cinzel-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Karla";
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url("/fonts/karla-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Karla";
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url("/fonts/karla-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Karla";
	font-style: italic;
	font-weight: 300 800;
	font-display: swap;
	src: url("/fonts/karla-italic-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Karla";
	font-style: italic;
	font-weight: 300 800;
	font-display: swap;
	src: url("/fonts/karla-italic-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Common */

/* Schriftgröße global (Umschalter in der Menüspalte). Standard ist die
   mittlere Stufe „A+“; „A“ (data-textsize="0") ist die kleinere Ansicht. */
html {
	font-size: 104%;
	scroll-behavior: smooth;
}
html[data-textsize="0"] {
	font-size: 90%;
}
html[data-textsize="2"] {
	font-size: 120%;
}

::selection {
	background-color: var(--color-accent-200);
	color: var(--color-primary-900);
}

* {
	scrollbar-width: thin;
	scrollbar-color: var(--color-primary-300) transparent;
}
::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}
::-webkit-scrollbar-thumb {
	background-color: var(--color-primary-300);
	border: 2px solid transparent;
	background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
	background-color: var(--color-primary-500);
}
::-webkit-scrollbar-track {
	background: transparent;
}

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

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	position: relative;
	font-family: "Karla", "Helvetica Neue", Arial, sans-serif;
	font-weight: 400;
	font-size: 1.2rem;
	line-height: 1.65;
	color: var(--color-text);
}

strong {
	font-weight: 600;
}

/* Linksbündig statt Blocksatz: bessere Lesbarkeit, insbesondere für ältere Leser */
p {
	text-align: left;
	hyphens: auto;
	max-width: 66ch;
}

/* Kleine Kennzeichnungen über Überschriften: Karla, Versalien, Gold, mit Strich davor */
small {
	font-family: "Karla", sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .18em;
	font-size: .82rem;
	/* dunkles Gold: ausreichender Kontrast auf Weiß (WCAG AA) */
	color: var(--color-accent-900);
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 16px;
}
small::before {
	content: "";
	flex: 0 0 28px;
	height: 1px;
	background-color: var(--color-accent-500);
}
.text-center small, .statement small {
	justify-content: center;
}

img {
	width: 100%;
	display: block;
}

hr {
	border: 0;
	height: 1px;
	background: linear-gradient(90deg, var(--color-accent-500), var(--color-accent-200) 60%, transparent);
	opacity: 1;
	margin: 22px 0 28px 0;
}

/* Links */

a, a:hover, a:focus, button, .dropdown-item, a:not(.button):not(.no-hover) {
	font-weight: 600;
	transition: all 0.3s ease;
	text-decoration: none;
}

a:not(.button):not(.no-hover):hover {
	display: inline-block;
	transform: scale(1.025);
}

/* Links im Fließtext sind auch ohne Farbe erkennbar */
main p a:not(.button), .accordion-body a:not(.button), .highlight-body a:not(.button) {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

/* Sprunglink für Tastatur- und Screenreader-Nutzer: erst bei Fokus sichtbar */
.skip-link {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 2000;
	padding: 12px 18px;
	background: var(--color-primary-500);
	color: var(--color-white) !important;
	font-weight: 600;
	transform: translateY(-200%);
	transition: transform .2s ease;
}
.skip-link:focus {
	transform: none;
	outline: 2px solid var(--color-accent-500);
	outline-offset: 2px;
}
main:focus {
	outline: none;
}

/* Headlines */

/* Serifenschrift: nur für die repräsentative Ebene (h1, h2, h3 – Hero und Abschnittsaufmacher).
   Karla SemiBold: funktionale Zwischenüberschriften (h4, h5). */
h1, h2, h3 {
	font-family: var(--font-serif);
	font-weight: 500;
	line-height: 1.12;
	color: var(--color-primary-500);
	hyphens: manual;
	-webkit-hyphens: manual;
	text-wrap: balance;
}

/* .h4/.h3: Überschrift einer anderen Ebene in dieser Optik (saubere Gliederung
   für Suchmaschinen, unveränderte Darstellung) */
h4, h5, h6, .h4 {
	font-family: "Karla", sans-serif;
	font-weight: 600;
	line-height: 1.25;
	color: var(--color-primary-500);
	hyphens: manual;
	-webkit-hyphens: manual;
}

h1 span.alt, h2 span.alt, h3 span.alt {
	font-weight: 400;
}

h1 span.style1, h2 span.style1, h3 span.style1 {
	color: var(--color-accent-500);
}

h1 {
	font-size: 2.5rem;
	margin-bottom: 22px;
}

h2 {
	font-size: 2.1rem;
	margin-bottom: 18px;
}

h3, .h3 {
	font-size: 1.55rem;
	margin-bottom: 16px;
}

h4, .h4 {
	font-size: 1.25rem;
	margin-bottom: 8px;
}

h5 {
	font-size: 1.1rem;
}

/* Slogan – Markenzeile in Serifenschrift mit goldenen Linien links und rechts */
.slogan {
	display: flex;
	align-items: center;
	gap: 16px;
	font-family: var(--font-serif);
	font-weight: 500;
	font-size: 1rem;
	letter-spacing: .08em;
	color: var(--color-primary-500);
	min-width: 0;
}
.slogan::before, .slogan::after {
	content: "";
	flex: 0 0 34px;
	height: 1px;
	background-color: var(--color-accent-500);
}
.slogan.start::before {
	display: none;
}
@media (max-width: 575px) {
	.slogan::after {
		display: none;
	}
}

.modal-content {
	background-color: var(--color-primary-500);
	color: var(--color-white);
}

/* Hinweis-Dialoge (z. B. Kontaktformular): heller Kasten auf abgedunkelter Seite */
.modal.dialog {
	background-color: rgba(10, 19, 34, .6);
}
.modal.dialog .modal-content {
	background-color: var(--color-white);
	color: var(--color-text);
	border: 0;
	border-top: 3px solid var(--color-accent-500);
	box-shadow: 0 40px 80px -30px rgba(10, 19, 34, .7);
}
.modal.dialog .modal-header {
	padding: 22px 26px 18px 26px;
	border-bottom: 1px solid var(--color-secondary-200);
}
.modal.dialog .modal-title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--color-primary-500);
}
.modal.dialog .modal-title i {
	color: var(--color-accent-700);
}
.modal.dialog .modal-body {
	padding: 22px 26px;
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--color-text);
}
.modal.dialog .modal-footer {
	padding: 0 26px 24px 26px;
	border-top: 0;
}

.no-text-wrap {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	display: block !important;
}

.not-found-mark {
	max-width: 180px;
	margin: 0 auto 30px auto;
}

/* Einblenden beim Scrollen (siehe initReveal in scripts.js) */
.reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .8s cubic-bezier(.22, 1, .36, 1), transform .8s cubic-bezier(.22, 1, .36, 1);
	transition-delay: var(--reveal-delay, 0ms);
}
.reveal.in {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}