/*
Theme Name: Twenty Seventeen Child
Theme URI: https://freimaurer-einbeck.de/
Description: Child-Theme von Twenty Seventeen für die Freimaurerloge „Georg zu den drei Säulen" Einbeck. Enthält einen bereinigten Footer (Copyright + rechtliche Links) und dient als update-sicherer Ort für kleine Anpassungen.
Author: Loge Georg zu den drei Säulen
Template: twentyseventeen
Version: 1.15.0
Text Domain: twentyseventeen-child
*/

/* ==========================================================================
   CI-Farbsystem „Blaue Loge" – abgeleitet aus dem Logo/Wappen (Royalblau).
   Alle Textkontraste WCAG-AA-geprüft. Custom Properties; wo sicherheits-
   kritisch, steht zusätzlich ein fester Fallback in der Regel.
   ========================================================================== */
:root {
	--ci-blue: #04458c;        /* Primärblau (Logo): Buttons, Links auf hell */
	--ci-blue-hover: #1259ac;  /* Hover/Active gefüllter Flächen */
	--ci-blue-accent: #2e6fc4; /* Link-Hover auf hell, Fokus-Ring */
	--ci-navy: #0a1730;        /* tiefstes Nachtblau: Footer, Scrim-Basis */
	--ci-navy-2: #101f42;      /* Flächen 2. Ebene: Navigation, Untermenüs */
	--ci-sky: #8cb4e8;         /* Lichtakzent auf Dunkel: Links/Hover, Stern */
	--ci-tint: #edf3fb;        /* helle Blau-Tönung: Callouts, Formularzonen */
	--ci-tint-border: #c9d9ee; /* Ränder/Hairlines auf hell */
	--ink: #1b2331;            /* Fließtext auf hell (blaustichiges Fast-Schwarz) */
	--ink-soft: #4a5568;       /* Sekundärtext auf hell */
	--paper: #ffffff;
	--paper-soft: #f6f8fb;
	--ci-error: #b3261e;
	--ci-success: #1f6b3c;
	--focus-ring: 0 0 0 3px rgba(46, 111, 196, 0.35);
}

/* ==========================================================================
   Footer – mehrspaltiges, dunkles Design
   --------------------------------------------------------------------------
   Marke (Loge) · Kontakt · Rechtliches, darunter eine abgesetzte
   Copyright-Leiste. Passt zum dunklen Header und „rahmt" die Seite unten.
   Hinweis Spezifität: colors-dark.css lädt NACH dem Child und setzt
   .site-info a (Linkfarbe); daher werden die Link-Regeln unten mit
   body.colors-dark angehoben, damit sie gewinnen. Hintergrund, Layout und
   Überschriften berührt colors-dark nicht.
   ========================================================================== */

/* Lichtkante als Verlaufs-Hairline + sanfter Lichtschein von oben – beides
   als Mehrfach-Hintergrund (KEINE Pseudo-Elemente: :before/:after des Parent
   sind dessen Clearfix und bleiben unangetastet). */
.site-footer {
	background-color: #0a1730; /* Fallback */
	background-color: var(--ci-navy);
	border-top: 0; /* Parent-Hairline (#eee) aus, Lichtkante kommt als Verlauf */
	background-image:
		linear-gradient(to right, rgba(140, 180, 232, 0), rgba(140, 180, 232, 0.55) 50%, rgba(140, 180, 232, 0)),
		radial-gradient(90% 220px at 50% 0%, rgba(140, 180, 232, 0.09), rgba(140, 180, 232, 0) 70%);
	background-repeat: no-repeat, no-repeat;
	background-size: 100% 1px, 100% 260px;
	background-position: top center, top center;
	padding-top: 4em;
	padding-bottom: 2em;
}

.site-footer .site-info {
	color: #c8d4e8;
	font-size: 0.9375rem;
	line-height: 1.7;
	text-align: left;
}

/* Spalten (stapeln auf schmalen Bildschirmen dank flex-wrap). */
.site-info__columns {
	display: flex;
	flex-wrap: wrap;
	gap: 2.5em;
}

.site-info__col {
	flex: 1 1 220px;
	min-width: 0;
}

.site-info__logo {
	display: block;
	width: auto;
	height: 80px;
	margin-bottom: 1.1em;
	filter: drop-shadow(0 4px 16px rgba(140, 180, 232, 0.28)); /* sanfter Schein */
}

/* Markenspalte etwas breiter als Kontakt/Rechtliches – ruhigerer Rhythmus. */
.site-info__col.site-info__brand {
	flex: 1.5 1 260px;
}

.site-info__name {
	margin: 0 0 0.4em;
	color: #fff;
	font-weight: 700;
	font-size: 1.125rem;
	line-height: 1.3;
	letter-spacing: 0.03em;
}

.site-info__meta {
	margin: 0 0 0.9em;
	color: #c8d4e8;
}

.site-info__tagline {
	margin: 0;
	color: #8fa3c4;
	font-style: italic;
}

.site-info__heading {
	margin: 0 0 1em;
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* Feine Licht-Unterstreichung unter den Spaltenüberschriften. */
.site-info__heading::after {
	content: "";
	display: block;
	width: 2.25em;
	height: 2px;
	margin-top: 0.65em;
	background: linear-gradient(to right, rgba(140, 180, 232, 0.75), rgba(140, 180, 232, 0));
	border-radius: 1px;
}

.site-info__col p {
	margin: 0 0 0.8em;
}

/* Links im Footer – schema-unabhängig (.site-footer …), damit sie im hellen
   Inhaltsschema ebenso greifen wie zuvor im dunklen. */
.site-footer .site-info a,
.site-footer .site-info a:visited {
	color: #dce7f6;
	text-decoration: none;
	border-bottom: 1px solid rgba(140, 180, 232, 0.45);
	transition: color 0.15s ease, border-color 0.15s ease;
}

.site-footer .site-info a:hover,
.site-footer .site-info a:focus {
	color: #fff;
	border-bottom-color: var(--ci-sky);
}

/* „Zum Kontaktformular →" – Lichtakzent, im Footer-Template referenziert. */
.site-footer .site-info a.site-info__cta {
	color: #8cb4e8; /* Fallback */
	color: var(--ci-sky);
	font-weight: 600;
	border-bottom: 0;
}

/* Rechtliches-Menü untereinander. */
.site-info .footer-links-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-info .footer-links-menu li {
	margin: 0 0 0.55em;
}

/* Abgesetzte, zentrierte Copyright-Leiste mit ✦ und Verlaufs-Hairline. */
.site-info__bottom {
	margin-top: 3em;
	padding-top: 1.6em;
	background-image: linear-gradient(to right, rgba(140, 180, 232, 0), rgba(140, 180, 232, 0.4) 50%, rgba(140, 180, 232, 0));
	background-repeat: no-repeat;
	background-size: 100% 1px;
	background-position: top center;
	font-size: 0.8125rem;
	color: #8fa3c4;
	text-align: center;
}

/* Stern-Akzent über dem Copyright (Wappen-Echo, rein dekorativ). */
.site-info__bottom-star {
	display: block;
	margin-bottom: 0.7em;
	color: #8cb4e8; /* Fallback */
	color: var(--ci-sky);
	font-size: 0.9rem;
	line-height: 1;
	opacity: 0.75;
}

.site-info .site-copyright {
	display: block;
}

/* Anschrift-Block im Kontakt (nicht kursiv, ruhige Abstände). */
.site-info__address {
	font-style: normal;
}

/* „Nach oben"-Link, zentriert unter dem Copyright (höhere Spezifität als der
   allgemeine Footer-Link, damit Sky-Farbe ohne Unterstrich greift). */
.site-footer .site-info a.site-info__top {
	display: inline-block;
	margin-top: 1em;
	color: #8cb4e8; /* Fallback */
	color: var(--ci-sky);
	font-weight: 600;
	border-bottom: 0;
}

.site-footer .site-info a.site-info__top:hover,
.site-footer .site-info a.site-info__top:focus {
	color: #fff;
}

/* ==========================================================================
   Header „Cinematic Stage" – mehr Tiefe und Fläche
   --------------------------------------------------------------------------
   Konzept: Die vier rotierenden Fotos bekommen eine bildschirmfüllende Bühne
   (volle Höhe, Kante zu Kante) und echte Tiefen-Ebenen:
     Ebene 1 – Bild:      statisch, dezente Farb-Veredelung (KEINE Animation –
                          siehe Hinweis in Abschnitt 2)
     Ebene 2 – Scrim:     vertikaler Kino-Verlauf (oben/unten dunkel, Mitte klar)
     Ebene 3 – Vignette:  radiale Randabdunklung, lenkt den Blick zur Bildmitte
     Ebene 4 – Text:      größere, fluide Typografie mit sanftem Auftritt
     Ebene 5 – Navigation: deckende dunkle Leiste (Farbschema colors-dark)
   Alle Bewegungen respektieren prefers-reduced-motion.
   ========================================================================== */

/* --- 1) Bühne: volle Bildschirmhöhe, Kante zu Kante ----------------------
   Nur Höhenwerte – die Positionierungslogik des Parent bleibt unangetastet.
   Die Sticky-Navigation (global.js, adjustScrollClass) liest die Header-Höhe
   bei jedem Scroll-Event live per innerHeight() aus, eine größere Höhe ist
   dafür unkritisch. 100svh statt 100vh vermeidet auf Mobilgeräten das
   Springen durch ein-/ausblendende Browserleisten.

   Die eigentliche Bühne ist .custom-header – diese heben wir auf ALLEN Breiten
   auf volle Höhe. (Eine frühere Beschränkung nur auf Mobil ließ den Header auf
   dem Desktop wieder auf die kleine Parent-Höhe zurückfallen.) */
.has-header-image.twentyseventeen-front-page .custom-header,
.has-header-video.twentyseventeen-front-page .custom-header,
.has-header-image.home.blog .custom-header,
.has-header-video.home.blog .custom-header {
	height: 100vh;
	height: 100svh;
	min-height: 100vh;
	min-height: 100svh;
}

@media screen and (min-width: 48em) {
	/* Auf dem Desktop bestimmt .custom-header-media die sichtbare Fläche. Das
	   Parent bündelt ALLE Desktop-Regeln in einer einzigen @media(min-width:48em)
	   und hat eine Admin-Bar-Sonderregel mit HÖHERER Spezifität
	   (.admin-bar…custom-header-media { calc(100vh - 32px) }). Damit unser Wert
	   auch für eingeloggte Nutzer gewinnt, matchen wir die Admin-Bar-Selektoren
	   mit und erzwingen die Höhe zusätzlich per min-height. */
	.twentyseventeen-front-page.has-header-image .custom-header-media,
	.twentyseventeen-front-page.has-header-video .custom-header-media,
	.home.blog.has-header-image .custom-header-media,
	.home.blog.has-header-video .custom-header-media,
	.admin-bar.twentyseventeen-front-page.has-header-image .custom-header-media,
	.admin-bar.twentyseventeen-front-page.has-header-video .custom-header-media,
	.admin-bar.home.blog.has-header-image .custom-header-media,
	.admin-bar.home.blog.has-header-video .custom-header-media {
		height: 100vh;
		height: 100svh;
		min-height: 100vh;
		min-height: 100svh;
	}
}

/* --- 2) Ebene 1 – das Bild: dezente Veredelung + sehr langsamer Zoom -------
   WICHTIG – die Bild-Animation darf AUSSCHLIESSLICH scale() verwenden,
   NIEMALS translate()! Das Parent positioniert das Bild in modernen Browsern
   über "@supports (object-fit: cover)" (style.css Z. 1757 ff.) mit
   left:0; top:0; width:100%; height:100%; transform:none (plus position:fixed).
   Ein translate() im Keyframe würde dieses transform:none überschreiben und das
   viewportfüllende Bild um eine halbe Bildschirmgröße verschieben (der frühere
   kaputte Header). Ein reiner scale() mit transform-origin:center zoomt dagegen
   zentriert und lässt die object-fit-Deckung unberührt – das gibt der Fläche
   ruhige, filmische Tiefe, ohne die Geometrie zu brechen. */
@keyframes twentyseventeen-child-zoom {
	from {
		transform: scale(1);
	}
	to {
		transform: scale(1.08);
	}
}

.home.blog.has-header-image .custom-header-media img,
.twentyseventeen-front-page.has-header-image .custom-header-media img {
	filter: contrast(1.04) saturate(1.05) brightness(0.97);
	transform-origin: center center;
	animation: twentyseventeen-child-zoom 34s ease-out both;
}

/* Header-Bild NICHT fixieren.
   Das Parent-Theme setzt das Bild auf position:fixed (Parallax). Nebenwirkung:
   Das viewportgroße fixierte Bild bleibt beim Scrollen oben „kleben" und lugt
   als dunkler Streifen hinter Inhalt/Footer hervor. position:absolute hält es
   im Header-Container (.custom-header-media füllt den 100svh-Header) – der
   Cover-Look (object-fit) bleibt identisch, das Bild scrollt sauber mit weg. */
.has-header-image .custom-header-media img,
.has-header-video .custom-header-media video,
.has-header-video .custom-header-media iframe {
	position: absolute;
}

/* --- 3) Ebene 2 – Scrim: vertikaler Kino-Verlauf --------------------------
   Oben sanft, Mitte weitgehend klar, unten kräftig abdunkelnd, damit Titel
   und Tagline auf allen vier Fotos (auch der hellen Frostwiese) sicher lesbar
   sind und der Header optisch in die dunkle Navigation „einsinkt". Leichter
   Indigo-Ton passend zum dunklen Farbschema. Überschreibt
   .custom-header-media:before des Parent-Themes. */
.custom-header-media:before {
	background: rgba(8, 15, 34, 0.3); /* Fallback (Nachtblau) */
	background: linear-gradient(
		to bottom,
		rgba(8, 15, 34, 0.55) 0%,
		rgba(8, 15, 34, 0.16) 30%,
		rgba(8, 15, 34, 0.1) 52%,
		rgba(8, 15, 34, 0.5) 78%,
		rgba(6, 11, 26, 0.88) 100%
	);
}

/* Scrim über die volle Header-Höhe ziehen – das Parent-Theme begrenzt ihn auf
   großen Bildschirmen auf 33 %, wodurch der untere Titel-/Tagline-Bereich
   ohne Abdunklung bliebe. */
.twentyseventeen-front-page.has-header-image .custom-header-media:before,
.twentyseventeen-front-page.has-header-video .custom-header-media:before,
.home.blog.has-header-image .custom-header-media:before,
.home.blog.has-header-video .custom-header-media:before {
	height: 100%;
}

/* --- 4) Ebene 3 – Vignette: radiale Tiefe ---------------------------------
   Dunkelt die Ränder ab und zieht den Blick in die Bildmitte – der klassische
   „Tiefen"-Effekt. Liegt unter dem Text (.site-branding hat z-index: 3). */
.twentyseventeen-front-page.has-header-image .custom-header-media:after,
.home.blog.has-header-image .custom-header-media:after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	pointer-events: none;
	background: radial-gradient(
		115% 90% at 50% 38%,
		rgba(0, 0, 0, 0) 44%,
		rgba(4, 10, 26, 0.45) 100%
	);
}

/* --- 5) Ebene 4 – Typografie: mehr Präsenz, feine Hierarchie -------------- */

/* Titel: klare Kante auf jedem Hintergrund (naher + weicher Schatten). */
body.has-header-image .site-title,
body.has-header-video .site-title,
body.has-header-image .site-title a,
body.has-header-video .site-title a {
	text-shadow:
		0 1px 2px rgba(0, 0, 0, 0.55),
		0 10px 34px rgba(0, 0, 0, 0.4);
}

.home.blog .site-title,
.twentyseventeen-front-page .site-title {
	letter-spacing: 0.12em;
}

/* Tagline: eleganter und besser lesbar. */
body.has-header-image .site-description,
body.has-header-video .site-description {
	opacity: 0.94;
	letter-spacing: 0.02em;
	text-shadow:
		0 1px 3px rgba(0, 0, 0, 0.55),
		0 6px 22px rgba(0, 0, 0, 0.35);
}

/* Logo hebt sich sanft vom Hintergrund ab. */
.custom-logo-link img {
	filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.35));
}

@media screen and (min-width: 48em) {
	/* Größerer, fluider Titel – wächst ruhig mit der Bildschirmbreite. */
	.home.blog.has-header-image .site-title,
	.twentyseventeen-front-page.has-header-image .site-title {
		font-size: clamp(2.25rem, 1.35rem + 2.2vw, 3.4rem);
		letter-spacing: 0.15em;
		line-height: 1.12;
	}

	/* Tagline: begrenzte Zeilenlänge, ruhiger Satz. */
	.home.blog.has-header-image .site-description,
	.twentyseventeen-front-page.has-header-image .site-description {
		font-size: 1.0625rem;
		max-width: 38em;
		line-height: 1.65;
		letter-spacing: 0.03em;
	}

	/* Dezenter Wappen-Stern zwischen Titel und Tagline (Echo des Sternkranzes
	   im Logo) – rein per Unicode-Glyph, kein Bild-Asset. „Mystischer"
	   Wiedererkennungswert; Textschatten sichert Sichtbarkeit auf hellen Fotos. */
	.home.blog.has-header-image .site-description:before,
	.twentyseventeen-front-page.has-header-image .site-description:before {
		content: "✦";
		display: block;
		margin: 0.9em 0 1em;
		color: #8cb4e8; /* Fallback */
		color: var(--ci-sky);
		font-size: 1.05rem;
		line-height: 1;
		opacity: 0.9;
		text-shadow: 0 1px 6px rgba(4, 10, 26, 0.6);
	}

	/* Etwas mehr Luft zwischen Tagline und Navigationsleiste. (Das Parent-JS
	   setzt nur margin-bottom inline, padding bleibt unangetastet.) */
	.home.blog.has-header-image .site-branding,
	.twentyseventeen-front-page.has-header-image .site-branding {
		padding-bottom: 2em;
	}
}

/* Sanfter Auftritt von Logo, Titel und Tagline beim Laden. */
@keyframes twentyseventeen-child-rise {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.home.blog.has-header-image .site-branding .wrap,
.twentyseventeen-front-page.has-header-image .site-branding .wrap {
	animation: twentyseventeen-child-rise 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.25s both;
}

/* --- 6) Ebene 5 – Navigation: deckende Nachtblau-Leiste -------------------
   Schema-UNABHÄNGIG (greift auch im hellen Inhaltsschema, in dem colors-dark.css
   nicht mehr lädt): deckendes Navy für Leiste UND Aufklapp-Untermenüs,
   Lichtblau-Hover, ruhige Markierung des aktiven Punkts. Bewusst KEIN Glas-/
   Transparenz-Effekt (Lesbarkeit über der hellen Frostwiese). Nur Farben –
   keine Positions-/Höhenwerte (das Sticky-JS liest Höhen live). */
.navigation-top,
.main-navigation ul ul {
	background-color: #101f42; /* Fallback */
	background-color: var(--ci-navy-2);
}

/* Oberes Menü transparent, damit die Navy-Leiste durchscheint; Untermenüs
   behalten ihre eigene deckende Navy-Fläche (Regel oben). */
.main-navigation,
.main-navigation > div > ul {
	background-color: transparent;
}

.navigation-top {
	border-top: 1px solid #1b2e5c;
	border-bottom: 1px solid #1b2e5c;
}

.main-navigation li {
	border-color: #1b2e5c;
}

.main-navigation a {
	color: #e7eef9;
}

.main-navigation a:hover,
.main-navigation a:focus {
	color: #8cb4e8; /* Fallback */
	color: var(--ci-sky);
}

/* Aktueller Menüpunkt: ruhige Unterstreichung ohne Layout-Shift. */
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
	color: #fff;
	box-shadow: inset 0 -2px 0 var(--ci-sky);
}

/* Mobile Toggle-Buttons mitfärben. */
.main-navigation .menu-toggle,
.main-navigation .dropdown-toggle {
	color: #e7eef9;
}

/* Angeheftete Leiste beim Scrollen dezent vom Inhalt lösen. */
.navigation-top.site-navigation-fixed {
	box-shadow: 0 6px 24px rgba(4, 10, 26, 0.45);
}

/* --- 7) Barrierefreiheit: Bewegung nur, wenn erwünscht --------------------
   Deaktiviert den sanften Auftritt des Textblocks (Abschnitt 5) UND den
   langsamen Bild-Zoom (Abschnitt 2) für Nutzer, die reduzierte Bewegung
   bevorzugen. */
@media (prefers-reduced-motion: reduce) {
	.home.blog.has-header-image .site-branding .wrap,
	.twentyseventeen-front-page.has-header-image .site-branding .wrap,
	.home.blog.has-header-image .custom-header-media img,
	.twentyseventeen-front-page.has-header-image .custom-header-media img {
		animation: none;
	}
}

/* ==========================================================================
   Inhaltsseiten: Einladungs-Kasten & Formulare (Contact Form 7)
   ========================================================================== */

/* Ruhiger Einladungs-/Hinweiskasten statt greller Farbflächen. Helle Karte
   mit dunklem Text – auf jedem Hintergrund lesbar. */
.guest-callout {
	border-left: 4px solid #04458c; /* Fallback */
	border-left: 4px solid var(--ci-blue);
	background: #edf3fb; /* Fallback */
	background: var(--ci-tint);
	color: #1b2331;
	color: var(--ink);
	padding: 1.25em 1.5em;
	border-radius: 4px;
}

.guest-callout p:last-child {
	margin-bottom: 0;
}

/* Etwas Luft ums Formular. */
.guest-form {
	margin-top: 1.5em;
}

/* --- Contact Form 7: einheitliches, aufgeräumtes Formular-Layout ---------- */
.wpcf7-form p {
	margin-bottom: 1.1em;
}

.wpcf7-form label {
	display: block;
	font-weight: 600;
	line-height: 1.6;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="number"],
.wpcf7-form textarea {
	display: block;
	width: 100%;
	margin-top: 0.4em;
	padding: 0.7em 0.85em;
	border: 1px solid #c9d9ee; /* Fallback */
	border: 1px solid var(--ci-tint-border);
	border-radius: 4px;
	background: #fff;
	color: #1b2331;
	color: var(--ink);
	font-size: 1rem;
	line-height: 1.5;
	box-sizing: border-box;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
	border-color: #04458c; /* Fallback */
	border-color: var(--ci-blue);
	box-shadow: 0 0 0 3px rgba(46, 111, 196, 0.35);
	box-shadow: var(--focus-ring);
	outline: none;
}

.wpcf7-form textarea {
	min-height: 8em;
}

/* Einwilligungs-Checkbox kompakt und nicht als fettes Block-Label. */
.wpcf7-form .wpcf7-acceptance label {
	display: flex;
	align-items: flex-start;
	gap: 0.5em;
	font-weight: 400;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.wpcf7-form .wpcf7-acceptance input {
	width: auto;
	margin-top: 0.25em;
	flex: 0 0 auto;
}

/* Senden-Button im Primär-Blau der Loge (weißer Text, 9,4:1). */
.wpcf7-form input[type="submit"] {
	display: inline-block;
	margin-top: 0.5em;
	padding: 0.8em 2em;
	border: 0;
	border-radius: 4px;
	background: #04458c; /* Fallback */
	background: var(--ci-blue);
	color: #fff;
	font-weight: 700;
	letter-spacing: 0.03em;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.wpcf7-form input[type="submit"]:hover,
.wpcf7-form input[type="submit"]:focus {
	background: #1259ac; /* Fallback */
	background: var(--ci-blue-hover);
}

/* --- CF7: Validierungs- und Statusmeldungen ------------------------------ */
.wpcf7-not-valid-tip {
	color: #b3261e; /* Fallback */
	color: var(--ci-error);
	font-size: 0.875rem;
	margin-top: 0.3em;
}

.wpcf7-form .wpcf7-not-valid {
	border-color: #b3261e;
	border-color: var(--ci-error);
}

.wpcf7-response-output {
	margin: 1.2em 0 0;
	padding: 0.8em 1em;
	border-radius: 4px;
	font-size: 0.9375rem;
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: #1f6b3c;
	border-color: var(--ci-success);
	background: #edf7f0;
	color: #1f6b3c;
	color: var(--ci-success);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
	border-color: #b3261e;
	border-color: var(--ci-error);
	background: #fbefee;
	color: #b3261e;
	color: var(--ci-error);
}

/* ==========================================================================
   Inhaltsflächen (helles Schema) – „freundlich innen"
   Überschriften in würdevollem Navy, Links im Primär-Blau der Loge.
   ========================================================================== */
.entry-content h1,
.entry-content h2,
.entry-content h3 {
	color: #101f42; /* Fallback */
	color: var(--ci-navy-2);
}

.entry-content a,
.entry-content a:visited {
	color: #04458c; /* Fallback */
	color: var(--ci-blue);
}

.entry-content a:hover,
.entry-content a:focus {
	color: #2e6fc4;
	color: var(--ci-blue-accent);
}

.entry-content blockquote {
	border-left: 3px solid #c9d9ee;
	border-left: 3px solid var(--ci-tint-border);
	color: #4a5568;
	color: var(--ink-soft);
}

::selection {
	background: #04458c;
	background: var(--ci-blue);
	color: #fff;
}

/* --- Blog-Startseite: ruhiger Rhythmus, blaue Akzente (P3.3) -------------- */
.blog .entry-title a,
.blog .entry-title a:visited {
	color: #101f42;
	color: var(--ci-navy-2);
}

.blog .entry-title a:hover,
.blog .entry-title a:focus {
	color: #04458c;
	color: var(--ci-blue);
}

.blog .entry-meta a {
	color: #4a5568;
	color: var(--ink-soft);
}

.more-link {
	color: #04458c;
	color: var(--ci-blue);
	font-weight: 600;
}

/* ==========================================================================
   Fokus-Sichtbarkeit (Tastaturbedienung, WCAG 2.4.7)
   ========================================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.menu-toggle:focus-visible {
	outline: 2px solid #2e6fc4;
	outline: 2px solid var(--ci-blue-accent);
	outline-offset: 2px;
}

/* Auf dunklen Flächen (Nav, Footer) heller Fokus-Ring. */
.navigation-top a:focus-visible,
.site-footer a:focus-visible {
	outline-color: #8cb4e8;
	outline-color: var(--ci-sky);
}

/* ==========================================================================
   Seiten-Templates „Lodge"
   --------------------------------------------------------------------------
   Grundlayout (zentrierte Spalte, max 740px) kommt aus dem Parent
   (page-one-column, global gesetzt). Hier nur der CI-Feinschliff je Template.
   Innere Breiten immer über .site-main (nicht #primary – dessen Parent-Regel
   ist spezifischer). Header/Nav/Footer werden hier NICHT berührt.
   ========================================================================== */

/* Gemeinsamer, zentrierter Seitenkopf mit dezentem ✦-Stern (Wappen-Echo). */
.lodge-page .entry-header {
	text-align: center;
	margin-bottom: 2.5em;
}

.lodge-page .entry-title {
	color: #101f42; /* Fallback */
	color: var(--ci-navy-2);
	letter-spacing: 0.02em;
}

.lodge-page .entry-title::after {
	content: "✦";
	display: block;
	margin-top: 0.5em;
	font-size: 1rem;
	line-height: 1;
	color: #2e6fc4; /* Fallback */
	color: var(--ci-blue-accent);
}

/* T1 Lesestück: einleitender Lead-Absatz. */
.lodge-page--lesen .entry-content > p:first-child {
	font-size: 1.125rem;
	line-height: 1.75;
	color: #1b2331;
	color: var(--ink);
}

/* T2 Einladung: großzügigerer Callout, kompaktes Formular. */
.lodge-page--einladung .guest-callout {
	padding: 1.5em 1.75em;
	font-size: 1.0625rem;
}

.lodge-page--einladung .guest-form {
	max-width: 620px;
}

/* T3 Kontakt: schmale, formularzentrierte Spalte. */
.lodge-page--kontakt .site-main {
	max-width: 40em;
	margin-left: auto;
	margin-right: auto;
}

/* T4 Dokument: sachliche, schmale Rechtstextspalte – kein Stern, Titel links. */
.lodge-page--dokument .site-main {
	max-width: 42em;
	margin-left: auto;
	margin-right: auto;
}

.lodge-page--dokument .entry-header {
	text-align: left;
	margin-bottom: 1.5em;
}

.lodge-page--dokument .entry-title {
	font-size: clamp(1.5rem, 1.2rem + 1vw, 1.75rem);
}

.lodge-page--dokument .entry-title::after {
	content: none;
}

.lodge-page--dokument .legal-updated {
	margin: 0.4em 0 0;
	font-size: 0.8125rem;
	color: #4a5568;
	color: var(--ink-soft);
}

.lodge-page--dokument .entry-content h2 {
	font-size: 1.25rem;
}

.lodge-page--dokument .entry-content h3 {
	font-size: 1.0625rem;
}

.lodge-page--dokument .entry-content hr {
	background-color: #c9d9ee;
	background-color: var(--ci-tint-border);
}

/* T5 Termine: Terminliste mit Datum-Badge (redaktionelles HTML im Inhalt). */
.event-list {
	margin: 1.5em 0;
	padding: 0;
	list-style: none;
}

.event-list .event {
	display: grid;
	grid-template-columns: 4.5em 1fr;
	gap: 1.25em;
	padding: 1em 0;
	border-top: 1px solid #c9d9ee;
	border-top: 1px solid var(--ci-tint-border);
}

.event-list .event:last-child {
	border-bottom: 1px solid #c9d9ee;
	border-bottom: 1px solid var(--ci-tint-border);
}

.event__date {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0.4em 0;
	border-radius: 4px;
	background: #edf3fb; /* Fallback */
	background: var(--ci-tint);
	color: #04458c; /* Fallback */
	color: var(--ci-blue);
	font-weight: 700;
	line-height: 1.15;
	text-align: center;
}

.event__body {
	min-width: 0;
}

.event__body h3 {
	margin: 0 0 0.3em;
	font-size: 1.0625rem;
}

.event__body p {
	margin: 0;
	color: #4a5568;
	color: var(--ink-soft);
}

/* ==========================================================================
   Startseite „Landing" (front-page.php) – seit Version 1.12.0
   --------------------------------------------------------------------------
   Kuratierte Startseite unterhalb des Cinematic-Headers. Rhythmus der Bänder
   (volle Breite, Inhalt in .wrap): Intro (weiß) → Leitwerte (paper-soft) →
   Freimaurerei-Teaser (weiß) → Aktuelles (paper-soft) → CTA (Navy + Foto-
   Scrim). Leitprinzip „mystisch außen, freundlich innen": helle, lesbare
   Flächen, Navy nur als würdevoller Schlussakkord vor dem Footer.
   Vollständig additiv – gehört zu front-page.php; ohne diese Datei matcht
   hier nichts (alle Selektoren unter .front-landing).
   ========================================================================== */

.front-landing {
	color: #1b2331;
	color: var(--ink);
}

/* Bänder: fluides vertikales Padding, Inhalt zentriert die .wrap (Parent). */
.front-landing .front-section {
	padding: clamp(3.25em, 7vw, 5.5em) 0;
}

/* --- Gemeinsame Sektions-Köpfe: Eyebrow + Titel ---------------------------- */
.front-landing .front-section__head {
	text-align: center;
	margin-bottom: 2.25em;
}

.front-landing .front-eyebrow {
	margin: 0 0 0.75em;
	color: #04458c; /* Fallback */
	color: var(--ci-blue);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.front-landing .front-title {
	margin: 0;
	color: #101f42; /* Fallback */
	color: var(--ci-navy-2);
	font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.375rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.01em;
}

/* Pfeil-Link (Teaser, Karten): Primärblau, ohne Unterstrich, klarer Hover. */
.front-landing a.front-more,
.front-landing a.front-more:visited {
	color: #04458c; /* Fallback */
	color: var(--ci-blue);
	font-weight: 600;
	text-decoration: none;
	transition: color 0.15s ease;
}

.front-landing a.front-more:hover,
.front-landing a.front-more:focus {
	color: #2e6fc4; /* Fallback */
	color: var(--ci-blue-accent);
}

/* --- 1) Intro: großzügiger, zentrierter Auftakt mit ✦-Ausklang ------------- */
.front-intro {
	text-align: center;
}

.front-intro .front-section__head {
	margin-bottom: 1.25em;
}

.front-intro .front-lead {
	max-width: 42em;
	margin: 0 auto;
	font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
	line-height: 1.8;
	color: #4a5568;
	color: var(--ink-soft);
}

.front-intro .front-star {
	display: block;
	margin-top: 1.75em;
	color: #2e6fc4; /* Fallback */
	color: var(--ci-blue-accent);
	font-size: 1.05rem;
	line-height: 1;
	opacity: 0.85;
}

/* --- 2) Leitwerte: helles Band, fünf ruhige Karten ------------------------- */
.front-values {
	background: #f6f8fb; /* Fallback */
	background: var(--paper-soft);
	border-top: 1px solid #edf3fb;
	border-top: 1px solid var(--ci-tint);
	border-bottom: 1px solid #edf3fb;
	border-bottom: 1px solid var(--ci-tint);
}

.front-values__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1.25em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.front-value {
	margin: 0;
	padding: 1.75em 1.4em 1.6em;
	background: #ffffff;
	background: var(--paper);
	border: 1px solid #c9d9ee;
	border: 1px solid var(--ci-tint-border);
	border-radius: 6px;
	text-align: center;
	box-shadow: 0 1px 2px rgba(10, 23, 48, 0.04);
}

/* ✦-Plakette: Stern des Wappens als dezentes, einheitliches Zeichen. */
.front-value__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75em;
	height: 2.75em;
	margin: 0 auto 1em;
	border-radius: 50%;
	background: #edf3fb; /* Fallback */
	background: var(--ci-tint);
	color: #04458c; /* Fallback */
	color: var(--ci-blue);
	font-size: 0.95rem;
	line-height: 1;
}

.front-value__name {
	margin: 0 0 0.45em;
	font-size: 1.0625rem;
	letter-spacing: 0.05em;
	color: #101f42; /* Fallback */
	color: var(--ci-navy-2);
}

.front-value__text {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: #4a5568;
	color: var(--ink-soft);
}

/* --- 3) Teaser „Was ist Freimaurerei?": zweispaltige, ruhige Passage ------- */
.front-about__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5em;
	max-width: 52em;
	margin: 0 auto;
}

.front-about .front-section__head,
.front-about .front-about__head {
	text-align: left;
	margin-bottom: 0;
}

.front-about__body p:first-child {
	margin-top: 0;
	font-size: 1.0625rem;
	line-height: 1.8;
	color: #4a5568;
	color: var(--ink-soft);
}

.front-about__more {
	margin-bottom: 0;
}

@media screen and (min-width: 48em) {
	.front-about__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
		gap: 3.5em;
		align-items: start;
	}
}

/* --- 4) Aktuelles: drei Beitrags-Karten ------------------------------------ */
.front-news {
	background: #f6f8fb; /* Fallback */
	background: var(--paper-soft);
	border-top: 1px solid #edf3fb;
	border-top: 1px solid var(--ci-tint);
	border-bottom: 1px solid #edf3fb;
	border-bottom: 1px solid var(--ci-tint);
}

.front-news__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 1.5em;
}

.front-card {
	display: flex;
	flex-direction: column;
	background: #ffffff;
	background: var(--paper);
	border: 1px solid #c9d9ee;
	border: 1px solid var(--ci-tint-border);
	border-top: 3px solid #04458c; /* blauer Akzent – zugleich Bild-Fallback */
	border-top: 3px solid var(--ci-blue);
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(10, 23, 48, 0.04);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.front-card:hover,
.front-card:focus-within {
	box-shadow: 0 14px 34px rgba(10, 23, 48, 0.12);
	transform: translateY(-3px);
}

/* Beitragsbild (falls vorhanden): festes Seitenverhältnis, sauber beschnitten. */
.front-card__media {
	display: block;
}

.front-card__media img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.front-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 1.4em 1.5em 1.5em;
}

.front-card__date {
	margin: 0 0 0.6em;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #4a5568;
	color: var(--ink-soft);
}

.front-card__title {
	margin: 0 0 0.55em;
	font-size: 1.125rem;
	line-height: 1.4;
}

.front-card__title a,
.front-card__title a:visited {
	color: #101f42; /* Fallback */
	color: var(--ci-navy-2);
	text-decoration: none;
	transition: color 0.15s ease;
}

.front-card__title a:hover,
.front-card__title a:focus {
	color: #04458c; /* Fallback */
	color: var(--ci-blue);
}

.front-card__excerpt {
	margin: 0 0 1em;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: #4a5568;
	color: var(--ink-soft);
}

/* „Weiterlesen" ans Kartenende – einheitliche Unterkante aller drei Karten. */
.front-card__more {
	margin: auto 0 0;
}

/* --- 5) CTA „Gast bei uns sein": Navy-Bühne mit Foto-Scrim ----------------- */
/* Hintergrundbild kommt (falls vorhanden) inline aus front-page.php;
   ohne Bild trägt die Navy-Fläche allein. Scrim als eigenes Overlay davor. */
.front-cta {
	position: relative;
	background-color: #0a1730; /* Fallback */
	background-color: var(--ci-navy);
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

.front-cta::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(8, 15, 34, 0.78); /* Fallback */
	background: linear-gradient(
		to bottom,
		rgba(8, 15, 34, 0.86) 0%,
		rgba(8, 15, 34, 0.72) 45%,
		rgba(6, 11, 26, 0.9) 100%
	);
	pointer-events: none;
}

.front-cta__inner {
	position: relative;
	z-index: 1;
	max-width: 46em;
	text-align: center;
}

.front-cta__star {
	display: block;
	margin-bottom: 1em;
	color: #8cb4e8; /* Fallback */
	color: var(--ci-sky);
	font-size: 1.1rem;
	line-height: 1;
	opacity: 0.9;
	text-shadow: 0 1px 6px rgba(4, 10, 26, 0.6);
}

.front-cta__title {
	margin: 0 0 0.5em;
	color: #fff;
	font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.front-cta__text {
	margin: 0 auto 1.9em;
	max-width: 36em;
	color: #dce7f6;
	font-size: 1.0625rem;
	line-height: 1.8;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.front-cta__actions {
	margin: 0 0 1.4em;
}

/* Primär-Button: helle Fläche auf Navy (maximaler Kontrast), Navy-Blau-Text. */
.front-landing a.front-btn,
.front-landing a.front-btn:visited {
	display: inline-block;
	padding: 0.95em 2.4em;
	border-radius: 4px;
	background: #ffffff;
	background: var(--paper);
	color: #04458c; /* Fallback */
	color: var(--ci-blue);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-decoration: none;
	box-shadow: 0 10px 30px rgba(4, 10, 26, 0.35);
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.front-landing a.front-btn:hover,
.front-landing a.front-btn:focus {
	background: #edf3fb; /* Fallback */
	background: var(--ci-tint);
	transform: translateY(-1px);
}

.front-cta__alt {
	margin: 0;
	font-size: 0.9375rem;
}

.front-cta__alt a,
.front-cta__alt a:visited {
	color: #8cb4e8; /* Fallback */
	color: var(--ci-sky);
	text-decoration: none;
	border-bottom: 1px solid rgba(140, 180, 232, 0.45);
	transition: color 0.15s ease, border-color 0.15s ease;
}

.front-cta__alt a:hover,
.front-cta__alt a:focus {
	color: #fff;
	border-bottom-color: #8cb4e8;
	border-bottom-color: var(--ci-sky);
}

/* Heller Fokus-Ring auf der dunklen CTA-Fläche. */
.front-cta a:focus-visible {
	outline-color: #8cb4e8;
	outline-color: var(--ci-sky);
}

/* --- Barrierefreiheit: keine Mikro-Bewegungen bei reduced motion ----------- */
@media (prefers-reduced-motion: reduce) {
	.front-card,
	.front-card:hover,
	.front-card:focus-within,
	.front-landing a.front-btn,
	.front-landing a.front-btn:hover,
	.front-landing a.front-btn:focus {
		transition: none;
		transform: none;
	}
}

/* ==========================================================================
   „Aktuelles" – Beitragsübersicht (Seiten-Template template-aktuelles.php)
   Nutzt die globalen .front-card / .front-news__grid-Karten der Startseite.
   ========================================================================== */

/* Listing über die volle .wrap-Breite (das globale one-column-Layout cappt
   #primary sonst auf 740px; hier bewusst breiter fürs Archiv-Raster). */
.aktuelles #primary {
	max-width: none !important;
}

.aktuelles .entry-header {
	text-align: center;
	margin-bottom: 1em;
}

.aktuelles .aktuelles__intro {
	max-width: 42em;
	margin: 0 auto 2.75em;
	text-align: center;
	color: #4a5568;
	color: var(--ink-soft);
}

.aktuelles__grid {
	margin-top: 1.5em;
}

/* Paginierung */
.aktuelles__pagination {
	margin-top: 3em;
}

.aktuelles__pagination ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.aktuelles__pagination a.page-numbers,
.aktuelles__pagination span.page-numbers {
	display: inline-block;
	min-width: 2.6em;
	padding: 0.55em 0.75em;
	text-align: center;
	line-height: 1;
	border: 1px solid #c9d9ee;
	border: 1px solid var(--ci-tint-border);
	border-radius: 4px;
	text-decoration: none;
	color: #04458c;
	color: var(--ci-blue);
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.aktuelles__pagination a.page-numbers:hover,
.aktuelles__pagination a.page-numbers:focus {
	background: #edf3fb;
	background: var(--ci-tint);
	border-color: #2e6fc4;
	border-color: var(--ci-blue-accent);
}

.aktuelles__pagination .page-numbers.current {
	background: #04458c;
	background: var(--ci-blue);
	border-color: #04458c;
	border-color: var(--ci-blue);
	color: #fff;
	font-weight: 700;
}

.aktuelles__pagination .page-numbers.dots {
	border-color: transparent;
	color: #4a5568;
	color: var(--ink-soft);
}