/*
Theme Name: Silbermuschel
Theme URI: https://silbermuschel.de/
Description: Verschnörkeltes Feendesign für silbermuschel.de – Creme und Moosgrün, Ranken in den Ecken, Feensilhouetten am Inhalt. Child-Theme zu Twenty Fourteen.
Author: Gordon Lehmann
Author URI: https://glx-tools.de/
Template: twentyfourteen
Version: 1.1.7
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: silbermuschel
Tags: custom-background, custom-menu, featured-images, translation-ready
*/

/* ============================================================
   Farben und Schriften

   Alle Werte stehen an einer Stelle. Wer den Ton der Seite ändern
   will, ändert sie hier und nirgends sonst.
   ============================================================ */
:root {
	--sms-creme:       #faf4e6;
	--sms-creme-tief:  #f2e9d5;
	--sms-pergament:   #fffdf8;
	--sms-moos:        #4f6f52;
	--sms-moos-tief:   #2f4434;
	--sms-tinte:       #33402f;
	--sms-tinte-leise: #6c7a67;
	--sms-gold:        #bfa24f;
	--sms-gold-hell:   #e6cf8d;
	--sms-rand:        #e3d7bd;

	--sms-titel: "Cormorant Garamond", Cormorant, Garamond, "Times New Roman", serif;
	--sms-text:  Lora, Georgia, "Times New Roman", serif;
}

/* ============================================================
   Grundfläche und Zierrat
   ============================================================ */

body {
	background: #0e1a12;
	color: var(--sms-tinte);
	font-family: var(--sms-text);
	font-size: 17px;
	line-height: 1.72;
	overflow-x: hidden;
}

/* Der Hintergrund liegt fest im Fenster und blättert nicht mit. */
.sms-grund {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
.sms-grund svg { width: 100%; height: 100%; display: block; }

/* Die vier Ecken. Eine Zeichnung, viermal ausgegeben, dreimal gespiegelt -
   so ist die Symmetrie exakt und es gibt nur eine Datei zu pflegen. */
.sms-ecke {
	position: fixed;
	width: clamp(96px, 13vw, 200px);
	height: clamp(96px, 13vw, 200px);
	color: #fdf7e6;
	opacity: 0.8;
	pointer-events: none;
	z-index: 6;
	filter: drop-shadow(0 2px 12px rgba(0,0,0,.7));
}
.sms-ecke svg { width: 100%; height: 100%; display: block; }
.sms-ol { top: 0; left: 0; }
.sms-or { top: 0; right: 0; transform: scaleX(-1); }
.sms-ul { bottom: 0; left: 0; transform: scaleY(-1); }
.sms-ur { bottom: 0; right: 0; transform: scale(-1, -1); }

/* Die Fee, die zur Rubrik gehört. Sie sitzt unten rechts am Rand des
   Inhalts, nicht darin - dort würde sie den Text stören. */
.sms-seitenfee {
	position: fixed;
	right: clamp(6px, 3vw, 42px);
	bottom: clamp(64px, 9vw, 120px);
	width: clamp(90px, 12vw, 190px);
	color: #16241a;
	opacity: .5;
	pointer-events: none;
	z-index: 4;
}
.sms-seitenfee svg { width: 100%; height: auto; display: block; }
@media (max-width: 782px) { .sms-seitenfee { display: none; } }

/* Alles Sichtbare liegt über dem Hintergrund. */
#page { position: relative; z-index: 2; background: transparent; }

/* ============================================================
   Flaechen, die von einem Plugin ueberschrieben werden

   Das Plugin "colorizer" meldet sein Stilblatt NACH dem Theme an und
   setzt eigene Flaechenfarben. Bei gleicher Gewichtung gewinnt, wer
   spaeter kommt - deshalb hier !important. Nur fuer diese vier
   Flaechen, nicht fuer das ganze Stilblatt.

   Gemessen am 31.08.2026: .header-main und #secondary waren weiss,
   der body ebenfalls, und #page stand mit margin 0 am linken Rand.
   ============================================================ */

body { background: #0e1a12 !important; }

/* Mittig statt links. TF setzt margin:0 auto, das Plugin ueberschreibt es. */
#page.site {
	margin-left: auto !important;
	margin-right: auto !important;
	background: transparent !important;
	border-radius: 0 !important;
}

/* Der weisse Balken hinter dem Menue. Er liess die runde Leiste
   verschwinden und den Kopfbereich eckig wirken. */
.header-main,
.site-header,
.site-main,
.content-area,
.site-content,
.site-footer,
#secondary,
.primary-sidebar,
.content-sidebar {
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
}

/* ============================================================
   Kopfbereich

   Twenty Fourteen setzt hier einen schwarzen Balken über die volle
   Breite. Der weicht einer freistehenden Überschrift auf dem Wald.
   ============================================================ */

#site-header { display: none; }

.site-header {
	background: transparent;
	box-shadow: none;
	max-width: none;
	position: static;
	text-align: center;
}

.header-main {
	padding: 34px 24px 0;
	min-height: 0;
	display: block;
}

.site-title {
	float: none;
	margin: 0;
	font-family: var(--sms-titel);
	font-weight: 600;
	font-size: clamp(2.6rem, 6.5vw, 4.4rem);
	line-height: 1.04;
	letter-spacing: .012em;
}
.site-title a,
.site-title a:hover {
	color: #fdf8ea;
	text-shadow: 0 2px 24px rgba(0,0,0,.65), 0 1px 3px rgba(0,0,0,.55);
	opacity: 1;
}

/* Die Suchlupe von Twenty Fourteen bleibt, wird aber ruhiger. */
.search-toggle {
	background: rgba(20,34,24,.5);
	border-radius: 999px;
	margin: 0 0 0 12px;
}
.search-toggle:hover,
.search-toggle.active { background: rgba(20,34,24,.75); }

/* ============================================================
   Menü als schwebende Leiste

   Auf dem Wald braucht jeder Eintrag einen ruhigen Grund, sonst
   kämpft er mit den Blättern dahinter.
   ============================================================ */

.primary-navigation {
	float: none;
	margin: 16px auto 0;
	max-width: fit-content;
	padding: 6px 10px;
	font-size: 1.06rem;
	background: rgba(20, 34, 24, 0.55);
	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px);
	border: 1px solid rgba(191,162,79,.35);
	border-radius: 999px;
	box-shadow: 0 16px 40px -24px rgba(0,0,0,.9);
}

.primary-navigation ul.nav-menu,
.primary-navigation div.nav-menu > ul {
	border: 0;
}

/* Die Leiste erst ab der Breite, ab der Twenty Fourteen selbst darauf
   umschaltet. Ohne diese Grenze galt display:flex auch auf dem Handy und
   ueberstimmte dort Twenty Fourteens display:none - das Menue liess sich
   nicht mehr zuklappen. */
@media screen and (min-width: 783px) {
	.primary-navigation ul.nav-menu,
	.primary-navigation div.nav-menu > ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
}

.primary-navigation li { border: 0; }

.primary-navigation a {
	font-family: var(--sms-titel);
	font-size: 1.08rem;
	letter-spacing: .05em;
	color: #ecead6;
	text-transform: none;
	padding: 6px 15px;
	border-radius: 999px;
	transition: background .18s ease, color .18s ease;
}
.primary-navigation a:hover,
.primary-navigation a:focus { background: rgba(250,244,230,.16); color: #fffdf5; }

.primary-navigation .current-menu-item > a,
.primary-navigation .current_page_item > a {
	background: var(--sms-creme);
	color: var(--sms-moos-tief);
	box-shadow: inset 0 0 0 2px rgba(255,255,255,.65);
}

/* Untermenüs im selben Ton */
.primary-navigation ul ul {
	background: rgba(20,34,24,.94);
	border: 1px solid rgba(191,162,79,.35);
	border-radius: 14px;
	padding: 6px;
	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px);
}
.primary-navigation ul ul a { border-radius: 10px; }

/* Twenty Fourteen nimmt fuer alles Aktive ein grelles #24890d. Im
   Cremeton dieser Seite schreit das. Ueberall Moosgruen stattdessen. */
/* Links IM TEXT werden dunkelgrün. Auf hellem Pergament ist das richtig. */
.site-content .entry-content a:hover,
.paging-navigation a:hover,
.entry-meta a:hover {
	background-color: transparent;
	color: var(--sms-moos-tief);
}

/* Links im MENÜ bekommen die cremefarbene Fläche unter den Zeiger.
   Dieselbe Erscheinung wie beim aktiven Punkt, nur dort, wo die Maus
   gerade steht - so wandert sie mit.

   Vorher stand hier nur eine Farbe: Dunkelgrün auf der dunklen Leiste,
   also unsichtbar. Gordon am 31.08.2026: "Man sieht gar nichts mehr." */
.primary-navigation a:hover,
.primary-navigation a:focus,
.primary-navigation li:hover > a,
.primary-navigation li.focus > a {
	background: rgba(250, 244, 230, .93) !important;
	color: var(--sms-moos-tief) !important;
	box-shadow: inset 0 0 0 2px rgba(255,255,255,.6);
}

/* Der aktive Punkt bleibt erkennbar, auch wenn daneben etwas leuchtet:
   Er behält seinen Goldrand. */
.primary-navigation .current-menu-item > a,
.primary-navigation .current_page_item > a,
.primary-navigation .current-menu-ancestor > a {
	background: var(--sms-creme) !important;
	color: var(--sms-moos-tief) !important;
	box-shadow: inset 0 0 0 2px rgba(191,162,79,.55);
}

.primary-navigation ul ul {
	background-color: rgba(20,34,24,.96) !important;
}
.primary-navigation ul ul a:hover,
.primary-navigation ul ul a:focus {
	background: rgba(250,244,230,.18) !important;
	color: #fffdf5 !important;
}

/* Der Menüknopf auf dem Handy */
.menu-toggle {
	background: rgba(20,34,24,.72);
	border: 1px solid rgba(191,162,79,.4);
	border-radius: 999px;
	color: #ecead6;
	font-family: var(--sms-titel);
	letter-spacing: .06em;
}
.menu-toggle:hover { background: rgba(20,34,24,.9); }

/* ============================================================
   Seitenspalte und Stapelfolge

   1. Die Seitenspalte ist leer und schiebt den Inhalt trotzdem um
      222 Punkte nach rechts. Beides raus - der Inhalt steht mittig.

   2. Die Untermenues landeten HINTER dem Inhalt. Twenty Fourteen gibt
      ihnen z-index 99999, aber die Inhaltsflaechen bekommen durch
      backdrop-filter einen eigenen Stapelzusammenhang, und darin nuetzt
      keine noch so hohe Zahl. Die Menueleiste braucht deshalb einen
      eigenen, hoeheren Platz - und die Inhalte einen niedrigeren.
   ============================================================ */

#secondary,
.site-content .site-navigation,
.secondary-navigation { display: none !important; }

/* DER schwarze Balken.

   Twenty Fourteen malt die Flaeche der Seitenspalte nicht an #secondary,
   sondern an einem Pseudo-Element von #page:

       #page::before   bg = rgb(0,0,0)   222 x 996 px   (gemessen 31.08.2026)

   Das Ausblenden der Spalte allein hilft deshalb nicht - der Streifen
   gehoert gar nicht zur Spalte. */
#page::before,
.site::before { display: none !important; content: none !important; }

/* Der graue Klotz hinter den Menuepunkten. TF setzt ihn auf die Liste
   selbst, nicht auf die Leiste - deshalb blieb er stehen, obwohl die
   Leiste laengst durchscheinend war. */
.primary-navigation ul.nav-menu,
.primary-navigation .nav-menu,
#primary-menu { background: transparent !important; }

/* Die Breite haengt an #content - dem einzigen Kasten, den es auf
   BEIDEN Vorlagen gibt.

   Gemessen am 31.08.2026: Seiten (page) haben #main-content, Beitraege
   (single-post) haben ihn nicht. Meine Regel hing an #main-content -
   deshalb hatte "Oma's Rezepte" die richtige Breite und alle Beitraege,
   also Impressum, Astrologie, ueber mich, liefen ueber die volle Seite.

   891 Punkte - genau die Breite der Menueleiste. Aendert sich das Menue,
   muss diese Zahl mitwandern; deshalb steht sie hier und nur hier. */
#content.site-content,
#content {
	width: 100% !important;
	max-width: min(94%, 891px) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	float: none !important;
}

/* Die Kaesten darueber nehmen die volle Breite - sonst multipliziert
   sich die Begrenzung, und aus 891 werden 0,94 x 0,94 x 891. */
#main-content,
.content-area,
#primary.content-area {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	float: none !important;
}

/* Die Menueleiste ganz nach vorn. */
.site-header,
.primary-navigation { position: relative; z-index: 200; }
.primary-navigation ul ul { z-index: 210; }

/* Die Inhalte dahinter. Ohne das gewinnt der Inhaltskasten, sobald er
   einen eigenen Stapelzusammenhang aufmacht. */
#main.site-main { position: relative; z-index: 10; }

/* Datum, Verfasser, Kategorie und der Bearbeiten-Link unter der
   Ueberschrift. Auf einer Seite ueber Heilen und Baumkraft sagt
   "GORDON, 11. NOVEMBER 2023" niemandem etwas - und der
   Bearbeiten-Link ist ohnehin nur fuer die Angemeldeten sichtbar,
   stoert dort aber die Ruhe.
   Gordon am 31.08.2026: "Steht auch noch drin, von wem das bearbeitet
   wurde. Das muss auch raus." */
/* Verfasser, Datum und der Bearbeiten-Link verschwinden - auf einer
   Seite ueber Heilen und Baumkraft sagt "GORDON, 11. NOVEMBER 2023"
   niemandem etwas.

   Die RUBRIK bleibt: Sie sagt dem Leser, wo er gerade ist. Sie steht
   jetzt mittig ueber der Ueberschrift statt links am Rand.
   Gordon am 31.08.2026: "Die Kategorien werden immer noch links
   angezeigt, dass die auch mittig angezeigt werden." */
.entry-meta .byline,
.entry-meta .posted-on,
.entry-meta .edit-link,
.entry-meta .comments-link { display: none !important; }

/* Die Rubrik doch ganz weg. Gordon am 31.08.2026: "Wenn man Impressum
   anklickt, steht oben drueber ALLGEMEIN. Die Kategorien muessen immer
   ausgeblendet werden." Er hat recht - auf einer Seite mit acht festen
   Rubriken sagt "Allgemein" nichts, was der Titel nicht schon sagt. */
.entry-meta,
.entry-meta .cat-links,
.entry-meta .cat-links a {
	display: none !important;
	text-align: center !important;
	font-family: var(--sms-titel);
	font-size: .92rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sms-tinte-leise);
	margin: 0 0 6px !important;
}
.entry-meta .cat-links a { display: inline !important; color: var(--sms-moos); }

/* Ueberschrift und Zierstrich mittig, damit die Rubrik darueber nicht
   allein steht. */
.site-content .entry-header,
.site-content .page-header { text-align: center !important; }
/* Der Zierstrich ist ein Block mit fester Breite von 116 Punkten.
   text-align am Elternteil bewegt ihn nicht - dafuer braucht er
   auto-Raender auf beiden Seiten. Gordon am 31.08.2026: "Das Symbol
   mit dem langen Strich und dem Punkt in der Mitte ist immer noch
   links." */
.site-content .entry-header::after {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Die Blaetter-Links unter dem Beitrag braucht hier auch niemand -
   die Seite ist kein Blog mit fortlaufenden Beitraegen.
   Gordon am 31.08.2026: "Vorherige Beitraege und naechster Beitrag,
   das muesste auch deaktiviert werden." */
.post-navigation,
.image-navigation,
.paging-navigation,
.nav-links,
.comment-navigation { display: none !important; }

/* Die Suche braucht hier niemand. */
.search-toggle,
#search-container,
.search-box-wrapper { display: none !important; }

/* ============================================================
   Inhaltsflächen als Pergament

   Durchscheinend, damit der Wald darunter sichtbar bleibt - aber
   dicht genug, dass der Text ruhig lesbar ist. Ein Kasten, durch
   den man den Hintergrund raten muss, ist hübsch und unbrauchbar.
   ============================================================ */

.site-main,
.content-area,
.site-content { background: transparent; }

.site-content .hentry,
.page-header,
.comments-area,
.no-results {
	background: rgba(255, 253, 248, 0.93);
	backdrop-filter: blur(3px) saturate(1.05);
	-webkit-backdrop-filter: blur(3px) saturate(1.05);
	border: 1px solid rgba(191,162,79,.42);
	border-radius: 22px;
	padding: 34px 38px;
	margin: 0 0 30px;
	box-shadow: 0 2px 0 rgba(255,255,255,.5) inset,
	            0 24px 60px -28px rgba(0,0,0,.75);
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

/* Hebt sich beim Überfahren und nimmt an Leuchtkraft zu.
   Gordon am 31.08.2026: "Das muss wie bei mir auch ein bisschen mit
   Hover-Effekt sein, ein Glow-Effekt." */
.site-content .hentry:hover {
	transform: translateY(-2px);
	border-color: rgba(191,162,79,.72);
	box-shadow: 0 2px 0 rgba(255,255,255,.6) inset,
	            0 28px 66px -26px rgba(0,0,0,.8),
	            0 0 34px -10px rgba(230,207,141,.5);
}

/* Twenty Fourteen begrenzt den Text auf 474 Punkte und laesst ihn
   links stehen - das stammt aus dem Layout mit Seitenspalte. Ohne
   Spalte bleibt ein schmaler Streifen am linken Rand einer breiten
   Flaeche uebrig. Gemessen am 31.08.2026: .entry-title 474 breit,
   252 Punkte nach links versetzt.

   Gordon: "Der Content wird alles nach links gequetscht." */
.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.site-content .page-content,
.entry-content > *,
.page-content > * {
	background: transparent;
	padding: 0;
	margin-left: auto;
	margin-right: auto;
	max-width: 100%;
}

.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .page-content { margin-top: 0; margin-bottom: 0; }

.site-content .entry-content { margin-top: 14px; }

/* ============================================================
   Schrift
   ============================================================ */

.entry-title,
.page-title,
.comments-title,
.widget-title,
h1, h2, h3, h4 {
	font-family: var(--sms-titel);
	font-weight: 600;
	color: var(--sms-moos-tief);
	letter-spacing: 0;
	text-transform: none;
	text-wrap: balance;
}

.entry-title { font-size: clamp(1.7rem, 3.6vw, 2.35rem); line-height: 1.16; margin: 0 0 4px; }
.entry-title a { color: var(--sms-moos-tief); }
.entry-title a:hover { color: var(--sms-moos); }

.entry-content h2 { font-size: 1.75rem; margin: 26px 0 8px; }
.entry-content h3 { font-size: 1.35rem; color: var(--sms-moos); margin: 22px 0 6px; }

.entry-content,
.entry-summary,
.comment-content { font-size: 17px; line-height: 1.72; color: var(--sms-tinte); }

.entry-content a { color: var(--sms-moos); text-underline-offset: 3px; }
.entry-content a:hover { color: var(--sms-moos-tief); }

.entry-meta,
.entry-meta a { color: var(--sms-tinte-leise); font-family: var(--sms-titel); font-size: 1rem; }

/* Ein feiner Zierstrich unter jeder Überschrift, gezeichnet aus zwei
   Linien und einem Punkt - ohne eine einzige Bilddatei. */
.site-content .entry-header::after {
	content: "";
	display: block;
	width: 116px;
	height: 8px;
	margin: 10px 0 0;
	background:
		radial-gradient(circle at 58px 4px, var(--sms-gold) 0 2.6px, transparent 2.6px),
		linear-gradient(to right, transparent 0, var(--sms-gold) 12%, var(--sms-gold) 42%, transparent 48%),
		linear-gradient(to right, transparent 52%, var(--sms-gold) 58%, var(--sms-gold) 88%, transparent 100%);
	background-repeat: no-repeat;
	background-size: 100% 8px, 100% 1px, 100% 1px;
	background-position: 0 0, 0 4px, 0 4px;
	opacity: .72;
}

/* ============================================================
   Knöpfe

   Doppellinie - außen Gold, innen ein heller Steg. Das ist die
   Machart alter Buchdeckel und kostet nur einen inneren Schatten.
   Die Rauten stehen links und rechts, damit der Text in der Mitte
   seinen Platz behält.
   ============================================================ */

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.contributor-posts-link,
.entry-content .more-link,
.site-content .wp-block-button__link,
.sms-knopf {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--sms-titel);
	font-size: 1.12rem;
	letter-spacing: .09em;
	text-transform: none;
	color: #23361f;
	background: linear-gradient(180deg, #fdf8ec 0%, #f0e5c9 100%);
	border: 1px solid #b79a48;
	border-radius: 999px;
	padding: 10px 28px;
	cursor: pointer;
	box-shadow:
		inset 0 0 0 3px rgba(255,255,255,.72),
		inset 0 -2px 6px rgba(183,154,72,.22),
		0 12px 26px -16px rgba(0,0,0,.8);
	transition: background .2s ease, box-shadow .2s ease, color .2s ease;
}

button::before, button::after,
input[type="submit"]::before, input[type="submit"]::after,
.entry-content .more-link::before, .entry-content .more-link::after,
.site-content .wp-block-button__link::before,
.site-content .wp-block-button__link::after,
.sms-knopf::before, .sms-knopf::after {
	content: "\2726";
	font-size: .74em;
	line-height: 1;
	color: #b79a48;
	transition: transform .35s ease;
}
button:hover::before, .sms-knopf:hover::before,
.entry-content .more-link:hover::before { transform: rotate(-90deg); }
button:hover::after, .sms-knopf:hover::after,
.entry-content .more-link:hover::after { transform: rotate(90deg); }

button:hover,
input[type="submit"]:hover,
.entry-content .more-link:hover,
.site-content .wp-block-button__link:hover,
.sms-knopf:hover {
	background: linear-gradient(180deg, #fffdf5 0%, #f5ecd6 100%);
	color: #16240f;
	box-shadow:
		inset 0 0 0 3px rgba(255,255,255,.9),
		inset 0 -2px 6px rgba(183,154,72,.3),
		0 14px 30px -14px rgba(0,0,0,.85),
		0 0 22px -6px rgba(230,207,141,.55);
}

button:focus-visible,
input[type="submit"]:focus-visible,
a:focus-visible {
	outline: 2px solid var(--sms-gold-hell);
	outline-offset: 4px;
}

/* Eingabefelder passend dazu */
input[type="text"], input[type="email"], input[type="url"],
input[type="password"], input[type="search"], textarea {
	background: var(--sms-pergament);
	border: 1px solid var(--sms-rand);
	border-radius: 10px;
	color: var(--sms-tinte);
	font-family: var(--sms-text);
	padding: 9px 13px;
}
input:focus, textarea:focus { border-color: var(--sms-gold); outline: none; }

/* ============================================================
   Seitenspalte und Fußbereich

   Twenty Fourteen macht beides schwarz. Hier werden daraus Flächen
   im selben Pergamentton wie der Inhalt.
   ============================================================ */

#secondary,
.site-footer,
.footer-sidebar,
.primary-sidebar,
.content-sidebar {
	background: transparent;
	color: var(--sms-creme);
}

#secondary { padding-top: 26px; }

.primary-sidebar .widget,
.footer-sidebar .widget,
.content-sidebar .widget {
	background: rgba(20, 34, 24, 0.55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: 1px solid rgba(191,162,79,.32);
	border-radius: 16px;
	padding: 20px 22px;
	color: #ecead6;
	font-size: 15px;
}
.primary-sidebar .widget a,
.footer-sidebar .widget a { color: var(--sms-gold-hell); }
.primary-sidebar .widget-title,
.footer-sidebar .widget-title {
	color: #fdf8ea;
	font-size: 1.2rem;
	letter-spacing: .02em;
	border: 0;
}

.site-info {
	background: transparent;
	color: #cfd6c6;
	font-family: var(--sms-titel);
	font-size: 1.02rem;
	text-align: center;
	text-shadow: 0 1px 10px rgba(0,0,0,.75);
	padding: 26px 0 40px;
}
.site-info a { color: var(--sms-gold-hell); }

/* ============================================================
   Blöcke aus dem Editor
   ============================================================ */

.entry-content .wp-block-group,
.entry-content .wp-block-columns,
.entry-content .wp-block-quote {
	background: var(--sms-creme);
	border: 1px solid var(--sms-rand);
	border-radius: 16px;
	padding: 22px 24px;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.entry-content .wp-block-group:hover,
.entry-content .wp-block-columns:hover {
	transform: translateY(-2px);
	border-color: var(--sms-gold);
	box-shadow: 0 0 26px -10px rgba(191,162,79,.6);
}

.entry-content img,
.wp-block-image img { border-radius: 12px; }

.entry-content blockquote {
	border-left: 3px solid var(--sms-gold);
	font-style: italic;
	color: var(--sms-tinte-leise);
}

/* ============================================================
   Handy
   ============================================================ */

@media (max-width: 782px) {
	.header-main { padding: 22px 16px 0; }
	.site-content .hentry,
	.page-header,
	.comments-area { padding: 24px 20px; border-radius: 18px; }
	.sms-ecke { opacity: .4; }

	/* Die Leiste wird zum Kasten. Das Polster gilt auch im aufgeklappten
	   Zustand: Twenty Fourteen setzt dort 72 Punkte nach oben, um Platz
	   fuer seinen schwebenden Knopf zu lassen - bei uns steht der Knopf
	   im Fluss, und die 72 waeren nur eine Luecke. */
	.primary-navigation,
	.primary-navigation.toggled-on {
		border-radius: 18px;
		max-width: none;
		margin: 14px auto 0;
		padding: 8px 10px 10px;
	}

	/* Twenty Fourteen laesst den Knopf ueber dem schwarzen Balken schweben.
	   Unsere Leiste ist aber keine Balkenbreite, sondern eine Pille - ein
	   schwebender Knopf haengt daneben in der Luft. */
	.primary-navigation .menu-toggle {
		position: static;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		max-width: 260px;
		height: 44px;
		margin: 0 auto;
		font-size: 1.02rem;
	}

	/* Zu bleibt zu, bis der Knopf gedrueckt wird. */
	.primary-navigation ul.nav-menu,
	.primary-navigation div.nav-menu > ul { display: none; }
	.primary-navigation.toggled-on ul.nav-menu,
	.primary-navigation.toggled-on div.nav-menu > ul {
		display: block;
		padding: 6px 0 2px;
	}

	.primary-navigation li { display: block; width: 100%; }
	.primary-navigation a {
		display: block;
		text-align: center;
		padding: 11px 14px;
		font-size: 1.06rem;
		border-radius: 12px;
	}

	/* Untermenues eingerueckt und ruhig - auf dem Handy klappen sie mit
	   auf, ein zweiter schwebender Kasten waere hier nur im Weg. */
	.primary-navigation ul ul {
		position: static;
		left: auto;
		float: none;
		width: auto;
		margin: 2px 10px 6px;
		padding: 4px;
		background: rgba(20,34,24,.5);
		border: 0;
		border-radius: 12px;
		box-shadow: none;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
	.primary-navigation ul ul a { font-size: .98rem; opacity: .92; }
}

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