/*
Theme Name: Sedenkamp
Theme URI: https://sedenkamp.gordonx.de/
Description: Helles Design für die Straßenseite Sedenkamp – Verkehrsblau und Papierweiß, runde Inhaltskarten, der Kopfbanner bleibt. Kind-Theme zu Twenty Fourteen.
Author: Gordon Lehmann
Author URI: https://glx-tools.de/
Template: twentyfourteen
Version: 2.6.0
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sedenkamp
Tags: custom-header, custom-menu, featured-images, translation-ready
*/

/* ======================================================================
   WOHER DAS AUSSEHEN KOMMT

   Gordon, 09.09.2026: "Ein Icon mit dem S von mir aus, und ein bisschen
   bläulicher Hintergrund wie ein Straßennamenschild und ein weißes S
   drin." Und: "Das muss halt so ein helles Design sein."

   Der Sedenkamp ist keine Firma und kein Verein, sondern eine STRASSE.
   Die hat in Deutschland ein Aussehen, das jeder kennt: blaues Schild,
   weiße Schrift, weißer Rand innen. Daraus kommt alles Weitere - das
   Verkehrsblau (RAL 5017, hier eine Spur heller für saubere weiße
   Schrift), der helle Grund, die schmale Schrift der Straßenschilder
   und die runden Karten.

   WAS TWENTY FOURTEEN VON HAUS AUS MACHT UND HIER NICHT SOLL

   Twenty Fourteen ist ein Magazin-Theme in Schwarz: schwarzer Kopf,
   schwarze Seitenspalte, graue Fläche. Alles, was hier steht, dreht das
   ins Helle. Die Regeln sind deshalb an einigen Stellen mit !important
   versehen - nicht aus Bequemlichkeit, sondern weil die Vorlage dort
   selbst mit hoher Gewichtung arbeitet und ein Kind-Theme sonst
   verliert.

   DER BANNER BLEIBT

   Gordon, 09.09.2026: "Der Hintergrund, oben der Banner, der muss
   bleiben. Das ist das Allerallerwichtigste." Deshalb wird #site-header
   hier nicht versteckt, sondern in voller Breite gezeigt.
   ====================================================================== */

:root {
	--sed-grund:      #eef1f7;   /* kühles Papier, ein Hauch blaustichig */
	--sed-karte:      #ffffff;
	--sed-karte-leis: #f7f9fd;
	--sed-linie:      #dbe2ee;
	--sed-linie-fein: #e9eef7;

	--sed-text:       #16202c;
	--sed-leise:      #5b6878;

	--sed-blau:       #0f3d8c;
	--sed-blau-hell:  #1f56b8;
	--sed-blau-tief:  #0a2c66;
	/* Noch eine Stufe dunkler - für den Mauszeiger im Menü.
	   Gordon, 09.09.2026: "Nimm ein tief dunkles Marineblau, noch
	   dunkler als die Untermenüs, als Mouseover."
	   Wer stattdessen Türkis will, trägt hier #147d78 ein - dann ist
	   es eine Zeile und keine Suche. */
	--sed-blau-nacht: #061a3f;
	--sed-hell:       #e7eefc;

	--sed-gruen:      #1f7a52;
	--sed-gruen-hell: #e3f4ec;
	--sed-rot:        #a8412c;
	--sed-rot-hell:   #fbe9e4;

	--sed-rund:       14px;
	--sed-rund-klein: 10px;
	--sed-schatten:   0 1px 2px rgba(16, 32, 56, .06),
	                  0 8px 24px -14px rgba(16, 32, 56, .28);

	--sed-titel: "Barlow Semi Condensed", "Fira Sans Condensed",
	             "Arial Narrow", system-ui, sans-serif;
	--sed-brot:  "Source Sans 3", "Source Sans Pro", system-ui,
	             -apple-system, "Segoe UI", sans-serif;
}

/* ======================================================================
   GRUND UND SCHRIFT
   ====================================================================== */

body,
body.custom-background {
	background: var(--sed-blau-tief) !important;
	color: var(--sed-text);
	font-family: var(--sed-brot);
	font-size: 17px;
	line-height: 1.62;
}

/* DAS HINTERGRUNDBILD.

   Gordon, 09.09.2026: "Der Hintergrund muss auch ein Bild sein von der
   Homepage. Das Bild kannst Du nehmen, aber das muss leicht verschwommen
   sein, das darf nicht klar sein." Und: "Als komplettes Hintergrundbild,
   das steht hinter allem - und nicht mehr dieser weiße Hintergrund."

   Es ist die Brücke zum Wragekamp, weichgezeichnet und leicht
   aufgehellt. Das Weichzeichnen steckt schon in der Datei und nicht in
   einem filter:blur(): Der Browser müsste es sonst bei jedem Aufbau neu
   rechnen, und auf einem Handy sieht man das.

   DER SCHLEIER DARÜBER ist keine Zierde. Auf einem Foto ist jede Stelle
   anders hell; dunkler Text darauf ist an der einen Stelle lesbar und an
   der nächsten nicht. Der helle Schleier nimmt dem Bild so viel Kraft,
   dass es Hintergrund bleibt - sichtbar, aber nicht im Weg.

   position:fixed statt background-attachment:fixed: Letzteres ruckelt
   auf iPhones beim Scrollen, und die halbe Straße liest mit dem Handy. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	/* DER SCHLEIER WAR ZU DICK.

	   Erst standen hier 74 und 84 Prozent - davon blieb vom Foto ein
	   gleichmäßiges Grau übrig. Gordon am 09.09.2026: "Der Hintergrund
	   ist leider immer noch grau. Da muss das Bild rein."

	   Jetzt ein leichter BLAUER Schleier, 22 bis 34 Prozent. Gordon am
	   09.09.2026: "Nimm so einen leichten Blauschleier, das Bild soll
	   man schon noch erkennen." Blau statt Weiß hat einen zweiten
	   Vorteil: Es zieht das Foto zur Farbe der Seite hin, statt es
	   daneben zu stellen. */
	background-image:
		linear-gradient(rgba(18, 58, 128, .22), rgba(18, 58, 128, .34)),
		url( images/grund.jpg );
	background-size: cover, cover;
	background-position: center, center;
	background-repeat: no-repeat, no-repeat;
}

/* MITTIG. Gordon am 09.09.2026: "Die Homepage muss mittig."

   Twenty Fourteen zentriert selbst; solange sein Stilblatt nicht geladen
   war, half das nichts. Hier steht es noch einmal ausdrücklich - dann
   hängt die Mitte nicht daran, dass die Vorlage sich nicht ändert. */
#page.site {
	position: relative;
	z-index: 1;
	background: transparent;
	box-shadow: none;
	max-width: 1180px;
	margin: 0 auto;
}

.site-content,
.site-main,
.content-area,
.site-footer,
.hentry,
.page-content,
.entry-content,
.comments-area { background: transparent; }

h1, h2, h3, h4, h5,
.entry-title,
.widget-title,
.site-title {
	font-family: var(--sed-titel);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: .005em;
	color: var(--sed-text);
	text-wrap: balance;
}

p { margin: 0 0 1.05em; }

a { color: var(--sed-blau); }
a:hover, a:focus { color: var(--sed-blau-hell); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--sed-blau);
	outline-offset: 2px;
}

/* ======================================================================
   DER KOPF

   Zuerst der Banner in voller Breite, darunter eine weiße Zeile mit dem
   Straßenschild, und darunter die blaue Menüleiste. In dieser
   Reihenfolge liest man es auch: Wo bin ich, wie heißt es hier, was
   gibt es.
   ====================================================================== */

/* DIE SCHWARZE SPALTE.

   Gordon am 09.09.2026: "Das linke Seitenmenü muss auch runde Ecken
   haben und darf nicht schwarz sein, sondern vielleicht irgendein
   dunkleres Blau."

   Sie steht nicht im Quelltext - Twenty Fourteen malt sie mit
   .site::before: ein 182 Punkte breiter schwarzer Balken hinter der
   Seitenspalte, ab 1008 Punkten Fensterbreite. Wer sie an #secondary
   sucht, sucht am falschen Ort; ich habe es getan.

   Jetzt ist sie das dunkle Blau der Fußzeile, mit runder rechter Kante -
   dieselbe Rundung wie die Karten daneben. */
#page.site::before {
	background-color: var(--sed-blau-tief) !important;
	border-radius: 0 var(--sed-rund) var(--sed-rund) 0;
	width: 190px !important;
}

/* UND SIE GEHÖRT HINTER BANNER UND MENÜ.

   Gordon, 10.09.2026: "Das Seitenmenü kannst Du so lassen, wie es ist,
   dann ist oben weniger Luft. Es muss nur hinter das Menü und hinter
   den Banner."

   Vorher erledigte das der Kopf von selbst: Er war undurchsichtig,
   stand auf position:relative und hatte z-index 3 - damit lag er über
   der Spalte. Seit er durchsichtig und statisch ist (nötig, damit das
   Schild oben im Banner sitzt), gilt sein z-index nicht mehr, und die
   Spalte legte sich über die Menüleiste. Auf Gordons Bild fehlte
   deshalb "Home", und "Neue Brücke zum Wragekamp" war halb verdeckt.

   Denn ein ::before mit position:absolute malt über allem, was
   unpositioniert im Fluss steht - egal, wo es im Quelltext steht. Wer
   darüber liegen will, muss selbst positioniert sein.

   Also bekommen Banner und Menüleiste ihre eigene Ebene. Die Spalte
   bleibt, wo sie ist, und läuft hinter beiden durch. */
#site-header,
#primary-navigation {
	position: relative;
	z-index: 4;
}

/* DIE ERSTE KARTE LINKS AUF HÖHE DES INHALTS.

   Gordon, 10.09.2026: "Kannst Du das Seitenmenü so weit hochziehen, dass
   die erste Box vom Fundus genau die gleiche Höhe hat wie der Content
   auf der Hauptseite?"

   Dazwischen stand der Untertitel der Seite - das "SEDENKAMP" über der
   ersten Karte. Twenty Fourteen setzt ihn in die Seitenspalte, und er
   allein drückte die Karte 43 Punkte nach unten.

   Er sagt auch nichts, was nicht schon dastünde: Das Straßenschild im
   Banner heißt SEDENKAMP.DE. Also ist er auf großen Bildschirmen weg,
   und die Karte rückt an seine Stelle.

   Nachgemessen an der laufenden Seite: Kopf des Inhalts bei 343, Karte
   jetzt ebenfalls bei 343.

   Wer den Untertitel zurückhaben will, nimmt die eine Zeile mit
   .site-description wieder raus. Auf dem Handy steht er ohnehin
   weiterhin - dort liegt die Spalte unter dem Inhalt, und da stört er
   niemanden. */
@media screen and (min-width: 1008px) {
	#secondary .site-description { display: none !important; }

	/* Die 13 Punkte sind nicht geraten, sondern der Abstand, den der
	   Inhalt daneben von oben hat. Wer den ändert, muss diesen
	   mitändern. */
	#secondary { padding-top: 13px !important; }
	#secondary .primary-sidebar { padding-top: 0 !important; margin-top: 0 !important; }
	#secondary .widget:first-child { margin-top: 0 !important; }
}

/* DIE DREI MASSE DER LINKEN SPALTE.

   Nachgemessen an der laufenden Seite: Der Inhalt stand doppelt
   eingerückt - 214 Punkte von mir und noch einmal 222 von Twenty
   Fourteen -, und die Seitenspalte überlappte ihn dabei um 28.

   Deshalb stehen die drei Werte jetzt beieinander und passen
   zueinander: Die Spalte ist 210 breit, der Inhalt fängt bei 244 an,
   macht 34 Punkte Luft dazwischen. Wer eines ändert, muss die anderen
   mitändern - deshalb stehen sie hier und nicht verstreut. */
@media screen and (min-width: 1008px) {
	#main-content { margin-left: 0 !important; }
	/* box-sizing:border-box ist hier die halbe Miete.

	   Twenty Fourteen rechnet bei #secondary die Polsterung ZUR Breite
	   dazu: 210 plus zweimal 30 macht 270 - und damit ragte die Spalte
	   26 Punkte in den Inhalt hinein. Am Bild sah es aus, als stimme
	   der Abstand nicht; in Wahrheit stimmte die Breite nicht. */
	/* 250 statt 210. Gordon, 09.09.2026: "Im Seitenmenü benutzen die
	   nicht die volle Breite, das ist doof."

	   Er hat recht, und es lag nicht am Plugin: Von 210 Punkten gingen
	   32 für die Polsterung der Spalte und noch einmal 40 für die des
	   Widgets ab - übrig blieben 138 für den Inhalt, und darin bricht
	   "Dachgeschoss" mitten im Wort um. Jetzt sind es 250 minus 24
	   minus 24, also 202. */
	#secondary {
		width: 250px !important;
		box-sizing: border-box !important;
		padding-left: 12px !important;
		padding-right: 12px !important;
	}
	.site-content { margin-left: 284px !important; }
	#page.site::before { width: 250px !important; }
}

/* Die Karten in der dunklen Spalte bleiben weiß - so gehören sie zum
   Inhalt und nicht zum Balken. Nur die Überschrift der Spalte, die
   Twenty Fourteen dort ausgibt, wird hell. */
/* Der Straßenname über der Spalte - er steht IN der blauen Spalte und
   muss deshalb hell sein und ihren Rand einhalten. */
#secondary .site-description,
#secondary > .site-description {
	color: rgba(255, 255, 255, .78) !important;
	padding: 18px 18px 6px !important;
	margin: 0 !important;
	width: auto !important;
	font-size: .82rem;
	letter-spacing: .12em;
}

/* DAS SCHILD MUSS SICHTBAR BLEIBEN.

   Steht in der Datenbank header_textcolor = 'blank', versteckt Twenty
   Fourteen den Seitennamen mit clip. functions.php setzt den Wert
   zurück; diese Regel ist der Gurt zum Hosenträger, falls jemand ihn
   im Customizer erneut abschaltet. */
.site-title {
	position: relative !important;
	clip: auto !important;
	clip-path: none !important;
	height: auto !important;
	width: auto !important;
	overflow: visible !important;
}

/* Der Kopf lässt das Bild durchscheinen - eine weiße Wand mitten im
   Foto sähe aus wie ein Fehler. */
.site-header {
	background-color: rgba(255, 255, 255, .82) !important;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border-bottom: 1px solid rgba(255, 255, 255, .5);
	max-width: none;
	z-index: 3;
}

/* --- Der Banner ------------------------------------------------------
   Gordon: "Der Banner oben muss bleiben." Twenty Fourteen legt ihn in
   #site-header. Er bekommt die volle Breite und eine feine Kante nach
   unten, damit er nicht in die weiße Zeile darunter ausläuft. */
#site-header {
	display: block;
	max-width: none;
	margin: 0;
	background: var(--sed-blau-tief);
}
#site-header a { display: block; }
#site-header img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 auto;
	max-width: 1180px;
}

/* --- Die Zeile mit dem Schild ---------------------------------------- */
.header-main {
	max-width: 1180px;
	margin: 0 auto;
	/* Eng gehalten. Gordon: "Der Hintergrund vom Menü ist noch zu groß,
	   oben und unten zu viel weiß." */
	padding: 8px 14px 9px;
	min-height: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}

/* DAS SCHILD LIEGT AUF DEM BANNER, OBEN LINKS.

   Gordon, 10.09.2026: "Das muss oben links über den Banner. Das darf
   nicht ins Menü rein, das zerschießt das ganze Menü."

   Im Quelltext steht es hinter dem Bild - erst #site-header mit dem
   Banner, dann #masthead mit Name und Menü. Umsortieren ginge nur über
   eine eigene header.php, und eine kopierte Vorlage veraltet bei jedem
   Update von Twenty Fourteen. Deshalb bleibt es stehen, wo es steht,
   und wird an seinen Platz gelegt.

   Der Bezugspunkt ist #page. Ein echtes Straßenschild steht auch am
   Anfang der Straße und nicht in der Mitte.

   Der Seitenname IST das Schild: blaue Fläche, weiße Schrift, weißer
   Rand innen mit Abstand zur Kante. Genau daran erkennt man ein
   deutsches Straßennamenschild. */
#page { position: relative; }

.site-title {
	position: absolute !important;
	top: 22px;
	left: 26px;
	z-index: 6;
	margin: 0;
	padding: 0;
	line-height: 1;
	max-width: calc(100% - 52px);
}

/* Die weiße Zeile hat nichts mehr zu tragen. Sie schrumpft auf nichts,
   damit das Menü direkt unter dem Banner sitzt - das ist der Platz, den
   das Schild vorher gefressen hat. */
.header-main {
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* UND DER BEZUGSPUNKT MUSS #page SEIN.

   Twenty Fourteen setzt .site-header selbst auf position:relative.
   Damit hing das Schild an dessen Oberkante - also an der Menueleiste,
   direkt unter dem Banner statt oben darin. Genau das war auf Gordons
   Bild zu sehen: Schild und Menue uebereinander.

   Nimmt man .site-header die Positionierung, ist der naechste
   positionierte Vorfahr #page - und dessen Oberkante ist die Oberkante
   des Banners, denn #site-header mit dem Bild ist sein erstes Kind.

   Absolut positionierte Kinder hat der Kopf keine mehr: Die Suche von
   Twenty Fourteen ist raus, und der weisse Rand im Schild haengt am
   Schild selbst. */
.site-header {
	position: static !important;
	border-bottom: 0 !important;

	/* UND DER FILTER MUSS AUCH WEG.

	   Nachgemessen: Selbst mit position:static blieb #masthead der
	   Bezugsrahmen des Schildes. Der Grund steht eine Regel weiter oben -
	   backdrop-filter. Ein Element mit filter oder backdrop-filter wird
	   zum Bezugsrahmen für alles, was darin absolut steht, ganz gleich,
	   welche Position es selbst hat. Das steht so in der Vorschrift und
	   ist genau die Art Regel, die man einmal im Leben nachschlägt.

	   Er kostet ohnehin nichts mehr: Die weiße Fläche, die er
	   verschwimmen ließ, ist weg.

	   Gordon, 10.09.2026: "Kannst Du die weißen Ecken vom Menü auch
	   gleich wegschneiden. Das sieht auch scheiße aus." Das waren sie -
	   der weiße Streifen hinter der runden blauen Menüleiste, der an
	   deren Ecken durchschaute. */
	background: transparent !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}

.site-title a {
	display: inline-block;
	position: relative;
	background: var(--sed-blau);
	border-radius: 6px;
	padding: 13px 24px 14px;
	color: #fff !important;
	text-decoration: none;
	font-family: var(--sed-titel);
	font-weight: 600;
	font-size: clamp(1.35rem, 1rem + 1.4vw, 1.9rem);
	letter-spacing: .045em;
	text-transform: uppercase;
	box-shadow: 0 2px 0 rgba(10, 44, 102, .35),
	            0 10px 22px -14px rgba(10, 44, 102, .8);
}

/* Der weiße Rand INNEN, mit Abstand zur Kante - daran erkennt man ein
   deutsches Straßennamenschild. Als eigene Ebene über der Fläche, nicht
   als Rahmen am Schild selbst: Ein Rahmen säße auf der Kante. */
.site-title a::before {
	content: "";
	position: absolute;
	inset: 6px;
	border: 2px solid rgba(255, 255, 255, .92);
	border-radius: 3px;
	pointer-events: none;
}

/* DIE SUCHE VON TWENTY FOURTEEN IST WEG.

   Gordon am 09.09.2026: "Da ist irgend so ein komischer Punkt drin, ich
   weiß nicht, was das sein soll."

   Das war sie: ein Knopf, der seine Lupe aus der Zeichenschrift der
   Vorlage holt. Meine runde blaue Fläche machte daraus einen leeren
   Punkt. Auf einer Straßenseite mit vierzehn Seiten sucht ohnehin
   niemand - das Menü ist schneller. Wer die Suche doch will, nimmt das
   Suchfeld als Widget in die Seitenspalte. */
.search-toggle,
#search-container,
.search-box-wrapper { display: none !important; }

/* ======================================================================
   DAS MENÜ

   Gordon, 09.09.2026: "Das Menü muss komplett überarbeitet werden, also
   runde Ecken und so. Das muss auch ein bisschen schlanker werden."

   Runde Pillen statt Kästen, weniger Höhe, keine Unterstriche. Der
   aktuelle Punkt ist hell ausgefüllt - bei vierzehn Einträgen nebeneinander
   braucht es einen deutlichen Anker.

   UND DAS HANDY IST NICHT DER NEBENFALL

   Gordon: "Da sind neunundzwanzig Leute registriert, und ganz viele
   gehen per Handy auf die Webseite." Deshalb steht die Handy-Fassung
   weiter unten nicht als Notlösung da, sondern als eigener Entwurf: ein
   Knopf mit drei Strichen, darunter die Einträge als große, weit
   auseinanderliegende Zeilen - Finger sind ungenauer als Mauszeiger.
   ====================================================================== */

/* DER BALKEN GEHT ÜBER DIE GANZE SEITE UND HAT RUNDE ECKEN.

   Gordon am 09.09.2026: "Der Balken muss so breit sein wie die
   Homepage, und die Menüpunkte müssen in der Mitte sein."

   Twenty Fourteen lässt das Menü nach links schwimmen - es ist deshalb
   nur so breit wie seine Einträge. Das Schwimmen muss weg, sonst hilft
   keine Breitenangabe. */
.primary-navigation,
.site-navigation {
	background: var(--sed-blau);
	font-size: 1rem;
	float: none !important;
	clear: both;
	width: 100% !important;
	flex: 1 1 100%;
	margin: 0 !important;
	padding: 0;
	border-radius: var(--sed-rund);
	overflow: visible;
}

.primary-navigation ul.nav-menu,
.primary-navigation div.nav-menu > ul,
.primary-navigation .menu {
	max-width: none;
	margin: 0;
	padding: 5px 10px 6px;
	border: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2px;
}

.primary-navigation li {
	border: 0;
	position: relative;
}

.primary-navigation a {
	display: block;
	padding: 7px 14px 8px;
	color: rgba(255, 255, 255, .92);
	font-family: var(--sed-titel);
	font-size: 1.02rem;
	letter-spacing: .03em;
	line-height: 1.3;
	text-transform: none;
	text-decoration: none;
	/* Ein durchsichtiger Rahmen von Anfang an: Bekommt der Knopf ihn
	   erst beim Überfahren, springt die Zeile um zwei Punkte. */
	border: 1px solid transparent;
	border-radius: 9px;
	transition: background .16s ease, color .16s ease,
	            border-color .16s ease;
}

/* DAS GRÜN VON TWENTY FOURTEEN.

   Gordon, 09.09.2026, zum dritten Mal: "Das Grün muss da weg."

   Er hat recht behalten, und der Grund ist die Gewichtung: Twenty
   Fourteen schreibt das Grün mit

       .primary-navigation .nav-menu > li > a:hover

   Das sind zwei Klassen, drei Elemente und eine Pseudoklasse. Meine
   Regel hatte nur eine Klasse - und verliert damit, ganz gleich welche
   Datei später geladen wird. Wer bei so etwas an der Reihenfolge dreht,
   sucht lange.

   Deshalb hier dieselben Selektoren wie dort, plus !important: Damit
   ist die Sache entschieden und bleibt es auch, wenn die Vorlage ihre
   Regeln einmal umbaut. */
.primary-navigation a:hover,
.primary-navigation a:focus,
.primary-navigation li:hover > a,
.primary-navigation li.focus > a,
.primary-navigation .nav-menu > li:hover > a,
.primary-navigation .nav-menu > li > a:hover,
.primary-navigation .nav-menu > li > a:focus,
.primary-navigation ul ul a:hover,
.primary-navigation ul ul a:focus {
	color: #fff !important;
	background-color: var(--sed-blau-nacht) !important;
	border-color: rgba(255, 255, 255, .85) !important;
	text-decoration: none;
}

/* Der aktuelle Punkt: weiß gefüllt, dunkelblaue Schrift, weißer
   Rahmen. Die Rundung ist dieselbe wie bei den übrigen Knöpfen und
   deutlich schwächer als die der Leiste - Gordon: "Die Rundung nicht so
   doll, nur ein bisschen." */
.primary-navigation .current-menu-item > a,
.primary-navigation .current_page_item > a,
.primary-navigation .current-menu-ancestor > a,
.primary-navigation .current_page_ancestor > a {
	color: var(--sed-blau-tief) !important;
	background-color: #fff !important;
	border-color: #fff !important;
	border-radius: 9px;
	font-weight: 600;
}

/* JEDER HAUPTPUNKT IST SICHTBAR EIN KNOPF.

   Gordon, 09.09.2026: "Man sieht gar nicht, dass das ein Button ist,
   da steht jetzt nur Text drin."

   Ein Pixel weißer Rahmen, gedämpft auf 38 Prozent - deutlich genug,
   dass man die Kante sieht, leise genug, dass vierzehn Knöpfe
   nebeneinander nicht wie ein Setzkasten wirken. Beim Überfahren wird
   er voll weiß.

   Nur die oberste Ebene: Im aufgeklappten Untermenü stünde ein Rahmen
   um jede Zeile, und das ist eine Liste, kein Knopfbrett. */
.primary-navigation .nav-menu > li > a,
.primary-navigation > div > ul > li > a,
.primary-navigation > ul > li > a {
	border-color: rgba(255, 255, 255, .38);
}

/* Am großen Bildschirm gibt es den Aufklapp-Pfeil nicht: Dort klappen
   die Untermenüs beim Überfahren auf, und ein Knopf dafür wäre ein
   Angebot ohne Nutzen. */
.primary-navigation .sed-auf { display: none; }

/* --- Untermenüs ------------------------------------------------------
   Gordon: "Ich pack da noch Unterkategorien rein." Also müssen sie
   sitzen, bevor sie gebraucht werden. */
.primary-navigation ul ul {
	display: none;
	position: absolute;
	left: 0;
	top: 100%;
	background: var(--sed-blau-tief);
	border: 0;
	border-radius: var(--sed-rund-klein);
	box-shadow: var(--sed-schatten);
	padding: 6px;
	min-width: 230px;
	z-index: 50;
	flex-direction: column;
}
.primary-navigation li:hover > ul,
.primary-navigation li:focus-within > ul { display: flex; }

.primary-navigation ul ul li { border: 0; width: 100%; }
.primary-navigation ul ul a {
	padding: 8px 14px;
	font-size: .98rem;
	border-radius: var(--sed-rund-klein);
}


/* --- Der Knopf fürs Handy --------------------------------------------
   Am großen Bildschirm versteckt ihn Twenty Fourteen selbst. */
.menu-toggle {
	background-color: transparent !important;
	color: #fff !important;
	border: 0 !important;
	font-family: var(--sed-titel);
	font-size: 1.06rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 13px 16px !important;
	width: 100%;
	text-align: left;
	border-radius: 0 !important;
}
.menu-toggle::before {
	content: "\2261\00a0\00a0";
	font-size: 1.25em;
	line-height: 0;
	vertical-align: -.1em;
}
.menu-toggle:hover,
.menu-toggle:focus { background-color: rgba(255, 255, 255, .12) !important; }

/* ======================================================================
   DER INHALT RÜCKT NACH OBEN

   Gordon, 09.09.2026: "Der Inhalt auf allen Seiten muss höher gezogen
   werden. Das kann ruhig fast bis an den Onlinebesucher ran."

   Twenty Fourteen lässt oben 48 Punkte Luft - das ist für ein
   Magazinlayout gedacht, in dem darüber noch eine Bildstrecke steht.
   Hier steht darüber die Besucherzeile, und dazwischen klaffte ein
   halber Bildschirm.

   12 Punkte bleiben: genug, dass die Karte nicht an der Zeile klebt.
   ====================================================================== */

.content-area,
.site-content {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

#main-content { padding-top: 12px !important; }

.hentry { margin-top: 0 !important; }

#secondary { padding-top: 12px !important; }

/* Die Karten in der Spalte polstern weniger als die im Inhalt - dort ist
   Platz, hier ist keiner. */
#secondary .widget { padding: 12px 8px; }

/* Die Überschrift des Widgets darf ihren Abstand behalten - nur die
   Kästen darin sollen die Breite ausnutzen. Gordon, 09.09.2026: "Die
   weiße Box ist ja schon der hintere Rahmen." */
#secondary .widget .widget-title { padding: 0 4px; }

/* ======================================================================
   INHALT ALS KARTEN

   Gordon: "Die braucht auch diese Contentboxen mit den runden Ecken."
   Jede Seite und jeder Beitrag ist eine weiße Karte auf hellem Grund.
   ====================================================================== */

.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.page-content,
.site-content .entry-meta {
	max-width: none;
	margin: 0;
	padding: 0;
}

.hentry {
	background: var(--sed-karte);
	border: 1px solid var(--sed-linie);
	border-radius: var(--sed-rund);
	box-shadow: var(--sed-schatten);
	padding: 0 0 26px;
	margin: 0 0 24px;
	max-width: none;
	overflow: hidden;
}

/* Der blaue Kopfstreifen einer Karte - der Titel steht darin, weiß auf
   Blau. Damit hat jede Seite oben dieselbe klare Kante wie das Schild. */
.hentry > .entry-header,
.hentry > header.entry-header {
	background: var(--sed-blau);
	padding: 16px 28px !important;
	margin: 0 0 22px !important;
	border: 0;
}
.hentry > .entry-header .entry-title,
.hentry > .entry-header .entry-title a {
	color: #fff !important;
	margin: 0;
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
	text-transform: none;
	letter-spacing: .01em;
}
.hentry > .entry-header .entry-meta,
.hentry > .entry-header .entry-meta a {
	color: rgba(255, 255, 255, .78) !important;
	margin-top: 4px;
}

.hentry > .entry-content,
.hentry > .entry-summary,
.hentry > .page-content,
.hentry > footer.entry-meta {
	padding: 0 28px !important;
}

.hentry > footer.entry-meta {
	margin-top: 18px;
	color: var(--sed-leise);
	font-size: .93rem;
}

/* Das Beitragsbild einer Seite - siehe functions.php. */
.sed-seitenbild {
	margin: 0 0 22px;
}
.sed-seitenbild img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--sed-rund) var(--sed-rund) 0 0;
}

/* Fließtext bleibt bei rund 68 Zeichen - darüber verliert das Auge beim
   Zeilenwechsel die Spur. Bilder, Tabellen und Blöcke dürfen breiter. */
.entry-content > p,
.entry-content > ul,
.entry-content > ol { max-width: 68ch; }

.entry-content img,
.wp-block-image img { border-radius: var(--sed-rund-klein); height: auto; }

/* Breite Inhalte scrollen in sich selbst - die Seite nie seitwärts. */
.entry-content table { width: 100%; border-collapse: collapse; }
.entry-content th, .entry-content td {
	text-align: left;
	padding: 9px 10px;
	border-bottom: 1px solid var(--sed-linie-fein);
}
.entry-content th {
	font-family: var(--sed-titel);
	color: var(--sed-leise);
	text-transform: uppercase;
	font-size: .86rem;
	letter-spacing: .03em;
}

blockquote {
	border-left: 4px solid var(--sed-blau);
	background: var(--sed-hell);
	border-radius: 0 var(--sed-rund-klein) var(--sed-rund-klein) 0;
	padding: 12px 18px;
	font-style: normal;
	color: var(--sed-text);
}

hr { background-color: var(--sed-linie); }

/* Kommentare sind abgeschaltet (siehe functions.php). Falls doch
   irgendwo ein Rest steht, bleibt er unsichtbar. */
.comments-area,
.comment-respond,
.comments-title,
.comment-reply-title { display: none !important; }

/* ======================================================================
   DIE SEITENSPALTE

   Twenty Fourteen macht sie schwarz. Hier ist sie eine helle Karte wie
   alles andere - eine schwarze Spalte neben weißen Karten sähe aus wie
   ein Fehler.
   ====================================================================== */

#secondary,
.site-description,
.primary-sidebar,
.content-sidebar {
	background-color: transparent !important;
	color: var(--sed-text);
}

#secondary { padding-top: 20px; }

.site-description {
	color: var(--sed-leise) !important;
	font-family: var(--sed-titel);
	letter-spacing: .04em;
	text-transform: uppercase;
	font-size: .88rem;
}

.widget {
	background: var(--sed-karte);
	border: 1px solid var(--sed-linie);
	border-radius: var(--sed-rund);
	box-shadow: var(--sed-schatten);
	padding: 18px 20px;
	margin-bottom: 18px;
	color: var(--sed-text);
	font-size: .97rem;
}
.widget .widget-title,
.widget .widget-title a {
	color: var(--sed-text) !important;
	font-size: 1.05rem;
	letter-spacing: .03em;
	text-transform: uppercase;
	border: 0;
	margin: 0 0 10px;
}
.widget a { color: var(--sed-blau); }
.widget a:hover { color: var(--sed-blau-hell); }
.widget ul li { border-top: 1px solid var(--sed-linie-fein); padding: 6px 0; }
.widget ul li:first-child { border-top: 0; }

.widget input[type="text"],
.widget input[type="search"],
.widget select {
	background: #fff;
	border: 1px solid var(--sed-linie);
	border-radius: var(--sed-rund-klein);
	color: var(--sed-text);
	padding: 8px 10px;
}

/* ======================================================================
   NUR EINE SEITENSPALTE, UND DIE STEHT LINKS

   Gordon, 09.09.2026: "Wenn Seitenmenü, dann nur links, und der Inhalt
   muss am linken Seitenmenü anfangen und bis ganz rechts gehen. Weiß
   nicht, ob man Archiv und Kategorien abschalten kann."

   Man kann: Es ist die rechte Spalte von Twenty Fourteen ("Content
   Sidebar"). Sie verschwindet von selbst, sobald keine Widgets mehr
   darin stehen - Design → Widgets, den Bereich leeren.

   Hier wird sie zusätzlich ausgeblendet und der Inhalt auf die volle
   Breite gesetzt. Der Grund: Ein vergessenes Widget würde die Seite
   sonst wieder zerschneiden, und das fällt erst auf, wenn jemand
   danebensteht.
   ====================================================================== */

#content-sidebar,
.content-sidebar { display: none !important; }

.site-content,
.content-area {
	margin-right: 0 !important;
	width: auto !important;
	float: none !important;
}

/* ======================================================================
   ANMELDEN IN DER SEITENSPALTE

   Der Kurzbefehl [sedi-login] gibt WordPress' eigenes Anmeldeformular
   aus. Das bringt sein eigenes Aussehen mit - Felder in voller Breite,
   Knopf links, alles etwas groß für eine Spalte von 250 Punkten.
   ====================================================================== */

.sed-anmeldung .login-username,
.sed-anmeldung .login-password { margin: 0 0 8px; }

.sed-anmeldung label {
	display: block;
	font-family: var(--sed-titel);
	font-size: .8rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--sed-leise);
	margin-bottom: 3px;
}

.sed-anmeldung input[type="text"],
.sed-anmeldung input[type="password"] {
	width: 100%;
	padding: 8px 10px;
	font-size: .97rem;
}

.sed-anmeldung .login-remember {
	margin: 4px 0 10px;
	font-size: .88rem;
	color: var(--sed-leise);
}
.sed-anmeldung .login-remember label {
	display: flex;
	align-items: center;
	gap: 6px;
	text-transform: none;
	letter-spacing: 0;
	font-family: var(--sed-brot);
	font-size: .88rem;
	margin: 0;
}

.sed-anmeldung .login-submit input,
.sed-anmeldung-knopf {
	display: block;
	width: 100%;
	text-align: center;
	background: var(--sed-blau);
	color: #fff;
	border: 1px solid var(--sed-blau);
	border-radius: 999px;
	padding: 9px 16px;
	font-family: var(--sed-titel);
	font-size: 1rem;
	letter-spacing: .04em;
	cursor: pointer;
	text-decoration: none;
}
.sed-anmeldung .login-submit input:hover,
.sed-anmeldung-knopf:hover {
	background: var(--sed-blau-nacht);
	border-color: var(--sed-blau-nacht);
	color: #fff;
}

.sed-anmeldung-hilfe { margin: 8px 0 0; font-size: .85rem; }
.sed-anmeldung-hallo { margin: 0 0 8px; font-size: .95rem; }

/* ======================================================================
   DAS ANMELDEFENSTER

   Gordon, 09.09.2026: "Wenn man Login anklickt, kommt ein Popup,
   Webseite wird blass. Das Popup muss gleiches Homepagedesign haben."

   Also: derselbe Schleier wie bei den Fenstern der Silbermuschel, aber
   im Blau dieser Seite - und oben das Straßenschild, damit man sieht,
   wo man sich anmeldet.
   ====================================================================== */

.sed-fenster {
	position: fixed;
	inset: 0;
	z-index: 99500;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	overflow-y: auto;
}
.sed-fenster[hidden] { display: none !important; }

/* Kein Blättern hinter dem Fenster - sonst scrollt der Finger die Seite
   statt des Fensters. */
body.sed-fenster-offen { overflow: hidden; }

.sed-schleier {
	position: fixed;
	inset: 0;
	background: rgba(10, 28, 62, .55);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.sed-fenster-kasten {
	position: relative;
	width: min(420px, 100%);
	margin: auto;
	background: var(--sed-karte);
	border-radius: var(--sed-rund);
	box-shadow: 0 30px 70px -28px rgba(0, 0, 0, .75);
	padding: 26px 26px 22px;
	animation: sed-fenster-auf .18s ease both;
}
@keyframes sed-fenster-auf {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

.sed-fenster-zu {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 34px;
	height: 34px;
	padding: 0;
	background: var(--sed-hell) !important;
	color: var(--sed-blau) !important;
	border: 0 !important;
	border-radius: 999px !important;
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
}
.sed-fenster-zu:hover {
	background: var(--sed-blau) !important;
	color: #fff !important;
}

/* Das Schild - klein, aber dasselbe wie oben auf der Seite. */
.sed-fenster-schild { margin: 0 0 14px; }
.sed-fenster-schild-feld {
	display: inline-block;
	background: var(--sed-blau);
	color: #fff;
	border-radius: 5px;
	padding: 8px 14px;
	font-family: var(--sed-titel);
	font-size: 1.05rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .9);
}

.sed-fenster-kasten h2 { margin: 0 0 4px; font-size: 1.5rem; }
.sed-fenster-vor {
	margin: 0 0 16px;
	color: var(--sed-leise);
	font-size: .95rem;
}

.sed-anmeldeform label {
	display: block;
	margin: 0 0 12px;
}
.sed-anmeldeform label > span {
	display: block;
	font-family: var(--sed-titel);
	font-size: .82rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--sed-leise);
	margin-bottom: 4px;
}
.sed-anmeldeform input[type="text"],
.sed-anmeldeform input[type="password"] { width: 100%; }

.sed-fenster-merken {
	display: flex !important;
	align-items: center;
	gap: 8px;
	font-size: .93rem;
	color: var(--sed-leise);
}
.sed-fenster-merken > span {
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-family: var(--sed-brot) !important;
	font-size: .93rem !important;
	margin: 0 !important;
	color: var(--sed-leise);
}

.sed-fenster-knopf {
	width: 100%;
	margin-top: 6px;
	background: var(--sed-blau);
	color: #fff;
	border: 1px solid var(--sed-blau);
	border-radius: 999px;
	padding: 11px 18px;
	font-family: var(--sed-titel);
	font-size: 1.05rem;
	letter-spacing: .04em;
	cursor: pointer;
}
.sed-fenster-knopf:hover:not(:disabled) {
	background: var(--sed-blau-nacht);
	border-color: var(--sed-blau-nacht);
}
.sed-fenster-knopf:disabled { opacity: .6; cursor: default; }

.sed-fenster-antwort {
	margin: 10px 0 0;
	min-height: 1.4em;
	font-size: .93rem;
	color: var(--sed-gruen);
}
.sed-fenster-antwort.sed-schief { color: var(--sed-rot); }

.sed-fenster-hilfe {
	margin: 12px 0 0;
	font-size: .88rem;
	text-align: center;
}

/* Der Menüpunkt - der Name des Angemeldeten steht kleiner dahinter. */
.sed-menue-konto .sed-wer {
	font-size: .82em;
	opacity: .75;
}

/* ======================================================================
   KNÖPFE UND FELDER
   ====================================================================== */

button, .button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	background-color: var(--sed-blau);
	border: 1px solid var(--sed-blau);
	border-radius: 999px;
	color: #fff;
	font-family: var(--sed-titel);
	font-size: 1rem;
	letter-spacing: .04em;
	text-transform: none;
	padding: 9px 22px;
}
button:hover, .button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	background-color: var(--sed-blau-hell);
	border-color: var(--sed-blau-hell);
}

input[type="text"], input[type="email"], input[type="url"],
input[type="password"], input[type="search"], input[type="number"],
textarea, select {
	background: #fff;
	border: 1px solid var(--sed-linie);
	border-radius: var(--sed-rund-klein);
	color: var(--sed-text);
	padding: 9px 12px;
	font-family: var(--sed-brot);
}
input:focus, textarea:focus, select:focus {
	border-color: var(--sed-blau);
	box-shadow: 0 0 0 3px rgba(15, 61, 140, .12);
	outline: none;
}

/* ======================================================================
   FUSSZEILE
   ====================================================================== */

.site-footer {
	background-color: var(--sed-blau-tief) !important;
	color: rgba(255, 255, 255, .82);
	border-radius: var(--sed-rund) var(--sed-rund) 0 0;
	margin-top: 26px;
}
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--sed-hell); }
/* IN DER FUSSZEILE STEHT NUR NOCH UNSERE ZEILE.

   Twenty Fourteen schreibt dort "Stolz präsentiert von WordPress", und
   je nach Plugin steht noch ein Brotkrumenpfad davor. Beides steckt als
   fester Text in footer.php.

   font-size:0 statt display:none, weil zwischen den Teilen auch nackte
   Zeichen stehen - ein Schrägstrich, ein Punkt. Die gehören zu keinem
   Element, also kann display:none sie nicht fassen; eine Schriftgröße
   von Null schon. Unsere Zeile bekommt ihre Größe danach zurück. */
.site-info {
	color: rgba(255, 255, 255, .72);
	font-size: 0 !important;
}
.site-info a[href*="wordpress.org"] { display: none !important; }

.site-info .sed-fuss-zeile {
	font-size: .95rem;
	margin: 0;
	color: rgba(255, 255, 255, .82);
}
.site-info .sed-fuss-zeile strong { color: #fff; }
.site-info .sed-fuss-zeile a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.site-info .sed-fuss-zeile a:hover { color: var(--sed-hell); }

.site-footer .widget {
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .16);
	color: rgba(255, 255, 255, .9);
	box-shadow: none;
}
.site-footer .widget .widget-title { color: #fff !important; }
.site-footer .widget a { color: #fff; }

/* ======================================================================
   SCHMALE SCHIRME
   ====================================================================== */

@media (max-width: 782px) {
	.header-main { padding: 12px 14px 10px; }
	.hentry > .entry-header { padding: 14px 18px !important; }
	.hentry > .entry-content,
	.hentry > .entry-summary,
	.hentry > .page-content,
	.hentry > footer.entry-meta { padding: 0 18px !important; }

	/* --- Das Menü auf dem Handy ---------------------------------

	   Gordon, 10.09.2026: "Das ist halt nicht wie ein mobiles Menü, wo
	   man oben draufklickt und das dann aufklappt."

	   Hier stand vorher das Gegenteil: Das Menü blieb offen, damit ein
	   Fingertipp weniger nötig ist. Bei vier Punkten wäre das richtig
	   gewesen. Bei vierzehn Punkten mit Untermenüs steht vor der Seite
	   eine Wand aus Text, und der Inhalt fängt erst darunter an.

	   Twenty Fourteen bringt beides mit: den Knopf .menu-toggle und ein
	   Skript, das der Navigation die Klasse "toggled-on" gibt. Benutzt
	   wurde davon nichts, weil meine Regel weiter oben das Menü in jeder
	   Breite auf display:flex zwang. Jetzt ist es zu, bis jemand
	   tippt. */
	/* DER KNOPF MUSS EINER SEIN.

	   Gordon, 10.09.2026: "Das erkennt man doch gar nicht als
	   Menü-Button. Ich komm noch nicht mal ran, das ist fast unmöglich,
	   den zu klicken. Und der liegt über der Besucheranzeige."

	   Nachgemessen war es schlimmer, als es aussah: Twenty Fourteen
	   lässt den Knopf SCHWEBEN (float). Ein schwebendes Kind gibt seinem
	   Elternteil keine Höhe - die blaue Leiste war null Punkte hoch, der
	   Knopf hing frei darüber, und die Besucherzeile rutschte darunter
	   und überlappte ihn.

	   Also: nicht schweben, volle Breite, 54 Punkte hoch. Das ist über
	   den 44 Punkten, die als kleinste sichere Fläche für einen Finger
	   gelten - und die Leiste hat wieder eine Höhe, unter der die
	   Besucherzeile Platz findet. */
	.primary-navigation { overflow: hidden; }

	.primary-navigation .menu-toggle {
		display: block !important;
		float: none !important;
		position: static !important;
		width: 100% !important;
		min-height: 54px;
		background: var(--sed-blau) !important;
		color: #fff !important;
		font-size: 1.12rem !important;
		padding: 16px 18px !important;
		text-align: left !important;
		border-radius: 0 !important;
	}

	/* Das Balkenzeichen größer - drei Härchen erkennt niemand als
	   Menüzeichen. */
	.primary-navigation .menu-toggle::before {
		font-size: 1.5em;
		vertical-align: -.12em;
	}

	/* Ist es offen, trennt eine Linie den Knopf von der Liste. */
	.primary-navigation.toggled-on .menu-toggle {
		border-bottom: 1px solid rgba(255, 255, 255, .28) !important;
	}

	.primary-navigation ul.nav-menu,
	.primary-navigation div.nav-menu > ul,
	.primary-navigation .menu {
		display: none;
	}

	.primary-navigation.toggled-on ul.nav-menu,
	.primary-navigation.toggled-on div.nav-menu > ul,
	.primary-navigation.toggled-on .menu {
		display: flex;
		flex-direction: column;
		gap: 0;
		padding: 0 0 8px;
	}

	/* Ist das Menü zu, ist die Leiste nur noch der Knopf; ist es auf,
	   hängt die Liste daran. In beiden Fällen dieselbe Rundung. */
	.primary-navigation {
		border-radius: var(--sed-rund-klein) !important;
		padding: 0 !important;
	}

	.primary-navigation a {
		border-radius: 0;
		padding: 12px 16px;
		border-bottom: 1px solid rgba(255, 255, 255, .12);
		font-size: 1.06rem;
	}

	/* DREI EBENEN, DREI FARBEN.

	   Gordon, 10.09.2026: "Die Haupteinträge sind noch nicht dunkel
	   genug. Ich weiß nicht, wie viele Nuancen zwischen dem hellen Blau
	   der Untermenüs, dem der Hauptmenüs und dem, was gerade aktiviert
	   ist, noch sind."

	   Vorher lagen alle drei nah beieinander: Hauptpunkte auf dem Blau
	   der Leiste, Untermenüs mit sieben Prozent Weiß darüber, der
	   aktuelle Punkt durchsichtig mit einem Haken. Auf einem Handy im
	   Sonnenlicht ist das derselbe Farbton.

	   Jetzt liegen sie weit auseinander - und das Untermenü ist
	   absichtlich HELLER als sein Elternteil: So liest man die
	   Verschachtelung auch ohne Linien. */
	.primary-navigation .nav-menu > li > a,
	.primary-navigation > div > ul > li > a,
	.primary-navigation > ul > li > a {
		background: var(--sed-blau-tief);
		border-bottom-color: rgba(255, 255, 255, .14);
	}

	.primary-navigation ul ul a {
		background: var(--sed-blau-hell);
		padding-left: 34px;
		font-size: 1rem;
	}

	/* Der aktuelle Punkt ist weiß. Unverwechselbar, und auf einem
	   Handybildschirm der einzige Unterschied, den man im Gehen
	   erkennt. */
	.primary-navigation .current-menu-item > a,
	.primary-navigation .current_page_item > a {
		background: #fff !important;
		color: var(--sed-blau-tief) !important;
		font-weight: 600;
	}

	/* Der Zweig, in dem man steht, bleibt blau - aber eine Spur heller
	   als die übrigen Hauptpunkte. */
	.primary-navigation .current-menu-ancestor > a,
	.primary-navigation .current_page_ancestor > a {
		background: var(--sed-blau) !important;
		color: #fff !important;
	}

	/* --- Der Aufklapp-Pfeil -------------------------------------
	   Er steht rechts am Punkt und ist ein eigener Knopf: Der Text führt
	   zur Seite, der Pfeil klappt auf. 56 mal 48 Punkte, mit Trennlinie
	   nach links, damit man sieht, dass er etwas anderes tut. */
	.primary-navigation .sed-auf {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		width: 56px;
		height: 48px;
		padding: 0;
		background: rgba(255, 255, 255, .12);
		border: 0;
		border-left: 1px solid rgba(255, 255, 255, .22);
		border-radius: 0;
		cursor: pointer;
	}
	.primary-navigation .sed-auf::before {
		content: "";
		display: block;
		width: 11px;
		height: 11px;
		margin: -5px auto 0;
		border-right: 2px solid #fff;
		border-bottom: 2px solid #fff;
		transform: rotate(45deg);
		transition: transform .18s ease, margin .18s ease;
	}
	.sed-offen > .sed-auf::before {
		transform: rotate(-135deg);
		margin: 3px auto 0;
	}
	.sed-hat-kinder > a { padding-right: 66px !important; }

	/* Untermenüs sind zu, bis der Pfeil sie öffnet. Die Klasse
	   "sed-klappt" setzt erst das Skript - lädt es nicht, bleibt das
	   Menü offen wie bisher und ist damit trotzdem bedienbar. */
	.primary-navigation ul ul {
		display: flex;
		position: static;
		box-shadow: none;
		border-radius: 0;
		background: transparent;
		padding: 0;
		min-width: 0;
	}
	.primary-navigation.sed-klappt li.sed-hat-kinder > ul { display: none; }
	.primary-navigation.sed-klappt li.sed-offen > ul { display: flex; }
}

@media (max-width: 520px) {
	body { font-size: 16px; }
	.site-header .site-title a { padding: 10px 16px 11px; }

	/* Auf dem Handy ist der Banner nur noch ein Streifen. Das Schild
	   rückt näher an die Ecke und wird kleiner, sonst deckt es das halbe
	   Bild zu. */
	.site-title { top: 12px; left: 14px; max-width: calc(100% - 28px); }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}

/* ======================================================================
   DRUCK

   Eine Nachbarschaftsseite wird ausgedruckt - der Briefkastenplan hängt
   danach am Kühlschrank.
   ====================================================================== */

@media print {
	body::before,
	.primary-navigation,
	.search-toggle,
	.site-footer,
	#secondary { display: none !important; }

	body { background: #fff !important; font-size: 11pt; }
	.hentry { border: 1px solid #999; box-shadow: none; break-inside: avoid; }
	.hentry > .entry-header { background: #fff; border-bottom: 2px solid #000; }
	.hentry > .entry-header .entry-title { color: #000 !important; }
	a { color: #000; text-decoration: underline; }
}


/* ======================================================================
   DIE KARTE IM RAHMEN

   Gordon, 10.09.2026: "Richtig fett wäre, wenn wir Google Maps direkt in
   der Homepage als Inline-Frame anzeigen könnten und nicht in eine neue
   Seite abwandern. Und dass man mit einem Button wieder zurück zur
   Übersicht kommt."

   Sie klappt unter der Kachel auf, über die volle Breite - eine Karte in
   einer Rasterspalte wäre briefmarkengroß. Geladen wird sie erst beim
   Klick; siehe karte-im-rahmen.js, warum das nicht nur eine Frage der
   Geschwindigkeit ist.
   ====================================================================== */

.sed-karte-rahmen {
	grid-column: 1 / -1;
	margin: 4px 0 10px;
	background: var(--sed-karte);
	border: 1px solid var(--sed-linie);
	border-radius: var(--sed-rund);
	overflow: hidden;
	box-shadow: var(--sed-schatten);
}

.sed-karte-kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 14px;
	background: var(--sed-karte-leis);
	border-bottom: 1px solid var(--sed-linie);
}

.sed-karte-titel {
	font-family: var(--sed-titel);
	font-size: 1.02rem;
	color: var(--sed-text);
	min-width: 0;
	overflow-wrap: anywhere;
}

.sed-karte-zu {
	flex: 0 0 auto;
	background: var(--sed-blau) !important;
	color: #fff !important;
	border: 1px solid var(--sed-blau) !important;
	border-radius: 999px !important;
	padding: 8px 16px !important;
	font-family: var(--sed-titel);
	font-size: .95rem;
	cursor: pointer;
}
.sed-karte-zu:hover {
	background: var(--sed-blau-nacht) !important;
	border-color: var(--sed-blau-nacht) !important;
}

/* Sechzehn zu neun, aber nach unten begrenzt: Auf einem breiten Schirm
   wäre die Karte sonst höher als der Bildschirm. */
.sed-karte-bild {
	display: block;
	width: 100%;
	height: min(58vw, 420px);
	border: 0;
}

.sed-karte-fuss {
	margin: 0;
	padding: 10px 14px 12px;
	font-size: .9rem;
	color: var(--sed-leise);
}

@media (max-width: 560px) {
	.sed-karte-bild { height: 300px; }
	.sed-karte-kopf { padding: 10px 12px; }
	.sed-karte-zu { width: 100%; }
}