/* Theme Name: GLX GordonX Theme URI: https://glx-tools.de/ Description: Blau auf Dunkelgrau, eine Stufe heller, ohne Zierrat. Alles unter Design → Anpassen einstellbar. Author: Gordon Lehmann Author URI: https://glx-tools.de/ Version: 2.4.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: glx-gordonx 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. ============================================================ */ /* Diese Seite ist nur in Hell gedacht. Die Angabe steht auch als meta im Kopf; beide werden gelesen, und sie halten Dunkelmodus-Werkzeuge davon ab, das Creme in ein Braun umzurechnen. */ :root { color-scheme: light; } :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; /* Der Rahmen der Hauptmenüpunkte auf dem Handy. Die einzige Farbe hier, die NICHT aus der Waldpalette stammt - genau das ist ihre Aufgabe: Sie sagt "hier fängt etwas Neues an". Wer stattdessen Türkis will, trägt hier #3fb8a8 ein. */ --sms-rubrik: #c8586b; --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; } /* ── GLX-Zweitnamen ─────────────────────────────────────────────── Dieselben Werte noch einmal unter --glx-. Sieben Plugins holen sich ihre Farben ueber die --sms-Namen; die duerfen deshalb nicht verschwinden - sonst verlieren sieben Plugins auf einen Schlag ihr Aussehen. Neuer Code nimmt die GLX-Namen, alter laeuft unveraendert weiter. var() statt der Werte noch einmal hinzuschreiben: So steht jede Farbe weiterhin an genau EINER Stelle. Wer eine aendert, aendert beide Namen zugleich. */ :root { --glx-creme: var(--sms-creme); --glx-creme-tief: var(--sms-creme-tief); --glx-pergament: var(--sms-pergament); --glx-moos: var(--sms-moos); --glx-moos-tief: var(--sms-moos-tief); --glx-tinte: var(--sms-tinte); --glx-tinte-leise: var(--sms-tinte-leise); --glx-gold: var(--sms-gold); --glx-rubrik: var(--sms-rubrik); --glx-gold-hell: var(--sms-gold-hell); --glx-rand: var(--sms-rand); --glx-titel: var(--sms-titel); --glx-text: var(--sms-text); } /* ============================================================ 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; } /* ------------------------------------------------------------ UNTERMENÜS ERST BEIM ÜBERFAHREN Gordon am 08.09.2026 mit Bild: Unter "Wissen" standen die dritten Ebenen von WYDA UND von Baumkraft gleichzeitig offen, ohne dass der Zeiger auf einem der beiden war. Die Regel arbeitet nicht mit display, sondern mit der Lage: Das Untermenü ist immer da, liegt aber weit außerhalb des Bildes. Erst beim Überfahren rückt es an seinen Platz. Das gilt unabhängig davon, womit das Elterntheme es versteckt hätte. Nur am großen Bildschirm. Darunter klappt Twenty Fourteen das Menü als Liste auf - dort sollen die Unterpunkte untereinander stehen, und Überfahren gibt es auf einem Handy nicht. ------------------------------------------------------------ */ @media screen and (min-width: 783px) { .primary-navigation ul.nav-menu ul, .primary-navigation div.nav-menu > ul ul { display: block; position: absolute; left: -999em; z-index: 99999; } /* Die zweite Ebene klappt UNTER ihrem Punkt auf. */ .primary-navigation ul.nav-menu > li:hover > ul, .primary-navigation ul.nav-menu > li:focus-within > ul, .primary-navigation div.nav-menu > ul > li:hover > ul, .primary-navigation div.nav-menu > ul > li:focus-within > ul { left: auto; } /* Ab der dritten Ebene zur Seite - untereinander wäre dort kein Platz mehr. */ .primary-navigation ul.nav-menu ul ul, .primary-navigation div.nav-menu > ul ul ul { top: 0; } .primary-navigation ul.nav-menu ul li:hover > ul, .primary-navigation ul.nav-menu ul li:focus-within > ul, .primary-navigation div.nav-menu > ul ul li:hover > ul, .primary-navigation div.nav-menu > ul ul li:focus-within > ul { left: 100%; } /* Der Punkt, an dem ein Untermenü hängt, braucht einen Bezug - sonst richtet sich das absolut gesetzte Untermenü am nächsten positionierten Vorfahren aus und landet irgendwo. */ .primary-navigation ul.nav-menu li, .primary-navigation div.nav-menu > ul li { position: relative; } } /* Schlanker. Twenty Fourteen gibt den Eintraegen 18 Pixel Polsterung oben und unten - bei 16er Schrift wird ein Eintrag damit 53 Pixel hoch, mehr als das Dreifache der Zeile. Das passt zu einer Vollbild-Navigationsspalte, nicht zu einem kleinen Klappkasten. Nachgemessen an der laufenden Seite: Eintrag 34,4 statt 53,4 Pixel, der Kasten 119,5 statt 180,7. Nur am grossen Bildschirm: Auf dem Handy klappt Twenty Fourteen das Menue als Liste auf, und dort sind grosse Beruehrflaechen richtig - 34 Pixel waeren zu wenig zum Treffen. */ @media screen and (min-width: 783px) { .primary-navigation ul ul { padding: 4px; } .primary-navigation ul ul li { height: auto; line-height: 1.4; } .primary-navigation ul ul a { padding: 6px 16px; line-height: 1.4; } } /* 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); } /* -------------------------------------------------------------- Der Hauptmenüpunkt liegt ÜBER seinem Untermenü. Warum das überhaupt nötig ist: Der Menüpunkt ist ein gewöhnlicher Link im Textfluss, das Untermenü ist position:absolute. Positionierte Elemente werden immer über nicht positionierten gezeichnet - egal wer im HTML zuerst steht und ohne dass irgendwo ein z-index stünde. Das ist die Malreihenfolge von CSS, kein Fehler in der Vorlage. Ein z-index am Menüpunkt allein hilft nicht: z-index wirkt nur bei POSITIONIERTEN Elementen. Der Punkt braucht also beides. Dieselbe Sache hat in diesem Projekt schon zweimal zugeschlagen - bei den Popups des Kartenlegers und bei den Einstellfenstern des HTML-Builders. -------------------------------------------------------------- */ .primary-navigation li { position: relative; } /* Der Menuepunkt liegt UNTER seinem Untermenue - wieder. Ich hatte ihn darueber gehoben, weil sein runder Bauch sonst im dunklen Kasten verschwindet. Das Ergebnis war schlimmer als das Problem: Eine cremefarbene Pille mit vollstaendig runder Unterkante vor dem dunklen Kasten sieht aus wie eine Kuppel, die daraus herauswaechst. Gordon am 02.09.2026: "Mach das wieder rueckgaengig, das sieht scheisse aus." An der laufenden Seite ausprobiert und im Bild verglichen - er hat recht. Liegt der Kasten davor, verdeckt er die untere Rundung, und der Knopf endet sauber an der Kastenkante. Ein Reiter an seiner Lasche, ohne dass irgendwo eckige Ecken erzwungen werden muessen. position:relative bleibt: Ohne z-index macht das keinen eigenen Stapelzusammenhang auf. Das Untermenue ist ebenfalls positioniert und steht spaeter im Dokument - also gewinnt es. */ .primary-navigation > div > ul > li > a, .primary-navigation > ul > li > a { position: relative; } /* Knopf und Untermenü: Abstand statt Kante. Vorher stießen beide auf Kante, und der Knopf verlor unten seine Rundung – ein Reiter an einer Lasche. Technisch sauber, aber Gordon am 02.09.2026: "Diese Halbbögen im Hauptmenü sehen richtig kacke aus." Ein halbrunder Knopf sieht abgeschnitten aus, wenn man den Reiter-Gedanken nicht mitliest. Jetzt bleibt der Knopf vollständig rund, und der Kasten rückt acht Pixel ab. Zwei runde Dinge mit Luft dazwischen – da kann nichts mehr ineinanderragen, und der ganze Reiter-Gedanke entfällt. DER HAKEN: Eine echte Lücke wäre fatal. Wer mit der Maus vom Knopf zum Untermenü fährt, verließe dazwischen beide, und das Menü klappte mitten in der Bewegung zu. Darum ist die Lücke nur OPTISCH da: Der Kasten behält seinen Platz direkt an der Unterkante und bekommt einen acht Pixel hohen, DURCHSICHTIGEN oberen Rand. background-clip:padding-box lässt die dunkle Fläche erst darunter beginnen. Die Maus läuft weiter über ein Element, das dort nur nichts anzeigt. */ @media screen and (min-width: 783px) { /* Die Leiste schlanker. Twenty Fourteen gibt den Menuepunkten Zeilenhoehe 48 - dieselbe Zahl, die auch das li festnagelte. Das ist eine Vollbild-Navigationshoehe; fuer eine Pillenleiste ist sie zu viel. Nachgemessen an der laufenden Seite: Knopf 42 statt 60 Pixel, Leiste 51,6 statt 73,6. */ .primary-navigation { padding: 4px 10px; } .primary-navigation a { line-height: 34px; padding: 4px 15px; } /* DIE URSACHE DER ZERRISSENEN KNOEPFE. Twenty Fourteen nagelt das li auf eine feste Hoehe: .primary-navigation li { height:48px; line-height:48px } Unser Knopf wird mit seiner Polsterung 60 px hoch und haengt damit 12 px unter seinem eigenen li heraus. Das Untermenue sitzt bei top:100% des li - also zwoelf Pixel ueber der Knopfunterkante - und schneidet quer durch ihn hindurch. Uebrig blieb die runde Unterkante als Kuppel. display:block, display:flex und align-items halfen alle nicht: Eine feste Hoehe laesst sich davon nicht beeindrucken. Es hilft nur, sie aufzuheben. Nachgemessen an der laufenden Seite: Ueberstand 0 statt 12, Abstand zum Untermenue 0 statt minus 12. */ .primary-navigation li { height: auto; } /* NUR DIE ERSTE EBENE fällt nach unten. Vorher stand hier ein top:100% für JEDE Ebene. Für die erste ist das richtig: Das Menü fällt unter die Leiste. Ab der zweiten ist es falsch - dort gehört das Untermenü NEBEN seinen Eintrag, auf gleicher Höhe. Mit top:100% fiel es unter den Eintrag, und bei einem langen Menü landete es so tief, dass der Weg mit der Maus schräg nach unten führte und dabei beide Menüs verließ. Sie schlossen, bevor man ankam. */ .primary-navigation > div > ul > li.menu-item-has-children > ul, .primary-navigation > ul > li.menu-item-has-children > ul, .primary-navigation .nav-menu > li.menu-item-has-children > ul { top: 100% !important; margin-top: 0 !important; /* Kein Abstand mehr. Der Streifen war nur dafür da, die herausragende Kuppel vom Kasten zu trennen - und die gibt es nicht mehr, seit der Kasten wieder vorn liegt. */ } /* Ab der zweiten Ebene: rechts daneben, oben bündig - und ohne Spalt, über den die Maus stolpern könnte. DER :hover IST DER PUNKT. Hier stand die Regel ohne ihn, und damit galt left:100% IMMER. Jedes Untermenü der dritten Ebene lag also fest an seinem Platz und war dauerhaft zu sehen: Beim Aufklappen von "Wissen" standen die Ebenen von WYDA und Baumkraft gleichzeitig offen. An der laufenden Seite gemessen: display:block, position:absolute, left:208px. Das !important machte jede Gegenregel wirkungslos - left bestimmt hier beides, die Lage UND das Verstecken. Mit dem :hover gilt die Lage nur, solange der Zeiger auf dem Elternpunkt steht. Sonst bleibt es beim left:-999em weiter oben. */ .primary-navigation ul ul li.menu-item-has-children:hover > ul, .primary-navigation ul ul li.menu-item-has-children:focus-within > ul { top: 0 !important; left: 100% !important; right: auto !important; margin: 0 !important; } /* Die Anordnung ohne die Lage: oben bündig und ohne Rand gilt auch im geschlossenen Zustand - nur left nicht, das versteckt. */ .primary-navigation ul ul li.menu-item-has-children > ul { top: 0 !important; margin: 0 !important; } /* Ist rechts kein Platz, klappt es nach links. Welche Seite das ist, hängt von der Fensterbreite ab - das misst ein kurzes Skript beim Zeigen nach und setzt diese Klasse. */ .primary-navigation ul ul li.menu-item-has-children:hover > ul.nach-links, .primary-navigation ul ul li.menu-item-has-children:focus-within > ul.nach-links { left: auto !important; right: 100% !important; } /* Rundum rund – oben wie unten. */ .primary-navigation ul ul { border-radius: 14px; box-shadow: 0 14px 30px -16px rgba(0,0,0,.85); } } .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; } /* Der Inhalt rueckt naeher an das Menue. Twenty Fourteen gibt .content-area am grossen Bildschirm 72 Pixel Polsterung oben. Im Kindtheme stand dazu nichts, also galt der Wert des Elterntheme. Die Kopfleiste ist FEST positioniert - ihr Platz muss von dieser Polsterung freigehalten werden. Wird sie zu klein, verschwindet die Ueberschrift dahinter; bei 22 Pixeln ist genau das passiert. Nachgemessen bei 1440 Pixel Fensterbreite: Kopfleiste bis Karte 32 statt 72 Pixel, bis zum Text 55 statt 107. */ @media screen and (min-width: 783px) { .content-area { padding-top: 32px; } .site-content .hentry { padding-top: 22px; } } /* 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; } /* ------------------------------------------------------------ TEXT OHNE KASTEN Auf der Seite "Nicht gefunden" steht .page-content als direktes Kind von .site-content - ohne Kasten, aber mit der dunklen Grundschrift des Themes. Gemessen am 08.09.2026: rgb(51,64,47) auf durchsichtigem Grund, dahinter das Waldbild. Unlesbar. Auf einer gewöhnlichen Seite steckt der Inhalt in article.hentry mit cremefarbenem Kasten - dort trifft dieser Selektor nicht zu, und die dunkle Schrift bleibt richtig. Der Schatten ist nicht Zierde: Helle Schrift auf einem unruhigen Waldfoto zerfällt ohne ihn. ------------------------------------------------------------ */ .site-content > .page-content, .site-content > .page-content p, .site-content > .page-content li { color: #f5f2e7; text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 0 16px rgba(0,0,0,.6); } .site-content > .page-content a { color: var(--sms-gold-hell); text-shadow: 0 1px 3px rgba(0,0,0,.85); } .site-content > .page-content a:hover { color: #fffdf5; } /* Der Ansichtsumschalter unter "System". Der gerade gültige Punkt trägt ein Häkchen im Titel; hier bekommt er noch etwas mehr Gewicht, damit er sich im Aufklappmenü absetzt. */ .sms-ansicht-aktiv > a { font-weight: 700; } .sms-ansicht-wechsel > a { white-space: nowrap; } /* Das Suchfeld hat seinen eigenen hellen Kasten - dort gehört die dunkle Schrift hin, sonst schriebe man weiß auf weiß. */ .site-content > .page-content input, .site-content > .page-content button { color: var(--sms-tinte); text-shadow: none; } /* ============================================================ 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 ============================================================ */ /* Gruppen und Zitate sind gedachte Behälter - die dürfen wie eine Karte aussehen. Spalten NICHT: Sie sind ein Werkzeug zum Anordnen. Wer drei Spalten nimmt, um einen Knopf mittig zu setzen, will keinen Kasten drumherum, sondern nur die Anordnung. Wer den Kasten trotzdem an einer Spalte will, trägt im Editor unter "Erweitert → Zusätzliche CSS-Klasse" sms-kasten ein. */ .entry-content .wp-block-group, .entry-content .wp-block-quote, .entry-content .sms-kasten { 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 .sms-kasten:hover { transform: translateY(-2px); border-color: var(--sms-gold); box-shadow: 0 0 26px -10px rgba(191,162,79,.6); } /* Ein Knopf mittig, ohne Spaltentrick. Gordon hatte drei Spalten gebaut und der linken 250 Punkte gegeben, damit der Knopf in der Mitte landet. Das muss nicht sein: Der Block "Buttons" kann das selbst, sobald seine Ausrichtung auf zentriert steht. Diese Regel sorgt dafür, dass es auch dann sitzt, wenn die Ausrichtung vergessen wurde. */ .entry-content .wp-block-buttons.is-content-justification-center { justify-content: center; } .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; } /* Der Inhaltskasten wird ganz deckend. Gemessen: Er stand auf rgba(255,253,248,.93), darunter der Hintergrund in rgb(14,26,18). Die restlichen sieben Prozent Dunkelgrün mischen sich in das Creme und ergeben einen bräunlichen Ton. Auf dem Rechner fällt das kaum auf, weil der Kasten schmal in einer großen Fläche steht; auf dem Handy füllt er fast den ganzen Schirm, und dann sieht man nur noch die Mischfarbe. Auf dem Rechner bleibt der Schimmer - dort ist er gewollt. */ .site-content .hentry, .page-header, .comments-area { background-color: #fffdf8; } /* 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; gap: 10px; width: 100%; max-width: 260px; height: 42px; margin: 0 auto; font-size: 1.02rem; } /* DREI BALKEN STATT ZWEI STERNEN. * * Ihr Stilblatt hängt an JEDEN button vorn und hinten einen Stern. * Am Menüknopf hiess das: Stern, "Primäres Menü", Stern - und kein * Zeichen dafür, dass sich hier etwas aufklappt. * * Gordon, 10.09.2026: "Da muss doch stehen Menü neben den drei * senkrechten Balken." * * Also: der vordere Stern wird zum Burgerzeichen, der hintere * fällt weg. Das Wort selbst kommt aus dem gettext-Filter in der * functions.php - der Knopftext gehört dem Eltern-Theme, und ein * geändertes Template wäre beim nächsten Update wieder weg. */ .primary-navigation .menu-toggle::before { /* DIE BALKEN SIND GEZEICHNET, KEIN SCHRIFTZEICHEN. * * Hier stand ein Burgerzeichen als Buchstabe. Gordon, * 10.09.2026: "Warum klappen die immer mal runter?" * * Weil ihre Zierschrift dieses Zeichen nicht hat. Der Browser * holt es sich dann aus irgendeiner anderen Schrift, und die * hat eine andere Grundlinie - mal sitzt es richtig, mal * rutscht es. Gegen dieses Springen hilft kein Feinschliff, * nur der Verzicht auf die Schrift. * * Drei Farbverläufe von je zwei Punkten Höhe: oben, mittig, * unten. Das sind die Balken, und sie sitzen auf den Punkt, * egal welche Schrift geladen ist. */ content: ""; /* DIE POLSTERUNG MUSS AUSDRUECKLICH WEG. * * Twenty Fourteen setzt .menu-toggle::before ein * padding von 16 Punkten - fuer sein Genericons-Zeichen * sinnvoll, fuer gezeichnete Balken toedlich: Aus dem * 19 mal 14 grossen Kaestchen wird eine Flaeche von 51 mal 46, * und die drei Farbverlaeufe verteilen sich auf diese ganze * Flaeche. Gordon, 10.09.2026: "Jetzt hast Du die Balken * voellig auseinandergerissen." * * Das ist mir durchgerutscht, weil ich im Messaufbau nur das * Theme-Stilblatt geladen hatte - diese Regel steht aber im * Eltern-Theme. */ padding: 0; box-sizing: border-box; width: 19px; height: 14px; background: linear-gradient(currentColor, currentColor) 0 0 / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) 0 50% / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat; color: var(--sms-gold-hell); flex: none; /* ZU IST HOCHKANT, OFFEN IST QUER. * * Gordon, 10.09.2026: "Mach die quer, wenn das Menü offen ist, * und hochkant, wenn das Menü zu ist." * * Die Grundform liegt quer; zugeklappt wird sie gedreht. So * braucht der Wechsel nur eine Vierteldrehung, und die läuft * als Bewegung ab statt als Sprung. */ transition: transform .25s ease; } /* JE ZUSTAND GENAU EINE REGEL, KEINE ÜBERSCHREIBUNG. * * Erst stand die Drehung in der Grundregel und wurde für den * offenen Zustand überschrieben. Gemessen kam sie nicht an: beide * Zustände hochkant. Statt mit Nachdruck dagegenzuhalten, greift * jetzt je Zustand nur eine einzige Regel - dann gibt es nichts * zu überschreiben und nichts, was gewinnen könnte. * * Zu: hochkant. Offen: quer. Dazwischen eine Vierteldrehung. */ /* DER WINKEL KOMMT AUS EINER VARIABLEN, NICHT AUS EINER ZWEITEN REGEL. Zuerst stand die Drehung in zwei Regeln: hochkant als Grundwert, quer für den offenen Zustand. Gemessen kam die zweite nie an - weder über die Klasse an der Navigation noch über die am Knopf noch über aria-expanded, und auch nicht mit Nachdruck. Woran es liegt, habe ich nicht herausbekommen. Statt weiter dagegen anzuschreiben, setzt jetzt handy-menue.js den Wert direkt am Knopf. Eine Variable am Element wirkt immer auf dessen Pseudoelement - da gibt es nichts zu gewinnen oder zu verlieren. Ohne Skript bleibt der Vorgabewert stehen: hochkant, und das ist der Zustand, in dem das Menü ohne Skript ist. */ .primary-navigation .menu-toggle::before { transform: rotate(var(--sms-balken, 90deg)); } /* Wer keine Bewegung sehen will, sieht keine - der Zustand stimmt trotzdem. */ @media (prefers-reduced-motion: reduce) { .primary-navigation .menu-toggle::before { transition: none; } } /* DAS WORT BLEIBT STEHEN, AUCH WENN DAS MENÜ OFFEN IST. * * Gordon, 10.09.2026: "Beim Öffnen des Menüs ist die Schrift von * dem Button wieder weg." * * Twenty Fourteen blendet die Knopfschrift im geöffneten Zustand * aus - dort ist der Knopf nur noch ein Symbol. Auf einer Seite * mit acht Menüpunkten ist aber genau dann wichtig, dass man den * Weg zurück findet. Also steht das Wort in beiden Zuständen. */ .primary-navigation .menu-toggle, .primary-navigation.toggled-on .menu-toggle { font-size: 1.02rem; text-indent: 0; line-height: 1; color: #ecead6; overflow: visible; white-space: nowrap; } .primary-navigation .menu-toggle::after { content: none; } /* 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; } /* ------------------------------------------------------------ DIE EBENEN SICHTBAR MACHEN Gordon am 11.09.2026 mit drei Bildern vom Handy: "Man sieht nicht, was ein Hauptmenü-Eintrag ist." Er hat recht, und der Grund ist bauartbedingt: Am großen Bildschirm unterscheiden sich die Ebenen durch ihre LAGE - jede liegt in einem eigenen schwebenden Kasten. Auf dem Handy klappt alles untereinander auf, und damit fällt genau dieses eine Unterscheidungsmerkmal weg. Übrig blieben elf gleich aussehende Zeilen, darunter zweimal "Geburtshoroskop". An seine Stelle treten DREI Merkmale, damit keines allein tragen muss: ein Zeichen davor, ein Rahmen und der Einzug. Ebene 1 ein Stern, Bordeauxrahmen, fett Ebene 2 zwei Sterne, goldener Rahmen, eingerückt Ebene 3 ohne Stern, blasser Rahmen, kleiner Die erste Fassung nahm Gold und Creme - beides warme, helle Töne auf demselben dunklen Grund. Nebeneinander sieht man den Unterschied, untereinander mit einem Fingerbreit dazwischen nicht mehr. Deshalb jetzt Bordeaux für die oberste Ebene: die einzige Farbe hier, die nicht aus der Waldpalette stammt, und genau das ist ihre Aufgabe. Sie steht als --sms-rubrik bei den übrigen Farben; wer Türkis will, tauscht dort eine Zeile. ------------------------------------------------------------ */ /* --- Ebene 1: die Rubriken ------------------------------------ */ .primary-navigation > div > ul > li > a, .primary-navigation > ul > li > a { border: 1px solid var(--sms-rubrik); background: rgba(20, 34, 24, .62); border-radius: 999px; font-family: var(--sms-titel); font-size: 1.12rem; font-weight: 600; letter-spacing: .04em; margin: 10px 0 6px; } /* Das Zeichen sitzt IM Text, nicht davor am Rand: Die Einträge sind mittig gesetzt, und ein Zeichen außerhalb liefe mit der Zeile nicht mit. */ .primary-navigation > div > ul > li > a::before, .primary-navigation > ul > li > a::before { content: "\2726\00a0\00a0"; color: var(--sms-rubrik); font-size: .78em; } /* --- Ebene 2: was unter einer Rubrik hängt --------------------- */ .primary-navigation > div > ul > li > ul > li > a, .primary-navigation > ul > li > ul > li > a { border: 1px solid var(--sms-gold); border-radius: 999px; font-size: 1rem; margin: 4px 0; opacity: 1; } /* HIER STANDEN ZWEI STERNE VOR JEDEM UNTERPUNKT. Sie sagten: "eine Ebene tiefer". Das sagt jetzt der Pfeil, unter dem der Punkt hervorkommt - und der sagt es deutlicher, weil man ihn selbst aufgeklappt hat. Gordon, 10.09.2026: "Wenn Du die Untermenüs klappbar gemacht hast, kannst Du die Doppelsterne rausnehmen. Man sieht ja, dass das Untermenüs sind." Zwei Zeichen für dieselbe Auskunft sind eines zu viel. */ .primary-navigation > div > ul > li > ul > li > a::before, .primary-navigation > ul > li > ul > li > a::before { content: none; } /* --- Ebene 3 und tiefer: eingefasst, aber leise --------------- Gordon am 11.09.2026: "Unter-Untermenüs ohne Sternchen, aber MIT Border drumrum." Der Rahmen bleibt - er wird nur dünn und blass. So bleibt die Ebene als die unterste erkennbar und ist trotzdem eingefasst wie die anderen. */ .primary-navigation > div > ul > li > ul > li > ul a, .primary-navigation > ul > li > ul > li > ul a { border: 1px solid rgba(250, 244, 230, .3); border-radius: 999px; font-size: .94rem; opacity: .85; margin: 3px 0; padding: 8px 14px; } .primary-navigation > div > ul > li > ul > li > ul a::before, .primary-navigation > ul > li > ul > li > ul a::before { content: none; } /* Der Einzug wächst mit der Tiefe - das dritte Merkmal neben Zeichen und Rahmen. */ .primary-navigation > div > ul > li > ul, .primary-navigation > ul > li > ul { margin: 2px 8px 8px 18px; } .primary-navigation > div > ul > li > ul > li > ul, .primary-navigation > ul > li > ul > li > ul { margin: 0 0 6px 16px; background: transparent; border: 0; border-radius: 0; padding: 2px 0; } /* -------------------------------------------------------------- NUR DER EINTRAG, AUF DEM MAN STEHT, IST CREMEFARBEN Gordon am 09.09.2026: "Dass das auch normal angezeigt wird und erst dann in Cremefarben, je nachdem, in welchem Menü man sich gerade befindet - dass nur das dann in Cremeform ist." Er hat auf dem Handy drei ausgefüllte Zeilen untereinander gesehen. Zwei Regeln von weiter oben sind schuld, und beide sind am großen Bildschirm richtig: current-menu-ancestor bekam dieselbe Fläche wie der aktive Eintrag. Am Rechner ist das sinnvoll - dort steht die Rubrik im Balken, und der aktive Punkt liegt unsichtbar in einem zugeklappten Untermenü. Auf dem Handy stehen beide untereinander, und dann kann niemand mehr sagen, welche Zeile die aktuelle Seite ist. li:hover bekam die Fläche ebenfalls, sogar mit !important. Ein Finger kennt kein Hover: Nach dem Antippen bleibt der Zustand hängen, bis man woandershin tippt. Die Rubrik darüber bleibt trotzdem erkennbar - sie behält ihren bordeauxroten Rahmen und bekommt einen etwas helleren Text. -------------------------------------------------------------- */ .primary-navigation .current-menu-ancestor > a, .primary-navigation .current_page_ancestor > a, .primary-navigation .current-menu-parent > a { background: rgba(20, 34, 24, .62) !important; color: #ecead6 !important; box-shadow: none !important; } /* Ein wenig heller als die übrigen - so viel Hinweis darf sein. */ .primary-navigation .current-menu-ancestor > a, .primary-navigation .current_page_ancestor > a { color: #fffdf5 !important; border-color: var(--sms-rubrik) !important; } /* UND DER AKTIVE EINTRAG BEKOMMT EINEN HAKEN, KEINE FLÄCHE. Gordon am 09.09.2026: "Da langt doch, wenn der Haken dahinter ist. Das soll nicht markiert sein. Man sieht doch gar nicht, wo man ist." Die cremefarbene Fläche war als Markierung gedacht und hat das Gegenteil bewirkt: Sie fällt so stark auf, dass daneben nichts mehr auffällt - und im aufgeklappten Menü verdeckt sie die Ordnung der Ebenen, die die Rahmen gerade erst sichtbar gemacht haben. Ein Haken am Zeilenende reicht. Dort steht sonst nichts, er verschiebt keine Zeile, und er sagt genau das eine, was er sagen soll: Hier bist du. */ .primary-navigation .current-menu-item > a, .primary-navigation .current_page_item > a, .primary-navigation .sms-ansicht-aktiv > a { background: rgba(20, 34, 24, .62) !important; color: #fffdf5 !important; box-shadow: none !important; font-weight: 600; } .primary-navigation .current-menu-item > a::after, .primary-navigation .current_page_item > a::after { content: "\00a0\00a0\2713"; color: var(--sms-gold); font-weight: 700; } /* -------------------------------------------------------------- KEIN HOVER UND KEIN FOKUS AUF EINEM GERÄT OHNE MAUS Gordon am 09.09.2026: "Das mobile Menü ist immer noch in Cremefarben der Button, obwohl das ja gar nicht aktuell ist." Die Fläche kam nicht von current-menu-item - die hatte ich beim ersten Anlauf entschärft und die falsche Regel erwischt. Sie kam von hier: .primary-navigation a:focus { background: rgba(250,244,230,.93) } Ein Finger löst kein Hover aus, sehr wohl aber einen FOKUS. Und der bleibt auf dem angetippten Link stehen, bis man woandershin tippt. Wer "Mobile Version" antippt und zurückkommt, sieht genau diesen Eintrag hell - egal, wo er gerade ist. Das ist schlimmer als gar keine Markierung, weil es eine falsche zeigt. Wer mit der Tastatur durchs Menü geht, braucht trotzdem einen Hinweis. Der bekommt einen goldenen Rahmen: sichtbar, aber nicht zu verwechseln mit "hier bist du". :focus-visible greift nur bei Tastaturbedienung, nicht beim Antippen. -------------------------------------------------------------- */ @media (hover: none) { .primary-navigation a:hover, .primary-navigation a:focus, .primary-navigation li:hover > a, .primary-navigation li.focus > a, .primary-navigation ul ul a:hover, .primary-navigation ul ul a:focus { background: rgba(20, 34, 24, .62) !important; color: #ecead6 !important; box-shadow: none !important; } .primary-navigation .current-menu-item > a, .primary-navigation .current_page_item > a, .primary-navigation .current-menu-item > a:focus, .primary-navigation .current_page_item > a:focus { color: #fffdf5 !important; } .primary-navigation a:focus-visible { outline: 2px solid var(--sms-gold); outline-offset: 2px; } } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* -------------------------------------------------------------------- Fußzeile und der Knopf nach oben Twenty Fourteen schreibt "Stolz präsentiert von WordPress" fest in footer.php, ohne Filter. Statt die Datei ins Kinder-Theme zu kopieren - und damit an einer Kopie zu hängen, die veralten kann - wird die Zeile hier ausgeblendet; den Ersatz gibt functions.php aus. -------------------------------------------------------------------- */ .site-info { display: none !important; } .sms-fuss { position: relative; z-index: 5; padding: 22px 16px 26px; text-align: center; font-family: var(--sms-text); font-size: .92rem; color: rgba(236, 234, 214, .72); text-shadow: 0 1px 3px rgba(0, 0, 0, .6); } .sms-fuss-admin { margin-left: 10px; color: rgba(236, 234, 214, .55); text-decoration: none; border-bottom: 1px dotted rgba(236, 234, 214, .35); } .sms-fuss-admin:hover, .sms-fuss-admin:focus { color: var(--sms-creme); border-bottom-color: var(--sms-gold); } /* Der Knopf nach oben. Er ist ein Link auf #oben und funktioniert deshalb auch ohne Skript. Sichtbar wird er erst, wenn man ein Stück heruntergescrollt hat - solange die Seite oben steht, wäre er nur im Weg. */ .sms-nachoben { position: fixed; right: 18px; bottom: 18px; z-index: 300; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(20, 34, 24, .82); border: 1px solid var(--sms-gold); color: var(--sms-creme); font-size: 1.35rem; line-height: 1; text-decoration: none; box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .9); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .22s ease, transform .22s ease, visibility .22s, background .2s ease; } .sms-nachoben.ist-da { opacity: 1; visibility: visible; transform: none; } .sms-nachoben:hover, .sms-nachoben:focus { background: rgba(20, 34, 24, .95); color: #fff; } @media (max-width: 782px) { .sms-nachoben { right: 12px; bottom: 12px; width: 42px; height: 42px; } } /* ============================================================ DAS MENÜ AUF DEM HANDY Gordon, 10.09.2026: "Sie hat zig Einträge im Menü, und da muss man lange scrollen, bis man ganz nach unten kommt. Man muss aber sehen können, dass unter dem Hauptmenüeintrag noch was drunter ist." Also: Untermenüs zu, bis jemand den Pfeil rechts antippt. Und die drei Ebenen weit auseinandergezogen - vorher unterschieden sie sich nur um eine Nuance, und auf einem Handy im Sonnenlicht ist das derselbe Ton. Das Skript dazu ist handy-menue.js. Es baut den Pfeil und setzt der Navigation die Klasse "sms-klappt"; erst die erlaubt dem Stil, etwas zuzuklappen. Bleibt das Skript aus, bleibt alles offen und benutzbar. ============================================================ */ /* Am großen Bildschirm gibt es den Pfeil nicht - dort klappen die Untermenüs beim Überfahren auf. */ .primary-navigation .sed-auf { display: none; } @media (max-width: 782px) { /* Die drei Ebenen. Das Untermenü ist absichtlich HELLER als sein Elternteil: So liest man die Verschachtelung auch ohne Linien und ohne Einrückung. */ .primary-navigation .nav-menu > li > a, .primary-navigation > div > ul > li > a, .primary-navigation > ul > li > a { background: var(--sms-moos-tief); color: #f3eee0; border-radius: 12px; margin-bottom: 3px; /* EINE KANTE FÜR ALLE, UND ZWAR LINKS. * * Vorher stand hier text-align: center (von Twenty Fourteen). * Zentriert fängt jedes Wort woanders an - und "Orakel" fiel * zusätzlich aus der Reihe, weil ihm der Pfeil rechts fehlt: * Die 64 Punkte, die bei den anderen Platz für den Pfeil * schaffen, schieben deren Mitte nach links, seine nicht. * * Gordon, 10.09.2026: "Die sollen alle mit dem Stern in einer * Linie im Menü anfangen." * * Linksbündig ist der Versatz nicht mehr möglich: Der Stern * sitzt bei jedem Punkt auf denselben 16 Punkten, egal wie * lang das Wort ist und ob ein Pfeil danebensteht. */ text-align: left; /* Ein Drittel flacher: 12 Punkte Polsterung oben und unten ergaben eine Zeile von 56 Punkten. Acht davon plus ein offenes Untermenü sind länger als der Bildschirm. */ padding: 7px 16px; font-size: 1rem; line-height: 1.4; } .primary-navigation ul ul { background: transparent; border: 0; border-radius: 0; padding: 0 0 4px 12px; backdrop-filter: none; -webkit-backdrop-filter: none; } .primary-navigation ul ul a { background: var(--sms-moos); color: #f6f2e6; border-radius: 10px; margin-bottom: 2px; /* Dieselbe Kante wie oben, nur um den Einzug des Untermenüs nach rechts versetzt - so stehen auch die Unterpunkte untereinander auf einer Linie. */ text-align: left; padding: 6px 14px; font-size: .95rem; line-height: 1.4; } /* Der aktuelle Punkt in Creme - so war er hier schon, und er bleibt der einzige helle Fleck im Menü. */ .primary-navigation .current-menu-item > a, .primary-navigation .current_page_item > a { background: var(--sms-creme) !important; color: var(--sms-moos-tief) !important; } /* Der Zweig, in dem man gerade steht: Gold als Kante, damit man ihn im geöffneten Menü wiederfindet. */ .primary-navigation .current-menu-ancestor > a, .primary-navigation .current_page_ancestor > a { box-shadow: inset 0 0 0 1px var(--sms-gold); } /* --- Der Aufklapp-Pfeil --------------------------------- Ein eigener Knopf neben dem Text: Der Text führt zur Seite, der Pfeil klappt auf. Wer den Punkt selbst zum Aufklappen macht, nimmt der Seite dahinter den Weg. */ .primary-navigation li { position: relative; } .primary-navigation .sed-auf { display: block; position: absolute; top: 0; right: 0; width: 48px; /* Der Pfeil ist so hoch wie die Zeile daneben - sonst steht er entweder über oder fällt unten heraus. Zeile: 7 + 7 Polsterung plus 22 Punkte Textzeile. */ height: 36px; padding: 0; background: rgba(250, 244, 230, .14); border: 0; border-left: 1px solid var(--sms-gold); border-radius: 0 12px 12px 0; cursor: pointer; } /* KEIN STERN AM PFEIL. Ihr Stilblatt gibt JEDEM button ein ::before und ein ::after mit einem Stern - der Zierrat an ihren Knöpfen. Der Aufklapp-Pfeil ist technisch auch ein button und erbte ihn: erst der Haken, dann ein goldener Stern daneben. Gordon, 10.09.2026: "Bei dem Pfeil nach unten muss der Stern weg, das sieht scheiße aus." Das ::before überschreibt der Haken ohnehin; das ::after muss ausdrücklich abbestellt werden. */ .primary-navigation .sed-auf::after { content: none; } .primary-navigation .sed-auf::before { content: ""; display: block; width: 10px; height: 10px; margin: -4px auto 0; border-right: 2px solid var(--sms-gold-hell); border-bottom: 2px solid var(--sms-gold-hell); 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: 58px !important; } /* Zu, bis der Pfeil öffnet. */ .primary-navigation.sed-klappt li.sed-hat-kinder > ul { display: none; } .primary-navigation.sed-klappt li.sed-offen > ul { display: block; } /* Die Pille wird auf dem Handy eine Fläche: Bei zwanzig Punkten untereinander sieht ein rundgeschliffener Rand aus wie ein Versehen, und die Ränder kosten Platz, den die Punkte brauchen. */ .primary-navigation { max-width: none; border-radius: 16px; padding: 8px; } } /* ============================================================ DIE DUNKELGRÜNEN BOXEN WERDEN CHAMPAGNER Gordon, 10.09.2026: "Dieses Waldgrün muss nicht unbedingt das Waldgrün sein. Wir haben ja schon im Hintergrundbild so viel Grün. Oder dieses Champagnerfarbene, sag ich mal." Er hat recht: Der Hintergrund ist ein grüner Wald, die Menüleiste ist grün, die Seitenspalte ist grün - und mittendrin steht dann noch ein dunkelgrüner Kasten auf hellem Papier. Das ist viel vom Gleichen und macht die Seite schwer. Nachtrag am selben Tag: "Dieses Lachsfarbene mit der schwarzen Schrift, das sieht so dezent aus, das finde ich viel schöner. Ich finde dieses Grün und die weisse Schrift darin sehr erdrückend." Also Lachs statt Champagner - warm, hell, und ein Ton, der auf der Seite sonst nirgends vorkommt. Die Schrift darin ist dunkel: Auf einem hellen Grund ist heller Text nicht zu lesen, und darum ging es ja gerade. WARUM DER UMWEG ÜBER DEN STIL-SELEKTOR Die Farbe steht in jedem Block einzeln als style-Angabe, nicht als Klasse - so hat der Baukasten sie gespeichert. Um sie zu ändern, müsste man sonst jede Box auf jeder Seite einzeln anfassen; bei über dreissig Seiten ist das keine Änderung, sondern ein Umzug. Der Selektor greift deshalb genau die Boxen, in deren style-Angabe das Waldgrün #122615 steht. Boxen mit einer anderen Farbe bleiben unberührt - wer irgendwo bewusst eine blaue Box gesetzt hat, behält sie. Wird die Farbe später einmal wirklich in den Seiten geändert, greift diese Regel von selbst nicht mehr und kann ersatzlos raus. ============================================================ */ .glx-box[style*="#122615"] { background: #f2d3c2 !important; color: #241f1c !important; } .glx-box[style*="#122615"] h1, .glx-box[style*="#122615"] h2, .glx-box[style*="#122615"] h3, .glx-box[style*="#122615"] h4, .glx-box[style*="#122615"] p, .glx-box[style*="#122615"] li, .glx-box[style*="#122615"] strong { color: #241f1c !important; } /* Die Links darin waren auf Dunkelgrün hell gesetzt. Auf Champagner wäre das unlesbar - also das Grün des Themes, wie im übrigen Text. */ /* DER KONTRAST ENTSCHEIDET, NICHT DER GESCHMACK. Gordon, 10.09.2026: "Wenn Du dunkelblauere Buttons hast, dann darf es kein Grün sein, sondern muss schwarz sein, damit man den Text auch wirklich lesen kann." Auf dem hellen Lachs trägt ein sattes Waldgrün genug Kontrast, um als Link erkennbar und lesbar zu sein - dunkler als der Grund, aber deutlich anders als der schwarze Fliesstext. */ .glx-box[style*="#122615"] a { color: #2f5c39 !important; } /* Ein Hauch Kante, damit die helle Box sich vom hellen Papier löst. Ohne sie verschwimmen Boxbox und Box zu einer Fläche. */ .glx-box[style*="#122615"] { box-shadow: inset 0 0 0 1px rgba(150, 100, 80, .26); } /* ============================================================ DIE GOLDENEN KNÖPFE PASSEN NICHT MEHR Gordon, 10.09.2026: "Das muss nicht dieses Gelbgold sein. Das passt zwar zu dem dunklen Waldgrün, aber nicht zu der cremefarbenen Boxbox." Er hat recht, und der Grund ist die Änderung darüber: Das Gold war für Dunkelgrün gemacht - dort ist es ein heller Fleck, der leuchtet. Auf hellem Lachs steht es auf gleicher Helligkeitsstufe wie der Grund und wirkt trüb. Also derselbe Weg wie bei den Übersichtskacheln: heller Knopf, dunkle Schrift, farbiger Rand. Nachgerechnet trägt weisse Schrift auf diesem Gold nur ein Kontrastverhältnis von 2,7 - unter dem, was als lesbar gilt. Schwarz auf Weiss liegt bei über 15. Auch hier über den style-Selektor, weil die Farbe in jedem Knopf einzeln gespeichert ist. Knöpfe in anderen Farben bleiben unberührt. ============================================================ */ .glx-btn[style*="#bfa24f"] { background: rgba(255, 255, 255, .82) !important; color: #1c1917 !important; border: 1.5px solid #8a6a34 !important; font-weight: 400 !important; text-shadow: none !important; } .glx-btn[style*="#bfa24f"]:hover, .glx-btn[style*="#bfa24f"]:focus { background: #f2e7d6 !important; color: #1c1917 !important; border-color: #6d5326 !important; } /* Der Stern, den ihr Stilblatt an jeden Knopf hängt, war weiss gedacht. Auf hellem Grund braucht er die Randfarbe. */ .glx-btn[style*="#bfa24f"]::before, .glx-btn[style*="#bfa24f"]::after { color: #8a6a34 !important; } /* ============================================================ DAS KONTAKTFORMULAR BEKOMMT IHRE FARBEN Gordon, 11.09.2026: "Der Kontaktblock ist immer noch schwarzes Eingabefeld und türkiser Button und keine runden Ecken. Warum?" Weil das Kontakt-Plugin seine eigenen Farben mitbringt, und zwar die GLX-Standardfarben für dunkle Seiten: .glxk-formular ... background: #1c2128 (fast schwarz) .glxk-knopf background: #22a1c4 (türkis) Auf glx-tools.de und gordonx.de ist das richtig - dort ist alles dunkel. Hier steht ein schwarzer Kasten auf cremefarbenem Papier. Das Theme hat zwar eigene Regeln für input und textarea, aber die greifen nicht: ".glxk-formular input" ist spezifischer als "input" allein, und bei gleicher Stärke gewinnt ohnehin, was später geladen wird. Deshalb hier ausdrücklich und mit Nachdruck. Nur auf dieser Seite - das Plugin selbst bleibt unangetastet und sieht auf den anderen drei Homepages aus wie bisher. ============================================================ */ .glxk-formular input, .glxk-formular textarea, .glxk-formular select { background: rgba(255, 255, 255, .94) !important; color: #1c1917 !important; border: 1px solid var(--sms-rand, #e3d7bd) !important; border-radius: 12px !important; } .glxk-formular input:focus, .glxk-formular textarea:focus { border-color: var(--sms-gold, #bfa24f) !important; box-shadow: 0 0 0 2px rgba(191, 162, 79, .35) !important; outline: none !important; } /* Die Beschriftungen über den Feldern. */ .glxk-formular label { color: #2a3b26 !important; } /* DER KNOPF WIE ALLE ANDEREN AUF DIESER SEITE Rund, waldgrün, weisse Schrift - nicht türkis und eckig. Das Grün ist dasselbe, das auch die Übersichtskacheln als Akzent tragen. */ .glxk-formular .glxk-knopf, .glxk-knopf { background: #2f5c3a !important; color: #fff !important; border: 1px solid #2f5c3a !important; border-radius: 999px !important; padding: 10px 24px !important; font-weight: 400 !important; } .glxk-formular .glxk-knopf:hover, .glxk-knopf:hover, .glxk-knopf:focus { background: #1c2b1e !important; border-color: #1c2b1e !important; color: #fff !important; } /* Die Rückmeldungen nach dem Absenden - gut und schlecht - tragen den Türkiston als Randstreifen. Auch der wird grün. */ .glxk-gut { background: rgba(47, 92, 58, .12) !important; border-left-color: #2f5c3a !important; }