/* Theme Name: My Listing Child Theme URI: http://mylisting.27collective.net/my-city/ Description: MyListing Child Theme Author: 27collective Author URI: https://27collective.net/ Template: my-listing Version: 1.1 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: one-column, two-columns, three-columns, left-sidebar, right-sidebar, grid-layout, custom-menu, custom-logo, featured-images, footer-widgets, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready Text Domain: my-listing-child */ /* =========================================================================== ZENTRAL GEPFLEGT — bitte hier NICHT einfach drauflosaendern --------------------------------------------------------------------------- Die meisten Bloecke in dieser Datei sind KOPIEN. Die massgebliche Fassung liegt im Arbeitsverzeichnis unter: PROJEKTE/_ALLGEMEIN/SNIPPETS/ (Code, eine Datei je Snippet S-NN) PROJEKTE/_ALLGEMEIN/SNIPPETS/README.md (Verteilungsstand: was steckt wo) Warum: Dieselben Anpassungen laufen auf mehreren Plattformen (THB, herbario, AIMF, MIMF, BTWG, START, MIG). Aendert man sie hier, driften die Kopien auseinander und niemand weiss hinterher, welche Fassung stimmt. ALSO: 1. Aenderung ZUERST zentral, dann von dort ausrollen — nie umgekehrt. 2. Ein Block mit Marker `AIMF-ANPASSUNG #NNN (Snippet S-NN)` ist eine Kopie. Ein Block NUR mit `AIMF-ANPASSUNG #NNN` ist projekt-eigen und darf hier geaendert werden — dann das Register nachziehen: PROJEKTE/AIMF/DOKU/aimf-anpassungen-register.md 3. Nach dem Ausrollen den Verteilungsstand in der README nachziehen. Prozess im Ganzen: Skill `individualisierungen`. =========================================================================== */ /* ========================================================================== AIMF-ANPASSUNG #003 — Links auf der Detailseite als Links erkennbar machen -------------------------------------------------------------------------- Problem (EDDY 02.08.2026): Seit die langen Adressen durch einen Linktext ersetzt sind ("zur Anmeldeseite", "zur Webseite"), sieht man nicht mehr, dass es ueberhaupt ein Link ist — der Text geht optisch unter. Ein Button waere die Alternative, wirkt an dieser Stelle aber zu wuchtig. Loesung: dezente Unterstreichung mit Abstand zur Grundlinie, plus ein kleiner Pfeil bei Links, die in einem neuen Tab oeffnen. Keine eigene Farbe — die kommt weiter vom Theme, damit es zum Rest passt. Betrifft: Kontakt-Block (details) und Anmeldungs-Block (table). ========================================================================== */ #c27-single-listing .details-block-content .wp-editor-content a, #c27-single-listing .extra-details .item-property a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; } #c27-single-listing .details-block-content .wp-editor-content a:hover, #c27-single-listing .extra-details .item-property a:hover { text-decoration-thickness: 2px; } /* Kleiner Hinweis, dass der Link die Seite verlaesst. Nur bei target=_blank, also nicht bei E-Mail- oder Telefon-Links. */ #c27-single-listing .details-block-content .wp-editor-content a[target="_blank"]::before, #c27-single-listing .extra-details .item-property a[target="_blank"]::before { content: "\2197"; /* Pfeil nach rechts oben */ display: inline-block; margin-right: 0.25em; font-size: 0.85em; text-decoration: none; vertical-align: baseline; } /* Ausnahme zu #003: Social-Media-Zeichen tragen keinen Pfeil. Sie oeffnen zwar ein neues Fenster, aber ein Pfeil vor einem Icon sagt nichts und stoert die Reihe. Die Regel wiegt schwerer als die obige (eine Klasse mehr), gewinnt also unabhaengig von der Reihenfolge. */ #c27-single-listing .details-block-content .wp-editor-content .ml-social-inline a[target="_blank"]::before, #c27-single-listing .details-block-content .wp-editor-content .ml-social-zeichen a[target="_blank"]::before { content: none; } /* Lange Adressen duerfen nie aus der Seite laufen — Sicherheitsnetz fuer Felder, in denen doch einmal eine nackte URL steht. */ #c27-single-listing .details-block-content .wp-editor-content a, #c27-single-listing .extra-details .item-property a { overflow-wrap: anywhere; word-break: break-word; } /* -------------------------------------------------------------------------- AIMF-ANPASSUNG #005 — Icon und Text der Termin-Links auf eine Mittellinie -------------------------------------------------------------------------- EDDY 02.08.2026: "Wenn man das Icon anschaut und eine horizontale Linie durch die Mitte nach rechts zieht, sind die Texte nicht auf derselben Linie." Ursache: Das Theme setzt die Links als normales Inline-Element — Icon und Text sitzen dann auf der SCHRIFT-Grundlinie. Solange dort Font-Awesome-Icons standen, passte das zufaellig; die icomoon-Familie hat eine andere Grundlinie, und der Versatz wurde sichtbar. Loesung: nicht am Versatz herumschieben (das waere fuer jede Icon-Familie wieder anders), sondern die Ausrichtung ueberhaupt von der Schrift loesen. inline-flex + align-items:center zentriert Icon und Text zueinander — unabhaengig davon, welches Icon spaeter dort steht. -------------------------------------------------------------------------- */ #c27-single-listing a.add-to-google-cal, #c27-single-listing a.add-to-i-cal { display: inline-flex; align-items: center; } #c27-single-listing a.add-to-google-cal i, #c27-single-listing a.add-to-i-cal i { line-height: 1; } /* -------------------------------------------------------------------------- AIMF-ANPASSUNG #006 — Scrollbalken der Button-Leiste liegt UNTER den Buttons -------------------------------------------------------------------------- EDDY 02.08.2026: "Man kann die Buttons auf dem Smartphone nach rechts scrollen, und dieser Scrollbalken darunter überdeckt den unteren Teil der Buttons. Da müsste man ein bisschen Abstand reinkriegen, dass der Balken eher unten drunter ist und es optisch zusammenpasst." Ursache: Das Theme setzt .quick-listing-actions > ul auf overflow-x:auto. Der Scrollbalken wird INNERHALB dieses Kastens gezeichnet — und weil die Buttons bis an den unteren Rand reichen, legt er sich ueber sie. Loesung: Platz unter den Buttons schaffen, damit der Balken dort landet. Zusaetzlich ein schmaler, zurueckhaltender Balken statt des System-Standards. Auf breiten Bildschirmen umbricht die Leiste ohnehin (flex-wrap) und scrollt gar nicht — dort aendert sich nichts Sichtbares. -------------------------------------------------------------------------- */ #c27-single-listing .quick-listing-actions > ul { padding-bottom: 12px; scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.2) transparent; } #c27-single-listing .quick-listing-actions > ul::-webkit-scrollbar { height: 4px; } #c27-single-listing .quick-listing-actions > ul::-webkit-scrollbar-track { background: transparent; } #c27-single-listing .quick-listing-actions > ul::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); border-radius: 4px; } /* -------------------------------------------------------------------------- AIMF-ANPASSUNG #008 — Buttons eckiger (Snippet S-07) -------------------------------------------------------------------------- Das Theme gibt den Quick-Action-Buttons eine volle Pillen-Rundung (border-radius 50px). EDDY 02.08.2026: "Bei den Buttons ging es mir nicht um die CI, sondern wirklich nur um die Art des Radius — dass es eckiger wirkt." 5px ist derselbe Wert, der bei THB seit dem 08.07.2026 laeuft (THB-ANPASSUNG #005) — damit sehen die Plattformen gleich aus. -------------------------------------------------------------------------- */ .quick-listing-actions > ul > li > a { border-radius: 5px; } /* Der Haupt-Button oben (zur Anmeldung / zur Webseite) gehoert optisch dazu. */ .lmb-calltoaction > a { border-radius: 5px; } /* -------------------------------------------------------------------------- AIMF-ANPASSUNG #011 — Kopfbereich auf dem Smartphone hoeher (Snippet S-11) -------------------------------------------------------------------------- Die Theme-Einstellung "Cover image height" ist ein SEITENVERHAELTNIS, keine Hoehe: der Wert landet als `padding-bottom: X%` an der Sektion. Die Hoehe ist damit ein Anteil der SEITENBREITE und faellt auf schmalen Schirmen zusammen. Gemessen 08.08.2026 (Einstellung 20): Monitor 1920px -> ~384px, Laptop 1440px -> ~288px, Handy 390px -> ~78px. Die Einstellung gilt fuer alle Geraete gleich, im Backend ist das also nicht loesbar. Unterhalb von 768px (Theme-Umbruchpunkt, kein erfundener Wert) 50% statt 20% -> auf einem 390-px-Geraet rund 195px. Desktop bleibt unberuehrt. 50 ist die einzige Zahl, an der man dreht. `!important`, weil beide Werte als Inline-Style im Markup stehen. Die zweite Regel ist noetig, weil das Bild sonst bei seinem 5:1-Verhaeltnis bliebe und unter ihm ein Loch in der Overlay-Farbe klaffte. Referenz-Fassung: PROJEKTE/_ALLGEMEIN/SNIPPETS/S-11-kopfbereich-hoehe-mobil.css -------------------------------------------------------------------------- */ @media only screen and (max-width: 768px) { .profile-cover.profile-cover-image { padding-bottom: 50% !important; } .profile-cover.profile-cover-image > img { aspect-ratio: auto !important; height: 100% !important; top: 0; left: 0; } } /* ------------------------------------------------------------------------- AIMF-ANPASSUNG #013 — Silbentrennung fuer lange Woerter (Snippet S-13) ---------------------------------------------------------------------- Referenz-Fassung: PROJEKTE/_ALLGEMEIN/SNIPPETS/S-13-silbentrennung.css Aenderungen dort zuerst, dann hier nachziehen. Kopie — nicht hier bearbeiten. ------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- S-13 — Silbentrennung fuer lange Woerter (Titel, Begriffe, Tabellenzeilen) -------------------------------------------------------------------------- DAS PROBLEM Lange deutsche Komposita laufen auf schmalen Schirmen aus der Seite oder werden abgeschnitten: "Kuenstlicheintelligenzanwendungsentwicklungs- kompetenzzentrum", "Digitale Gesellschaft & Nachhaltigkeit", "Auftaktveranstaltung". Deutsch ist dafuer anfaellig wie kaum eine andere Sprache — und Browser trennen von sich aus NICHT, solange man es nicht verlangt. DIE LOESUNG: `hyphens: auto` Damit trennt der Browser mit seinem EINGEBAUTEN Woerterbuch — also nach den Regeln der jeweiligen Sprache, nicht irgendwo. Genau das ist gewollt: "korrekte Rechtschreibung" statt Abschneiden. 🛑 VORAUSSETZUNG: Die Seite muss ihre Sprache nennen. Ohne `lang` am html-Element greift `hyphens: auto` NICHT — der Browser weiss dann nicht, welches Woerterbuch er nehmen soll, und tut lieber nichts. Gemessen 08.08.2026 (AIMF): `` ist gesetzt. ✓ Auf einer neuen Plattform VOR dem Einspielen pruefen. WARUM NICHT `word-break: break-all` Das bricht mitten im Wort, ohne Ruecksicht auf Silben — "Auftaktveran| staltung" wird zu "Auftaktverans|taltung". Sieht nach Fehler aus und ist fuer Deutsch schlicht falsch. Nur `hyphens: auto` trennt nach Silben. `overflow-wrap: break-word` steht trotzdem dabei — als Notnagel fuer das, was KEIN Woerterbuch trennen kann: lange Adressen, Aktenzeichen, erfundene Testwoerter. Es greift erst, wenn die Silbentrennung nicht ausreicht, und verhindert dann wenigstens das Ueberlaufen. `hyphenate-limit-chars: 8 4 4` haelt Trennungen lesbar: nur Woerter ab 8 Zeichen, mindestens 4 Zeichen vor und nach dem Trennstrich. Ohne diese Grenze trennen Browser auch "Kur-se" — technisch richtig, optisch unruhig. EINZELFALL VON HAND STEUERN Wo das Woerterbuch daneben liegt, setzt man im Text ein weiches Trennzeichen `­` an die gewuenschte Stelle. Es ist unsichtbar und wirkt nur, wenn dort tatsaechlich getrennt wird. Umgekehrt schuetzt ` ` eine Stelle vor dem Umbruch. -------------------------------------------------------------------------- */ /* Titel der Detailseite */ .profile-name h1, /* Titel auf den Vorschaukacheln */ .listing-preview-title, .lf-item-info h4, /* Ueberschriften der Inhaltsbloecke */ .title-style-1__heading, /* Begriffe: Kategorien, Themengebiete, Niveau … */ .listing-details .category-name, .c27-listing-preview-category-list .category-name, #c27-single-listing .element .pf-body li > a > span, /* Tabellenzeilen "Auf einen Blick": Beschriftung und Wert */ #c27-single-listing .item-attr, #c27-single-listing .item-property { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 8 4 4; overflow-wrap: break-word; } /* ------------------------------------------------------------------------- AIMF-ANPASSUNG #017 — Lange Begriffe umbrechen statt abschneiden (Snippet S-17) Referenz-Fassung: PROJEKTE/_ALLGEMEIN/SNIPPETS/S-17-begriffe-umbrechen.css Aenderungen dort zuerst. Kopie — nicht hier bearbeiten. ------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- S-17 — Lange Begriffe UMBRECHEN statt abschneiden -------------------------------------------------------------------------- DAS PROBLEM Auf der Detailseite stehen die Begriffe (Format, Niveau, Themengebiete, Landkreis …) als Liste: links ein Icon, rechts der Name. Ist der Name zu lang, schneidet das Theme ihn ab und setzt drei Punkte: "Digitale Gesellschaft & Nachhalt…" 🛑 SILBENTRENNUNG HILFT HIER NICHT. Das Theme setzt `white-space: nowrap` und `text-overflow: ellipsis` — damit ist ein Umbruch verboten, BEVOR die Trennung ueberhaupt zum Zug kaeme. Erst muss das Abschneiden weg. 🛑 ES GIBT ZWEI VERSCHIEDENE TERM-STRUKTUREN — wer nur eine kennt, fixt die falsche. Gemessen am 08.08.2026: | Wo | Markup | abschneidende Regel | |---|---|---| | Vorschaukarte, Kategorie-Fuss | `span.category-name` | `.listing-details .category-name{text-overflow:ellipsis}` | | **Detailseite, Term-Bloecke** | **`ul.details-list > li > a > span`** (KEINE Klasse am span!) | **`.element .pf-body>.details-list li a span{text-overflow:ellipsis}`** | Beide werden unten abgedeckt. Der zweite Fall war der eigentliche Beschwerdegrund ("Podiumsdiskussion", "Netzwerktreffen" abgeschnitten) — ein Selektor auf `.category-name` greift dort ins Leere, weil das span ueberhaupt keine Klasse traegt. Dazu `white-space: nowrap` auf `.listing-details>ul>li` bzw. `.listing-details-3 .details-list li`. HERKUNFT: Diese Loesung laeuft bei THB seit dem 16.07.2026 (dort als THB-ANPASSUNG #016 fuer die Vereins-Detailseiten). Sie ist hier zentral gehoben worden, weil das Problem jede Plattform mit langen Begriffen hat. SCOPE: nur die Term-Bloecke der DETAILSEITE (`#c27-single-listing .block-type-terms`). Vorschaukarten und Suche bleiben unberuehrt — dort ist Abschneiden richtig, weil die Kachel eine feste Groesse hat. Kein `!important` noetig: die Spezifitaet reicht, und das Child-CSS wird spaeter geladen. ⚠️ Beim Einspielen den Idempotenz-Check BLOCK-SPEZIFISCH ankern (z. B. auf `text-overflow: clip`), nicht auf einen Wert wie `font-size: 13px` — der steht woanders in der Datei ebenfalls, und der Einbau wird dann faelsch- licherweise als "schon vorhanden" uebersprungen. (Real passiert bei THB.) -------------------------------------------------------------------------- */ /* Fall 1 + 2: der Listenpunkt selbst darf umbrechen. */ #c27-single-listing .block-type-terms .listing-details > ul > li, #c27-single-listing .block-type-terms .details-list li, #c27-single-listing .block-type-terms .details-list li > a { white-space: normal; overflow: visible; height: auto; } /* Fall 1: Vorschau-/Kategorie-Struktur mit Klasse am span. Fall 2: Detailseiten-Term-Bloecke — das span hat KEINE Klasse. */ #c27-single-listing .block-type-terms .category-name, #c27-single-listing .block-type-terms .details-list li > a > span { white-space: normal; overflow: visible; text-overflow: clip; /* Jetzt, wo umgebrochen werden DARF, greift die Silbentrennung (S-13). */ -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 8 4 4; overflow-wrap: break-word; } /* ═══ AIMF-ANPASSUNG #018 (S-18) — Fliesstext, Titel, Absage ═══ */ /* -------------------------------------------------------------------------- S-18 — Zeilen mit FLIESSTEXT lesbar machen (+ Absage-Hinweis hervorheben) -------------------------------------------------------------------------- TEIL 1 — Fliesstext-Zeilen Im Block "Auf einen Blick" stehen links die Beschriftung und rechts der Wert. Fuer kurze Werte ("Workshop", "kostenlos") ist rechtsbuendig richtig. Fuer LANGE Werte — "Voraussetzung", "Hinweis zur Anmeldung" — ist es schlecht lesbar: der Text flattert am linken Rand und die Zeilen fangen unterschiedlich an. EDDY 01.08.2026: Beschriftung UNTERSTRICHEN (nur bei diesen Spezialfaellen, nicht generell) und der Wert LINKSBUENDIG. 🛑 WARUM UEBER EINE KLASSE AM WERT UND NICHT UEBER DIE ZEILENPOSITION: Ein Selektor wie "die 7. Zeile" verrutscht, sobald jemand ein Feld dazwischenschiebt — und niemand merkt es. Deshalb wird der Wert im Zeileninhalt selbst markiert (der Baustein akzeptiert HTML): [[voraussetzung]] Die Formatierung haengt damit am INHALT, nicht an der Position. Die Beschriftung wird ueber die Geschwister-Beziehung angesprochen. TEIL 2 — Absage-Hinweis Ein abgesagter Termin darf nicht wie eine Nebensache aussehen. Der Hinweis bekommt Farbe, Gewicht und eine Flaeche — nicht nur roten Text, sondern einen erkennbaren Balken. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- DIE ABSAGE-FARBE STEHT AN EINER EINZIGEN STELLE -------------------------------------------------------------------------- Sie kommt an fuenf Stellen vor: Balken der Detailseite, Kopf-Schaltflaeche der Karte, zwei Durchstreichungen und zwei Schatten. Als fester Wert muesste man bei jeder Farbanpassung alle fuenf finden — und eine wird vergessen. 🛑 VORGABE IST EIN EIGENES ROT, NICHT DER AKZENT. Eine Absage muss rot sein, damit sie als Warnung gelesen wird. Auf einer Plattform mit gruenem oder blauem Akzent waere eine mitziehende Absage schlicht falsch. Ist der Akzent einer Plattform SELBST rot, darf sie diese eine Zeile in ihrem Projekt-Block ueberschreiben — dann folgt die Absage dem Akzent: :root { --ml-absage: var(--accent); } So gemacht auf AIMF (AIMF-ANPASSUNG #023, 14.08.2026, Akzent #ff0000). Gewollte Abweichung, vermerkt im Verteilungsstand. -------------------------------------------------------------------------- */ :root { --ml-absage: #c0392b; } /* ---- Teil 1: Fliesstext-Zeilen ---- */ #c27-single-listing .ml-fliesstext { display: block; text-align: left; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; } /* Der Wert steckt in `.item-property`; hat er einen Fliesstext, wird die ganze Zelle linksbuendig — sonst zieht das Theme sie weiter nach rechts. */ #c27-single-listing .item-property:has(.ml-fliesstext) { text-align: left; } /* 🛑 UND DER WERT GEHOERT UNTER DIE BESCHRIFTUNG, nicht daneben. `text-align: left` allein reicht nicht: Das Theme setzt `.item-property` auf `float: right`, die Zelle klebt also weiter am rechten Rand und nur ihr Inhalt ist linksbuendig. Bei einem Satz sieht das aus wie eine zweite Spalte, die nirgends anfaengt (EDDY 13.08.2026: „der Wert gehoert linksbuendig und UNTER die Bezeichnung, wie in den anderen Bereichen"). Also: die Zeile wird zum Block, beide Zellen nehmen die volle Breite, der Umbruch faellt weg. Gilt nur fuer Fliesstext-Zeilen — kurze Werte wie „20" oder „ja" bleiben in der zweispaltigen Form, dort liest es sich besser nebeneinander. */ #c27-single-listing .extra-details li:has(.ml-fliesstext) { display: block; } #c27-single-listing .extra-details li:has(.ml-fliesstext) .item-attr, #c27-single-listing .extra-details li:has(.ml-fliesstext) .item-property { float: none; width: 100%; max-width: 100%; text-align: left; } #c27-single-listing .extra-details li:has(.ml-fliesstext) .item-property { margin-top: 2px; } /* Die Beschriftung DERSELBEN Zeile unterstreichen. `:has()` schaut in die Zeile hinein, `~` waehlt das Geschwister-Element davor bzw. danach. Fallback fuer aeltere Browser: ohne `:has()` bleibt die Beschriftung schlicht normal — kein Schaden, nur kein Unterstrich. */ #c27-single-listing li:has(.ml-fliesstext) .item-attr { /* Fein und gepunktet, nicht durchgezogen. EDDY 08.08.2026: die volle Unterstreichung war "zu dominant" — sie soll die Zeile kennzeichnen, nicht sie betonen. */ text-decoration: underline dotted; text-decoration-thickness: 1px; text-decoration-color: rgba(0, 0, 0, 0.35); text-underline-offset: 4px; } /* ---- Teil 1b: Block-Ueberschriften ohne Icon, dafuer fett ---- EDDY 08.08.2026: An den Bereichs-Titeln standen teils alte, teils gar keine Icons — und mehrfach dasselbe (drei Kalender-Icons untereinander). Ein Icon, das sich wiederholt, trennt nicht, es verrauscht. Deshalb: kein Icon am Titel, dafuer FETT — das trennt die Bereiche sichtbar. Die Icons an den EINTRAEGEN (Begriffe, Kontaktzeilen) bleiben; dort sind sie unterscheidbar und tragen Bedeutung. */ #c27-single-listing .pf-head .title-style-1__heading { font-weight: 700; /* GROSSBUCHSTABEN nur optisch, nicht im Text. 🛑 Warum nicht einfach "TERMIN" hinschreiben: Suchmaschinen unterscheiden NICHT zwischen Gross- und Kleinschreibung — fuer die Auffindbarkeit ist es also egal. Fuer alles andere ist es NICHT egal: - Vorlesegeraete lesen Grossbuchstaben teils als Abkuerzung, Buchstabe fuer Buchstabe ("T-E-R-M-I-N"). - Wird der Text woanders uebernommen (Teilen-Vorschau, Export, spaeter eine Uebersetzung), schreit er dort. - Zurueckdrehen hiesse, jeden Titel einzeln zu aendern. Mit `text-transform` steht im Text weiter "Termin" — angezeigt wird "TERMIN", und ein einziger Wert dreht es fuer alle Bereiche zurueck. */ text-transform: uppercase; letter-spacing: 0.06em; /* Das Theme setzt 14px (gemessen in frontend.css). In Grossbuchstaben und zwischen viel Inhalt gehen die Bereichs-Titel dabei unter — sie sollen die Seite gliedern, nicht mitlaufen. 16px, dazu etwas mehr Zeilenhoehe, damit der Titel nicht am Inhalt klebt. 🛑 Kein `em`-Wert: der haengt an der Umgebung und schrumpft mit, sobald jemand die Basisgroesse aendert. Hier ist ein fester Wert gewollt. */ font-size: 15px; line-height: 23px; } /* Hier stand bis zum 20.08.2026 eine Regel, die das Icon der Bereichs-Ueberschrift ausgeblendet hat — auf dem Selektor #c27-single-listing .pf-head .title-style-1 > i mit display:none. Sie ist WEG, weil die Icons jetzt gar nicht erst in der Konfiguration stehen (EDDY 18.08.2026: "in die Konfiguration statt per CSS"). Alle 15 Baustein-Icons wurden am 20.08. geleert; die ZEILEN-Icons (Kontaktzeilen, Begriffe) bleiben — sie tragen Bedeutung. ⚠️ Der Preis dieser Sauberkeit: Die CSS-Regel wirkte pauschal, die Konfiguration wirkt nur auf die 15 vorhandenen Bausteine. Ein NEU angelegter Baustein bringt sein Standard-Icon mit und zeigt es dann auch. Wer einen anlegt, leert das Icon-Feld mit. */ /* ---- Teil 2: Absage — ein BANNER, keine Zeile ---- EDDY 08.08.2026: "Das muss schon praesenter sein. Wenn ich draufgehe, dann uebersehe ich das." Roter Text in einer Listenzeile reicht nicht — er sieht aus wie jede andere Angabe. Deshalb: volle Breite, rote Flaeche, weisse Schrift, gross. Der Block steht ohnehin an erster Stelle des Inhalts; so ist er das Erste, was auffaellt. Die Bereichs-Ueberschrift wird ausgeblendet — "ABSAGE" ueber dem Satz "Diese Veranstaltung faellt aus" ist doppelt gemoppelt. */ /* -------------------------------------------------------------------------- TEIL 2b — dieselbe Absage AUF DER VORSCHAUKARTE (EDDY 13.08.2026) -------------------------------------------------------------------------- „Auf der Vorschaukarte steht es zwar drin, aber es müsste rot hervorgehoben sein, genauso wie auf der Detailseite." Die Karte zeigt den Hinweis als Kopf-Schaltflaeche (`.lf-head-btn`) — ein unauffaelliges helles Feld, das im Bild untergeht. Dieselbe Farbe wie der Detailseiten-Balken macht daraus dieselbe Aussage. 🛑 Der Text kommt aus dem TAXONOMIE-BEGRIFF, nicht aus dem CSS. Wer ihn kuerzen will, benennt den Begriff um (Name aendern, Slug NIE — der ist Filter-Referenz und Term-Meta-Anker). Eine Umbenennung wirkt dann sofort auf Detailseite UND Karte, weil beide dieselbe Quelle lesen. Genau so ist „Diese Veranstaltung faellt aus" zu „Event faellt aus" geworden. ⚠️ Diese Schaltflaeche traegt keine eigene Kennung — sie wird ueber den Kopf-Button-Bereich der Karte angesprochen. Zeigt eine Plattform dort noch etwas ANDERES an, faerbt diese Regel es mit. Vor dem Ausrollen pruefen, was in `result_template.buttons` steht. -------------------------------------------------------------------------- */ /* 🛑 NUR DIE ABSAGE IST ROT — nicht jede Kopf-Schaltflaeche. Der Bereich oben auf der Karte kann MEHRERE Angaben tragen. Eine frühere Fassung faerbte `.lf-head-btn` pauschal; als dort das Veranstaltungsformat dazukam, stand „online" in Alarmrot (gemessen 14.08.2026). Unterschieden wird ueber ein Kennzeichen IM Label — die Absage traegt ``. Ein Positionsselektor (`:first-child`) waere brüchig: Die Absage steht nicht immer an erster Stelle, weil sie nur bei abgesagten Terminen ueberhaupt erscheint. ⚠️ Frueher stand hier die Umkehrung (`:not(:has(.ml-kopf-neutral))`). Sie funktionierte an DIESER Stelle, war aber nicht uebertragbar: Sobald dieselbe Bedingung eine Ebene hoeher gebraucht wurde (Durchstreichung am Karten-Container), entstand `:has(… :not(:has(…)))` — und verschachteltes `:has()` ist in CSS ungueltig. Ein positives Kennzeichen laesst sich ueberall verwenden. */ .listing-preview .lf-head-btn:has(.ml-kopf-absage), .lf-item-container .lf-head-btn:has(.ml-kopf-absage) { background: var(--ml-absage); color: #fff; border: none; border-radius: 4px; font-weight: 600; letter-spacing: .02em; /* Erste Zeile ist der Rueckfall fuer Browser ohne color-mix; die zweite ueberschreibt sie dort, wo es geht, und faerbt den Schatten mit. */ box-shadow: 0 2px 8px rgba(0, 0, 0, .22); box-shadow: 0 2px 8px color-mix(in srgb, var(--ml-absage) 30%, transparent); } /* 🛑 Neutrale Angaben bekommen KEINE eigene Gestaltung — sie behalten den Theme-Standard (weisse Schrift, weisser Rand, transparent auf dem Bild). Ein grauer Kasten war ein Versuch und wurde verworfen: Er wirkte wie eine zweite Warnung neben der Absage, statt wie eine sachliche Angabe. Deshalb steht hier bewusst nichts — das `:not()` oben genuegt, um die Absage-Faerbung von ihnen fernzuhalten. */ .listing-preview .lf-head-btn a, .listing-preview .lf-head-btn span, .lf-item-container .lf-head-btn a, .lf-item-container .lf-head-btn span { color: #fff; } /* -------------------------------------------------------------------------- TEIL 2c — bei einer Absage ist auch der TERMIN durchgestrichen -------------------------------------------------------------------------- EDDY 13.08.2026: „Das Datum und die Uhrzeit durchstreichen, rot. Das Datum und die Uhrzeit bleibt in der normalen Schriftart und Farbe, nur der Strich ist rot — mit einem dezenteren Strich, nicht zu duenn und nicht zu dick." Der Hinweis allein sagt „faellt aus"; der durchgestrichene Termin zeigt, WAS ausfaellt. Zusammen liest es sich in einem Blick. 🛑 Nur der STRICH ist rot, der Text bleibt schwarz. Beides rot zu faerben waere lauter, aber schlechter lesbar — und das Datum soll ja weiterhin gelesen werden koennen. ⚠️ Strichstaerke 1 px. Erster Versuch waren 2 px mit der Begruendung, 1 px „verschwinde neben der Schrift" — EDDY am fertigen Bild: „viel zu fett." Die Vermutung war falsch, weil sie am Schreibtisch entstand: Ein roter Strich hebt sich durch die FARBE ab, nicht durch die Dicke, und braucht deshalb weniger Staerke als ein schwarzer. Wer Strichstaerken schaetzt, liegt daneben — hinsehen. 🛑 DER ANKER IST `:has()`, KEIN PHP. Beide Orte tragen bereits ein eindeutiges Zeichen fuer „abgesagt" — die Detailseite den Block `.ml-absage`, die Vorschaukarte ihre Kopf-Schaltflaeche. Damit braucht es weder eine zusaetzliche Body-Klasse noch einen Filter: Das Markup weiss es schon, man muss es nur lesen. -------------------------------------------------------------------------- */ /* ---- Detailseite: Termin im Kopf und in der Terminliste ---- */ /* Der Termin im Kopf — ueber den FELDTYP angesprochen, nicht ueber die Position. Vorher stand hier `.price-or-date .value` — das traf AUCH DEN PREIS, weil das Theme jeder Kopf-Angabe dieselbe Klasse gibt. EDDY, 18.08.2026. */ body:has(.ml-absage) #c27-single-listing li.ml-kopf-recurring-date .value, /* Der NAECHSTE Termin in der Liste — nicht alle vier. */ body:has(.ml-absage) #c27-single-listing li.upcoming-event-date:first-child > span, body:has(.ml-absage) #c27-single-listing .cover-details .value { text-decoration: line-through; text-decoration-color: var(--ml-absage); text-decoration-thickness: 2px; text-underline-offset: 0; } /* ---- Vorschaukarte: die Datumszeile unter dem Titel ---- Angesprochen ueber das Kalender-Zeichen der Zeile, nicht ueber eine Positionsangabe — sonst trifft es die falsche Zeile, sobald jemand die Reihenfolge der Angaben aendert. 🛑 UND DIE KARTE MUSS AN DER ABSAGE ERKANNT WERDEN, NICHT AN „IRGENDEINER KOPF-SCHALTFLAECHE". Hier stand `:has(.lf-head-btn)` — das trifft jede Karte, die oben ueberhaupt etwas anzeigt. Solange dort nur die Absage erscheinen konnte, ging es gut. In dem Moment, in dem eine zweite Schaltflaeche dazukam (ein Landkreis-Hinweis), war plotzlich JEDES Datum durchgestrichen — auch bei Terminen, die stattfinden. Es ist dieselbe Falle, die weiter oben schon einmal zugeschlagen hat (Absage-Faerbung auf allen Kopf-Schaltflaechen, „online" in Alarmrot) — und sie kam an der NACHBARSTELLE zurueck, weil dort nur die Faerbung korrigiert worden war. Wer eine solche Regel repariert, geht ALLE Stellen durch, die denselben Selektor benutzen. 🛑 UND DER ANKER IST EIN POSITIVES KENNZEICHEN, KEINE DOPPELTE VERNEINUNG. Der naheliegende Selektor waere `:has(.lf-head-btn:not(:has(…)))` — der ist aber UNGUELTIG: CSS erlaubt kein `:has()` innerhalb von `:has()`. Der Browser verwirft die ganze Regel stillschweigend, und dann ist bei einer echten Absage GAR NICHTS mehr durchgestrichen. Genau so passiert, und es sah nach einem behobenen Fehler aus, bis der Gegenfall geprueft wurde. Deshalb traegt die Absage ein eigenes Kennzeichen im Label: [[]] Ein einfaches `:has(.ml-kopf-absage)` ist gueltig, lesbar und braucht keine Annahme darueber, was sonst noch im Kopf steht. */ .lf-item-container:has(.ml-kopf-absage) li:has(.icon-calendar-1), .listing-preview:has(.ml-kopf-absage) li:has(.icon-calendar-1), .lf-item-container:has(.ml-kopf-absage) li:has(.icon-calendar-1) span, .listing-preview:has(.ml-kopf-absage) li:has(.icon-calendar-1) span { text-decoration: line-through; text-decoration-color: var(--ml-absage); text-decoration-thickness: 1px; } /* ... und auf dem TELEFON 2 px, am Rechner weiter 1 px. EDDY 16.10.2026: "Also mobil ist der Strich, wenn er in der Suche, wenn das Datum durchgestrichen ist, ist er auch zu duenn. … Desktop weiss ich noch nicht." 🛑 Das nimmt die Festlegung vom 14.08.2026 fuer das TELEFON zurueck - dort waren 2 px schon einmal gebaut und am Bild als "viel zu fett" verworfen. Beide Urteile sind richtig, weil sie verschiedene Geraete betreffen: Das Telefon zeichnet mit Bildschirmfaktor 2 bis 3, ein 1-px-Strich wird dort zu einem halben physischen Punkt und verschwindet neben der Schrift. Am Rechner (Faktor 1) ist derselbe Strich voll da und wirkt bei 13 px Schrift wuchtig. DIESELBE ZAHL IST AUF ZWEI GERAETEN NICHT DIESELBE STRICHSTAERKE - das ist derselbe Grund, aus dem eine Icon-Maske mobil und am Rechner verschiedene Staerken braucht (S-43 O3). Die Grenze 768 px ist gemessen, nicht geraten: Dort wird die Trefferliste einspaltig (Kartenbreite springt von 658 auf 432 px). Gemessen 16.10.2026 auf sechs Breiten - 1440/1024/768/600/480/390 trugen alle 1 px, es gab also keine mobile Sonderregel, gegen die das hier anlaufen koennte. ⚠️ Der Block steht BEWUSST HINTER der Basis-Regel: gleiches Gewicht, und bei Gleichstand gewinnt die spaetere (Skill §CSS-Handwerk Falle 1). Wer ihn davorzieht, macht ihn wirkungslos - ohne Fehlermeldung. ⚠️ Die DETAILSEITE ist hier nicht gemeint, sie steht seit 13.10. auf beiden Geraeten auf 2 px (Schrift 17 bzw. 16 px). */ @media (max-width: 768px) { .lf-item-container:has(.ml-kopf-absage) li:has(.icon-calendar-1), .listing-preview:has(.ml-kopf-absage) li:has(.icon-calendar-1), .lf-item-container:has(.ml-kopf-absage) li:has(.icon-calendar-1) span, .listing-preview:has(.ml-kopf-absage) li:has(.icon-calendar-1) span { text-decoration-thickness: 2px; } } /* Das Zeichen selbst wird nicht durchgestrichen — ein durchgestrichenes Kalender-Symbol sieht nach einem Fehler aus, nicht nach einer Absage. */ .lf-item-container:has(.ml-kopf-absage) li:has(.icon-calendar-1) i, .listing-preview:has(.ml-kopf-absage) li:has(.icon-calendar-1) i { text-decoration: none; } /* Das Zeichen selbst wird nicht durchgestrichen — ein durchgestrichenes Kalender-Symbol sieht nach einem Fehler aus, nicht nach einer Absage. */ .lf-item-container:has(.ml-kopf-absage) li:has(.icon-calendar-1) i, .listing-preview:has(.ml-kopf-absage) li:has(.icon-calendar-1) i { text-decoration: none; } #c27-single-listing .ml-absage .element { background: var(--ml-absage); border: none; border-radius: 6px; box-shadow: 0 2px 10px rgba(0, 0, 0, .25); box-shadow: 0 2px 10px color-mix(in srgb, var(--ml-absage) 35%, transparent); } /* Ueberschrift des Blocks weg — der Satz sagt es selbst. */ #c27-single-listing .ml-absage .pf-head { display: none; } #c27-single-listing .ml-absage .pf-body { padding: 18px 22px; } #c27-single-listing .ml-absage .details-list li, #c27-single-listing .ml-absage .details-list li > a { background: none; border: none; padding: 0; pointer-events: none; /* kein Link — der Hinweis fuehrt nirgendwohin */ } #c27-single-listing .ml-absage .details-list li > a > span, #c27-single-listing .ml-absage .category-name { color: #fff; font-size: 1.15em; font-weight: 700; letter-spacing: 0.01em; } #c27-single-listing .ml-absage .details-list li > a > i, #c27-single-listing .ml-absage .cat-icon { color: #fff; background: none; font-size: 1.3em; margin-right: 10px; } /* -------------------------------------------------------------------------- 🛑 AUF DEM DESKTOP EINE NUMMER KLEINER (EDDY 13.08.2026) -------------------------------------------------------------------------- „Auf dem Smartphone finde ich die Groesse passend, nur auf dem Desktop muessten wir sie eine Nummer kleiner machen." Gemessen: Titel 15 px, Fliesstext 14 px. Ab 768 px Breite gehen die Titel auf 14 px — dieselbe Groesse wie der Text, unterschieden nur noch durch Fettung und Versalien. Darunter bleibt es bei 15 px: Auf dem kleinen Schirm steht alles untereinander, dort traegt der Titel mehr Ordnungslast und darf sich staerker abheben. 🛑 DIESER BLOCK MUSS HINTER DER BASIS-REGEL STEHEN. Beide wiegen gleich (1 ID, 2 Klassen) — bei Gleichstand gewinnt die SPAETERE. Weiter oben platziert wuerde er von der 15-px-Regel ueberstimmt und waere wirkungslos. -------------------------------------------------------------------------- */ @media (min-width: 768px) { #c27-single-listing .pf-head .title-style-1__heading { font-size: 14px; line-height: 21px; } } /* ========================================================================== AIMF-ANPASSUNG #019 (S-19) — Veranstalter zusammengefuehrt (01.10.2026: Name 14 px auf jeder Breite) Referenz-Fassung: PROJEKTE/_ALLGEMEIN/SNIPPETS/S-19-veranstalter-zusammengefuehrt.css Aenderungen dort zuerst. Dies ist die Kopie, nicht hier bearbeiten. ========================================================================== */ .ml-vlist { list-style: none; margin: 0; padding: 0; } /* 🛑 Und dasselbe noch einmal mit genug Gewicht, denn die Zeile darueber WIRKT NICHT: Gemessen traegt die Liste `margin-bottom: 10px` aus einer Theme-Regel, die `.ml-vlist { margin: 0 }` (0,1,0) schlaegt. **Eine Regel, die nichts tut, sieht aus wie eine, die etwas tut** - sie stand hier seit dem 13.08.2026 und ist erst am 28.08. beim Nachmessen aufgefallen. Die 7 statt 0 sind gerechnet, nicht gewaehlt: EDDY wollte die Social-Reihe ein Viertel naeher an den Namen (41,9 auf 31,4 px Mitte zu Mitte). Der negative Aussenabstand in S-30 bringt davon nur die Haelfte, weil die Zeile `align-items: center` traegt und eine Margin-Box zentriert (Falle 12). Die fehlenden 3 px kommen aus diesem Leerraum, der Rest bleibt als sichtbarer Absatz stehen. */ #c27-single-listing .details-block-content .ml-vlist { margin-bottom: 7px; } /* Jede Angabe eine eigene Zeile, linksbuendig. Das ist der Kern: das Theme zieht Schlagworte sonst kommagetrennt in EINE Zeile. */ .ml-vlist__item { display: flex; align-items: center; gap: 10px; padding: 0; text-align: left; } /* 🛑 Die erste Zeile ohne Luft nach oben. Das Theme gibt dem Inhaltsbereich schon `padding-top: 15px` (`.pf-body`) — die eigene Polsterung kaeme oben drauf, und der Abstand unter der Ueberschrift waere groesser als bei jedem anderen Baustein daneben. Genau das ist EDDY am 13.08.2026 aufgefallen: „der Abstand muesste identisch hoch sein." */ /* 🛑 ZURUECKGEBAUT 20.08.2026 — hier stand `.ml-vlist__item:first-child { padding-top: 0 }`. Die Regel war fuer den Fall gebaut, dass diese Liste der EINZIGE Inhalt ihres Bausteins ist. Sobald weitere Zeilen danebenstehen (auf AIMF seit 20.08. Ansprechpartner, Telefon, E-Mail im selben Block), braucht die Liste gar keine eigene Polsterung mehr: Den Abstand liefert der aeussere Listenpunkt des Themes, genau wie bei jeder Nachbarzeile. Deshalb traegt `.ml-vlist__item` jetzt `padding: 0` — und die Sonderregel fuer die erste Zeile ist damit gegenstandslos. */ /* Abstand nur ZWISCHEN mehreren Veranstaltern, nicht aussen herum. */ .ml-vlist__item + .ml-vlist__item { border-top: 1px solid rgba(0, 0, 0, .06); padding-top: 8px; margin-top: 8px; } /* Huelle um Logo + Name. Steckt mal in einem , mal in einem — beide muessen identisch aussehen, deshalb dieselbe Klasse. */ .ml-vlist__link { display: inline-flex; align-items: center; gap: 10px; min-width: 0; } /* 🛑 Der Link erbt Farbe und Schrift der Umgebung. Ohne diese Zeilen faerbt das Theme jedes in die Akzentfarbe (`a:hover { color: var(--accent) }`) und der Profil-Name saehe anders aus als die Schlagworte daneben. */ a.ml-vlist__link, a.ml-vlist__link:hover, a.ml-vlist__link:focus, a.ml-vlist__link:active { color: inherit; text-decoration: none; } /* 🛑 UND die Unterstreichung, die von woanders kommt. Auf Plattformen mit dem Snippet „Links erkennbar machen" bekommt JEDES im Inhaltsbereich eine farbige Unterstreichung plus einen Pfeil — gedacht fuer „zur Anmeldung", trifft aber auch diese Liste. Beim Ueberfahren wurde sie dicker und gruen. Das widerspricht der Leitregel oben, also hier ausdruecklich zuruecknehmen. Der Selektor traegt die ID, weil die fremde Regel sie auch traegt — eine Klasse allein waere zu schwach. (EDDY 13.08.2026: „das gefaellt mir nicht.") 🛑 UND DIE SPEZIFITAET MUSS STIMMEN — daran ist der erste Versuch gescheitert. Die fremde Regel lautet `#c27-single-listing .details-block-content .wp-editor-content a` und wiegt (1 ID, 2 Klassen, 1 Element). Ein `#c27-single-listing a.ml-vlist__link` wiegt nur (1, 1, 1) und verliert — die Unterstreichung blieb sichtbar, obwohl die Regel ausgeliefert wurde. Deshalb hier der VOLLE Pfad plus eigene Klasse: (1, 3, 1). Nachgerechnet, nicht geraten. */ #c27-single-listing .details-block-content .wp-editor-content a.ml-vlist__link, #c27-single-listing .details-block-content .wp-editor-content a.ml-vlist__link:hover, #c27-single-listing .details-block-content .wp-editor-content a.ml-vlist__link:focus, #c27-single-listing .details-block-content a.ml-vlist__link, #c27-single-listing .details-block-content a.ml-vlist__link:hover, #c27-single-listing a.ml-vlist__link, a.ml-vlist__link { border-bottom: 0 !important; box-shadow: none; color: inherit; text-decoration: none; } #c27-single-listing .details-block-content .wp-editor-content a.ml-vlist__link::after, #c27-single-listing .details-block-content a.ml-vlist__link::after, #c27-single-listing a.ml-vlist__link::after, a.ml-vlist__link::after { content: none !important; } /* Jede Zeile traegt ein Logo — das eigene oder den Platzhalter. Feste Breite, damit alle Namen gleich weit einruecken. 🛑 KEIN Kasten, KEIN eigener Hintergrund, KEIN Zuschnitt. Ein Logo, das seine Flaeche randlos ausfuellt, saehe sonst aus wie ein aufgeklebtes Quadrat neben einem freigestellten Zeichen — und die Zeilen wirken wieder ungleich (EDDY 13.08.2026: „du hast jetzt quadratisch Logo eingefuegt, das gefaellt mir nicht"). `contain` zeigt jedes Bild vollstaendig in seinem eigenen Seitenverhaeltnis; der Innenabstand gibt randlosen Logos die Luft, die freigestellte von Haus aus mitbringen. RUND, nicht eckig (EDDY 13.08.2026). 🛑 KEIN Rahmen, KEIN Innenabstand, KEIN eigener Hintergrund — und `cover`, nicht `contain`. Jede Zutat davon erzeugt einen sichtbaren Ring: ein `box-shadow: inset` den grauen, ein `background: #fff` zusammen mit `padding` den weissen Zwischenraum, und `contain` laesst obendrein jedes Bild verschieden gross wirken — je nachdem, wieviel Rand es SELBST schon mitbringt. Genau das war der Fall: Das Platzhalter-Logo traegt einen eingebauten Rand (Dateiname `…rand2_5x`), das echte Logo nicht. Mit `cover` fuellt jedes Bild den Kreis vollstaendig aus, und alle Kreise sind gleich gross. (EDDY 13.08.2026: „einheitlich grosse Kreise.") ⚠️ Preis dieser Wahl: Ein NICHT quadratisches Logo wird an den langen Seiten beschnitten. Bei quadratischen Logos — dem Normalfall bei Marken — faellt nichts weg. Wer das aendert, bekommt die ungleichen Groessen zurueck. 🛑 DIE MASSE WERDEN FESTGENAGELT, nicht in Prozent gesetzt. Der Grund ist gemessen, nicht vorsorglich: Das Logo eines verknuepften Profils steckt in einem ``, die Platzhalter der Schlagworte in einem `` — und das Theme gibt Bildern innerhalb von Links eigene Masse. Mit `width: 100%` erbte das Bild dann eine fremde Groesse, und der Kreis des echten Eintrags wurde groesser als die der Schlagworte. Feste Pixel an BEIDEN Elementen, plus `min-`/`max-width`, damit auch das Flex-Layout nichts streckt. (EDDY 13.08.2026: „genauso gross wie das Platzhalter-Logo.") */ .ml-vlist .ml-vlist__logo, #c27-single-listing .ml-vlist .ml-vlist__logo { flex: 0 0 34px; width: 34px !important; height: 34px !important; min-width: 34px; max-width: 34px; border-radius: 50%; overflow: hidden; } .ml-vlist .ml-vlist__logo img, #c27-single-listing .ml-vlist .ml-vlist__logo img, #c27-single-listing .details-block-content .ml-vlist .ml-vlist__logo img { display: block; width: 34px !important; height: 34px !important; min-width: 34px; max-width: 34px !important; padding: 0; margin: 0; object-fit: cover; background: none; border-radius: 50%; } /* 🛑 ECHTE LOGOS ETWAS KLEINER ALS DER PLATZHALTER — und das ist kein Schoenheitsfehler, sondern ein Ausgleich fuer das Bild selbst. Ein freigestelltes Marken-Logo fuellt seine Datei randlos aus, ein Platzhalter bringt meist Weissraum mit (hier: Dateiname `…rand2_5x`, also 2,5-facher Rand). Bei gleichem Kreisdurchmesser wirkt das echte Logo deshalb deutlich groesser, obwohl beide Kreise exakt gleich sind — der Unterschied steckt im Bild, nicht im CSS. Der Platz drumherum bleibt 34 px (seitlicher Rand), damit alle Namen gleich weit einruecken. ⚠️ Diese 29 px sind ein VERGLEICHSWERT, den EDDY am 13.08.2026 sehen wollte — noch kein abgenommenes Mass. Sobald er einen neutralen Platzhalter mit weniger Rand einsetzt, gehoert der Ausgleich geprueft und faellt womoeglich ganz weg. */ .ml-vlist__item--profil .ml-vlist__logo, #c27-single-listing .ml-vlist__item--profil .ml-vlist__logo { width: 29px !important; height: 29px !important; min-width: 29px; max-width: 29px; margin: 0 2.5px; } .ml-vlist__item--profil .ml-vlist__logo img, #c27-single-listing .ml-vlist__item--profil .ml-vlist__logo img, #c27-single-listing .details-block-content .ml-vlist__item--profil .ml-vlist__logo img { width: 29px !important; height: 29px !important; min-width: 29px; max-width: 29px !important; } /* Der Name traegt die Zeile — er ist die Antwort auf "wer richtet das aus?". Fett, seit die Kontaktdaten (Ansprechpartner, Telefon, E-Mail) mit in denselben Block gewandert sind: ohne Hervorhebung steht der Veranstalter sonst gleichwertig neben seinen eigenen Kontaktzeilen. EDDY 20.08.2026: "Der Veranstalter-Tag ist fett." */ /* 🛑 16 px seit 28.08.2026, und die Messung davor ist der interessante Teil. EDDY: *„Der Titel vom Veranstalter wirkt kleiner als normal."* GEMESSEN war er **exakt so gross wie jeder andere Text der Seite** (14 px, wie die Werte im Fakten-Block). **Nichts hat ihn verkleinert - er wirkte nur so.** Warum das Auge sich taeuscht: Seine Zeilenhoehe ist 20 px, die der uebrigen Zeilen 26. Er steht allein unter seiner Ueberschrift, mit viel Weissraum darum, und das Auge erwartet an dieser Stelle einen TITEL, also etwas Groesseres - nicht dieselbe Groesse in fett. Deshalb ist die Aenderung eine Gestaltungs-Entscheidung, keine Reparatur: eine Stufe ueber dem Fliesstext. 🛑 SEIT 01.10.2026: 14 px AUF JEDER BREITE, und das ist eine Vereinfachung, keine zweite Ausnahme. Die 16 standen hier seit dem 28.08., weil das Theme sie fuer die Kopfangaben nutzt; am 11.09. kam fuer das Telefon eine Ausnahme mit 15 dazu. Am 01.10. hat EDDY die Breiten nebeneinander gesehen: „Auf dem Smartphone hat der Veranstaltername eine gute Schriftgroesse, auf dem Desktop ist es viel zu gross." Gemessen war der Grund sichtbar: am Rechner 16 px, waehrend die Blockueberschrift DARUEBER nur 14 px traegt - der Name war groesser als seine eigene Ueberschrift. Erst auf 15 gesetzt, nach dem Blick auf die Seite dann „Firmentitel bitte 1 px kleiner" -> **14 px**, damit auf beiden Breiten derselbe Wert gilt und der Name nicht mehr aus der Textgroesse der Seite ausbricht. Der Media-Query vom 11.09. ist damit ersatzlos weggefallen. Die Zeilenhoehe 22 bleibt, damit die Zeile nicht springt - der Name bleibt durch `font-weight: 600` abgesetzt, nicht durch die Groesse. */ .ml-vlist__name { font-size: 14px; line-height: 22px; font-weight: 600; overflow-wrap: anywhere; } /* Der einzige Unterschied zwischen den Zeilen: dieser Zusatz — und er ist selbst ein Link auf dasselbe Ziel. Im Ruhezustand leise, beim Ueberfahren derselbe duenne Unterstrich wie beim Namen. */ .ml-vlist__hinweis, #c27-single-listing a.ml-vlist__hinweis { margin-left: auto; padding-left: 8px; font-size: 11px; line-height: 16px; color: #8f8f96; white-space: nowrap; border-bottom: 0 !important; text-decoration: none; } #c27-single-listing a.ml-vlist__hinweis::after, a.ml-vlist__hinweis::after { content: none !important; } /* 🛑 Der Zusatz bleibt IMMER ohne Unterstreichung — auch beim Ueberfahren. Er ist klein und grau; ein Strich darunter wirkt an dieser Stelle unruhig (EDDY 13.08.2026: „das muss nicht unterstrichen werden, das schaut schlecht aus"). Die Hover-Rueckmeldung gibt der Name daneben, das genuegt. 🛑 VOLLER PFAD, sonst verliert die Regel. Gemessen im Browser: Den Zusatz trifft `#c27-single-listing .details-block-content .wp-editor-content a` mit `text-decoration: underline` — Gewicht (1 ID, 2 Klassen, 1 Element). Eine Gegenregel `#c27-single-listing a.ml-vlist__hinweis` wiegt nur (1,1,1) und wird ueberstimmt: Der Zusatz war unterstrichen, obwohl die Regel ausgeliefert wurde. Beim Namen daneben war der volle Pfad gesetzt — deshalb sah der eine sauber aus und der andere nicht. Und `text-decoration-color` wird AUSDRUECKLICH gesetzt: Ohne Angabe nimmt der Strich die Textfarbe, und `a:hover { color: var(--accent) }` faerbt die beim Ueberfahren um. Genau daher kam der gruene Unterstrich. */ #c27-single-listing .details-block-content .wp-editor-content a.ml-vlist__hinweis, #c27-single-listing .details-block-content .wp-editor-content a.ml-vlist__hinweis:hover, #c27-single-listing .details-block-content .wp-editor-content a.ml-vlist__hinweis:focus, #c27-single-listing .details-block-content a.ml-vlist__hinweis, #c27-single-listing .details-block-content a.ml-vlist__hinweis:hover, #c27-single-listing a.ml-vlist__hinweis:hover, #c27-single-listing a.ml-vlist__hinweis:focus, a.ml-vlist__hinweis:hover, a.ml-vlist__hinweis:focus { color: #8f8f96 !important; text-decoration: none !important; text-decoration-color: transparent !important; border-bottom: 0 !important; /* Ohne Unterstreichung fehlt dem Zusatz jedes Link-Signal — dann bleibt nur der Mauszeiger, um zu zeigen, dass hier etwas passiert. Der Link funktioniert auch ohne diese Zeile (im Browser angeklickt und geprueft), aber er SIEHT sonst tot aus. */ cursor: pointer; /* 🛑 OBEN AUSRICHTEN, nicht mittig. Bricht ein langer Name auf zwei Zeilen um, stuende der Zusatz sonst in der Mitte dazwischen und die Zeile wirkt unruhig. Er gehoert auf die Hoehe der ERSTEN Textzeile — dort liest man ihn zusammen mit dem Namen (EDDY 13.08.2026: „da wirkt es aufgeraeumter"). Die 2 px gleichen die kleinere Schrift gegen die Zeilenhoehe des Namens aus (11/16 gegen 14/20). */ align-self: flex-start; padding-top: 2px; } /* 🛑 BEIM UEBERFAHREN UND KLICKEN DOCH EIN STRICH — und das ist kein Widerspruch zur Regel darueber: Im RUHEZUSTAND bleibt der Zusatz strichlos, damit die Liste ruhig aussieht. Erst wenn jemand darauf zeigt oder drueckt, erscheint dieselbe duenne Linie wie beim Namen daneben. Der Grund ist nicht Schoenheit, sondern Rueckmeldung: „Manchmal laedt die Seite laenger, und dann sehen die Leute, dass sich was tut" (EDDY). Die Strichfarbe wird ausdruecklich gesetzt, sonst kippt sie beim Hover in die Akzentfarbe des Themes. */ #c27-single-listing .details-block-content .wp-editor-content a.ml-vlist__hinweis:hover, #c27-single-listing .details-block-content .wp-editor-content a.ml-vlist__hinweis:active, #c27-single-listing .details-block-content a.ml-vlist__hinweis:hover, #c27-single-listing .details-block-content a.ml-vlist__hinweis:active, #c27-single-listing a.ml-vlist__hinweis:hover, #c27-single-listing a.ml-vlist__hinweis:active, a.ml-vlist__hinweis:hover, a.ml-vlist__hinweis:active { text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 0.18em; text-decoration-color: #8f8f96 !important; } /* Dasselbe fuer den Namen: die Hover-Unterstreichung bleibt, aber sie behaelt die Schriftfarbe statt in die Akzentfarbe zu kippen. */ #c27-single-listing .details-block-content .wp-editor-content a.ml-vlist__link:hover, #c27-single-listing .details-block-content a.ml-vlist__link:hover, a.ml-vlist__link:hover { color: inherit !important; } #c27-single-listing .ml-vlist__item--profil a.ml-vlist__link:hover .ml-vlist__name, .ml-vlist__item--profil a.ml-vlist__link:hover .ml-vlist__name { text-decoration-color: currentColor; } /* 🛑 ZURUECKGEBAUT 20.08.2026 — DREI REGELN, DIE IHREN ZWECK VERLOREN HABEN. Hier standen nacheinander: der aeussere Listenpunkt entlastet (`> li:has(.ml-vlist)` ohne Polsterung), die Ueberschrift (`.title-style-1 { padding-bottom: 0 !important }`) und der Inhaltsbereich (`.pf-body { padding-top: 0 !important }`). Sie sind am 13.08.2026 fuer einen Baustein entstanden, in dem diese Liste ALLEIN stand: Sie brachte eigene Polsterung mit, und der Abstand unter der Ueberschrift wurde dadurch groesser als bei den Nachbarbausteinen. Die drei Regeln haben ihn wieder herausgerechnet. Seit die Kontaktdaten mit in denselben Block gewandert sind (AIMF, 20.08.2026), rechnen sie in die falsche Richtung: Der Veranstaltername klebte an der Ueberschrift, und darunter klaffte zur naechsten Zeile eine zu grosse Luecke. EDDY: „das hatten wir irgendwann optimiert, das muessen wir jetzt wieder zurueckbauen." Die Lehre, die bleibt: Eine Regel, die einen fremden Abstand AUSGLEICHT, haengt an einer Voraussetzung — hier „diese Liste ist der einzige Inhalt". Faellt die Voraussetzung weg, wird der Ausgleich selbst zum Fehler, und zwar an einer Stelle, an der niemand sucht. Ausgleichs-Regeln gehoeren deshalb an die Bedingung gebunden, nicht an das Element allein. Der Abstand kommt jetzt wieder vom Theme, fuer alle vier Zeilen gleich. */ /* ═══ RANGFOLGE IM BLOCK: der Veranstalter fuehrt, die Angaben folgen ═══ Stehen Kontaktdaten mit im Veranstalter-Block, sehen sie ohne Zutun gleichwertig aus wie der Veranstalter selbst — jede Zeile mit derselben grauen Kachel, demselben Abstand. Fettschrift allein reicht dagegen nicht. EDDY 20.08.2026: „fuer mich ist jetzt alles was drunter steht irgendwie gleichwertig zum Titel." Deshalb zwei Abstufungen, und beide treffen NUR die Zeilen NACH der Liste (`li:has(.ml-vlist) ~ li`) — die Veranstalter-Zeile selbst bleibt, wie sie ist, samt Kachel und samt ihrem Abstand zur ersten Angabe darunter: 1. Kachel weg, nur das Zeichen bleibt. Das Theme setzt sie in `.details-block-content > li > i` (0,1,2); unser Selektor wiegt (0,2,3) und gewinnt damit — nachgerechnet, nicht gehofft. 2. Zeilenabstand: 15 px (Theme) auf 6 px. Erst halbiert, dann auf EDDYs Wunsch nochmals um ein Viertel zurueckgenommen. Gilt automatisch auch fuer alles, was spaeter dazukommt. 🛑 Die Kachel wird nur unsichtbar gemacht, nicht die Flaeche: Ein `width: auto` daneben wuerde die Zeichen unterschiedlich weit einruecken, je nach Zeichenbreite — und die Namen stuenden nicht mehr untereinander. */ #c27-single-listing .details-block-content > li:has(.ml-vlist) ~ li > i, .details-block-content > li:has(.ml-vlist) ~ li > i { background: none; height: 24px; } #c27-single-listing .details-block-content > li:has(.ml-vlist) ~ li, .details-block-content > li:has(.ml-vlist) ~ li { margin-bottom: 3px; align-items: center; } /* 🛑 DER VERSATZ SASS IM MARGIN DER TEXT-HUELLE, nicht in der Ausrichtung. `.details-block-content .wp-editor-content { margin-top: 10px }` (Theme) macht den Flex-Kasten der Huelle 30 px hoch (20 Text + 10 Abstand). Damit ist die ganze Zeile 30 px, das 24-px-Zeichen wird darin zentriert — und steht 10 px ueber dem Text. Solange die Kachel selbst 40 px hoch war, fiel das nicht auf; sie ueberdeckte den Unterschied. EDDY 20.08.2026: „die sind hoeher, als waeren sie nach unten abgehackt." ⚠️ `align-items`/`align-self` koennen das NICHT beheben: Sie zentrieren die MARGIN-Box, und die fuellt die Zeile bereits vollstaendig aus. Drei Versuche in diese Richtung blieben wirkungslos, bevor die Messung den Margin zeigte — der Fehler stand die ganze Zeit in der Regelliste. Merksatz: erst fragen, WORAUS sich die Hoehe zusammensetzt. */ #c27-single-listing .details-block-content > li:has(.ml-vlist) ~ li > .wp-editor-content, .details-block-content > li:has(.ml-vlist) ~ li > .wp-editor-content { margin-top: 0; } /* 🛑 `align-items` gehoert ZWINGEND zur verkleinerten Kachel — sonst haengt das Zeichen oben. Die Zeile ist `display: flex` mit `align-items: normal`; solange die Kachel die volle Zeilenhoehe hatte (40 px), fiel das nicht auf. Mit 24 px steht ihre Mitte 8 px ueber der Textmitte, und es sieht aus, als waere das Zeichen nach oben verrutscht. Gemessen, nachdem EDDY es sah: Icon-Mitte 1893, Text-Mitte 1901. Wer eine Hoehe aendert, prueft die Ausrichtung mit. */ /* Der Sprung vom Veranstalter zu seinen Angaben — enger, aber noch als Sprung erkennbar. Gerechnet auf den SICHTBAREN Abstand (Mitte zu Mitte), nicht auf den Zwischenraum: 20 (halbe Kachel) + Zwischenraum + 12 (halbe Zeile). Mit 15 px waren das 47, mit 3 px sind es 35 — die 25 %, die EDDY am 20.08.2026 wollte. Am Zwischenraum allein zu drehen haette 8 % gebracht und waere wieder unsichtbar geblieben. Die Rangfolge traegt jetzt die groessere Kachel und die Fettschrift, nicht mehr der Abstand. */ #c27-single-listing .details-block-content > li:has(.ml-vlist), .details-block-content > li:has(.ml-vlist) { margin-bottom: 3px; } /* ═══ KEINE UNTERSTREICHUNG bei Telefon und E-Mail ═══ Sie kommt aus dem Snippet „Links erkennbar machen" (`#003` / S-03), das jedem im Inhaltsbereich einen Strich gibt — gedacht fuer „zur Anmeldung", trifft aber auch diese Kontaktzeilen. Hier stoert er: Es sind keine Ziele zum Anklicken im Lesefluss, sondern Angaben. EDDY 20.08.2026: „soll nicht unterstrichen sein, auch nicht bei Mouseover." 🛑 Die fremde Regel wiegt (1 ID, 2 Klassen, 1 Element). Unsere wiegt mit `:has(.ml-vlist)` (1, 2, 3) und gewinnt — nachgerechnet, nicht gehofft. Die FARBE bleibt unangetastet: Das Einfaerben beim Ueberfahren darf. */ #c27-single-listing .details-block-content > li:has(.ml-vlist) ~ li a, #c27-single-listing .details-block-content > li:has(.ml-vlist) ~ li a:hover, #c27-single-listing .details-block-content > li:has(.ml-vlist) ~ li a:focus, .details-block-content > li:has(.ml-vlist) ~ li a, .details-block-content > li:has(.ml-vlist) ~ li a:hover { text-decoration: none; border-bottom: 0 !important; } #c27-single-listing .details-block-content > li:has(.ml-vlist) ~ li a::after, .details-block-content > li:has(.ml-vlist) ~ li a::after { content: none !important; } /* 🛑 DER ZWISCHENRAUM WAR NIE DER HEBEL — die Kachelhoehe war es. Gemessen 20.08.2026: Jede Zeile ist 40 px hoch, weil die Kachel 40x40 belegt; der Text darin braucht nur 30. Von 46 px Abstand (Mitte zu Mitte) entfielen also 40 auf die Zeile selbst und 6 auf den Zwischenraum. Wer nur `margin-bottom` verkleinert, aendert 13 Prozent und sieht nichts — EDDY zweimal: „ich sehe immer noch keinen Unterschied." Deshalb schrumpft oben die HOEHE der (unsichtbaren) Kachel auf 24 px. Die BREITE bleibt 40 px, sonst ruecken die Texte unterschiedlich weit ein und stehen nicht mehr untereinander. ⚠️ Die Grenze liegt bei rund 33 px Zeilenabstand: Die Textzeile selbst ist 30 px hoch (14 px Schrift, Theme-Zeilenhoehe). Enger geht nur, wenn man an die Typografie geht — das waere eine andere Entscheidung. */ /* 🛑 KEINE Unterstreichung im Ruhezustand — aber eine beim Ueberfahren. Der Ruhezustand haelt die Liste einheitlich (alle Namen sehen gleich aus); erst die Maus verraet, dass hinter dieser Zeile etwas liegt. Die Strichstaerke ist bewusst DIESELBE wie bei den uebrigen Links der Detailseite (1 px, Abstand 0.18em) und wird beim Ueberfahren NICHT dicker. EDDY 13.08.2026: „nicht mit dem fetten Strich, sondern mit dem duennen." */ #c27-single-listing .ml-vlist__item--profil a.ml-vlist__link:hover .ml-vlist__name, .ml-vlist__item--profil a.ml-vlist__link:hover .ml-vlist__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; } /* ═══ AIMF-ANPASSUNG #003 — ERGAENZUNG (S-03): Pfeil an den Buttons ═══ */ /* -------------------------------------------------------------------------- ERGAENZUNG 13.08.2026 — derselbe Pfeil auch an den BUTTONS -------------------------------------------------------------------------- EDDY: „Der Pfeil suggeriert, dass sich was oeffnet. Koennen wir den auch an den anderen zwei Stellen aufnehmen?" Die Regeln oben greifen nur im Inhaltsbereich (`.wp-editor-content`, `.item-property`). Der Kopf-Button und die Button-Leiste liegen ausserhalb davon — dort rendert das Theme eigenes Markup, und der Pfeil fehlte. 🛑 Nur bei Buttons, die WIRKLICH ein neues Fenster oeffnen (`target=_blank`). Ein Pfeil an „merken" oder „teilen" waere eine Aussage ueber ein Verhalten, das es dort nicht gibt. 🛑 Der Anker ist `.ml-track-btn` — die Klasse, die BEIDE Button-Sorten am `
  • ` tragen: der Kopf-Button (`li.lmb-calltoaction.ml-track-btn`) und die Leiste darunter (`div.quick-listing-actions li.ml-track-btn`). Am Markup abgelesen, nicht aus den Bereichsnamen geraten — ein erster Versuch mit `.listing-quick-actions` und `.profile-cover` traf ins Leere. 🛑 UND „Route" ist ausgenommen. Der Button oeffnet zwar ein neues Fenster, aber er fuehrt nicht auf eine weiterfuehrende Seite des Anbieters — er startet eine Navigation. Der Pfeil verspraeche dort etwas Falsches (EDDY 13.08.2026: „bei zur Route brauchen wir das nicht"). Erkennbar an der Ziel-Adresse, nicht an einer Klasse: Das Theme baut den Button ueber `maps.google.com`, ohne ihn eigens zu kennzeichnen. */ #c27-single-listing .ml-track-btn a[target="_blank"]:not([href*="maps.google"]):not([href*="google.com/maps"]) span::after, #c27-single-listing .lmb-calltoaction a[target="_blank"]:not([href*="maps.google"]):not([href*="google.com/maps"]) span::after, #c27-single-listing .quick-listing-actions a[target="_blank"]:not([href*="maps.google"]):not([href*="google.com/maps"]) span::after { content: "\2197"; /* Pfeil nach rechts oben — dasselbe Zeichen wie oben */ display: inline-block; margin-left: 0.25em; font-size: 0.85em; text-decoration: none; vertical-align: baseline; } /* ========================================================================== AIMF-ANPASSUNG #020 (S-20) — Kopfbereich lesbar: Textschatten statt Verlauf (2. Fassung 12.09.2026, Variante B+) Referenz-Fassung: PROJEKTE/_ALLGEMEIN/SNIPPETS/S-20-header-verlauf.css Aenderungen dort zuerst. Dies ist die Kopie, nicht hier bearbeiten. ========================================================================== */ @media (min-width: 768px) { body.single-listing .profile-cover-image .main-info-desktop h1, body.single-listing .profile-cover-image .main-info-desktop h2, body.single-listing .profile-cover-image .main-info-desktop .lmb-label, body.single-listing .profile-cover-image .main-info-desktop .value { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); } } /* ═══ AIMF-ANPASSUNG #001 — ERGAENZUNG (S-01): Download-Icon ═══ */ /* ---- TEIL B: Download-Icon gross, aber in einer gemeinsamen Spur ---- 🛑 DIE ICONS BRAUCHEN EINE GEMEINSAME SPUR, sonst zerreisst die Zeile. Die beiden Kalender-Links stehen NEBENEINANDER in derselben Zeile (`li.upcoming-event-date > a.add-to-google-cal + a.add-to-i-cal`), nicht untereinander. Gemessen: Google-Icon 13 px breit, Download-Icon nach der Vergroesserung 27 px — jedes Icon schiebt seinen Text unterschiedlich weit nach rechts, und beim groesseren sah es aus wie ein Fehler. Zwei Fehler steckten darin, beide selbst gebaut: 1. Ein `gap` NUR am Download-Link — der Google-Link hatte keinen. Also hatte genau eine der beiden Angaben zusaetzlichen Abstand. 2. Icons unterschiedlicher Breite ohne feste Spur laufen rechtsbuendig aus, statt auf einer Mittelachse zu sitzen. Beides loest dieselbe Massnahme: eine feste Spaltenbreite fuer JEDES Icon und das Icon darin ZENTRIERT. Dann fluchten die Mittelachsen, und der Text startet ueberall an derselben Kante — unabhaengig davon, wie gross das einzelne Zeichen ist. (EDDY 13.08.2026: „die Mitte aller Icons sollte auf einer Ebene laufen" · „beim Download-Icon faengt der Text erst mit einem richtig grossen Abstand an".) 🛑 OPTISCH GLEICH IST NICHT ZAHLENGLEICH — und darum stehen hier drei verschiedene Werte. Bei identischer Punktzahl wirken die drei Zeichen unterschiedlich gross, weil jedes seinen Zeichenkasten anders ausfuellt: das Google-Zeichen kommt aus Font Awesome und fuellt ihn fast ganz, die beiden icomoon-Zeichen lassen Luft, das Download-Symbol am meisten. Bei den urspruenglichen 13 px war deshalb Google zu gross, das Kalender- Zeichen richtig und der Download zu klein — bei EINER gemeinsamen Zahl. Deshalb: Kalender bleibt der Massstab (13 px, Theme-Standard), die beiden anderen werden daran ANGEGLICHEN — Google leicht herunter, Download deutlich herauf. Bruchteile von Pixeln sind dabei erlaubt und hier auch noetig; der Browser rechnet damit sauber. ⚠️ FEHLER, DER DAZU FUEHRTE: Eine frühere Fassung zielte auf `.add-to-google-cal i` — also auf JEDES Icon in diesem Link. Dort steckt aber auch ein Kalender-Zeichen, das damit ungewollt mitverkleinert wurde. Ergebnis: zwei Zeichen zu klein, eines zu gross. **Icon-Regeln immer an der Icon-Klasse festmachen, nie am umgebenden Link.** 🛑 UND DIE SELEKTOREN TRAGEN DEN VOLLEN PFAD. Gemessen: Auf dieselben Icons zielt bereits `#c27-single-listing a.add-to-i-cal i` mit Gewicht (1 ID, 1 Klasse, 2 Elemente) — eine aeltere Anpassung. Ein `#c27-single-listing .pf-body .icon-data-download-5` wiegt nur (1,1,1) und VERLIERT: Die Regel wurde ausgeliefert und blieb wirkungslos, das Icon stand weiter auf den 13 px der fremden Regel. Deshalb hier ueberall Link-Klasse UND Icon-Klasse im Selektor. */ /* Download: fuellt seinen Kasten am wenigsten aus, braucht am meisten. */ #c27-single-listing .pf-body a.add-to-i-cal i.icon-data-download-5, #c27-single-listing a.add-to-i-cal i.icon-data-download-5, #c27-single-listing .pf-body .icon-data-download-5 { font-size: 15.5px; } /* Google: Font Awesome, fuellt den Kasten fast ganz — eine Spur zurueck. */ #c27-single-listing .pf-body a.add-to-google-cal i.fa-google, #c27-single-listing a.add-to-google-cal i.fa-google, #c27-single-listing .pf-body .fa-google { font-size: 12.5px; } /* Kalender: der Massstab. Ausdruecklich auf den Theme-Wert gesetzt, damit keine fremde Regel es unbemerkt mitzieht — genau das war passiert. */ #c27-single-listing .pf-body a.add-to-i-cal i.icon-calendar-1, #c27-single-listing .pf-body a.add-to-google-cal i.icon-calendar-1, #c27-single-listing a.add-to-i-cal i.icon-calendar-1, #c27-single-listing a.add-to-google-cal i.icon-calendar-1 { font-size: 13px; } /* Beide Links gleich aufgebaut: Icon in fester Spur, mittig, danach der Text. `gap: 0` — der Abstand kommt allein aus der Spurbreite, damit er fuer beide identisch ist. */ #c27-single-listing .pf-body .add-to-i-cal, #c27-single-listing .pf-body .add-to-google-cal { display: inline-flex; align-items: center; gap: 0; } /* 🛑 DER SICHTBARE ABSTAND IST NICHT DIE SPURBREITE. Das ist die Falle, die hier zweimal zugeschlagen hat: sichtbarer Abstand = (Spurbreite − Glyphenbreite) / 2 + Rand Die Glyphe steht MITTIG in ihrer Spur, links und rechts bleibt Luft. Wer die Spur misst, misst den Kasten — nicht das, was ein Mensch sieht. Erster Versuch: Spur 26 + Rand 4 = „30 px", sichtbar aber nur ~10,5. Zweiter Versuch: Spur auf 15, Rand weg — gemeldet als „halbiert", real fielen 10,5 auf 1 px, beim Download sogar auf −0,2 (das Zeichen lief aus seiner Spur). EDDY: „um fuenfundneunzig Prozent kleiner" — er hatte recht. Jetzt gerechnet statt geschaetzt: Spur 16 (traegt die breiteste Glyphe von 15,5) plus 4 px Rand ergibt sichtbar 4,3 bis 6,1 px je Zeichen — rund die Haelfte der urspruenglichen 10,5. ⚠️ Die Spur darf nie schmaler sein als das breiteste Zeichen, sonst laeuft es heraus und die Mittelachsen verrutschen. */ #c27-single-listing .pf-body .add-to-i-cal > i, #c27-single-listing .pf-body .add-to-google-cal > i { flex: 0 0 16px; width: 16px; text-align: center; line-height: 1; margin: 0 4px 0 0; padding: 0; } /* ═══ AIMF-ANPASSUNG #022 (S-22) — Vorschaukarte: Zeilen untereinander ═══ */ .lf-item-container .lf-contact, .listing-preview .lf-contact { display: flex; flex-direction: column; gap: 2px; } .lf-item-container .lf-contact > li, .listing-preview .lf-contact > li { display: flex; align-items: center; width: 100%; float: none; margin: 0; padding: 0; white-space: normal; } /* Feste Spur fuer das Zeichen, damit die Texte aller Zeilen an derselben Kante beginnen — unabhaengig davon, wie breit das einzelne Zeichen ist. Dieselbe Ueberlegung wie bei den Kalender-Links in S-01. 🛑 ABER LINKSBUENDIG, NICHT ZENTRIERT. Ein zentriertes Zeichen sitzt mittig in seiner Spur — die sichtbare Kante liegt dann weiter rechts als die des Kastens. Gemessen: Kasten bei 15 px, Zeichen bei 17,5. Titel, Veranstalter und Kategorie beginnen alle bei 15 — nur die Icon-Spalte stand 2,5 px daneben, und genau das faellt auf, wenn die Ebenen untereinander stehen (EDDY 14.08.2026: „nicht so linksbuendig wie die Icons oben"). Die feste Spur bleibt: Sie sorgt weiter dafuer, dass alle TEXTE an derselben Kante beginnen. Nur der Inhalt der Spur richtet sich jetzt links aus statt mittig. */ .lf-item-container .lf-contact > li > i, .listing-preview .lf-contact > li > i { flex: 0 0 18px; width: 18px; text-align: left; margin-right: 6px; } /* ═══ AIMF-ANPASSUNG #023 (S-18) — Absage folgt der Akzentfarbe ═══ EDDY 14.08.2026: "Die Absagefarben ebenfalls rot der neuen Farbe." Der Akzent ist hier #ff0000 (Rotton von Made in Mainfranken), also darf die Absage ihm folgen. Aendert sich der Akzent, aendert sich die Absage mit — es gibt keinen zweiten Rotton, der nachgezogen werden muesste. 🛑 Gewollte Abweichung von der Referenz-Fassung, die #c0392b vorgibt. Waere der Akzent hier je nicht-rot, gehoert diese Zeile zurueckgenommen: eine gruene Absage ist keine Warnung mehr. ═══ */ :root { --ml-absage: var(--accent); } /* ═══ AIMF-ANPASSUNG #024 (S-23) — Karussell-Punkte dezenter ═══ */ .listing-feed-carousel.c27-owl-nav .owl-dots span { transform: scale(0.75); } /* ═══ AIMF-ANPASSUNG #025 (S-24) — Kategorie-Chip invertiert ═══ */ /* Referenz-Fassung: PROJEKTE/_ALLGEMEIN/SNIPPETS/S-24-kategorie-chip-invertiert.css Aenderungen dort zuerst. Kopie — nicht hier bearbeiten. */ /* 🛑 JEDER SELEKTOR HIER BRAUCHT DEN KARTEN-KONTEXT — sonst trifft er die DETAILSEITE mit. Das Theme benutzt `.listing-details .cat-icon` naemlich zweimal: fuer den Kategorie-Chip der Karte UND fuer die Social-Media-Profile auf der Detailseite (`colored-list.php` rendert dieselbe Struktur). Live erlebt (18.08.2026, AIMF): Hier stand ein zweiter Zweig OHNE Kontext (`.listing-details .cat-icon:not(.cat-more)`). Ergebnis: Auf der Detailseite fehlten bei Social Media alle bunten Profil-Zeichen — Facebook, Instagram, LinkedIn, YouTube. Der NAME blieb stehen, nur das Symbol war weg, und niemand kam auf die Kategorie-Anpassung der Vorschaukarte. EDDY hat den Zusammenhang selbst vermutet: „Das kann sein, dass das mit irgendeiner Individualisierung zu tun hat." ⚠️ Der kontextlose Zweig war zudem UeBERFLUeSSIG: Die Karte liegt immer in `.lf-item-container` oder `.listing-preview`. Er hat nichts hinzugefuegt und nur Schaden angerichtet. */ /* Der Icon-Kreis verschwindet. NICHT der „+2"-Zaehler daneben — der sagt, dass es weitere Kategorien gibt, und wird unten eigens behandelt. */ .lf-item-container .listing-details .cat-icon:not(.cat-more), .listing-preview .listing-details .cat-icon:not(.cat-more) { display: none !important; } /* Der Name traegt jetzt alles. Grossbuchstaben nur optisch: 🛑 „VORTRAG" in die Taxonomie zu schreiben waere falsch — Vorlesegeraete lesen Versalien teils Buchstabe fuer Buchstabe, und der Wert wandert unveraendert in Filter, Export und Suchindex. Mit `text-transform` bleibt dort „Vortrag". Dieselbe Ueberlegung wie bei den Bereichs-Titeln in S-18. */ .lf-item-container .listing-details .category-name, .listing-preview .listing-details .category-name { text-transform: uppercase; letter-spacing: .06em; font-size: 12px; font-weight: 600; opacity: .75; } /* Kein Link-Blau und keine Akzentfarbe im Mausover — die Einordnung ist Information, kein Bedienelement. Klickbar bleibt sie trotzdem. */ .lf-item-container .c27-listing-preview-category-list li > a, .lf-item-container .c27-listing-preview-category-list li > a:hover, .lf-item-container .c27-listing-preview-category-list li > a:focus, .listing-preview .c27-listing-preview-category-list li > a, .listing-preview .c27-listing-preview-category-list li > a:hover, .listing-preview .c27-listing-preview-category-list li > a:focus { color: inherit; text-decoration: none; } /* Der Zaehler fuer weitere Kategorien: gleiche Sprache, kein Kreis. */ .lf-item-container .listing-details .cat-icon.cat-more, .listing-preview .listing-details .cat-icon.cat-more { background: transparent !important; border: none !important; width: auto !important; min-width: 0 !important; height: auto !important; margin-left: 6px !important; padding: 0 !important; font-size: 12px; font-weight: 600; opacity: .55; } /* ═══ AIMF-ANPASSUNG #026 (S-25) — Slogan-Zeile der Karte aus ═══ */ .lf-item-container .listing-preview-title + h6, .listing-preview .listing-preview-title + h6 { display: none; } /* -------------------------------------------------------------------------- DER VERANSTALTER STEHT AN DER SLOGAN-STELLE — UND GEHOERT NICHT IN DIE REIHE -------------------------------------------------------------------------- EDDY 14.08.2026: „Was mir nicht gefaellt ist, dass wir den Veranstalter mit in diese Sortierung aufnehmen. Ich wuerde den hervorgehoben machen — vielleicht ohne Icon unter den Titel, da wo vorher der Slogan stand." Technisch bleibt er die erste Zeile der Angaben-Liste; weil die Slogan-Zeile darueber ausgeblendet ist, sitzt er ohnehin genau an deren Platz. Er wird nur nicht mehr wie eine Angabe behandelt: kein Icon, staerkerer Schnitt, etwas Luft nach unten — damit Datum, Ort und Preis sichtbar als eigene Gruppe darunter beginnen. 🛑 ERKANNT WIRD ER AN EINEM KENNZEICHEN IM LABEL, nicht an seiner Position. In der Karten-Konfiguration steht: [[.erster]] Ein `:first-child` waere bruechig: Sobald jemand eine Zeile davor einfuegt oder der Veranstalter fehlt, traefe die Hervorhebung das Datum. Dasselbe Muster wie `ml-fliesstext` (S-18) und `ml-kopf-neutral` (S-18, Karte). -------------------------------------------------------------------------- */ .lf-contact li:has(.ml-karte-veranstalter) { margin-bottom: 6px; } /* Kein Icon und keine Icon-Spur — der Text beginnt an der Titelkante. Die feste Spur aus S-22 muss dafuer ausdruecklich zurueckgenommen werden. */ .lf-contact li:has(.ml-karte-veranstalter) > i { display: none; } /* 🛑 SCHRIFT AM ELEMENT SELBST, NICHT AM LISTENPUNKT. Ein `font-size` am `li` wird hier nicht vererbt: Zwischen `li` und Text liegt ein Element mit eigener Groesse, und das gewinnt gegen die Vererbung von oben. Gemessen: Die Regel am `li` griff (das Icon verschwand), die Schrift blieb trotzdem bei 13px/400. Eine direkte Zuweisung am Textelement schlaegt jede Vererbung — unabhaengig vom Gewicht der Regeln darueber. */ .lf-contact li:has(.ml-karte-veranstalter) .ml-karte-veranstalter { padding-left: 0; font-size: 14px; font-style: italic; } /* 🛑 KURSIV STATT FETT — und das ist kein Geschmack, sondern eine Rangordnung. Fett und knapp unter der Titelgroesse las sich der Name wie ein zweiter, misslungener Titel (EDDY 14.08.2026: „einfach nur kleiner geschrieben wie der Titel und auch fett — das ist optisch nicht perfekt"). Zwei Ueberschriften uebereinander konkurrieren; eine Ueberschrift mit einer kursiven Zeile darunter nicht. Die Groesse bleibt bei 14 px: Der Veranstalter soll sich weiter von den Angaben darunter (13 px) abheben — nur eben durch Haltung, nicht durch Gewicht. */ /* ═══ AIMF-ANPASSUNG #028 (S-27) — Kartentitel: zwei Zeilen, feste Hoehe ═══ */ .lf-item-container .listing-preview-title, .listing-preview .listing-preview-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; /* Der Umbruch muss erlaubt bleiben — `nowrap` wuerde den Clamp aushebeln und wieder eine einzige Zeile erzwingen. */ white-space: normal; } /* Feste Hoehe von zwei Zeilen, auch wenn der Titel nur eine braucht. 🛑 Ohne das bleibt die Ursache halb behoben: Lange Titel sind zwar gekappt, aber ein einzeiliger Titel macht seine Karte weiterhin niedriger als die Nachbarkarte. Mit fester Hoehe beginnt auf ALLEN Karten der naechste Abschnitt an derselben Stelle. Der Wert ist keine gewaehlte Zahl, sondern die gemessene Zeilenhoehe des Titels (17,5 px) mal zwei. */ .lf-item-container .listing-preview-title, .listing-preview .listing-preview-title { min-height: 35px; } /* -------------------------------------------------------------------------- GROSSBUCHSTABEN — AM 15.08.2026 ZURUECKGENOMMEN -------------------------------------------------------------------------- Der Kartentitel stand vom 14. bis 15.08.2026 in Versalien (`text-transform: uppercase` plus 0,02 em Laufweite). EDDY hat es angesehen und wieder verworfen: „Eine Sache, die ich doch noch aendern wuerde: dass wir die Titel doch nicht in Grossbuchstaben schreiben, sondern ganz normal." **Die Regel ist entfernt, nicht auskommentiert** — toter Code lockt zum Wiedereinschalten. ⚠️ Was dadurch besser wird, ist messbar: Versalien brauchen mehr Platz. In denselben zwei Zeilen passt jetzt spuerbar mehr Text, das Abschneiden setzt spaeter ein. Beim Testtitel mit 140 Zeichen waren es in Versalien fuenf Zeilen statt vier — bei zwei sichtbaren also rund 40 Prozent des Textes. 🛑 WAS BLEIBT: die Zwei-Zeilen-Grenze und die feste Hoehe oben. Beide haengen NICHT an den Versalien, sondern an der Kartenhoehe — ohne sie machen kurze Titel ihre Karte niedriger als die Nachbarkarte. **Wenn irgendwann doch wieder Versalien gewuenscht sind:** ausschliesslich per `text-transform`, nie im gespeicherten Titel (Vorlesegeraete lesen sie teils Buchstabe fuer Buchstabe; der Titel wandert unveraendert in Teilen-Vorschau, Export, Browser-Tab und Suchergebnis). Und etwas Laufweite dazu, sonst wirken sie gedraengt. -------------------------------------------------------------------------- */ /* ═══ AIMF-ANPASSUNG #029 (S-18) — Absage rechts, Region links ═══ */ /* -------------------------------------------------------------------------- TEIL 2d — die Absage steht RECHTS, alles andere bleibt LINKS -------------------------------------------------------------------------- EDDY 14.08.2026: „Die Region soll immer oben links stehen, immer an derselben Stelle — und dann oben rechts, wenn es ausfaellt, ein Event." Zwei feste Plaetze statt einer Reihe. Wer viele Karten ueberfliegt, findet die Absage dann immer in derselben Ecke, statt sie hinter einer verschieden langen Angabe zu suchen. Und die neutrale Angabe links faengt an jeder Karte am selben Punkt an. 🛑 OHNE RECHTE KANTE GIBT ES NICHTS, WOGEGEN MAN SCHIEBEN KANN. Das Theme setzt `.lf-head { position:absolute; top:20px; left:20px }` — ohne `right` und ohne Breite. Der Container ist damit nur so breit wie sein Inhalt (gemessen: 229 px bei zwei Schaltflaechen), und `margin-left:auto` verpufft, weil in einem geschrumpften Flex-Container kein freier Raum entsteht. Erst die rechte Kante spannt ihn ueber die Karte auf. 🛑 UND AUFGESPANNT WIRD NUR, WO ES GEBRAUCHT WIRD. Der Kopf traegt `z-index: 4` und liegt damit ueber dem Titelbild. Ueber die volle Breite gezogen wuerde er den gesamten oberen Streifen der Karte abdecken und die Klicks abfangen, die sonst zum Eintrag fuehren — auf JEDER Karte, auch ohne Absage. Deshalb zwei Vorkehrungen: die Bedingung `:has(.ml-kopf-absage)` begrenzt den Eingriff auf abgesagte Termine, und `pointer-events` reicht die Klicks durch die aufgespannte Flaeche hindurch. Die Schaltflaechen selbst bleiben bedienbar. -------------------------------------------------------------------------- */ .lf-item-container .lf-head:has(.ml-kopf-absage), .listing-preview .lf-head:has(.ml-kopf-absage) { right: 20px; pointer-events: none; } .lf-item-container .lf-head:has(.ml-kopf-absage) .lf-head-btn, .listing-preview .lf-head:has(.ml-kopf-absage) .lf-head-btn { pointer-events: auto; } /* `order` statt Umbau der Reihenfolge im Markup: Die Absage steht dort VOR der neutralen Angabe, weil die Typ-Konfiguration sie zuerst ausgibt. Sie dort zu tauschen hiesse, die Konfiguration anzufassen — und die naechste Angabe, die jemand oben ergaenzt, waere wieder an der falschen Stelle. `order` sortiert nur die Anzeige: alles Neue bekommt von selbst den Standardplatz links, die Absage bleibt rechts. */ .lf-item-container .lf-head-btn:has(.ml-kopf-absage), .listing-preview .lf-head-btn:has(.ml-kopf-absage) { order: 2; margin-left: auto; } /* ═══ AIMF-ANPASSUNG #030 (S-22) — Online-Baustein: Plus fett, Zeichen grau ═══ */ /* -------------------------------------------------------------------------- ANGABEN IMMER SICHTBAR — kein Aufklappen beim Ueberfahren -------------------------------------------------------------------------- EDDY 15.08.2026: „Auf dem Smartphone werden die Details direkt angezeigt, auf dem Desktop erst per Mausover. Das muessen wir angleichen — der Mausover-Effekt soll deaktiviert werden." 🛑 DER UNTERSCHIED IST KEIN FEHLER, SONDERN EINE FOLGE: Das Theme schiebt den Inhaltsblock nach unten und faehrt ihn bei `:hover` hoch (`.lf-item-container:hover .lf-item-info-2 { transform: translateY(0) }`). **Auf Touch-Geraeten gibt es kein `:hover`** — dort bleibt die Regel aus und der Block steht von Anfang an oben. Das Smartphone zeigt also nicht „mehr", es zeigt den Zustand, den der Desktop erst nach dem Ueberfahren erreicht. ⚠️ Das Theme kennt den Zustand bereits ohne Hover — aber nur fuer Karten OHNE Angaben unter dem Titel (`.no-info-fields …`). Unsere Karten haben sechs davon, also greift bei ihnen ausschliesslich die Hover-Variante. Deshalb hier: der Zielzustand fuer ALLE Karten, unabhaengig von Zeigegeraet und Klassen-Kombination. ⚠️ `!important` noetig — die Theme-Regeln sind mit bis zu drei Klassen verkettet und wiegen schwerer als ein einfacher Selektor. -------------------------------------------------------------------------- */ .lf-item-container .lf-item-info-2, .listing-preview .lf-item-info-2 { transform: translateY(0) !important; } .lf-item-container .ml-karte-plus, .listing-preview .ml-karte-plus { /* Das Pluszeichen traegt die Aussage „beides" — fett und mit Luft auf beiden Seiten, damit es trennt statt anzukleben. */ font-weight: 700; margin: 0 7px; } .lf-item-container .ml-karte-online i, .listing-preview .ml-karte-online i { /* Farbe und Abstand exakt wie die uebrigen Zeilen-Icons — GEMESSEN, nicht geschaetzt: rgb(166,166,171) und 6 px zum Text. Ohne Angleichung stuende ein schwarzes Zeichen neben lauter grauen. */ color: rgb(166, 166, 171); margin-right: 6px; /* 🛑 HOEHEN-KORREKTUR, GEMESSEN — nicht geschaetzt (EDDY 15.08.2026: „das Icon vom Monitor scheint nicht auf derselben Hoehe zu sein wie das Icon vom Ort"). Er hatte recht: Der Monitor sass 2 px tiefer. URSACHE: Das Ort-Zeichen ist DIREKTES Kind der Zeile und wird vom Flex-Container mittig gesetzt (`align-items: center`). Der Monitor steckt in einem `` und ist damit KEIN Flex-Kind mehr — er folgt der Textausrichtung, und `vertical-align: middle` richtet an der halben x-Hoehe aus, nicht an der Zeilenmitte. Das sind zwei verschiedene Bezugslinien; sie treffen sich nur zufaellig. ⚠️ Der Wert haengt an den Groessen (17 px Zeichen, 13 px Text). Wer eine davon aendert, misst neu — Bezugslinie und Versatz verschieben sich mit. */ vertical-align: middle; position: relative; top: -2px; /* 🛑 EIN Pixel kleiner als die Nachbarn (17 statt 18) — EDDY 15.08.2026: „der Monitor war eigentlich schon perfekt, aber zu gross". Das ist KEINE Inkonsistenz, sondern derselbe Grund wie bei den Kalender-Links: Jedes Zeichen einer Icon-Schrift fuellt seinen Kasten unterschiedlich stark aus. Bei einer gemeinsamen Punktzahl wirkt das eine zu gross und das andere zu klein — gleich AUSSEHEN heisst deshalb manchmal ungleiche Werte (siehe Skill `individualisierungen`, Falle 3). ⚠️ Gilt nur fuer dieses Zeichen; die uebrigen bleiben bei 18 px. 🛑 `!important` ist hier noetig und nicht bequem: Eine Theme-Regel setzt `font-size: 18px` mit hoeherem Gewicht (sie arbeitet selbst mit `!important`). GEMESSEN — ohne die Verschaerfung blieb der berechnete Wert bei 18 px, obwohl die Regel im ausgelieferten CSS stand. */ font-size: 17px !important; } /* ========================================================================== AIMF-ANPASSUNG #033 (S-29): Details-Block, Beschriftung neben dem Wert, bei Fliesstext darueber Referenz-Fassung: PROJEKTE/_ALLGEMEIN/SNIPPETS/S-29-details-beschriftung.css Aenderungen dort zuerst. Dies ist die Kopie, nicht hier bearbeiten. ========================================================================== */ /* Beschriftung ueber den Wert, in jeder Zeile. */ #c27-single-listing .details-block-content .item-attr { display: block; margin-bottom: 2px; } /* Zeilen weiter auseinander, damit Beschriftung und Wert zusammengehoeren. Theme-Wert gemessen: 15px (Regel `.details-block-content > li`, Gewicht 0,1,1). Plus 25 Prozent macht 18,75px. Eigenes Gewicht (1,1,1) gewinnt. */ #c27-single-listing .details-block-content > li { margin-bottom: 18.75px; } /* ========================================================================== AIMF-ANPASSUNG #034: Social-Media-Icons im Veranstalter-Block (Snippet S-30) Referenz-Fassung: PROJEKTE/_ALLGEMEIN/SNIPPETS/S-30-social-icons-in-fremden-baustein.css Aenderungen dort zuerst. Dies ist die Kopie, nicht hier bearbeiten. ========================================================================== */ /* --------------------------------------------------------------------------- 1. Die Liste braucht eine FESTE Breite, sonst rechnen die Prozentwerte gegen eine mitwachsende Bezugsbreite (siehe Kopf). --------------------------------------------------------------------------- */ /* 🛑 Die Wurzel sitzt eine Ebene HOEHER, als man sucht: Die Zeile selbst ist ein Flex-Kasten, und ihr Textteil ist damit ein Flex-Element. Der schrumpft auf seinen Inhalt (gemessen 218 statt 525 Pixel), und jede Prozentangabe darunter rechnet gegen diese geschrumpfte Breite. Wer nur die Liste selbst auf 100 Prozent setzt, aendert nichts: 100 Prozent von 218 sind 218. */ .details-block-content li:has(.ml-social-inline) > .wp-editor-content { flex: 1 1 auto; width: 100%; min-width: 0; } .details-block-content .ml-social-inline, .details-block-content .ml-social-inline .listing-details { display: block; width: 100%; } /* Abstand zu den Kontaktzeilen darueber, minus 25 Prozent (EDDY 22.08.2026). Gemessen war die Luecke 21 px, und sie besteht aus ZWEI Teilen: 3 px bringt die letzte Kontaktzeile von unten mit, 18 px stehen hier. Ein Viertel weniger sind 15,75 px insgesamt, also bleiben hier 12,75. */ /* 🛑 NACHTRAG 28.08.2026: noch einmal 25 Prozent naeher an den Titel. EDDY: *„und 25 Prozent naeher am Titel des Veranstalters."* GERECHNET AUF DEN SICHTBAREN ABSTAND, nicht auf den Zwischenraum allein (Falle 12/19): Mitte zu Mitte waren es **41,9 px**. Ein Viertel weniger sind **31,4**. 🛑 DER ERSTE ANLAUF HAT DIE FALSCHE STELLSCHRAUBE ERWISCHT, und das gehoert hier hin: 12,75 auf 2,25 zu nehmen brachte nur bis 37,7. **Der groessere Teil des Abstands lag gar nicht in diesem margin**, sondern in 20 px Luft in der Namenszeile selbst - zweimal 10, gemessen: .wp-editor-content margin-top: 10px (Theme, UEBER dem Namen) .ml-vlist margin-bottom: 10px (UNTER der Liste) Beides sind Reste aus der Zeit der 40-px-Icon-Kachel. **Sie bleiben trotzdem stehen**, denn sie tragen zwei Faelle, die EDDY ausdruecklich behalten will: mehrere Veranstalter untereinander und die Kontaktzeilen im selben Block. Wer sie herausnimmt, zieht dort alles zusammen. Deshalb wird hier NEGATIV ausgeglichen, und der Wert ist gerechnet: Zwischenraum 15,7 minus die fehlenden 6,3 ergibt 9,4, also 2,25 - 6 = -3,75. ⚠️ Ein negativer Aussenabstand ist hier kein Kniff, sondern die einzige Stelle, die NUR diese eine Reihe bewegt. */ .details-block-content .ml-social-inline { margin-top: -3.75px; } .details-block-content .ml-social-inline ul { display: flex; flex-wrap: wrap; width: 100%; margin: 0; padding: 0; } .details-block-content .ml-social-inline li { list-style: none; float: none; width: 33.3%; margin: 0 0 10px 0; } /* Unter 1200 px zwei nebeneinander, genau wie beim eigenen Baustein. Muss HINTER der Basis-Regel stehen: bei gleichem Gewicht gewinnt die spaetere. */ @media (max-width: 1200px) { .details-block-content .ml-social-inline li { width: 50%; } } /* --------------------------------------------------------------------------- 2. Icon und Name auf eine Zeile, und zwar auf DERSELBEN Linie wie die Kontaktzeilen desselben Bausteins. --------------------------------------------------------------------------- */ /* Der Link ist von Haus aus inline und die Icon-Kachel ein Flex-Kasten, dadurch rutscht der Name unter das Icon. */ .details-block-content .ml-social-inline li a, .details-block-content .ml-social-inline li .terms-no-link { display: flex; align-items: center; } /* 40 Pixel Kasten und 15 Pixel Abstand sind die Werte der Kontaktzeilen darueber, nicht selbst gewaehlte. Damit beginnt der Netzwerkname exakt dort, wo Ansprechpartner und Adresse beginnen. Ohne die 15 sind es 10, und der Name steht 5 Pixel zu weit links (so gemessen am 22.08.2026). */ .details-block-content .ml-social-inline .cat-icon { width: 40px; height: 40px; min-width: 40px; font-size: 18px; margin-right: 15px; } /* --------------------------------------------------------------------------- 3. Fassung `zeichen`: die Farbe traegt das ZEICHEN, nicht die Flaeche. Sie wirkt dadurch so ruhig wie die Kontaktzeilen daneben, bleibt aber an der Netzwerkfarbe erkennbar. --------------------------------------------------------------------------- */ /* Die Farbe haengt der Kurzbefehl von `background-color` auf `color` um. Hier faellt nur noch die Flaeche weg. `!important`, weil eine Inline-Angabe sonst jede Regel schlaegt. */ .details-block-content .ml-social-zeichen .cat-icon { background: none !important; } /* 🛑 Und das Zeichen muss die Farbe ausdruecklich ERBEN. Das Theme faerbt es fuer die farbige Kachel weiss (`.cat-icon i {color: #fff}`), und eine direkte Zuweisung schlaegt jede Vererbung. Ohne diese Zeile steht das Zeichen weiss auf weiss und ist schlicht unsichtbar, ohne dass irgendetwas fehlt oder falsch aussieht. Genau so gemessen am 22.08.2026. */ .details-block-content .ml-social-zeichen .cat-icon i { color: inherit; } /* Ohne Flaeche wirken die Zeichen zu gross. EDDY am 22.08.2026: 25 Prozent kleiner. Die Ausgangswerte sind gemessen, nicht geschaetzt: das Theme setzt `.cat-icon i {font-size: 20px}`, die Zeichnung des X ist 18 Pixel breit. 🛑 Der 40-Pixel-Kasten bleibt unveraendert. Er traegt die Ausrichtung: Nur solange er 40 breit ist, beginnen die Namen auf derselben Linie wie die Kontaktzeilen darueber. Wer den Kasten mitschrumpft, zieht die ganze Spalte nach links. */ /* 🛑 NACHTRAG 28.08.2026: plus 25 Prozent, also 15 auf 18,75. EDDY: *„Die Social-Media-Icons haette ich gerne 25 Prozent groesser."* Das ist die Ruecknahme der 25 Prozent vom 22.08. (siehe oben) - kein Widerspruch, sondern derselbe Wert noch einmal beurteilt, nachdem die Flaeche und der Versatz drumherum gefallen sind. Ohne Kachel und ohne Einrueckung stehen die Zeichen frei, und frei stehend wirken sie kleiner. ⚠️ Die Kachel bleibt 20 px hoch; 18,75 passt hinein, die Zeile waechst nicht. */ .details-block-content .ml-social-zeichen .cat-icon i { font-size: 18.75px; } /* Reihenabstand halbieren (EDDY 22.08.2026): Mitte zu Mitte von 50 auf 25 px. 🛑 Der grosse Teil davon war NICHT der Zwischenraum, sondern die unsichtbare Kachel: 40 px Zeilenhoehe gegen 10 px Zwischenraum. Wer nur am Zwischenraum dreht, aendert 13 Prozent des Ganzen und sieht keinen Unterschied. Deshalb sinken alle drei Anteile zusammen: Kachelhoehe 40 auf 20, Zeilenhoehe 26 auf 20, Zwischenraum 10 auf 5. ⚠️ Nur die HOEHE der Kachel sinkt. Die Breite bleibt bei 40, sie traegt die Ausrichtung der Namen. Und dies gilt nur fuer die flaechenlose Fassung; in `farbig` ist die Kachel ein Kreis und braucht ihre 40 in beide Richtungen. */ .details-block-content .ml-social-zeichen .cat-icon { height: 20px; } .details-block-content .ml-social-zeichen li { line-height: 20px; margin-bottom: 5px; } /* Der Plattformname entfaellt (EDDY 22.08.2026: „Eigentlich sind ja die Icons aussagekraeftig, also muessen wir den Namen der Plattform gar nicht hinschreiben"). Er bleibt im Markup und damit fuer Vorlese-Programme erreichbar, er ist nur nicht mehr zu sehen. `display: none` waere hier falsch: dann waere das Icon fuer einen blinden Besucher ein Link ohne jede Beschriftung. */ .details-block-content .ml-social-zeichen .category-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Ohne Text braucht die Zeile keine Spalten mehr, die Zeichen stehen in einer Reihe. 🛑 DER VOLLE PFAD IST HIER PFLICHT, und das ist der teuerste Fund dieses Snippets. Das Theme hat DREI Breiten-Regeln fuer dieselben Zeilen, und nur ZWEI davon verlangen ein direktes Kind von `.pf-body`: frontend.css `.element .pf-body > .listing-details li` 33,3 % max-width-1200.css `.element .pf-body > .listing-details li` 50 % single-listing.css `#c27-single-listing .element .pf-body .listing-details li` 50 %, in `only screen and (max-width: 600px)` Die dritte hat **kein `>`** und greift deshalb auch in unserer verschachtelten Liste, mit dem Gewicht (1 ID, 3 Klassen, 1 Element). Eine Regel mit `.details-block-content .ml-social-zeichen li` (0,2,1) verliert dagegen, egal wie spaet sie steht. ⚠️ Und das faellt am Rechner NICHT auf: Bis 600 px ist sie inaktiv, dort sah alles richtig aus. Erst am Smartphone standen die Zeichen weit auseinander. Wer nur eine Fensterbreite prueft, sieht diese Klasse von Fehlern nie. */ #c27-single-listing .element .pf-body .details-block-content .ml-social-zeichen li { width: auto; } /* Die Reihe beginnt auf der TEXT-Linie der Kontaktzeilen, nicht unter deren Zeichen (EDDY 22.08.2026: „nicht dass das Facebook-F unter dem ersten Icon ist, sondern dort wo der Begriff startet, zum Beispiel die Telefonnummer"). `padding` statt `margin`, weil die Huelle auf 100 Prozent Breite steht und ein Aussenabstand sie nach rechts hinausschieben wuerde. 🛑 DIESE REGEL IST EIN AUSGLEICH, UND SIE HAENGT AN ZWEI VORAUSSETZUNGEN. Beide sind am 28.08.2026 gefallen, und beide Male hat es zuerst niemand gemerkt (Skill `individualisierungen`, Falle 11): 1. **Haben die Zeilen darueber ueberhaupt ein Zeichen?** Der Ausgleich war fuer eine Icon-Spur gerechnet. Nimmt man das Zeichen aus der Veranstalter-Zeile, ruecken deren Text und die Reihe hier auseinander - der Ausgleich wird selbst zum Fehler. EDDY 28.08.2026: *„Die Social Media Icons muessen auf derselben Hoehe anfangen wie der Titel vom Veranstalter. Im Endeffekt rueckt ja jetzt alles nach links und ist linksbuendig."* ➜ Deshalb steht `li:has(> i) ~ li` davor: **kein Zeichen, kein Ausgleich.** Kommt spaeter wieder eines dazu (mehrere Veranstalter, eigene Inseratstypen), greift die Regel von selbst wieder. 2. **Wie BREIT ist diese Spur?** Sie war 40 + 15 = 55. Seit S-61 die graue Flaeche aus dem `details`-Block nimmt, ist sie 18 + 15 = 33. **Die 55 waren damit schon falsch, bevor jemand hingesehen hat** - eine fest eingetragene Zahl altert still. ➜ Deshalb `var(--ml-icon-spur)`. S-61 setzt die Groesse dort, wo die Spur entsteht. Der Rueckfallwert 55 gilt fuer Plattformen ohne S-61, also mit der 40er-Kachel des Themes. ⚠️ Zwei `:has()` NEBENEINANDER sind gueltig, zwei INEINANDER nicht (Falle 6). Hier steht nur eines je Selektor. */ .details-block-content > li:has(> i) ~ li .ml-social-zeichen { padding-left: var(--ml-icon-spur, 55px); } /* 🛑 Und dafuer muss die Kachel ihre feste Breite abgeben. Mit einer 40er Spur staende das Zeichen darin zentriert, also je nach Netzwerk unterschiedlich weit von der Kante: Facebook ist 9,4 Pixel breit, YouTube 16,9. Auf der Linie beginnt das erste Zeichen nur dann verlaesslich, wenn die Kachel so breit ist wie ihr Zeichen. Der Abstand zwischen den Zeichen kommt weiter aus `margin-right`. */ .details-block-content .ml-social-zeichen .cat-icon { width: auto; min-width: 0; } /* 🛑 Und der Kreis-Zuschnitt muss weg, sonst BESCHNEIDET er das Zeichen. Das Theme gibt jeder Kachel `border-radius: 50%` und `overflow: hidden`. Solange sie 40 x 40 gross ist, formt das den runden Hintergrund. Ohne Flaeche und mit einer Breite, die dem Zeichen folgt, wird daraus eine schmale Ellipse ueber dem Zeichen selbst, und sie schneidet ihm die vier Ecken ab. Gemessen: Kasten 9,4 px breit, Zeichen darin 12,5 px. ⚠️ Das sieht nicht nach einem Zuschnitt aus, sondern nach einem unsauberen Icon. EDDY hat es als „eine Art Rand, ein Kreis der drumherum geht und teilweise abschneidet" beschrieben, und genau so wirkt es. */ .details-block-content .ml-social-zeichen .cat-icon { border-radius: 0; overflow: visible; } /* Abstand zwischen den Zeichen, plus 25 Prozent (EDDY 22.08.2026). 15 war der Wert der Kontaktzeilen, hier sind es jetzt 18,75. */ .details-block-content .ml-social-zeichen .cat-icon { margin-right: 18.75px; } /* Und in der einspaltigen Ansicht noch einmal ein Viertel mehr, also 23,44 statt 18,75 (EDDY 22.08.2026: „nur mobil müsste noch 25 Prozent mehr Abstand"). 🛑 Die Grenze ist NICHT gewaehlt, sondern gemessen: Bei 992 px ist die Spalte noch 485 px breit, bei 769 px schon 750, die Seite faellt also unter 992 einspaltig. Das Theme setzt seine eigene Grenze an derselben Stelle (`max-width-992.css`). Eine eigene Zahl daneben wuerde beim naechsten Theme-Update auseinanderlaufen. ⚠️ Muss HINTER der Regel darueber stehen: gleicher Selektor, gleiches Gewicht, also entscheidet allein die Reihenfolge. */ @media (max-width: 991px) { .details-block-content .ml-social-zeichen .cat-icon { margin-right: 23.44px; } } /* Das Gegenstueck fuer die Zeichnung steht am DATEIENDE, nicht hier. Es muss hinter der Groessenangabe aus Abschnitt 4 stehen: gleiches Gewicht, und bei gleichem Gewicht gewinnt die spaetere Regel. Hier platziert blieb das X unveraendert bei 18 Pixeln, waehrend alle Schriftzeichen schrumpften. */ /* --------------------------------------------------------------------------- 4. Das X ist als einziges kein Schriftzeichen, sondern eine Zeichnung. --------------------------------------------------------------------------- */ /* Als Inline-Element sitzt es auf der Textlinie statt in der Mitte: gemessen 8 Pixel Luft oben gegen 14 unten. Und ohne `currentColor` nimmt es die Farbe nicht an, die der Kurzbefehl gesetzt hat. */ .details-block-content .ml-social-inline .svg-icon { display: flex; align-items: center; justify-content: center; line-height: 0; } .details-block-content .ml-social-inline .svg-icon svg { display: block; width: 18px; height: 18px; fill: currentColor; } /* Und hier, ganz am Ende, die 25 Prozent fuer die Zeichnung. Gleiches Gewicht wie die Regel darueber, deshalb entscheidet allein die Reihenfolge. */ /* Und dieselben 25 Prozent fuer die Zeichnung, 13,5 auf 16,875 - sonst faellt das X als einziges Zeichen aus der Reihe (28.08.2026). */ .details-block-content .ml-social-zeichen .svg-icon svg { width: 16.875px; height: 16.875px; } /* ========================================================================== AIMF-ANPASSUNG #035 — E-Mail-Adressen ohne Unterstreichung (Snippet S-03) Referenz-Fassung: PROJEKTE/_ALLGEMEIN/SNIPPETS/S-03-links-erkennbar.css Aenderungen dort zuerst. Dies ist die Kopie, nicht hier bearbeiten. ========================================================================== */ /* -------------------------------------------------------------------------- ERGAENZUNG 22.08.2026: E-MAIL-ADRESSEN werden NICHT unterstrichen -------------------------------------------------------------------------- EDDY: „Bei der E-Mail-Adresse, egal wo sie eingebunden ist, nicht unterstreichen. Wenn man mit der Maus drueber geht, kann sie gerne rot einfaerben." Der Anmeldelink bleibt ausdruecklich unterstrichen („zur Anmeldung lassen wir unterstrichen"). Der Unterschied zwischen beiden ist der Grund: Ein Linktext wie „zur Anmeldung" sieht ohne Unterstreichung nicht nach Link aus, genau dafuer gibt es dieses Snippet. Eine E-Mail-Adresse ist an ihrer Form erkennbar; dort macht die Unterstreichung die lange Zeichenkette nur unruhig. 🛑 Und der Grund, es HIER festzuhalten statt es nur zu beheben: EDDY musste es mehrfach sagen („du machst das immer wieder neu"). Eine Suche am 22.08.2026 fand die Regel WEDER in den Snippets NOCH im Register NOCH in den Entscheidungen. **Was nirgends steht, kommt wieder.** Die Farbe kommt aus `--accent`, nicht als fester Wert: Dann stimmt sie auf jeder Plattform, ohne dass jemand sie nachzieht. -------------------------------------------------------------------------- */ #c27-single-listing .details-block-content .wp-editor-content a[href^="mailto:"], #c27-single-listing .extra-details .item-property a[href^="mailto:"] { text-decoration: none; } #c27-single-listing .details-block-content .wp-editor-content a[href^="mailto:"]:hover, #c27-single-listing .extra-details .item-property a[href^="mailto:"]:hover { text-decoration: none; color: var(--accent); } /* ========================================================================== AIMF-ANPASSUNG #036: Kalender-Zeichen im Termine-Baustein kleiner (Snippet S-01) Referenz-Fassung: PROJEKTE/_ALLGEMEIN/SNIPPETS/S-01-termin-darstellung.css (nur TEIL C) Aenderungen dort zuerst. Dies ist die Kopie, nicht hier bearbeiten. ========================================================================== */ /* ---- TEIL C: Das grosse Kalender-Zeichen vor jedem Termin, zweimal verkleinert EDDY 22.08.2026, zuerst: „Ich habe bei jedem Termin vorne dran ein Kalender-Zeichen. Den koennte man 25 Prozent reduzieren." Am selben Tag, nach dem Ansehen: „du kannst es kleiner machen, nochmal 25 Prozent, das war doch die Idee." Gemessen waren es 28 px, ein Viertel weniger sind 21, davon nochmal ein Viertel sind **15,75**. Es ist NICHT dasselbe Zeichen wie in TEIL B: Das hier steht als Marke an der Zeitleiste links vor dem Termin, jenes sitzt in den beiden Kalender-Links darunter. 🛑 Dazwischen lag eine Verwechslung, die zwei Runden gekostet hat: Auf die Frage, ob das Zeichen „normal statt bold" ginge, habe ich gemessen und geantwortet, seine Strichstaerke gehoere zur ZEICHNUNG des Symbols und reagiere nicht auf `font-weight` (der Zeichensatz setzt selbst 400). Das stimmt. Seine Antwort „wir lassen das Kalendersymbol" hiess aber nur: kein anderes Symbol waehlen. **Die GROESSE war damit nicht gemeint.** Wer eine solche Antwort bekommt, fragt nach, worauf sich das „lassen" bezieht. ⚠️ Die Breite der Spur bleibt unangetastet. Sie kommt vom Theme und haelt die Zeitleiste und die Termin-Texte in ihrer Flucht; ein kleineres Zeichen ruecke dort sonst die ganze Spalte zusammen. Es wird also nur das ZEICHEN kleiner, nicht sein Platz. */ #c27-single-listing .event-dates-timeline li > i { font-size: 15.75px; } /* ========================================================================== AIMF-ANPASSUNG #037: Kopf-Buttons auf dem Desktop flacher (42 auf 36 px) (Snippet S-31) Referenz-Fassung: PROJEKTE/_ALLGEMEIN/SNIPPETS/S-31-buttons-flacher-desktop.css Aenderungen dort zuerst. Dies ist die Kopie, nicht hier bearbeiten. ========================================================================== */ /* -------------------------------------------------------------------------- S-31: Kopf-Buttons der Detailseite auf dem Desktop flacher -------------------------------------------------------------------------- EDDY 22.08.2026, zuerst: "Diese Buttons auf Desktop in der Hoehe um 25 Prozent reduzieren. Mobil passt es, mobil sollen sie so bleiben." Nach dem Ansehen auf Staging, am selben Tag: "Jetzt sind sie zu flach von der Hoehe. Vorher waren sie zu hoch. Jetzt braeuchten wir so einen Mittelwert." Deshalb steht hier die MITTE zwischen beiden, nicht die urspruengliche Rechnung. Gemeint ist die Button-Leiste im Kopfbereich (Direktnachricht senden, zur Webseite, E-Mail senden, anrufen, teilen, merken), also S-07 und S-05. NICHT gemeint ist der farbige Haupt-Button daneben (.lmb-calltoaction), der bleibt bei seinen 48 px. WORAUS DIE HOEHE ENTSTEHT (gemessen 22.08.2026 an allen fuenf Plattformen, berechnete Browser-Werte, Desktop 1440 und Handy 390) 42 px = padding 10 + Zeilenhoehe 20 + padding 10 + Rahmen 1 + 1 Ueberall identisch, box-sizing ist border-box. Es gibt KEINE `height`-Regel. 🛑 Ein `height: 31.5px` waere deshalb der falsche Griff: Der Inhalt braucht seine 20 px, die Polsterung 20 weitere, und der Kasten wuerde entweder ueberlaufen oder den Text quetschen. Reduziert wird, was die Hoehe MACHT. DIE RECHNUNG zu hoch Theme-Stand 42 px zu flach erster Versuch, minus 25 % 31,5 px Mitte (42 + 31,5) / 2 36,75 px (Stand 22.08. bis 25.08.2026) jetzt einheitliche Button-Hoehe 36 px Polster (36 - 20 - 2) / 2 7 px je Seite 🛑 DIE ZAHL IST EIN URTEIL, KEINE MESSUNG. Sie kommt aus angesehenen Zustaenden, nicht aus einer Regel. Wer sie spaeter aendern will, aendert sie HIER und rollt neu aus, statt sie auf einer Plattform zu ueberschreiben. AENDERUNG 25.08.2026: 36,75 auf 36 px, im Zuge der Vereinheitlichung aller Button-Hoehen (Snippet S-49). EDDY hatte sich die gemessenen Hoehen aller Buttons zeigen lassen und dann entschieden: "Kannst du das mal auch auf 36 Pixel aendern, dann ist es ueberall gleich." 🛑 Der Unterschied betraegt 0,75 px und ist mit blossem Auge nicht zu sehen. Geaendert wurde er trotzdem, weil "ueberall gleich" sonst nicht stimmt: Eine Zahl, die um Bruchteile abweicht, laedt den Naechsten dazu ein, sie fuer gewollt zu halten und die naechste Abweichung danebenzustellen. ⚠️ ZUM VERTEILUNGSSTAND: Am 25.08.2026 ist der neue Wert NUR auf AIMF ausgerollt, die uebrigen fuenf Plattformen tragen weiter 7,375 px. Das ist eine bewusste, vorlaeufige Abweichung nach Entscheid 410 (optische Aenderungen erst auf EINER Plattform zeigen). Wer nachzieht, prueft dort auch S-49 mit, sonst passt die Leiste zwar zu sich selbst, aber nicht zu den uebrigen Buttons derselben Seite. Links und rechts bleiben die 15 px des Themes stehen. Es geht um die Hoehe, nicht um die Breite, deshalb nur `padding-top` und `padding-bottom` und nicht die Kurzform `padding`. WARUM 769 UND NICHT 768 S-11 fasst "mobil" als `max-width: 768px`. Bei genau 768 px gaelten sonst beide Regeln, und der Desktop-Wert wuerde dort greifen, wo das Theme noch mobil denkt. 768 ist der zweithaeufigste Umbruchpunkt im Theme-CSS, kein selbst erfundener Wert. BEWUSST OHNE !important: Die Theme-Regel `.quick-listing-actions > ul > li > a` wiegt (0 IDs, 1 Klasse, 3 Elemente), diese hier wiegt gleich viel und wird spaeter geladen. Innerhalb einer Media-Query bleibt das so. -------------------------------------------------------------------------- */ @media only screen and (min-width: 769px) { .quick-listing-actions > ul > li > a { padding-top: 7px; padding-bottom: 7px; } } /* === AIMF-ANPASSUNG #038: Kopfangaben rechts bleiben unten in der Zeile (Snippet S-32) === */ @media only screen and (min-width: 1201px) { body.single-listing .profile-cover-image .listing-main-info { display: flex; align-items: flex-end; } } /* === AIMF-ANPASSUNG #039: Abschnitt weitere Events: Titel fett, Ueberschrift kleiner (Snippet S-33) === */ /* A: Kartentitel auf Inseratsseiten fett, unabhaengig vom Elementor-Kit */ body.single-listing .listing-preview-title { font-weight: 600 !important; } /* B: Ueberschrift des Abschnitts kleiner */ body.single-listing .similar-listings .section-title h2 { font-size: 18px; } /* ========================================================================== AIMF-ANPASSUNG #040: Zeitleiste im Termine-Baustein zarter (Snippet S-34) Referenz-Fassung: PROJEKTE/_ALLGEMEIN/SNIPPETS/S-34-zeitleiste-zarter.css Aenderungen dort zuerst. Dies ist die Kopie, nicht hier bearbeiten. ========================================================================== */ #c27-single-listing .event-dates-timeline li { border-left-width: 1.5px; } #c27-single-listing .event-dates-timeline li:before { border-width: 1.5px; width: 11.25px; height: 11.25px; left: -6.125px; } /* ---- TEIL B: die Schaltflaechen je Termin weniger wuchtig * * EDDY 22.08.2026: "Diese Buttons koennte man von der Hoehe noch ein bisschen * entschaerfen, dass man sagt: nochmal 15 Prozent oben, unten, links und * rechts, dass man sozusagen den grauen Bereich reduziert. Dann waere das * vielleicht nicht so wuchtig." * * Gemessen waren 10 px senkrecht und 15 px waagerecht, ein Sechstel weniger * sind 8,5 und 12,75. Der graue Hintergrund bleibt ausdruecklich: "damit man * sieht, dass es Buttons sind." * * ⚠️ EINE REIHE WIRD DARAUS TROTZDEM NICHT, und das ist gemessen statt * vermutet: Die drei brauchen zusammen **526,8 px**, die Zeile bietet **465**. * **Es fehlen 61,8 px.** Auch die kuerzere Statusbezeichnung ("geplant" statt * "kommt noch") hat daran nichts geaendert. * * Der einzige nennenswerte Hebel ist der laengste Text: "in Google Kalender * eintragen" braucht allein **227,6 px**. Kuerzer, etwa "Google Kalender", * wuerde reichen. Das ist eine Uebersetzungsfrage, keine CSS-Frage, und * gehoert entschieden statt gebaut. */ #c27-single-listing .event-dates-timeline li a { padding: 8.5px 12.75px; } /* === AIMF-ANPASSUNG #041: Slogan bricht um statt abgeschnitten zu werden (Snippet S-35) === */ body.single-listing .profile-name h2 { white-space: normal; text-overflow: clip; } /* ========================================================================== AIMF-ANPASSUNG #042: Absage-Hinweis flach, angeglichen, plus Ausblendungen (Snippet S-36) Referenz-Fassung: PROJEKTE/_ALLGEMEIN/SNIPPETS/S-36-absage-flach.css Aenderungen dort zuerst. Dies ist die Kopie, nicht hier bearbeiten. ========================================================================== */ #c27-single-listing .ml-absage .element { padding-top: 0; padding-bottom: 0; } #c27-single-listing .ml-absage .pf-body { padding-top: 0; padding-bottom: 0; } /* 🛑 DIE ZENTRIERUNG BRAUCHTE ZWEI ANLAEUFE, UND DER ERSTE SAH RICHTIG AUS. * Nach Anlauf 1 wirkte der Text auf dem Bild mittig. Er war es nicht: * waagerecht 19 px zu weit rechts, senkrecht 5 px zu hoch. Der Auftraggeber * sah es sofort, ich hatte es nur angesehen statt nachgemessen. * * DREI URSACHEN, alle gemessen: * 1. Ein UNSICHTBARES Warndreieck (`icon-alert-triangle`, 40 px breit) steht * vor dem Text. Zentriert wird Icon PLUS Text, sichtbar ist nur der Text, * und der sitzt dadurch 19 px rechts der Mitte. * 2. Der Hinweis war 286 statt 296 px breit und lag links an: 5 px Versatz. * 3. Er trug 10 px Abstand nach unten und lag damit 5 px zu hoch. * * ⚠️ Ein Element, das nichts anzeigt, aber Platz nimmt, ist beim Zentrieren * der haeufigste unsichtbare Stoerer. Vor jeder Zentrierung fragen: **Was * steht noch in diesem Kasten, das ich nicht sehe?** */ #c27-single-listing .ml-absage li a i { display: none; } #c27-single-listing .ml-absage .pf-body { display: flex; align-items: center; min-height: 36.75px; } #c27-single-listing .ml-absage ul { justify-content: center; width: 100%; margin: 0; } #c27-single-listing .ml-absage li { width: 100%; } #c27-single-listing .ml-absage li a { height: 36.75px; width: 100%; justify-content: center; margin-bottom: 0; } /* ---- TEIL B: der Block sieht aus wie die anderen, nur rot * * EDDY 22.08.2026, nach dem ersten Blick am Handy: "Der Block entspricht auch * nicht den Bloecken, die die anderen Bereiche haben. Irgendwie ist der ein * bisschen hervorgehoben oder kleiner, ich weiss es nicht, ich kann es nicht * beurteilen." * * Er sah es und konnte es nicht benennen. Gemessen sind es genau zwei Werte: * * | | Absage vorher | andere Bloecke | * | Rundung | 6 px | 5 px | * | Schatten | rot, 2/10 px | grau 7 %, 1/4 | * * Position, Breite, Abstand und Polsterung stimmten bereits ueberein. **Der * kraeftige rote Schatten war das "hervorgehoben".** * * 🛑 Die Farbe bleibt rot. Angeglichen werden nur Rundung und Schatten, damit * der Block in der Reihe steht statt aus ihr herauszuspringen. * * ⚠️ Uebertragbar: Wenn jemand sagt, etwas "passt nicht" und es nicht benennen * kann, hilft kein Raten, sondern ein Vergleich der berechneten Werte * nebeneinander. Zwei Zahlen haben hier die ganze Frage beantwortet. */ #c27-single-listing .ml-absage .element { border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.07) 0 1px 4px 0; } /* ---- TEIL C: was bei einer Absage VERSCHWINDET * * EDDY 22.08.2026: "Wenn doch ein Termin abgesagt ist, braucht man ja * eigentlich auch keinen Anmeldelink. Also muesste man den Anmeldelink * ausblenden im Header, den Preis ausblenden im Header, und auch bei den * oberen Buttons den zur-Anmeldung-Button ausblenden. Aber auf der * Detailseite wuerde ich den Anmeldelink und den Preis stehen lassen." * * 🛑 Die Trennung ist wichtig und leicht falsch zu verstehen: Ausgeblendet * wird nur, was zum HANDELN auffordert (anmelden, bezahlen). Die ANGABEN * weiter unten auf der Seite bleiben vollstaendig, sie gehoeren zur * Dokumentation der Veranstaltung. * * ⚠️ Der Termin im Kopf bleibt ebenfalls. Er sagt, WAS ausfaellt, und ist * bereits durchgestrichen (S-18). * * Angesprochen wird der Knopf in der Leiste ueber sein ICON, nicht ueber seine * Position: Die Reihenfolge der Leiste steht in der Typ-Konfiguration und kann * sich aendern, das Icon der Anmelde-Aktion nicht. */ body:has(.ml-absage) #c27-single-listing .listing-main-buttons li.ml-kopf-number, body:has(.ml-absage) #c27-single-listing .listing-main-buttons li.lmb-calltoaction { display: none; } body:has(.ml-absage) #c27-single-listing .quick-listing-actions li:has(i.icon-file-tasks-checklist) { display: none; } /* 🛑 UND DIE FOLGE DES AUSBLENDENS, DIE ICH BEIM ERSTEN MAL NICHT GEPRUEFT HABE. * Der Anmelde-Knopf war der ERSTE der Leiste und brachte 10 px Luft nach links * mit. Ohne ihn klebte der naechste Knopf am Bildschirmrand. Der Auftraggeber * hat es gesehen und dazu gesagt: "Wenn du so was machst, moechte ich, dass du * pruefst und mitbewertest." * * **Wer ein Element ausblendet, prueft, was es fuer die Nachbarn getragen hat: * Abstand, Ausrichtung, Umbruch, Reihenfolge.** `display: none` nimmt nicht nur * das Element weg, sondern auch alles, was an seiner Position hing. */ /* ⚠️ Der Ausgleich haengt am NACHFOLGER des ausgeblendeten Knopfs (`+ li`), * nicht am Kasten der Leiste. Zwei Gruende, beide gemessen: * 1. Hat ein Eintrag gar keinen Anmeldelink, gibt es den Knopf nie. Ein * Ausgleich am Kasten haette dort 10 px ZU VIEL erzeugt. * 2. Die Leiste ist verschachtelt (`.quick-listing-actions > ul > li > a`); * ein Innenabstand am aeusseren Kasten addierte sich zum vorhandenen und * ergab 20 statt 10 px. * **Ein Ausgleich fuer etwas Fehlendes gehoert an die Stelle, die das * Fehlende gefuellt haette, nicht an den Rahmen darum.** */ body:has(.ml-absage) #c27-single-listing .quick-listing-actions li:has(i.icon-file-tasks-checklist) + li a { margin-left: 10px; } /* === AIMF-ANPASSUNG #043: Titel im Kopfbereich ein Viertel kleiner (Snippet S-37) === */ body.single-listing .profile-name h1 { font-size: 24px; } @media only screen and (max-width: 1200px) { body.single-listing .profile-name h1 { font-size: 22.5px; } } @media only screen and (max-width: 768px) { body.single-listing .profile-name h1 { font-size: 19.5px; } } /* ========================================================================== AIMF-ANPASSUNG #044: Bildausschnitt Karte plus Kopfhoehe mittlere Monitore (Snippet S-38) — 2. Runde 12.09.2026: Karte 100 % statt 130 % Referenz-Fassung: PROJEKTE/_ALLGEMEIN/SNIPPETS/S-38-bildausschnitt-kopf-und-karte.css Aenderungen dort zuerst. Dies ist die Kopie, nicht hier bearbeiten. ========================================================================== */ /* Vorschaukarte: Suche, Startseite und "weitere Events" unter einem Eintrag */ .lf-item-container .lf-background, .listing-preview .lf-background { background-size: auto 100%; background-position: 50% 100%; } /* Kopfbereich auf mittleren Monitoren: ein Viertel hoeher */ @media only screen and (min-width: 993px) and (max-width: 1399px) { body.single-listing .profile-cover-image { padding-bottom: 25% !important; } } /* Smartphone: der Kasten hat dort fast dasselbe Verhaeltnis wie das Bild, es gibt also keinen senkrechten Spielraum. Vergroessern und oben buendig setzen laesst den Inhalt tiefer sitzen. 🛑 `overflow: hidden` ist hier KEINE Zugabe, sondern Bedingung. Ohne die Zeile ragt das vergroesserte Bild unten aus seinem Rahmen und legt sich ueber den Text darunter: gemessen 224 px Bildhoehe gegen einen Textblock, der bei 195 px beginnt. Bei einem dreizeiligen Titel verschwindet dessen erste Zeile dahinter. Genau so ausgeliefert am 23.08.2026, gefunden hat es der Auftraggeber. WER EIN ELEMENT VERGROESSERT, PRUEFT SEINEN RAHMEN. */ @media only screen and (max-width: 768px) { body.single-listing .profile-cover-image { overflow: hidden; } body.single-listing .profile-cover-image img { height: 115% !important; object-position: 50% 0 !important; } } /* === AIMF-ANPASSUNG #045: Kartentitel reserviert keine zweite Zeile (Snippet S-41) === */ .listing-preview .listing-preview-title, .lf-item-container .listing-preview-title { min-height: 0; } /* === AIMF-ANPASSUNG #046: Kachelhoehe je Ort, Suche hoeher und Detailseite niedriger (Snippet S-40) === */ body .finder-listings .lf-type-2 .lf-item { height: 253px; } body.single-listing .similar-listings .lf-type-2 .lf-item { height: 225px; } /* ========================================================================== AIMF-ANPASSUNG #049: Kopfbereich flacher, die zwei Symbole gleich gross und gleich dunkel (Snippet S-43) Referenz-Fassung: PROJEKTE/_ALLGEMEIN/SNIPPETS/S-43-kopfbereich-flacher-symbole-gleich.css Aenderungen dort zuerst. Dies ist die Kopie, nicht hier bearbeiten. ========================================================================== */ /* ---------- 1. Hoehe der weissen Flaeche ---------- */ /* Desktop: 5 px oben und 5 px unten weg */ .c27-main-header.header.header-style-default { height: 79px !important; } /* Mittelfeld: dieselben 10 px wie der Desktop, sonst kippt die Abstufung */ @media only screen and (max-width: 1200px) { .c27-main-header.header.header-style-default { height: 70px !important; } } /* Smartphone: 2 px oben und 2 px unten */ @media only screen and (max-width: 480px) { .c27-main-header.header.header-style-default { height: 56px !important; } } /* ---------- 2. Die zwei Symbole rechts ---------- */ @media only screen and (max-width: 1200px) { /* Benutzerkonto: gerasterte Groesse, gleiche Farbe wie das Menue. top setzt die Theme-Verschiebung zurueck, die zu 28 px gehoerte. */ .header.header-light-skin.header-style-default .user-area > i.user-area-icon, .header.header-scroll-light-skin.header-style-default .user-area > i.user-area-icon, .header-right .mob-sign-in a i.mi.person, .header-right .user-profile-name i.mi.person { font-size: 30px; line-height: 30px; color: rgb(36, 36, 41); top: 0; } /* Menue: dieselbe Groesse. Die Polsterung gehoerte zur alten Groesse. */ .mobile-menu .mobile-menu-lines i { font-size: 24px; line-height: 24px; padding-top: 0; } } /* 🛑 HIER STAND EINMAL EINE REGEL, DIE DAS LAYOUT ZERSTOERT HAT, und der Fall ist lehrreich genug, um ihn stehen zu lassen: .header .user-area.signin-area { display: flex; align-items: center; } Gedacht war sie, um die beiden Symbole auf eine Linie zu bringen. Das Theme blendet auf dem Smartphone aber den Text "Einloggen oder Registrieren" ueber die ANZEIGE-ART aus. Ein eigenes `display` hat ihn wieder sichtbar gemacht, und er lag quer ueber dem Logo. Gemerkt habe ich es NUR am Bild. Jede Messung war vorher gruen: Hoehen stimmten, beide Symbole 24 px, beide dieselbe Farbe. Lehre: `display` eines fremden Elements nie setzen, ohne den alten Wert gemessen zu haben. Fuer Mittigkeit reicht line-height am Zeichen. */ /* ---------- 1b. Kopfinhalt mittig statt oben verankert ---------- */ /* 🛑 OHNE DAS NIMMT EINE HOEHENREDUKTION NUR UNTEN PLATZ WEG. Der Kopfinhalt haengt an einer festen Polsterung, nicht an der Mitte. Gemessen am 24.08.2026 nach der Kuerzung auf 56 px: Das Logo sass 2 px zu tief, oben standen weiter 12 px, unten nur noch 8. ⚠️ EDDY hat das am BILD gesehen und nachgefragt, bevor eine Messung es bestaetigt hat. Meine eigenen Pruefungen hatten nur die HOEHE gemessen, nicht die Lage des Inhalts darin. Wer eine Flaeche veraendert, prueft danach, wo ihr Inhalt sitzt. */ @media only screen and (max-width: 1200px) { .c27-main-header .header-container .header-top { height: 100%; align-items: center; padding-top: 0; padding-bottom: 0; } } /* ---------- 3. Die zwei Symbole neu: schlank statt vollflaechig ---------- */ /* 🛑 SEIT 04.09.2026 GILT DIESER BLOCK UEBERALL, nicht mehr nur unter 1200 px. EDDY 30.08.2026: *„Das Desktop Icon fuer das Kundenkonto ist noch das alte."* Vorher sass er in der Media-Query darunter, deshalb blieb am Rechner die gefuellte Glyphe stehen. Die Groesse bleibt dort bei den gemessenen 20 px, dafuer sorgt die min-width-Regel direkt im Anschluss - geaendert wird das AUSSEHEN, nicht die Groesse (nur aendern, was beauftragt ist). */ /* BENUTZERKONTO: die gefuellte Material-Glyphe weicht der Outline-Fassung aus derselben Familie (Material Symbols Outlined, offizieller Pfad). Eingebettet als Maske, nicht als zweite Icon-Schrift: kein weiterer Download, und die Farbe kommt weiter vom Element (currentColor). 🛑 DREI SELEKTOREN, UND DER DRITTE IST DER EINZIGE, DER MOBIL WIRKT. Der Kopfbereich traegt ZWEI Konto-Symbole: eines fuer den Rechner (`.user-area > i.user-area-icon`) und eines fuer das Smartphone (`.mob-sign-in a i.mi.person`). Das jeweils andere ist auf 0 x 0 gesetzt, steht aber im Markup und antwortet auf jede Messung. **Meine erste Fassung sass nur auf dem unsichtbaren Zwilling**: Die Messung meldete Maske gesetzt, Farbe richtig, 24 x 24 - und auf dem Bild aenderte sich nichts. Wer hier etwas aendert, prueft zuerst, WELCHES der beiden gerade eine Groesse hat. ⚠️ `fill-rule='evenodd'` steht bewusst im Pfad. Ohne die Angabe kann eine Maske die inneren Konturen fuellen, und aus dem Ring wird wieder eine Flaeche. (Hier war es am Ende nicht die Ursache, die Angabe schadet aber nicht und nimmt eine bekannte Falle vorweg.) 🛑 DIE STRICHSTAERKE IST EINE ACHSE DER SCHRIFT, KEINE NACHBEARBEITUNG. Material Symbols liefert dasselbe Zeichen in mehreren Staerken, und Google gibt sie als eigene Datei heraus: .../materialsymbolsoutlined/person/default/24px.svg kraeftig .../materialsymbolsoutlined/person/wght200/24px.svg eine Stufe duenner .../materialsymbolsoutlined/person/wght100/24px.svg sehr zart Hier steckt **wght200** drin (EDDY 24.08.2026: "die Striche sind zu dick, kannst du es eine Nummer duenner machen") - das gilt fuer die 30-px-Darstellung am Telefon. **Am Rechner (20 px) liegt im min-width- Block darunter eine zweite Maske mit wght300** (EDDY 11.09.2026): bei 20 px ist der wght200-Strich duenner als ein Pixel und wirkt grau, gemessen am Pixel. Wer die Staerke aendert, tauscht also den PFAD und dreht nicht an einer CSS-Angabe. Ein `stroke-width` gibt es hier nicht: Der Pfad beschreibt die Kontur als Flaeche, nicht als Linie. ⚠️ Die drei Schnitte `outlined`, `rounded` und `sharp` sind bei Personen-Zeichen IDENTISCH (md5-gleich geprueft). Die Form hat keine Rundungen, die ein anderer Schnitt anders zeichnen koennte. Wer dort Auswahl sucht, sucht vergeblich; die Auswahl liegt in der Staerke. */ .header.header-light-skin.header-style-default .user-area > i.user-area-icon::before, .header.header-scroll-light-skin.header-style-default .user-area > i.user-area-icon::before, .header-right .mob-sign-in a i.mi.person::before, .i-nav .user-profile-name i.mi.person::before, .header-right .user-profile-name i.mi.person::before { content: ''; display: block; width: 30px; height: 30px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath fill-rule='evenodd' d='M395.08-539.69Q360-574.77 360-624.62q0-49.84 35.08-84.92 35.07-35.08 84.92-35.08t84.92 35.08Q600-674.46 600-624.62q0 49.85-35.08 84.93-35.07 35.07-84.92 35.07t-84.92-35.07ZM200-215.38v-65.85q0-24.77 14.42-46.35 14.43-21.57 38.81-33.5 56.62-27.15 113.31-40.73 56.69-13.57 113.46-13.57 56.77 0 113.46 13.57 56.69 13.58 113.31 40.73 24.38 11.93 38.81 33.5Q760-306 760-281.23v65.85H200Zm40-40h480v-25.85q0-13.31-8.58-25-8.57-11.69-23.73-19.77-49.38-23.92-101.83-36.65-52.45-12.73-105.86-12.73t-105.86 12.73Q321.69-349.92 272.31-326q-15.16 8.08-23.73 19.77-8.58 11.69-8.58 25v25.85Zm296.5-312.74q23.5-23.5 23.5-56.5t-23.5-56.5q-23.5-23.5-56.5-23.5t-56.5 23.5q-23.5 23.5-23.5 56.5t23.5 56.5q23.5 23.5 56.5 23.5t56.5-23.5Zm-56.5-56.5Zm0 369.24Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath fill-rule='evenodd' d='M395.08-539.69Q360-574.77 360-624.62q0-49.84 35.08-84.92 35.07-35.08 84.92-35.08t84.92 35.08Q600-674.46 600-624.62q0 49.85-35.08 84.93-35.07 35.07-84.92 35.07t-84.92-35.07ZM200-215.38v-65.85q0-24.77 14.42-46.35 14.43-21.57 38.81-33.5 56.62-27.15 113.31-40.73 56.69-13.57 113.46-13.57 56.77 0 113.46 13.57 56.69 13.58 113.31 40.73 24.38 11.93 38.81 33.5Q760-306 760-281.23v65.85H200Zm40-40h480v-25.85q0-13.31-8.58-25-8.57-11.69-23.73-19.77-49.38-23.92-101.83-36.65-52.45-12.73-105.86-12.73t-105.86 12.73Q321.69-349.92 272.31-326q-15.16 8.08-23.73 19.77-8.58 11.69-8.58 25v25.85Zm296.5-312.74q23.5-23.5 23.5-56.5t-23.5-56.5q-23.5-23.5-56.5-23.5t-56.5 23.5q-23.5 23.5-23.5 56.5t23.5 56.5q23.5 23.5 56.5 23.5t56.5-23.5Zm-56.5-56.5Zm0 369.24Z'/%3E%3C/svg%3E") center / contain no-repeat; } /* 🛑 DAS ZEICHEN IM GEOEFFNETEN MOBILEN MENUE SITZT AUSSERHALB VON `.header-right`, und deshalb hat es der Anker oben bis zum 04.09.2026 NIE getroffen. Angemeldet gemessen (04.09.2026, `eingeloggt-messen.py`): a.user-profile-name in div.user-profile-dropdown in div.mobile-nav-head in div.i-nav Dort stand weiterhin die gefuellte Glyphe, waehrend im Kopfbereich laengst die Outline-Fassung lief. **Gefunden hat es EDDY am Geraet, nachdem hier bereits "erledigt" gemeldet war** - der Selektor war ueber Wochen halb blind. ⚠️ Die uebertragbare Lehre: Ein Anker wie `.header-right` beschreibt EINEN Ausgabeort. Dasselbe Bauteil kann an einem zweiten stehen, den man nie gesehen hat, weil er hinter der Anmeldung oder hinter einem Klick liegt. Die Groesse bleibt bei den dort gemessenen 18 px: geaendert wird die FORM, nicht die Groesse. Die Symbol-Groessen im Menue sind ein eigener Punkt. */ .i-nav .user-profile-name i.mi.person::before { width: 18px; height: 18px; } /* Am Rechner behaelt das Zeichen seine gemessene Groesse (20 px statt 30). Steht bewusst NACH dem Block darueber: bei gleichem Gewicht gewinnt die spaetere Regel, und unter 1200 px bleiben es die 30 px von oben. */ @media only screen and (min-width: 1201px) { .header.header-light-skin.header-style-default .user-area > i.user-area-icon::before, .header.header-scroll-light-skin.header-style-default .user-area > i.user-area-icon::before, .header-right .user-profile-name i.mi.person::before { width: 20px; height: 20px; } /* 🛑 DIE FARBE GEHOERT ZUR ANGLEICHUNG DAZU (EDDY 04.09.2026, Entscheid 530). Gemessen am 04.09.: Das Zeichen stand auf rgb(72,72,72), waehrend der Text UNMITTELBAR DANEBEN und derselbe Zwilling am Telefon beide rgb(36,36,41) tragen. Zwei unabhaengige Quellen, ein Zielwert - der Nachbar am selben Ort ist dabei der staerkere Beleg, denn er zeigt, wie es HIER aussehen soll. Die Maske nimmt die Farbe ueber `currentColor` vom Element, deshalb steht sie hier am Element und nicht am ::before. ⚠️ Die GROESSE wird bewusst NICHT mit angeglichen: Am Rechner steht das Zeichen neben 14-px-Text und bleibt bei 20 px, am Telefon steht es allein und traegt 30. Angleichen heisst, denselben Eindruck zu erzeugen, nicht dieselbe Zahl zu setzen. */ .header.header-light-skin.header-style-default .user-area > i.user-area-icon, .header.header-scroll-light-skin.header-style-default .user-area > i.user-area-icon, body.logged-in .header-right .user-profile-name i.mi.person { color: rgb(36, 36, 41); } /* 🛑 `body.logged-in` VOR DEM DRITTEN SELEKTOR IST KEIN SCHMUCK (11.09.2026, O2). Ohne dieses Glied wog die Regel (0,4,1) - exakt so viel wie die Theme-Regel `.header-light-skin:not(.header-scroll) .user-area .user-profile-name i { color: rgba(0,0,0,.3) }` in header.css. Bei Gleichstand entscheidet die Ladereihenfolge, und `mylisting-header-css` laedt an Position 38, das Child-CSS an 33 (gemessen am ausgelieferten HTML). Das Theme gewann, das eingeloggte Zeichen stand am Rechner auf 30 % Schwarz - EDDY: „ausgegraut". Am Telefon gewinnt S-68 mit `body.logged-in …` (0,5,1), deshalb war es dort dunkel. Dieselbe Klasse hier, aus demselben Grund. Kein `!important` noetig, das Theme traegt dort keines. */ /* 🛑 AM RECHNER EINE STUFE KRAEFTIGER: wght300 statt wght200 (EDDY 11.09.2026, O3). Die Farbe des Zeichens war die ganze Zeit richtig (rgb(36,36,41), Deckkraft 1) - und trotzdem sah EDDY es grau, zu Recht. Am Pixel gemessen (Kopf-Screenshot, 1440): der wght200-Strich ist bei 20 px DUENNER ALS EIN PIXEL, kein Pixel erreicht die Farbe - dunkelster Pixel 72, nur 5 % satte Pixel. Die icomoon-Icons daneben (KI-Events, Kontakt, 14 px): dunkelster Pixel 37, 30 % satt. „Farbe stimmt" ist bei duennen Strichen KEIN Nachweis. Tafel mit wght200/300/400/500 neben den Menue-Icons (`fassungen-vergleichen.py`, clip-Modus), je Feld gemessen - satte Pixel: 5 % / 34 % / 39 % / 60 %. EDDY hat B gewaehlt: **wght300**, 34 % gegen 30 % beim Nachbarn. ⚠️ NUR HIER, nicht in der Basis-Maske oben: Am Telefon (30 px) reicht wght200, dort ist der Strich 1,5 px und von EDDY abgenommen. Gleicher Eindruck, nicht gleiche Zahl. Zwei Daten-URIs sind der Preis dafuer; wer die FORM des Zeichens aendert, tauscht BEIDE. Die SVG ist die Tafel-Fassung ohne `fill-rule` (Google-Original, .../person/wght300/24px.svg) - so, wie EDDY sie gesehen hat. */ .header.header-light-skin.header-style-default .user-area > i.user-area-icon::before, .header.header-scroll-light-skin.header-style-default .user-area > i.user-area-icon::before, .header-right .user-profile-name i.mi.person::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='M381.04-533.35Q340-574.38 340-632.31q0-57.92 41.04-98.96 41.04-41.04 98.96-41.04 57.92 0 98.96 41.04Q620-690.23 620-632.31q0 57.93-41.04 98.96-41.04 41.04-98.96 41.04-57.92 0-98.96-41.04ZM180-187.69v-88.93q0-29.38 15.96-54.42 15.96-25.04 42.66-38.5 59.3-29.07 119.65-43.61 60.35-14.54 121.73-14.54t121.73 14.54q60.35 14.54 119.65 43.61 26.7 13.46 42.66 38.5Q780-306 780-276.62v88.93H180Zm60-60h480v-28.93q0-12.15-7.04-22.5-7.04-10.34-19.11-16.88-51.7-25.46-105.42-38.58Q534.7-367.69 480-367.69q-54.7 0-108.43 13.11-53.72 13.12-105.42 38.58-12.07 6.54-19.11 16.88-7.04 10.35-7.04 22.5v28.93Zm296.5-328.12q23.5-23.5 23.5-56.5t-23.5-56.5q-23.5-23.5-56.5-23.5t-56.5 23.5q-23.5 23.5-23.5 56.5t23.5 56.5q23.5 23.5 56.5 23.5t56.5-23.5Zm-56.5-56.5Zm0 384.62Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='M381.04-533.35Q340-574.38 340-632.31q0-57.92 41.04-98.96 41.04-41.04 98.96-41.04 57.92 0 98.96 41.04Q620-690.23 620-632.31q0 57.93-41.04 98.96-41.04 41.04-98.96 41.04-57.92 0-98.96-41.04ZM180-187.69v-88.93q0-29.38 15.96-54.42 15.96-25.04 42.66-38.5 59.3-29.07 119.65-43.61 60.35-14.54 121.73-14.54t121.73 14.54q60.35 14.54 119.65 43.61 26.7 13.46 42.66 38.5Q780-306 780-276.62v88.93H180Zm60-60h480v-28.93q0-12.15-7.04-22.5-7.04-10.34-19.11-16.88-51.7-25.46-105.42-38.58Q534.7-367.69 480-367.69q-54.7 0-108.43 13.11-53.72 13.12-105.42 38.58-12.07 6.54-19.11 16.88-7.04 10.35-7.04 22.5v28.93Zm296.5-328.12q23.5-23.5 23.5-56.5t-23.5-56.5q-23.5-23.5-56.5-23.5t-56.5 23.5q-23.5 23.5-23.5 56.5t23.5 56.5q23.5 23.5 56.5 23.5t56.5-23.5Zm-56.5-56.5Zm0 384.62Z'/%3E%3C/svg%3E") center / contain no-repeat; } } @media only screen and (max-width: 1200px) { /* MOBILES MENUE: zwei Striche, darunter das Wort. Die Material-Glyphe (drei Balken) wird ausgeblendet, nicht ersetzt. */ .mobile-menu .mobile-menu-lines i { font-family: inherit; font-size: 0; line-height: 1; display: block; width: 26px; text-align: center; } .mobile-menu .mobile-menu-lines i::before { content: ''; display: block; width: 26px; height: 9px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; margin-bottom: 4px; } .mobile-menu .mobile-menu-lines i::after { content: 'Menü'; display: block; font-size: 9px; line-height: 9px; font-weight: 500; letter-spacing: 0.4px; text-transform: uppercase; } } /* ---------- 4. Das Symbol neben „Mein Konto" (eingeloggt) ---------- EDDY 28.08.2026: *„Mein Konto mit Avatar, aber das Benutzericon, was wir eh schon im Menue nutzen."* Der eingeloggte Kopfbereich zeigt seit S-60 statt des Gravatar-Bildes dasselbe Personen-Zeichen wie der ausgeloggte. 🛑 **DIE ARBEIT DAFUER STECKT OBEN, NICHT HIER.** Der Selektor `.header-right .user-profile-name i.mi.person` ist den beiden Listen in Abschnitt 2 und 3 hinzugefuegt worden. Damit bekommt das Zeichen unter 1200 px automatisch dieselbe Groesse, dieselbe Farbe und dieselbe Outline-Maske wie seine zwei Nachbarn - **ohne die Maske ein zweites Mal abzulegen.** Eine zweite Kopie dieses Daten-URI waere die sicherste Art, die beiden auseinanderdriften zu lassen. Hier steht nur, was die Listen oben NICHT abdecken: ✅ **Seit 04.09.2026 greift die Outline-Maske auch ueber 1200 px** (K3, EDDY 30.08.2026). Dieses Zeichen folgt weiterhin von selbst mit, weil sein Selektor in denselben Listen steht. Am Rechner ist es 20 px gross, unter 1200 px 30 - dieselbe Form, zwei Groessen. ✅ **Die FARBE am Rechner ist seit 11.09.2026 richtig** (rgb(36,36,41)). Die Regel dafuer stand seit dem 04.09. im min-width-Block, verlor aber bei Gleichstand gegen das Theme (Ladereihenfolge) - seitdem traegt sie `body.logged-in` als fuenftes Glied, Begruendung dort. Und das Zeichen ist am Rechner wght300 statt wght200, ebenfalls dort begruendet. Der Abstand zum Wort ersetzt den, den vorher der Avatar-Kasten mitbrachte. */ .header-right .user-profile-name i.mi.person { font-size: 20px; line-height: 20px; margin-right: 8px; } /* ========================================================================== AIMF-ANPASSUNG #051: mehrzeilige Werte rechtsbuendig halten (Snippet S-45css) Referenz-Fassung: PROJEKTE/_ALLGEMEIN/SNIPPETS/S-45-zeilenumbruch.css Aenderungen dort zuerst. Dies ist die Kopie, nicht hier bearbeiten. ========================================================================== */ .ml-zeilen { display: block; text-align: right; line-height: 1.43; /* 20px bei 14px Schrift, siehe Kopf */ /* Erste Zeile zurueck auf die Grundlinie der Beschriftung, siehe Kopf. (1.857em - 1.43em) / 2 = (26px - 20px) / 2 = 3px bei 14px Schrift. */ padding-top: calc((1.857em - 1.43em) / 2); } /* ========================================================================== AIMF-ANPASSUNG #054: Telefonnummern wie E-Mail-Adressen, Mausover in der Akzentfarbe (Snippet S-03) Referenz-Fassung: PROJEKTE/_ALLGEMEIN/SNIPPETS/S-03-links-erkennbar.css Aenderungen dort zuerst. Dies ist die Kopie, nicht hier bearbeiten. ========================================================================== */ /* -------------------------------------------------------------------------- ERGAENZUNG 25.08.2026: TELEFONNUMMERN wie E-Mail-Adressen, und JEDER Kontakt-Link faerbt beim Mausover -------------------------------------------------------------------------- EDDY 25.08.2026: „Die Telefonnummer ist unterstrichen, warum ist sie unterstrichen? Wir haben doch gesagt, bei Mouseover soll sie genauso wie die E-Mail-Adresse rot eingefaerbt werden. Wenn ich mit der Maus ueber diese Elemente gehe, zur Anmeldung, E-Mail-Adresse, Telefonnummer, muessen sie rot sein in der Farbe unserer Webseite." Zwei Dinge folgen daraus: 1. Die Telefonnummer wird behandelt wie die E-Mail: KEINE Unterstreichung. Eine Rufnummer ist an ihrer Form erkennbar, genau wie eine Adresse. 2. JEDER Link in diesen beiden Bloecken faerbt beim Mausover in die Akzentfarbe, auch „zur Anmeldung". Der bleibt dabei unterstrichen, denn ohne Unterstreichung sieht ein Linktext nicht nach Link aus (siehe oben). 🛑 WARUM DIE TELEFONNUMMER VORHER DURCHFIEL: Die Regel darueber fasst `a[href^="mailto:"]`. Ein `tel:`-Link ist etwas anderes und war nie gemeint. Beim Bau der Rueckfragen-Zeile ist es nicht aufgefallen, weil bis dahin gar keine Telefonnummer in diesen Bloecken stand. **Eine Regel, die einen Fall nennt, deckt den Nachbarfall nicht mit ab, auch wenn er sich gleich anfuehlt.** Die Farbe kommt weiter aus `--accent`, nicht als fester Wert. -------------------------------------------------------------------------- */ #c27-single-listing .details-block-content .wp-editor-content a[href^="tel:"], #c27-single-listing .extra-details .item-property a[href^="tel:"] { text-decoration: none; /* Das THEME faerbt Telefon-Links eigens grau (rgb(72,72,72)), E-Mail-Links nicht. Nebeneinander wirkt die Rufnummer dadurch blasser als die Adresse. inherit statt festem Wert, damit es auf jeder Plattform stimmt. */ color: inherit; } #c27-single-listing .details-block-content .wp-editor-content a[href^="tel:"]:hover, #c27-single-listing .extra-details .item-property a[href^="tel:"]:hover { text-decoration: none; } #c27-single-listing .details-block-content .wp-editor-content a:hover, #c27-single-listing .extra-details .item-property a:hover { color: var(--accent); } /* ========================================================================== AIMF-ANPASSUNG #055: Mehrzeilige Werte bleiben rechtsbuendig (Snippet S-18) Referenz-Fassung: PROJEKTE/_ALLGEMEIN/SNIPPETS/S-18-fliesstext-zeilen.css Aenderungen dort zuerst. Dies ist die Kopie, nicht hier bearbeiten. ========================================================================== */ /* -------------------------------------------------------------------------- ERGAENZUNG 25.08.2026: MEHRZEILIGE Werte bleiben rechtsbuendig -------------------------------------------------------------------------- EDDY 25.08.2026: „Das einzige, was mir noch nicht so gut gefaellt, ist, dass auf dem Smartphone die Kontaktdaten linksbuendig sind. Das weicht von dem ab, was wir sonst gebaut haben." 🛑 DER GRUND, UND ER TRIFFT JEDEN LANGEN WERT: Das Theme setzt `.item-property` auf `float: right`. Das schiebt den KASTEN nach rechts, sagt aber nichts darueber, wie der Text DARIN sitzt. Solange der Wert in eine Zeile passt, faellt das nicht auf. Bricht er um, laeuft die zweite Zeile linksbuendig und endet mitten im Feld. Gemessen an AIMF (Testeintrag, 390 px): Von elf Zeilen war genau eine betroffen, „Kontakt" mit 150 px statt 365. Adresse und Rueckfragen sassen richtig, weil sie ihre eigene Huelle mitbringen (S-45 und S-47, beide mit `text-align: right`). **Der Fehler trifft also genau die Werte OHNE Huelle**, und das sind die gewoehnlichen Platzhalter. SPEZIFITAET NACHGERECHNET (Falle 1 im Skill): Fliesstext-Regel oben : #id .item-property:has(.ml-fliesstext) = (1,2,0) diese Regel : #id .extra-details .item-property:not(…) = (1,3,0) Sie wiegt schwerer UND trifft die Fliesstext-Zeilen gar nicht erst. Ohne den Ausschluss waere es ein Gleichstand, und dann haette die spaetere gewonnen: Der Hinweis-Absatz waere rechtsbuendig geworden. -------------------------------------------------------------------------- */ #c27-single-listing .extra-details .item-property:not(:has(.ml-fliesstext)) { text-align: right; } /* Nachtrag zu #055, 25.08.2026: der Wert muss NEBEN der Beschriftung beginnen. Gemessen bei 390 px: "Kontakt" hatte einen 340 px breiten Wert (volle Zeile) und rutschte 31 px tiefer; "Rueckfragen?" mit 219,7 px sass richtig. Ein gefloateter Kasten mit umbrechendem Text wird so breit wie der verfuegbare Platz, nicht so breit wie noetig, und passt dann nicht mehr daneben. max-width hilft nicht, weil der Wert die Breite SEINER Beschriftung kennen muesste (42 bis 128 px je Zeile). Mit Flex bekommt er automatisch den Rest. align-items: flex-start mit Absicht, nicht baseline: die vorhandenen Grundlinien-Ausgleiche (S-45) wuerden sich sonst doppeln. */ #c27-single-listing .extra-details li:not(:has(.ml-fliesstext)) { display: flex; align-items: flex-start; gap: 0.75em; } #c27-single-listing .extra-details li:not(:has(.ml-fliesstext)) .item-attr { flex: 0 0 auto; } /* Der Theme-Clearfix (li::after, display: table) wird im Flex-Container zum DRITTEN Kind; mit space-between hing der Wert dadurch mittig. Er raeumt Floats auf, die es im Flex-Container nicht mehr gibt: abschalten. */ #c27-single-listing .extra-details li:not(:has(.ml-fliesstext))::before, #c27-single-listing .extra-details li:not(:has(.ml-fliesstext))::after { content: none; } #c27-single-listing .extra-details li:not(:has(.ml-fliesstext)) .item-property { float: none; min-width: 0; flex: 1 1 auto; } /* ═══ AIMF-ANPASSUNG #056: Snippet S-48: Kartentitel-Optik vom Tag loesen ═══ * * Der Kartentitel bekommt seine Groesse vom Theme ueber eine TAG-Regel. Seit der * Titel auf der Startseite ein H3 ist (Template-Teil von #056), zog er sich die * generische H3-Groesse: 24px statt 14px, plus 20px Abstand oben. * * Die Werte haengen jetzt an der KLASSE und gelten fuer jedes Tag. Sollwerte an * der Detailseite gemessen, wo die Karte noch H4 ist. * * Gewicht [0,2,0], schlaegt jede Tag-Regel unabhaengig von der Reihenfolge. */ .lf-item-container .listing-preview-title, .listing-preview .listing-preview-title { font-size: 14px; line-height: 17.5px; margin-top: 0; margin-bottom: 4px; } /* ========================================================================== AIMF-ANPASSUNG #057: Buttons nach Einfaerbung, 42 und 36 px (Snippet S-49) Referenz-Fassung: PROJEKTE/_ALLGEMEIN/SNIPPETS/S-49-buttons-einheitliche-hoehe.css Aenderungen dort zuerst. Dies ist die Kopie, nicht hier bearbeiten. ========================================================================== */ /* -------------------------------------------------------------------------- S-49: Alle Buttons einer Plattform auf EINE Hoehe -------------------------------------------------------------------------- EDDY 25.08.2026, nachdem er sich die gemessenen Hoehen hat zeigen lassen: "Im Grunde sollten alle Buttons gleich hoch sein." Und zur Zahl: "Kannst du das mal auch auf 36 Pixel aendern, dann ist es ueberall gleich." 🛑 DER AUSLOESER WAR EINE MESSUNG, KEINE VERMUTUNG. Er hielt Menue-Button und Kopf-Button fuer verschieden hoch. Gemessen waren beide 48. Was ihn stoerte, war nicht der Unterschied, sondern dass beide zu wuchtig sind. **Erst die Liste aller Hoehen hat die richtige Frage sichtbar gemacht.** DER BESTAND VOR DER AENDERUNG (AIMF, 1440 px, `scripts/button-hoehen.py`) Menue-Balken "Event eintragen" 48 px Polsterung 15 + 15 Detailseite Kopf, neben dem Preis 48 px OHNE Polsterung, feste Hoehe Suchmaske "Suchen" 46 px Polsterung 14 + 14 Detailseite Leiste darunter 36,75 px S-31 Im Text Elementor-Buttons 37 px Polsterung 12 + 12 Es gab also zwei Familien, 48/46 und 37/36,75. Das Ziel 36 fuehrt beide zusammen, statt eine dritte Groesse zu schaffen. 🛑 KORREKTUR AM SELBEN TAG: NICHT ALLE GLEICH, SONDERN ZWEI KLASSEN Der erste Anlauf setzte ALLES auf 36 px. EDDY nach dem Ansehen: *„Der Button im Header der Detailseite und in der Suchmaske, die sind mir tatsaechlich ein bisschen zu flach. Aber die Leiste darunter auf der Detailseite, das lassen wir, das sind diese nicht eingefaerbten Buttons, die koennen so bleiben."* **Die Trennlinie ist die EINFAERBUNG, nicht der Ort.** Ein farbiger Knopf fordert zum Handeln auf und darf Gewicht haben; ein weisser mit Rahmen ist eine Nebenfunktion und darf zurueckhaltend sein. eingefaerbt (rot) 42 px Menue-Button, Kopf-Button, Suchknopf nicht eingefaerbt 36 px die Leiste der Detailseite (S-31) ⚠️ **Der Satz "im Grunde sollten alle Buttons gleich hoch sein" ist damit praezisiert, nicht aufgehoben.** Gleich hoch heisst: gleich hoch INNERHALB einer Klasse. WOHER DIE 42 KOMMEN: Es ist die Mitte zwischen dem Theme-Stand 48 und dem zu flachen ersten Anlauf 36. **Dasselbe Verfahren hat schon bei S-31 zum Ziel gefuehrt** (dort 42 und 31,5 auf 36,75). Die Zahl entstand als Vorschlag, weil EDDYs Korrektur „zu flach" sagte, aber keinen Wert nannte. ✅ **AM 25.08.2026 VON EDDY ANGESEHEN UND ABGENOMMEN: „wir lassen es so."** Damit ist die 42 keine Annahme mehr, sondern eine Festlegung. 🛑 Sie bleibt trotzdem ein URTEIL und keine Messung. Wer sie aendert, aendert sie HIER und rollt neu aus. WAS DIESES SNIPPET TUT UND WAS NICHT Es fasst die DREI eingefaerbten Buttons an, die S-31 nicht abdeckt. | Ort | wer macht es | |-------------------------|--------------| | Leiste der Detailseite | **S-31**, dort auf 36 px, bleibt so | | Menue, Suche, Kopf | dieses Snippet, 42 px | | Buttons im Fliesstext | **niemand**, die pflegt EDDY selbst im Elementor | 🛑 S-31 UND S-49 GEHOEREN ZUSAMMEN. Wer eines von beiden aendert, prueft das andere mit. Seit dem 25.08.2026 tragen sie bewusst VERSCHIEDENE Werte; wer sie ohne Nachfrage angleicht, macht die Unterscheidung wieder kaputt. DIE RECHNUNG, UND WARUM SIE NICHT UEBERALL GLEICH IST Eine Button-Hoehe entsteht aus Polsterung + Zeilenhoehe + Rahmen (Falle 14). Die drei Orte haben verschiedene Bauweisen, deshalb drei verschiedene Griffe fuer dasselbe Ergebnis: Menue 42 = 12 + 18 + 12 Polsterung, gemessene Inhaltshoehe 18 Suche 42 = 12 + 18 + 12 dieselbe Bauweise Kopf 42 = feste Hoehe hat gar keine Polsterung (display: flex) ⚠️ **Die 18 sind gemessen, nicht gerechnet.** Die Zeilenhoehe steht auf 16, die tatsaechliche Inhaltshoehe liegt 2 px darueber (bei Menue UND Suche gleich). Wer die Rechnung mit 16 aufstellt, landet bei 38 statt 36. Nach dem Ausrollen deshalb IMMER nachmessen, nicht der Rechnung glauben. 🛑 NUR DESKTOP, wie S-31. Mobil bleibt alles beim Theme-Stand: Dort ist der Platz anders verteilt, und EDDY hatte fuer S-31 ausdruecklich gesagt "mobil passt es, mobil sollen sie so bleiben". Wer das aendern will, braucht ein eigenes Wort dafuer. Die Grenze 769 px ist dieselbe wie in S-31 (bei genau 768 denkt das Theme noch mobil). GEWICHTE, ALLE NACHGERECHNET .header-button a.buttons (0 IDs, 2 Klassen, 1 Element) button.buttons.search (0, 2, 1) .listing-main-buttons .lmb-calltoaction > a (0, 2, 1) Jeweils eine Klasse mehr als die Theme-Regel, die den Wert heute setzt. Ohne `!important`, weil das Gewicht reicht. -------------------------------------------------------------------------- */ @media only screen and (min-width: 769px) { /* 1. Menue-Balken oben rechts */ .header-button a.buttons { padding-top: 12px; padding-bottom: 12px; } /* 2. Suchknopf in der Suchmaske */ button.buttons.search { padding-top: 12px; padding-bottom: 12px; } /* 3. Farbiger Haupt-Button im Kopfbereich der Detailseite. Hier ist die feste Hoehe die richtige Schraube: Das Element hat keine Polsterung und richtet seinen Inhalt ueber Flexbox mittig aus. */ .listing-main-buttons .lmb-calltoaction > a { height: 42px; } } /* ========================================================================== AIMF-ANPASSUNG #058: Abstaende am Block weitere Events (Snippet S-50) Referenz-Fassung: PROJEKTE/_ALLGEMEIN/SNIPPETS/S-50-abstand-weitere-eintraege.css Aenderungen dort zuerst. Dies ist die Kopie, nicht hier bearbeiten. ========================================================================== */ /* -------------------------------------------------------------------------- S-50: Abstand zwischen der Ueberschrift des Aehnliche-Eintraege-Blocks und den Kacheln darunter, um 25 Prozent kleiner - seit 11.09.2026 HALBIERT -------------------------------------------------------------------------- EDDY 25.08.2026: "Auf der Detailseite steht ja weitere interessante Eintraege weiter unten, und da muessen wir den Abstand zwischen weitere interessante Eintraege und den Kacheln da drunter um 25 Prozent reduzieren." 🛑 DER ABSTAND STECKT ZU VIER FUENFTELN NICHT IN DER UEBERSCHRIFT. Gemessen (AIMF, 1440 px), Unterkante Ueberschrift bis Oberkante der ersten Kachel: **50 px**, und sie verteilen sich so: h2 margin-bottom 10 px ein Fuenftel die ZEILE darum margin-bottom 40 px vier Fuenftel Wer nur an der Ueberschrift dreht, aendert 20 Prozent des Ganzen und wundert sich, warum man nichts sieht. Das ist Falle 12 aus dem Skill in Reinform: der Zwischenraum ist selten der Hebel. DIE RECHNUNG vorher 10 + 40 = 50 px minus 25 Prozent = 37,5 px nachher 7,5 + 30 = 37,5 px Beide Anteile werden um dasselbe Viertel gesenkt. So bleibt das Verhaeltnis erhalten, und wer spaeter einen der beiden Werte sucht, findet ihn dort, wo er ihn vermutet. 🛑 DER SELEKTOR HAENGT AM INHALT, NICHT AN DER POSITION. `.similar-listings .row` trifft **ZWEI** Elemente: die Zeile mit der Ueberschrift UND die Zeile mit den Kacheln (beide 1170 px breit, die zweite 300 px hoch). Ein `:first-child` waere eine Positionsannahme; `:has(h2)` haengt an dem, was die Zeile ausmacht. Vor dem Bau mit `scripts/welches-element.py` gezaehlt, nicht angenommen. ⚠️ Die Ueberschrift heisst auf AIMF seit dem 22.08.2026 klein "weitere Events" und traegt Schriftgroesse 18 (eigene Anpassung). Das beruehrt diese Regel nicht, sie fasst nur Abstaende. ⚠️ Mobil bewusst NICHT ausgenommen: Der Block steht dort genauso, und ein engerer Abstand schadet auf dem kleinen Schirm nie. Sollte es doch stoeren, gehoert hier eine Media-Query hin und keine zweite Regel woanders. -------------------------------------------------------------------------- */ /* 🛑 NACHGETRAGEN 11.09.2026: NOCH EINMAL HALBIERT (D-NEU-2, A-P_PROG-146). EDDY vom Smartphone: den Abstand zwischen der Ueberschrift und der ersten Karte „um 50 % reduzieren". Gemessen vorher, Unterkante h2 bis Oberkante erste Kachel: **37,5 px** bei 390 UND bei 1440 (S-50 kennt keine Media- Query, deshalb beide gleich). Halbiert = 18,75 px, im selben Verhaeltnis: vorher 30 + 7,5 = 37,5 px nachher 15 + 3,75 = 18,75 px Die 25-Prozent-Rechnung oben bleibt als Herkunft stehen; die Werte darunter sind die neuen. EDDY beurteilt am Bild (Entscheid 410). */ .similar-listings .row:has(h2) { margin-bottom: 15px; } .similar-listings h2 { margin-bottom: 3.75px; } /* -------------------------------------------------------------------------- NACHGETRAGEN 27.08.2026: der Abstand OBERHALB der Ueberschrift, verdoppelt -------------------------------------------------------------------------- EDDY: *„Der Abstand zwischen weitere Events und den Kacheln, die da drunter kommen, die passen. Aber der Abstand oben drueber musst du verdoppeln."* **Zwei verschiedene Abstaende am selben Block, und nur einer war gemeint.** Der Teil oben in dieser Datei regelt den Abstand NACH UNTEN, zu den Kacheln. Der bleibt unveraendert, EDDY hat ihn ausdruecklich bestaetigt. Hier geht es um den Abstand NACH OBEN, also zum Ende der Detailseite. GEMESSEN (AIMF, 1440 px), und diesmal ist es erfreulich einfach: .tab-content Unterkante y = 1954,0 .similar-listings Oberkante y = 1954,0 -> Kasten zu Kasten 0 px Ueberschrift „weitere Events" y = 1979,0 -> 25 px bis zur Schrift **Der ganze Abstand ist ein einziges `padding-top: 25px`** am Block selbst (`section.i-section`). Kein negatives margin, keine unsichtbare Kachel, kein zweiter Anteil. IN ZWEI RUNDEN GEWACHSEN, beide Male nach dem Ansehen: 25 px Theme-Ausgangswert 50 px „den Abstand oben drueber musst du verdoppeln" 75 px „erhoehe bitte von 50 auf 75, weil das mir noch zu nah ist" ⚠️ **Die 75 sind ein Urteil, keine Rechnung.** Die 50 waren die Verdopplung und damit herleitbar; die 75 hat EDDY am Bild entschieden. Wer sie spaeter in Frage stellt, findet keine Formel dahinter, und das ist in Ordnung. ⚠️ **Beim Zerlegen war es ausnahmsweise einfach.** Bei den drei Abstaenden davor an dieser Seite steckte der Hebel jedes Mal woanders als vermutet (Falle 12). Auch hier wurde erst gemessen und dann gerechnet; dass nur eine Zahl herauskam, war das Ergebnis, nicht die Annahme. 🛑 DAFUER SASS DIE HUERDE WOANDERS, UND DER ERSTE ANLAUF WIRKTE NICHT. Die Regel stand ausgerollt in der Datei, wurde ausgeliefert, der Selektor passte, und gemessen waren es weiterhin 25 px. Der Grund: .similar-listings { padding-top: 25px !important } <- THEME **Das Theme setzt den Wert mit `!important`, bei identischem Gewicht (0,1,0).** Eine Regel ohne `!important` kann dagegen nicht gewinnen, egal wie spaet sie steht. Deshalb traegt diese hier ebenfalls `!important`, und das ist keine Bequemlichkeit, sondern der einzige Weg. **Gefunden wurde die Gegenregel nicht durch Nachdenken, sondern durch Suchen in den 20 CSS-Dateien, die die Seite wirklich laedt:** Sie steht in `assets/dist/css/single-listing.css`, also im Theme, nicht in einer eigenen Anpassung. **Ein Blick ins Child-CSS haette sie nie gezeigt.** ⚠️ Der Ausgangswert 25 kommt vom THEME. Ein Theme-Update kann ihn aendern, und die 75 hier merken davon nichts: Sie sind ein fester Wert, kein Vielfaches. Nach einem Update also einmal ansehen, ob der Abstand noch stimmt, statt sich auf die Zahl zu verlassen. -------------------------------------------------------------------------- */ .similar-listings { padding-top: 75px !important; } /* ========================================================================== AIMF-ANPASSUNG #059: Einordnung als eine Kachel (Snippet S-51) Referenz-Fassung: PROJEKTE/_ALLGEMEIN/SNIPPETS/S-51-einordnung-eine-kachel.css Aenderungen dort zuerst. Dies ist die Kopie, nicht hier bearbeiten. ========================================================================== */ /* -------------------------------------------------------------------------- S-51: Einordnung in EINER Kachel, die Zusatz-Ebenen optisch zurueckgenommen -------------------------------------------------------------------------- Gehoert zum PHP-Teil (Template-Override `terms-block.php`). Ohne diesen CSS-Teil sehen die Zusatz-Ebenen genauso aus wie die Hauptebene, und die Rangfolge, um die es bei der ganzen Aenderung geht, ist nicht zu sehen. DREI DINGE MACHT ES, MEHR NICHT: 1. DIE ZWISCHENUEBERSCHRIFT ist NORMAL geschrieben statt fett. EDDY 26.08.2026: *„nicht fett so wie jetzt die Hauptüberschrift des Moduls, sondern in der normalen Schrift."* 🛑 Der Rang entsteht ALLEIN aus der Schriftstaerke (400 gegen 700). Farbe und Groesse sind identisch mit der Blockueberschrift. 2. DIE SYMBOLE der Zusatz-Ebenen verlieren ihre graue Flaeche, behalten aber die SPUR. EDDY: *„ohne vollflächige Icons, die grau im Hintergrund sind, nur mit dem Symbol."* 3. DIE ZUSATZ-EBENEN stehen UNTEREINANDER, die Hauptebene nebeneinander. EDDY 26.08.2026: *„es gibt ja keine ordentliche Trennung, deswegen glaube ich, hintereinander ist keine Option. Bei Formaten kann man schon machen, dass es hintereinander kommt, aber bei den Themengebieten müssen wir es untereinander machen, weil es keine saubere Trennung gibt."* 🛑 PUNKT 2 UND 3 GELTEN SEIT DEM 27.08.2026 FUER BEIDE EBENEN, siehe den Zweispalten-Abschnitt ganz unten. Hier stand bis dahin, die Hauptebene BEHALTE ihre grauen Kreise und stehe nebeneinander, und das sei der Kern der Rangfolge. **EDDY hat das nach dem Ansehen zurueckgenommen:** *„Dass wir allgemein in dem Bereich keinen grauen Hintergrund benutzen, sondern die Icons alleine hinstellen."* Die Rangfolge ist damit nicht verloren, sie liegt nur woanders: in der Schriftstaerke der Ueberschrift (700 gegen 400) und in der Farbe der Zeichen. Was die grauen Kreise zusaetzlich getragen haben, war kein Rang, sondern eine 40-px-Kachel, und die hat die beiden Spalten um 21 px gegeneinander verschoben (gemessen, Beleg unten). ⚠️ Der Selektor haengt an `.ml-einordnung-ebene`, also an einer Huelle, die es nur in diesem Snippet gibt. Andere terms-Bausteine sind nicht betroffen, auch nicht der Veranstalter-Block, der aehnlich aussieht. -------------------------------------------------------------------------- */ /* --- Die Ebene als Ganzes: Abstand nach oben, damit sie sich absetzt ------- 🛑 NACHGEBESSERT 27.08.2026 auf EDDYs Wort: *„Dann machen wir nochmal fuenfzig Prozent Abstand zu den vorherigen Elementen, weil das noch nicht gut genug davon getrennt ist."* 🛑 UND DIE ZAHL IST NICHT 18 MAL 1,5. Wer das rechnet, hat die falsche Groesse um die Haelfte erhoeht. Gemessen am 27.08.2026 bei 1440 px: margin-top der Ebene 18 px margin-bottom der Liste DARUEBER -10 px (negativ, vom Theme) ------------------------------------------ Luecke Kasten zu Kasten 8 px sichtbare Luecke Tinte zu Ueberschrift 30 px Die 30 kommen daher, dass die Icon-Kacheln der Hauptebene 40 px hoch sind und die Tinte darin nur rund 15. **Ein Mensch sieht die 30, nicht die 18 und schon gar nicht die 8.** Also sind 50 Prozent mehr: 30 auf 45, und dafuer muss das margin von 18 auf 33. Nachgerechnet und danach am Bild gegengeprueft. ⚠️ Wer diesen Wert erneut aendert, misst zuerst die SICHTBARE Luecke nach. Das negative margin darueber und die hohe Icon-Kachel machen jede Rechnung allein am margin falsch (Falle 12 im Skill `individualisierungen`). */ .ml-einordnung-ebene { margin-top: 33px; } /* --- Die Zwischenueberschrift: normal statt fett, SONST IDENTISCH ----------- 🛑 NACHGEBESSERT 26.08.2026 auf EDDYs Wort: *„das muss schwarz sein, weil das komplett abweicht von dem, was wir haben."* Die erste Fassung trug `color: rgb(120,120,128)` und `font-size: 13px`. BEIDES waren eigene Zutaten, die niemand verlangt hatte, und beide sind raus. Die Werte hier sind an der Blockueberschrift GEMESSEN (`.title-style-1__heading`: rgb(36,36,41), 14px, 21px Zeilenhoehe, Staerke 700). Der einzige Unterschied ist jetzt die Staerke, genau wie EDDY es beschrieben hat. ⚠️ UND EINE LEHRE ZUM PRUEFEN: Auf dem verkleinerten Screenshot wirkte diese Farbe BLAU, und ich habe eine Runde an eine Fehlsuche verloren. Gemessen war sie die ganze Zeit rgb(36,36,41). Eine FARBE wird an `getComputedStyle` abgelesen, nie an einem Bild. Das Bild beantwortet, ob die Seite richtig AUSSIEHT, nicht welchen Wert eine Eigenschaft hat. */ /* 🛑 GEAENDERT 28.08.2026: die Zwischenueberschrift sieht jetzt aus wie eine BLOCKUEBERSCHRIFT, nicht mehr zurueckgenommen. EDDY nach dem Ansehen: *„Aendere bitte die Ueberschriften - Formate, Themengebiete, Zielgruppen und Level - dass das dieselben Ueberschriften sind wie bei den anderen, also wie bei Beschreibung und Termine. Nicht unterstrichen, sondern fett und gross geschrieben."* **Das ist eine Ruecknahme seiner eigenen Abnahme vom selben Tag** (*„Es schaut echt gut aus, ja, es passt so fuer mich"* zur duennen, gepunktet unterstrichenen Fassung). Kein Widerspruch, sondern eine Entscheidung nach dem Ansehen im Zusammenhang der ganzen Seite. ALLE WERTE SIND AM THEME GEMESSEN, nicht gewaehlt (`.ml-fakten` = Event Details, 1440 px): 14px / 21px / 700 / uppercase / letter-spacing 0.84px / rgb(36,36,41). ⚠️ Drei davon standen hier schon vorher richtig; abgewichen sind nur Schriftstaerke, Versalien, Sperrung und die Unterstreichung. */ /* 🛑 NACHTRAG 28.08.2026: 600, nicht 700. S-57 Teil B hat die Blocktitel der Detailseite von 700 auf 600 genommen, weil EDDY sie am Rechner zu wuchtig fand. **Diese Ueberschrift hier ist S-57 entgangen**, weil das Snippet an `.pf-head .title-style-1__heading` haengt und dies ein eigenes div ist. Ergebnis: THEMENGEBIETE und LEVEL standen auf 700, alle anderen auf 600. Gemessen 14px/21px auf beiden Breiten, also stimmten Groesse und Zeilenhoehe - **allein die Staerke fiel aus der Reihe, und genau das hat EDDY gesehen.** ⚠️ Die Lehre gilt ueber diesen Fall hinaus: Wer eine Eigenschaft ueber ALLE Ueberschriften angleicht, muss die eigenen nachziehen. Ein Snippet, das am Theme-Selektor haengt, erreicht die selbst gebauten Elemente nie. */ .ml-einordnung-kopf { font-weight: 600; font-size: 14px; line-height: 21px; text-transform: uppercase; letter-spacing: 0.84px; margin-bottom: 4px; color: rgb(36, 36, 41); } /* --- Zeichen und Text nebeneinander -------------------------------------- 🛑 DAS GEWICHT IST HIER PFLICHT, NICHT ZIERDE. Die Theme-Regel `#c27-single-listing .block-type-terms .details-list li > a` wiegt (1,2,2). Ein Selektor ohne die ID verliert gegen sie, egal wie spaet er steht. Deshalb ID plus DREI Klassen: (1,3,2). Nachgerechnet, nicht geraten. ⚠️ KEIN eigener `gap` mehr. Der Abstand zum Text kommt jetzt aus derselben Quelle wie bei der Hauptebene, naemlich der Theme-Regel `.social-nav li i { margin-right: 8px !important }`. Ein zusaetzlicher `gap` wuerde sich dazuaddieren, und die zweite Ebene haette einen groesseren Textabstand als die erste. Genau so war es bis zum 26.08.2026 (gap 7px). */ #c27-single-listing .ml-einordnung-ebene .outlined-list.details-list li a, #c27-single-listing .ml-einordnung-ebene .outlined-list.details-list li .terms-no-link { display: inline-flex; align-items: center; gap: 0; } /* --- Die Symbole: Flaeche weg, SPUR bleibt -------------------------------- 🛑 NACHGEBESSERT 26.08.2026. EDDY: *„das Icon von Digitale Gesellschaft und Nachhaltigkeit ist nicht auf derselben Hoehe wie vom Podiumsdiskussion, das ist komplett linksbuendig."* 🛑 DIE ERSTE DIAGNOSE WAR FALSCH, UND DAS IST DIE EIGENTLICHE LEHRE: Die KASTENKANTEN beider Ebenen fluchteten bereits exakt, beide starteten bei x=750,0. Eine Messung der Kastenkanten meldet hier sauber „kein Versatz" und liegt vollstaendig daneben. Der sichtbare Versatz kam allein aus der TINTE: Hauptebene 15,0 px Tinte in einem 40-px-Kasten -> 12,5 px Luft links Zusatz-Ebene 16,0 px Tinte in einem 16-px-Kasten -> 0,0 px Luft links Werkzeug dafuer: `tinte-messen.py`. Es beantwortet in einem Aufruf, was zwei Kastenmessungen nicht beantworten koennen. 🛑 UND DESHALB WIRD NICHT DIE TINTE AUSGERICHTET, SONDERN DIE SPUR: Jedes Symbol fuellt seinen Kasten anders stark aus (Falle 3 im Skill `individualisierungen`). Wer die Tinte des einen Zeichens auf die des anderen schiebt, hat es fuer GENAU DIESE ZWEI Symbole geloest und fuer jedes weitere nicht. Die 40-px-Spur mit zentriertem Zeichen loest es fuer alle, weil sie dieselbe Mechanik benutzt, die das Theme fuer die Hauptebene benutzt. Werte 1:1 aus der Theme-Regel `.element .pf-body > .social-nav li i` uebernommen (Breite 40, Schriftgroesse 18, display flex, align-items center), nur ohne Flaeche und ohne Kreis. Die HOEHE ist bewusst 20 statt 40: Bei untereinander stehenden Zeilen wuerde ein 40-px-Kasten je Zeile die Kachel unnoetig hoch machen. Die waagerechte Flucht haengt an der BREITE, nicht an der Hoehe. ⚠️ `width: auto` ALLEIN waere falsch und war es bis zum 26.08.2026: Das Theme setzt `.social-nav li a i { width: 40px; display: flex }`. Nimmt man nur die feste Breite weg, wird aus dem Flex-Element ein Block ueber die ganze Zeile (gemessen: 224,7 px statt 18), und der Text rutscht DARUNTER. 🛑 UND DIE ZWEITE NACHBESSERUNG VOM 26.08.2026, sie betrifft die WIRKUNG: EDDY nach dem Ansehen: *„die Icons, die du jetzt bei Themengebiete verwendet hast, wirken, weil sie keinen grauen Hintergrund haben, etwas dominant. Bei den Veranstaltern waren die Kontakt-Icons irgendwie entschaerft oder zarter."* Er hatte recht, und die Messung zeigt es doppelt. Mein Zeichen war das DUNKELSTE UND GROESSTE auf der ganzen Seite: mein Zeichen (vorher) rgb(36,36,41) voll 18px Tinte 18,0 px Format-Zeichen im Kreis rgb(85,85,88) 18px Tinte 15,0 px Veranstalter-Kontakt rgba(0,0,0,0.6) 14px Tinte 13,0 px 🛑 DER FEHLER SASS IN `color: inherit`. Ich hatte angenommen, die Zeichen der Hauptebene traegen die Textfarbe. Sie tun es NICHT, sie sind mittelgrau (rgb(85,85,88)). Wer erbt, bekommt hier also ein DUNKLERES Zeichen als das, neben dem es zuruecktreten soll. Und ohne graue Flaeche wirkt dieselbe Zeichengroesse kraeftiger, weil der Kreis das Zeichen sonst optisch einfasst. Die FARBE ist 1:1 vom Veranstalter-Block uebernommen, den EDDY als Vorbild genannt hat. GEMESSEN, nicht gewaehlt. ⚠️ Die GROESSE ist 16px und damit bewusst zwei Punkt ueber dem Vorbild: EDDY nach dem Ansehen der 14px-Fassung: *„ich finde, dass die Icons zu klein sind, kannst du sie auf 16 erhoehen."* Seine Zahl, nicht meine. Der Weg dahin war 18 (zu dominant) ueber 14 (zu klein) auf 16. ⚠️ Die FLUCHT bleibt davon unberuehrt: Sie haengt an der 40-px-Spur, nicht an der Zeichengroesse. Der Kasten zentriert jedes Zeichen, gleich wie gross. ⚠️ Eine ausdrueckliche Farbe ist ausserdem Pflicht, nicht Zugabe: Das Theme faerbt Icons in farbigen Kacheln fest WEISS (`.cat-icon i {color:#fff}`). Ohne eigene Farbe stuende ein weisses Zeichen auf weissem Grund, und das sieht nicht nach einem Farbfehler aus, sondern nach einem FEHLENDEN Symbol. Genau so am 22.08.2026 bei S-30 passiert. */ #c27-single-listing .ml-einordnung-ebene .outlined-list.details-list li a i, #c27-single-listing .ml-einordnung-ebene .outlined-list.details-list li a .term-icon, #c27-single-listing .ml-einordnung-ebene .outlined-list.details-list li .terms-no-link i, #c27-single-listing .ml-einordnung-ebene .outlined-list.details-list li .terms-no-link .term-icon { width: 40px; min-width: 40px; height: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; padding: 0; background: none !important; border: none !important; border-radius: 0; color: rgba(0, 0, 0, 0.6); } /* --- Die Zusatz-Ebenen stehen UNTEREINANDER ------------------------------- 🛑 NACHGEBESSERT 26.08.2026, und es ist eine bewusste Ruecknahme von EDDYs eigener frueherer Ansage („die lassen wir ebenfalls nebeneinander"), getroffen nach dem Ansehen. Sein Grund ist sachlich: Zwei Begriffe ohne Flaeche und ohne Trenner laufen ineinander. 🛑 DIE HAUPTEBENE BLEIBT NEBENEINANDER, und dafuer war KEIN Ausnahme-Selektor noetig: Sie liegt ausserhalb von `.ml-einordnung-ebene` und wird von dieser Regel gar nicht getroffen. Das ist der Vorteil des positiven Kennzeichens gegenueber einer Verneinung (Falle 6). */ .ml-einordnung-ebene .outlined-list { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 0; padding: 0; } .ml-einordnung-ebene .outlined-list li { width: auto; min-width: 0; margin: 0; padding: 0; } /* --- Die HAUPTEBENE bleibt mobil nebeneinander, auch bei genau zwei Werten --- 🛑 NACHGETRAGEN 27.08.2026 auf EDDYs Befund: *„Die zwei Formate stehen mobil immer noch nicht nebeneinander."* Am Rechner standen sie richtig, am Handy nicht, und deshalb war es beim Bau nicht aufgefallen. DIE URSACHE IST EINE RECHNUNG, KEINE VERMUTUNG. Gemessen bei 390 px: Container (die Liste) 340,0 px „Podiumsdiskussion" 177,8 px <- INHALTSBREITE, mehr als die Haelfte „Tagung" 170,0 px <- min-width 50 %, obwohl es 104 braucht --------------------------------- Summe 347,8 px -> 7,8 px zu viel, also Umbruch Das Theme zwingt bei GENAU ZWEI Werten beide auf mindestens die halbe Zeile (`.social-nav.item-count-2 li { min-width: 50% }`). Passt einer nicht in seine Haelfte, reicht der Platz fuer beide nicht mehr, und `flex-wrap: wrap` bricht um. 🛑 UND DER ERSTE ANLAUF WAR ZU BREIT, das ist die eigentliche Lehre. Er nahm ALLEN Hauptebenen das `min-width`. Die Formate standen danach richtig, **und die Zielgruppen-Liste mit ihren vier Werten zerfiel von einem sauberen 2+2-Raster in 2+1+1**, weil „Gruendung und Startups" 204 px braucht und dann allein in seiner Zeile steht. Gemessen, bevor irgendetwas ausgerollt war. **Wer eine Groesse aendert, misst die NACHBARSCHAFT, nicht nur die Stelle, an der er gedreht hat.** Deshalb haengt die Regel an `.item-count-2`, also genau an der Bedingung, die den Umbruch verursacht. Bei drei und mehr Werten traegt das 50-Prozent-Raster, dort wird nichts angefasst. ⚠️ Die ZUSATZ-Ebenen sind bewusst nicht betroffen: Sie liegen in `.ml-einordnung-ebene` und sind damit kein direktes Kind von `.pf-body`. Themengebiete und Level sollen untereinander stehen, das ist EDDYs Ansage vom 26.08.2026 und bleibt so. ⚠️ Bei ZWEI sehr langen Namen bricht es weiterhin um. Das ist richtig: Dann ist der Platz wirklich nicht da, und zwei abgeschnittene Begriffe waeren schlechter als zwei Zeilen. Gewicht: Theme-Regel (0,4,1), diese hier (1,5,1). Nachgerechnet, nicht geraten. */ @media only screen and (max-width: 768px) { #c27-single-listing .ml-einordnung .element .pf-body > .outlined-list.details-list.item-count-2 > li { min-width: 0; width: auto; flex: 0 1 auto; } /* Abstand ueber den Container, nicht ueber das Kind: Das Theme setzt `margin-right: 0 !important` auf `.social-nav > li`, ein eigenes margin dort wuerde dagegen verlieren. */ #c27-single-listing .ml-einordnung .element .pf-body > .outlined-list.details-list.item-count-2 { column-gap: 16px; } } /* -------------------------------------------------------------------------- ZWEISPALTIG UND OHNE GRAUE FLAECHE, Stand 27.08.2026 -------------------------------------------------------------------------- EDDY zuerst: „Links die Formate und rechts die Themengebiete, beide untereinander. Dann haben wir eine Zweispaltigkeit und dann schaut das schon ein bisschen sauberer und strukturierter aus." Danach, nach dem Ansehen der ersten Fassung: „Die Icons mit dem grauen Hintergrund und die ohne sind nicht auf derselben Ebene, wenn man eine horizontale Linie zieht. Dass wir allgemein in dem Bereich keinen grauen Hintergrund benutzen, sondern die Icons alleine hinstellen. Dann koennte sein, dass sich das Problem automatisch loest." 🛑 SEINE VERMUTUNG WAR DER RICHTIGE ANFANG UND NICHT DIE GANZE URSACHE. Gemessen, Versatz der ersten Textzeile links gegen rechts, 1440 und 390 px: Ausgangslage 21,0 px nur die graue Flaeche weg 11,0 px plus Zeilenabstand und Listen-Start 0,0 / 16,0 px plus gemeinsames Raster 0,0 px ueberall ES WAREN VIER URSACHEN, und jede musste einzeln fallen: 1. DIE 40-PX-KACHEL machte jede Zeile links 50 px hoch, rechts sind es 22. Sie trug die graue Flaeche; ohne Flaeche hat sie keinen Grund mehr. 2. `.element .pf-body > .details-list li a { margin-bottom: 10px }` greift NUR links, weil die Regel ein DIREKTES Kind von `.pf-body` verlangt und die Zusatz-Ebene in `.ml-einordnung-ebene` liegt. **Der Unterschied war nie eine Gestaltung, sondern ein Selektor, der eine Seite verfehlt.** 3. Zwischen Ueberschrift und erster Zeile standen links 15 px, rechts 4. 4. 🛑 DIE EIGENTLICHE URSACHE, und sie erklaert, warum es bei den Zielgruppen passte und bei den Formaten nicht: Die Zusatz-Ebene spannte mit `grid-row: 1 / span 2` ueber BEIDE Rasterzeilen. Ein Element ueber zwei Zeilen verteilt seine Ueberschusshoehe auf beide. Ist die rechte Spalte hoeher als die linke (bei den Formaten, weil „Digitale Gesellschaft & Nachhaltigkeit" zweizeilig ist), wird Rasterzeile 1 hoeher als die Ueberschrift, und links rutscht die Liste nach unten. ⚠️ DARAUS DIE REGEL FUER JEDEN, DER HIER WEITERBAUT: Zwei Spalten fluchten nicht dadurch, dass man zwei margins gegeneinander stimmt. Sie fluchten, wenn beide im SELBEN Raster liegen. Ueberschriften in Zeile 1, Listen in Zeile 2, und der Abstand dazwischen ist der `row-gap` des Rasters. ⚠️ Nur bei gekennzeichneten Bausteinen (`ml-einordnung`). Jeder andere terms-Block rendert unveraendert. -------------------------------------------------------------------------- */ /* --- Das gemeinsame Raster ------------------------------------------------ Am Rechner ergibt das von selbst EDDYs 50-25-25: Die Box steht in der halben Seitenbreite, und die Halbierung darin macht daraus zweimal ein Viertel. `row-gap: 15px` ist der Theme-Wert, den `.pf-body` als `padding-top` traegt und den jeder andere Baustein der Seite auch hat. Er liegt jetzt im Raster statt in zwei getrennten margins. */ #c27-single-listing .ml-einordnung .element { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; row-gap: 15px; align-items: start; } /* 🛑 `display: contents` nimmt den KASTEN weg, nicht den Inhalt: die Kinder werden zu Rasterfeldern des Grosselterns. Alles, was am Element selbst hing, faellt damit weg. Am `.pf-body` waren das 15 px Polsterung oben, und die traegt jetzt der `row-gap` oben. GEMESSEN, bevor die Zeile gesetzt wurde. */ #c27-single-listing .ml-einordnung .element .pf-body, #c27-single-listing .ml-einordnung .element .ml-einordnung-ebene { display: contents; } /* --- Wer in welchem Rasterfeld sitzt -------------------------------------- Beide Ueberschriften in Zeile 1, beide Listen in Zeile 2. Damit fluchten sie, weil das Raster es erzwingt, und nicht, weil zwei Werte zufaellig gleich sind. */ #c27-single-listing .ml-einordnung .element .title-style-1, #c27-single-listing .ml-einordnung .element .block-heading { grid-column: 1; grid-row: 1; } #c27-single-listing .ml-einordnung .element .pf-body > .outlined-list.details-list { grid-column: 1; grid-row: 2; margin-top: 0; } #c27-single-listing .ml-einordnung .element .ml-einordnung-kopf { grid-column: 2; grid-row: 1; margin-bottom: 0; } #c27-single-listing .ml-einordnung .element .ml-einordnung-ebene .outlined-list { grid-column: 2; grid-row: 2; } /* --- Die Zeichen BEIDER Ebenen stehen frei, in derselben Spur ------------- Die Hauptebene verliert hier ihre graue Flaeche und ihren 40-px-Kasten, die Zusatz-Ebene ihre 40-px-Spur aus der einspaltigen Fassung. Beide bekommen 24 x 20, damit die Zeilen gleich hoch sind. ⚠️ Die 40-px-Spur der Zusatz-Ebene gab es, damit ihre Zeichen mit den Kacheln der Hauptebene DARUEBER fluchten. Stehen die Ebenen nebeneinander und sind beide Spuren gleich breit, gibt es nichts mehr auszurichten. Sie kostete ausserdem: Bei 390 px ist die rechte Spalte rund 162 px breit, davon gingen 40 an die Spur. ⚠️ Was die Rangfolge weiter traegt: die Zusatz-Ebene ist 16 px gross und `rgba(0,0,0,0.6)` (beides oben gesetzt), die Hauptebene 18 px und `rgb(85,85,88)` vom Theme. Und die Ueberschrift bleibt fett gegen normal. 🛑 NACHGEBESSERT 27.08.2026, EDDY: *„Die Icons muessen weiter links anfangen, genau da, wo auch die Ueberschrift anfaengt. Es war ja vorher so, dass ein grauer Kreis drum herum war. Da wir ihn entfernt haben, ist der Abstand immer noch da."* **Er hat die Ursache genau benannt, und sie sass nicht am Kasten.** Gemessen: Der Kasten begann bereits bei x=750,0, also exakt an der Kante der Ueberschrift. Was Luft machte, war die ZENTRIERUNG darin: 15 px Zeichen in einem 24-px-Kasten sind 4,5 px links. Der Kasten stammte aus der Zeit des grauen Kreises, der das Zeichen einfassen sollte. Deshalb `justify-content: flex-start` und die Spur nur noch **18 px**, also das breiteste gemessene Zeichen (16,0 px) plus zwei Pixel Luft. Jede schmalere Spur gibt dem Text ihre Differenz zurueck, und genau daran fehlte es rechts. ⚠️ Die SPUR bleibt trotzdem fest und wird nicht durch `auto` ersetzt: Sie haelt verschieden breite Zeichen (gemessen 12,2 bis 16,0 px) in einer senkrechten Flucht. Ohne sie stuende jeder Text woanders. */ #c27-single-listing .ml-einordnung .element .outlined-list.details-list li a i, #c27-single-listing .ml-einordnung .element .outlined-list.details-list li a .term-icon, #c27-single-listing .ml-einordnung .element .outlined-list.details-list li .terms-no-link i, #c27-single-listing .ml-einordnung .element .outlined-list.details-list li .terms-no-link .term-icon { width: 18px; min-width: 18px; height: 20px; display: inline-flex; align-items: center; justify-content: flex-start; background: none !important; border: none !important; border-radius: 0; padding: 0; line-height: 1; } /* --- Beim Mausover bleibt das Zeichen SICHTBAR --------------------------- 🛑 NACHGETRAGEN 28.08.2026 auf EDDYs Befund: *„Wenn ich mit der Maus bei Format Netzwerktreffen drueber gehe, dann verschwindet das Icon, wird ausgeblendet."* ES VERSCHWINDET NICHT, ES WIRD WEISS AUF WEISS. Gemessen an der ausgelieferten Seite, Ruhe gegen Mausover: Hauptebene (Format, Zielgruppen) rgb(85,85,88) -> rgb(255,255,255) Zusatz-Ebene (Themengebiet, Level) rgba(0,0,0,.6) -> unveraendert Die Quelle ist `.element .pf-body > .details-list li a:hover i {color:#fff}` (Gewicht 0,4,3). Sie ist fuer den GRAUEN KREIS gedacht: Das Theme faerbt ihn beim Ueberfahren rot und das Zeichen darin weiss. Wir haben den Kreis entfernt, und die S-51-Regel oben schlaegt mit `background: none !important` sogar das rote `!important` des Themes (nachgemessen: Hintergrund bleibt durchsichtig). Uebrig bleibt weisse Tinte auf weissem Grund. 🛑 NUR DIE HAUPTEBENE WAR BETROFFEN, und das halbiert den Eingriff. Die Zusatz-Ebene setzt ihre Farbe oben selbst (Gewicht 1,4,3) und schlaegt die Theme-Hover-Regel dadurch schon vorher. **Wer hier blind beide Ebenen anfasst, repariert eine, die nie kaputt war** — und eine Regel, die nichts tut, sieht spaeter aus wie eine, die etwas tut. DIE ENTSCHEIDUNG, warum das Zeichen seine RUHEFARBE behaelt statt eine Akzentfarbe anzunehmen: Der Text daneben wechselt beim Ueberfahren nur von rgb(36,36,41) auf rgb(72,72,72), also kaum sichtbar. Ein Zeichen, das dabei rot wuerde, waere lauter als sein eigener Text. Gemessen, nicht gewaehlt. ⚠️ Die zweite Regel haelt die Zusatz-Ebene auf ihrem Wert, weil die erste sie sonst mitnehmen wuerde (sie liegt in `.ml-einordnung .element`). Ein positives Kennzeichen statt einer Verneinung — `:not()` waere hier zwar gueltig, laesst sich aber nicht auf eine Elternebene heben (Falle 6 im Skill `individualisierungen`). */ #c27-single-listing .ml-einordnung .element .outlined-list.details-list li a:hover i, #c27-single-listing .ml-einordnung .element .outlined-list.details-list li a:hover .term-icon { color: rgb(85, 85, 88); } #c27-single-listing .ml-einordnung .element .ml-einordnung-ebene .outlined-list.details-list li a:hover i, #c27-single-listing .ml-einordnung .element .ml-einordnung-ebene .outlined-list.details-list li a:hover .term-icon { color: rgba(0, 0, 0, 0.6); } /* --- Der Zeilenabstand kommt auf beiden Seiten aus derselben Quelle ------- Links stand er im 10-px-Rand des Links, rechts im `gap` der Liste. Jetzt beide im `gap`, sonst waeren die Zeilen links 30 px hoch und rechts 22. */ #c27-single-listing .ml-einordnung .element .outlined-list.details-list li a, #c27-single-listing .ml-einordnung .element .outlined-list.details-list li .terms-no-link { margin-bottom: 0; align-items: center; } #c27-single-listing .ml-einordnung .element .outlined-list.details-list { display: flex; flex-direction: column; align-items: stretch; row-gap: 2px; } /* 🛑 `align-items: center` oben ist eine bewusste RUECKNAHME vom selben Tag. Zwischenzeitlich stand hier `flex-start`, damit das Zeichen neben der ersten Textzeile steht und mit dem Zeichen der Nachbarspalte fluchtet. EDDY hat es anders entschieden: *„Wenn wir links ein Icon haben und rechts einen Begriff und der Begriff ist einzeilig, muss es auf derselben horizontalen Mittellinie liegen. Wenn es aber zweizeilig wird, muss das Icon zwischen den zwei Zeilen positioniert sein."* **Seine Regel ist die richtige, weil das Zeichen zu SEINEM Text gehoert und nicht zur Nachbarspalte.** Bei einzeiligen Werten sind beide Fassungen identisch (Zeichen und Textzeile je 20 px hoch); der Unterschied entsteht nur bei einem umbrechenden Wert. ⚠️ DER PREIS, und er ist gewollt: Steht links ein einzeiliger und rechts ein zweizeiliger Wert, sitzen die beiden Zeichen NICHT mehr auf einer Linie (gemessen 10 px Versatz). Das ist kein Fehler, sondern die Folge der Entscheidung. Wer es zurueckdreht, bricht EDDYs Vorgabe. */ /* --- Die Zeile darf die ganze Spalte nutzen ------------------------------ 🛑 HIER SASS DER UMBRUCH-FEHLER, und er war kein Ausrichtungs-Problem. Gemessen bei 390 px, von der Spalte abwaerts: ul 162,0 px li 81,0 px <- genau die Haelfte, hier geht sie verloren a 94,3 px span 62,3 px -> „Fortgeschrittene" zerfiel in drei Zeilen Die Quelle ist `.element .social-nav.item-count-3 li { width: 50% !important }`. Sie ist fuer die EINSPALTIGE Darstellung gedacht, wo mehrere Werte nebeneinander stehen sollen. In zwei Spalten stehen sie untereinander, und dort halbiert sie die Zeile ohne Grund. ⚠️ Das `!important` ist der Grund, warum die Regel dagegen nicht ankam, obwohl sie mit (1,4,1) deutlich schwerer wiegt als die Theme-Regel mit (0,3,1). Gegen `!important` hilft nur `!important` (Falle 1 im Skill `individualisierungen`). */ #c27-single-listing .ml-einordnung .element .outlined-list.details-list > li { width: auto !important; min-width: 0 !important; } /* --- Am Rechner bekommt die rechte Spalte mehr Platz ---------------------- EDDY 27.08.2026: *„Ich sehe, dass in der zweiten Spalte nach rechts noch Luft ist. Das heisst, die Texte werden schneller umgebrochen, als wir eigentlich muessten. Rechts koennte man dem noch ein bisschen mehr Platz geben."* 🛑 DIE ZAHL IST GEMESSEN, NICHT GEWAEHLT, und die Messung hat die Aufgabe kleiner gemacht: „Digitale Gesellschaft & Nachhaltigkeit" braucht **233 px**, der Textkasten hatte **222,5**. Es fehlten also **10,5 px**, nicht die hundert, die man auf den ersten Blick vermutet. Sechs davon bringt schon die schmalere Spur, der Rest kommt hier her. Bei 1440 px steht der Begriff jetzt in EINER Zeile. 🛑 UND NUR AM RECHNER, das hat die Messung erzwungen. Meine Rechnung sagte, auch bei 390 px bleibe links genug fuer „Gruendung & Startups". **Am Bild brach es trotzdem um.** Nachgemessen: Der Textkasten links ist dort nur **120 px** breit (nicht die gerechneten 136), der Begriff braucht **132**. Bei 390 px ist jede halbe Spalte rund 120 px breit, und was rechts gewonnen wird, fehlt links sofort. ⚠️ Die Lehre gehoert zur Nachbarschafts-Regel (Falle 5c im Skill `individualisierungen`): Wer eine Groesse aendert, misst die Stelle DANEBEN, und zwar bei JEDER Breite. Die Rechnung allein hat es nicht gefangen, das Bild schon. ⚠️ Am Handy bleibt es deshalb bei Haelfte und Haelfte. Ein Begriff ueber 19 Zeichen bricht dort um, und das ist kein Fehler, sondern der Platz. */ @media only screen and (min-width: 769px) { #c27-single-listing .ml-einordnung .element { grid-template-columns: 1fr 1.1fr; } } /* ========================================================================== ZUR ANSICHT, Stand 28.08.2026: EIN Kasten, KEINE Hauptueberschrift ========================================================================== 🛑 DAS IST EINE ZWISCHENSTUFE, KEIN FERTIGER BAU. EDDY hat sie ausdruecklich ausgerollt haben wollen, weil ein Bild nicht dasselbe zeigt wie die echte Seite: „Du musst das ausrollen und ich muss mir das als Link anschauen. Die Bilder schauen immer anders aus als in echt." Sein Gedanke davor: „Format, Themengebiet, Zielgruppe und Level sind eigentlich Ueberschriften. Theoretisch koennte man das alles in eine grosse Box packen und alle diese Ueberschriften duenn schreiben. Ohne Hauptueberschriften, und die Unterueberschriften lassen wir trotzdem, die vier Stueck, nur alle einheitlich, und vielleicht nicht nur klein geschrieben, sondern wirklich unterstrichen, weil dann werden sie trotzdem als wichtig gelesen." 🛑 DIESE FASSUNG IST AM 28.08.2026 ZURUECKGENOMMEN. Was oben steht, ist HISTORIE und beschreibt nicht mehr den Zustand. EDDY nach dem Ansehen des ausgerollten Standes, zwei Aenderungen in einem Diktat: 1. *„Das sind zwei verschiedene Boxen, ja genau, wir machen zwei verschiedene Boxen daraus."* -> die Verschmelzung faellt weg, jede Kachel bekommt ihren eigenen Kasten mit Schatten zurueck. 2. *„Aendere die Ueberschriften, dass das dieselben sind wie bei Beschreibung und Termine. Nicht unterstrichen, sondern fett und gross geschrieben."* -> alle vier tragen den Theme-Blocktitel-Stil. ✅ **UND DAMIT IST DER GEPLANTE STRUKTUR-UMBAU GEGENSTANDSLOS.** Hier stand, der saubere Bau haenge alle Zusatz-Ebenen unter EINE Hauptebene und nehme den zweiten Baustein aus dem Layout. **Der Grund dafuer war die Attrappe**: ein Kasten, der aus zwei Bausteinen zusammengesetzt ist, faellt beim naechsten Zusatz wieder auseinander. **Sollen es aber ZWEI Kaesten sein, entspricht die Struktur wieder genau dem, was man sieht** - zwei Bausteine, zwei Boxen. Es gibt nichts mehr zu verheiraten. ⚠️ Wer den Umbau trotzdem irgendwo als offenen Punkt findet: Er war die Folge einer Optik-Entscheidung, die es nicht mehr gibt. Nicht wiederbeleben, ohne vorher zu klaeren, ob EDDY wieder EINEN Kasten will. ========================================================================== */ /* --- Die Blockueberschrift bleibt der THEME-STANDARD ---------------------- 🛑 HIER STANDEN BIS ZUM 28.08.2026 ZWEI REGELN, und beide sind ERSATZLOS ENTFERNT, nicht ueberschrieben: 1. eine Angleichung der Blockueberschrift an die duenne Zwischenueberschrift (400, keine Versalien, keine Sperrung), 2. eine gepunktete Unterstreichung fuer alle vier Ueberschriften. EDDY hat beides nach dem Ansehen zurueckgenommen: *„Nicht unterstrichen, sondern fett und gross geschrieben, wie bei Beschreibung und Termine."* **Entfernen ist hier der richtige Weg und nicht die bequeme Abkuerzung:** Gemessen am unberuehrten `.ml-fakten` traegt der Theme-Blocktitel exakt 14px / 21px / 700 / uppercase / 0.84px / rgb(36,36,41). Drei dieser Werte standen in der alten Regel schon richtig drin. Wer sie stattdessen mit den Soll-Werten UEBERSCHRIEBEN haette, haette eine Regel hinterlassen, die nichts tut - und die beim naechsten Theme-Update stillschweigend falsch wird, weil sie den alten Stand einfriert. ⚠️ Was hier NICHT steht, ist Absicht: Die Blockueberschrift braucht keine eigene Zeile mehr. Nur die Zusatz-Ebene (`.ml-einordnung-kopf`) bekommt die Werte gesetzt, weil sie ein eigenes div ist und keinen Theme-Stil erbt. */ /* --- Der Zeilenabstand wie in den Nachbarbloecken ------------------------- 🛑 GEMESSEN, nicht gewaehlt. Mitte zu Mitte bei 1440 px: Event Details 39,0 px Anmeldung 39,0 px Einordnungs-Kachel 24,0 px <- um 15 px enger als ihre Nachbarn **Die Kachel war die Ausnahme, nicht der Massstab.** EDDY: „Ich glaube, dass der Abstand zu eng aneinander ist." 🛑 UND DANN WAR DER VOLLE NACHBARWERT ZU VIEL. EDDY nach dem Ansehen: „Die Abstaende sind mir jetzt zu gross zwischen den Icon-Elementen. Das haette so ein Mittelwert zwischen beiden sein muessen." **Er hat recht, und der Grund ist der Aufbau:** In den Nachbarbloecken ist die ZEILE selbst 35 px hoch (Beschriftung plus Wert), der Zwischenraum nur 4. Hier ist die Zeile 20 px hoch, der Zwischenraum traegt alles. Dieselbe Zahl Mitte zu Mitte wirkt deshalb luftiger. **Endstand 31 px**, also die Mitte zwischen den urspruenglichen 24 und den 39 der Nachbarn. */ #c27-single-listing .ml-einordnung .element .outlined-list.details-list { row-gap: 11px; margin-bottom: 0; } /* --- Die zwei Kaesten als einer ------------------------------------------ 🛑 DER SELEKTOR SITZT AM `.element`, NICHT AM BAUSTEIN. Gemessen: `.ml-fuerwen` selbst traegt weder Hintergrund noch Rand noch Abstand, alles Nullwerte. Der weisse Kasten ist sein KIND. Wer den Baustein misst, sieht lauter Nullen und haelt den Kasten fuer unauffindbar (Falle 5 im Skill). */ /* --- Die Naht zwischen den zwei Gruppen ---------------------------------- 🛑 SIE BRAUCHT MEHR LUFT ALS EINE ZEILE, sonst liest niemand sie als Trennung. EDDY: „Dann kleben die unteren Ueberschriften viel zu nah an den letzten Icon-Elementen aus den oberen Ueberschriften. Da muss ein bisschen Abstand drin sein, dass man sieht, dass die zwei oberen und die zwei unteren voneinander getrennt sind." **Der Rahmen ist gemessen, nicht gewaehlt:** Abstand Ueberschrift zu ihren Werten 15 px <- Untergrenze Zeilenabstand innerhalb einer Liste 11 px Abstand zwischen zwei ECHTEN Bloecken 42,5 px <- Obergrenze ------------------------------------------------ Naht zwischen den zwei Gruppen 32 px (16 unten + 16 oben) Deutlich mehr als der Abstand zur eigenen Ueberschrift, deutlich weniger als zwischen zwei getrennten Bloecken. Genau das soll es aussagen: dieselbe Kachel, aber eine andere Frage. */ /* 🛑 HIER STANDEN DIE FUGEN-REGELN. ALLE ERSATZLOS ENTFERNT AM 28.08.2026. EDDY nach dem Ansehen: *„Das sind zwei verschiedene Boxen, ja genau, wir machen zwei verschiedene Boxen daraus."* **Damit ist die Verschmelzung zurueckgenommen.** Es gab hier drei Regeln, die die Naht zwischen `.ml-was` und `.ml-fuerwen` geschlossen haben: kein Aussenabstand, halbe Innenpolsterung, keine Rundung an der Naht - und `box-shadow: none !important`, das den Kasten der OBEREN Kachel mitgenommen hat. Genau darueber war er am selben Tag gestolpert (*„ueber den anderen Elementen sehe ich das Drumherum, hier nicht"*). ✅ **Alle vier Werte kommen jetzt vom Theme zurueck, ohne eine einzige eigene Zeile.** Gemessen am unberuehrten `.ml-fakten`: Schatten `rgba(0,0,0,0.07)`, Rundung 5px rundum, `margin-bottom: 25px`, `padding-bottom: 20px`. **Der Abstand zwischen den beiden Boxen ist damit derselbe wie zwischen allen anderen Bloecken der Seite** - die frueher hier gerechnete 32-px-Naht ist gegenstandslos. ⚠️ **Warum ENTFERNEN und nicht auf die Theme-Werte setzen:** Eine Regel, die den Theme-Wert wiederholt, tut nichts und friert ihn zugleich ein. Beim naechsten Theme-Update weicht sie still ab, und niemand sucht dort. Das Erfolgs-Kriterium dieses Strangs verlangt es woertlich so: die Hilfsregeln fuer die Fuge sind ENTFERNT, nicht ueberschrieben. ⚠️ **Was NICHT zurueckkommt und auch nicht soll:** Der Zweispalter, die Zeichen ohne graue Flaeche und der Zeilenabstand von 31 px stehen weiter oben und sind unberuehrt. Zurueckgenommen ist allein die VERSCHMELZUNG der zwei Kaesten, nicht der Umbau ihres Inhalts. */ /* 🛑 `padding-bottom` HIER IST EINE REPARATUR MEINES EIGENEN FEHLERS. EDDY: „Unter dem letzten Icon ganz unten ist sofort die Box zu Ende. Bei den anderen ist es nicht so, da ist das Drumherum noch ein bisschen Fleisch." **Er hatte recht, und ich hatte es aktiv weggenommen:** Beim Schliessen der Fuge zwischen den zwei Kaesten habe ich `padding-bottom` auf 8 px gesetzt und damit den Innenabstand mitgenommen, den JEDER andere Block hat. Gemessen am unberuehrten `.ml-fakten .element`: **20 px oben und unten.** Der Wert steht jetzt wieder da, wo er hingehoert. ⚠️ Dazu musste der negative `margin-bottom` der Liste weg (oben gesetzt): Das Theme zieht die letzte Liste um 10 px nach unten heraus, damit haette die Polsterung nur zur Haelfte gewirkt. Falle 5c: Wer etwas wegnimmt, prueft, was es fuer die Nachbarn getragen hat. */ /* Auch die Gegenstuecke der unteren Kachel (`margin-top`, `padding-top`, Rundung oben) sind ersatzlos entfernt - siehe den Block darueber. Die Reparatur des fehlenden Innenabstands unten (`padding-bottom: 20px`) faellt damit ebenfalls weg: Sie war noetig, WEIL die Fuge geschlossen war. Ohne Fuge liefert das Theme dieselben 20 px von selbst, nachgemessen an `.ml-fakten`. Ein behobener Fehler, dessen Ursache verschwindet, braucht keine Regel mehr. */ /* ========================================================================== AIMF-ANPASSUNG #060 (Snippet S-52) Menue-Icons am Rechner + Untermenue-Schreibweise Referenz-Fassung: PROJEKTE/_ALLGEMEIN/SNIPPETS/S-52-menue-icons-und-schreibweise.css Aenderungen dort zuerst. Dies ist die Kopie, nicht hier bearbeiten. ========================================================================== */ /* -------------------------------------------------------------------------- S-52: Menue-Icons auch am Rechner zeigen, und Untermenues so schreiben, wie sie eingetragen sind -------------------------------------------------------------------------- EDDY 26.08.2026 an AIMF: "Die Icons, die von WordPress hinterlegt sind, werden im Header-Menue nicht angezeigt. Und die Untermenue-Punkte, dort wo ich klein geschrieben hab, werden die Sachen nicht klein angezeigt." 🛑 BEIDES IST KEIN FEHLER, SONDERN THEME-ABSICHT. Das ist der Grund, warum man hier nichts "repariert", sondern eine Vorgabe ueberschreibt. Wer das nicht weiss, sucht den Fehler in der Konfiguration und findet keinen. -------------------------------------------------------------------------- URSACHE 1: Die Icons SIND da, das Theme blendet sie am Rechner aus MyListing haengt Menue-Icons NICHT als Menue-Meta an, sondern als Shortcode IM MENUETITEL: [27-icon icon="icon-places-home-3"] Start [27-icon icon="fa fa-compass"] KI-Events Sie stehen also im Quelltext, gerendert als . Ausgeblendet werden sie erst per CSS, und zwar gezielt am Rechner: .main-nav li a i @media (max-width: 1200px) display: block (Gewicht 0,1,3) .main-nav li a i @media (min-width: 1201px) display: none (Gewicht 0,1,3) Das Theme zeigt Menue-Icons also nur auf Handy und Tablet. ⚠️ EIN MENUEPUNKT OHNE SHORTCODE BEKOMMT KEIN ICON. Das ist Redaktionsarbeit im Menue, nicht Sache dieses Snippets. -------------------------------------------------------------------------- 🛑 DIE HERSTELLER-REGEL IST UNVOLLSTAENDIG: OHNE `line-height` SITZT DAS ZEICHEN UEBER DER TEXTLINIE EDDY am 26.08.2026, nachdem beide Icons standen: *„Die Icons sind nicht auf derselben Hoehe wie die Begriffe. Wenn man das Icon von oben nach unten anschaut und sich den Horizont zieht, dann ist es nicht derselbe Horizont wie beim Menuepunkt."* **Gemessen, an der Tinte statt am Kasten:** START Startup-Events Versatz -1,00 px AIMF KI-Events Versatz -1,50 px AIMF Kontakt Versatz -1,00 px Immer nach oben. Die Ursache steht direkt daneben: Icon: line-height 14px Text: line-height 20px **Eine Textzeile sitzt MITTIG in ihrer Zeilenhoehe.** Das Theme gibt jedem Zeichen `[class^="icon-"] { line-height: 1 }`, der Menuetext hat 20 px. Zwei verschiedene Zeilenhoehen koennen gar nicht dieselbe Mitte haben. 🛑 **Behoben mit `line-height: inherit`, nicht mit einem Pixelwert.** Ein `vertical-align: 1px` waere ein Ausgleich, der an einer Voraussetzung haengt: Sobald jemand die Schriftgroesse des Menues aendert, stimmt er nicht mehr, und niemand sucht ihn dort (Falle 11 im Skill). `inherit` bindet das Zeichen an die Zeilenhoehe seines Links und geht jede Aenderung mit. ⚠️ **DER FEHLER LAG AUF BEIDEN PLATTFORMEN, seit START die Regel hat.** Er ist nie aufgefallen, weil es keinen richtigen Fall zum Vergleichen gab. Beim Zusammenfuehren wurden AIMF und START nebeneinander gehalten und fuer sauber befunden: **Ein Vergleich zweier Faelle, die BEIDE falsch sind, sieht aus wie eine Bestaetigung.** Aufgefallen ist es erst dem Auftraggeber am Bild. -------------------------------------------------------------------------- 🛑 DIE ZWEI ERSTEN ZEILEN DER REGEL SIND DIE DES HERSTELLERS, WORTWOERTLICH. Nachgelesen am 26.08.2026 unter docs.mylistingtheme.com/article/show-main-menu-icons-on-desktop/ . Sie stand auf START seit Langem genau so, weil dort jemand die Doku befolgt hat. **Nicht "verbessern".** Wer meint, es fehle etwas, misst zuerst. ⚠️ Der Hersteller legt sie unter Theme Options, Custom Code, CSS ab. **Wir legen sie ins Child-Theme**, und das ist eine bewusste Abweichung: Custom Code ist nicht versioniert, taucht in keiner Datei-Suche auf und driftet still. Genau daran ist am 26.08.2026 eine Recherche gescheitert, die im Child-Theme suchte und meldete, es gebe workspace-weit nichts dazu. -------------------------------------------------------------------------- 🛑 ZWEI SCHREIBWEISEN FUER ICONS, UND NUR EINE IST DIE OFFIZIELLE [27-icon icon="icon-calendar-1"] KI-Events ✅ so Startup-Events ❌ nicht so **Der Shortcode ist der dokumentierte Weg** (Hersteller-Doku, "How to create main menu"): Shortcode unter Theme Tools, Shortcodes, Icon holen und vor den Namen setzen. Rohes HTML funktioniert zwar auch, ist aber nicht vorgesehen und macht den Titel unlesbar, sobald jemand ihn im Backend bearbeitet. *Stand 26.08.2026: START fuehrt beide Formen nebeneinander, im Hauptmenue rohes HTML, im Konto-Menue den Shortcode. AIMF nutzt durchgehend den Shortcode. Vereinheitlicht wird auf den Shortcode.* **Die 350 Icon-Namen des Themes stehen in** `includes/utils/icons/theme-icons.php` und `assets/dist/icons.css`. Dort greppen statt raten. Font-Awesome-Klassen (`fa fa-compass`, `fa-regular fa-building`) funktionieren im Shortcode ebenfalls. URSACHE 2: Untermenues schreiben gross, was klein eingetragen ist .i-dropdown li a text-transform: capitalize (Gewicht 0,1,2, immer aktiv) Aus "test kleinschreibung" wird damit "Test Kleinschreibung". Betrifft NUR Untermenues; das Hauptmenue traegt die Regel nicht. -------------------------------------------------------------------------- 🛑 DIESE FASSUNG IST DIE ZUSAMMENFUEHRUNG ZWEIER VORHANDENER. HERKUNFT LESEN, BEVOR JEMAND SIE "VERBESSERT" Auf START lief die Loesung schon, seit Langem und auf Live, nur nicht im Child-Theme: Sie lag in den Theme-Options unter `options_custom_css`. Deshalb hat eine Suche im Child-Theme sie nicht gefunden, und deshalb hiess es am 26.08.2026 faelschlich, es gebe workspace-weit nichts dazu. **Wer nach einer bestehenden Loesung sucht, sucht in BEIDEN Ablagen** (Skill `individualisierungen`, `scripts/verstreuten-code-finden.php`). Aus beiden Fassungen ist jeweils die bessere Haelfte genommen: ICONS: die START-Fassung, unveraendert. Sie ist minimal und erprobt. ul.main-nav li a i (0,1,4) schlaegt Theme (0,1,3) display: inline-block; padding-right: 5px; ⚠️ Die AIMF-Erstfassung trug zusaetzlich `float: none`, `width: auto`, `font-size: 15px`, `line-height: 20px`, `vertical-align: -1px` und `color: inherit`. **Drei davon sind ueberfluessig, eine war noetig:** - `float`/`width` heben die MOBILE Theme-Regel auf, die am Rechner gar nicht aktiv ist. Sie korrigieren also nichts. **Raus.** - `color` wird ohnehin vererbt, am Rechner konkurriert keine Regel. **Raus.** - `font-size` ist Geschmack; ohne sie erbt das Zeichen die 14 px des Menuepunkts, und so steht es auf START seit Langem gut. **Raus.** - 🛑 **`line-height` war NOETIG** und ist als `inherit` zurueck, siehe den Abschnitt darueber. Der feste Wert `20px` war allerdings die schlechtere Form: Er haette sich bei jeder Schriftaenderung des Menues stillschweigend verzogen. **Die Lehre aus beiden Richtungen zusammen:** Die "zur Sicherheit"-Falle ist echt, jede zusaetzliche Eigenschaft kann etwas ueberschreiben, das man nicht kennt. Aber der Rueckbau darf nicht pauschal sein: **Wer Eigenschaften entfernt, prueft jede EINZELN gegen einen Fall, von dem er weiss, dass er richtig ist.** Genau daran ist es hier gescheitert; als Vergleichsfall diente START, und dort war derselbe Fehler drin. SCHREIBWEISE: die AIMF-Fassung, weil sie OHNE !important auskommt. .i-dropdown li.menu-item a (0,2,2) schlaegt Theme (0,1,2) Das Gewicht kommt aus `.menu-item`, einer Klasse, die WordPress jedem Menuepunkt selbst vergibt: plattformneutral und spaeter normal ueberschreibbar. START hatte hier `!important`, was beides verbaut. -------------------------------------------------------------------------- ZUR GROESSE, FALLS SIE JEMAND ANFASSEN WILL Ohne eigene Angabe erbt das Zeichen die Schriftgroesse des Menuepunkts, auf beiden gemessenen Plattformen 14 px. Das sieht auf START seit Langem gut aus. ⚠️ Wer sie doch setzt, bedenkt: Ein Icon fuellt seinen Kasten schwaecher aus als ein Buchstabe und wirkt bei gleicher Punktzahl kleiner (`tinte-messen.py` rechnet den noetigen Wert vor). Das ist ein Grund fuer eine bewusste Abweichung, kein Grund fuer eine pauschale. -------------------------------------------------------------------------- VOR DEM AUSROLLEN AUF EINER NEUEN PLATTFORM 1. LADEREIHENFOLGE pruefen. Ohne sie wirkt keine dieser Regeln, egal wie gut: curl -s --ssl-no-revoke "" | grep -o -E "id='(child-style|mylisting-frontend)-css'" | cat -n `child-style-css` MUSS hinter `mylisting-frontend-css` stehen. 2. Die Umbruchgrenze 1200/1201 px gegenpruefen. Sie stammt aus dem Theme und kann sich mit einer Version aendern; dann greift der Media-Query daneben. 3. Ob dort ueberhaupt Icons in den Menuetiteln stehen. Ohne Shortcode passiert sichtbar nichts, und das sieht wie ein wirkungsloses Snippet aus. WAS ES NICHT ABDECKT - Mobil und Tablet. Dort zeigt das Theme die Icons von sich aus. - Das Hauptmenue-Schriftbild. Nur Untermenues tragen `capitalize`. - Icons im Konto-Menue (`mylisting-user-menu`). Anderer Ort, eigene Regeln. -------------------------------------------------------------------------- */ /* 1) Menue-Icons auch am Rechner zeigen. Die ersten zwei Zeilen sind die Fassung des Herstellers, unveraendert. `line-height: inherit` ist ergaenzt, siehe Kopf: ohne sie sitzt das Zeichen ueber der Textlinie. */ @media only screen and (min-width: 1201px) { ul.main-nav li a > i { display: inline-block; padding-right: 5px; line-height: inherit; } } /* 2) Untermenue: die eingetragene Schreibweise stehen lassen. Gewicht ueber .menu-item statt ueber !important. */ .i-dropdown li.menu-item a { text-transform: none; } /* ========================================================================== AIMF-ANPASSUNG #062: Formularstil WPForms an MyListing angleichen (Felder, Beschriftungen, Knopf, Datenschutz-Link unterstrichen, einzeilige Felder 42 px) (Snippet S-54) Referenz-Fassung: PROJEKTE/_ALLGEMEIN/SNIPPETS/S-54-formularstil-wpforms-an-mylisting.css Aenderungen dort zuerst. Dies ist die Kopie, nicht hier bearbeiten. ========================================================================== */ .wpforms-container { /* Beschriftungen: wie der Fliesstext der Detailseite */ --wpforms-label-color: #242429 !important; --wpforms-label-size-font-size: 14px !important; --wpforms-label-size-line-height: 20px !important; --wpforms-label-size-sublabel-font-size: 13px !important; --wpforms-label-size-sublabel-line-height: 19px !important; --wpforms-label-sublabel-color: rgba(36, 36, 41, 0.6) !important; /* Eingabefelder: Hoehe wie bei der Registrierung, Radius wie die Bloecke */ --wpforms-field-text-color: #242429 !important; --wpforms-field-size-font-size: 14px !important; --wpforms-field-size-line-height: 20px !important; --wpforms-field-size-input-height: 47px !important; --wpforms-field-size-padding-h: 14px !important; --wpforms-field-size-input-spacing: 4.5px !important; /* 04.09.2026 von 18px um 75 % gekuerzt (EDDY): die Beschriftung soll bei ihrem Feld sitzen, nicht dazwischen schweben. Der Abstand ZWISCHEN den Feldbloecken bleibt unveraendert, dadurch trennen sie sich staerker. */ --wpforms-field-border-radius: 5px !important; --wpforms-field-border-color: rgba(36, 36, 41, 0.18) !important; --wpforms-field-border-color-spare: rgba(36, 36, 41, 0.18) !important; /* Knopf: die Akzentfarbe der Plattform, nicht WPForms-Blau (#066aab) */ --wpforms-button-background-color: #d40d26 !important; --wpforms-button-border-color: #d40d26 !important; --wpforms-button-text-color: #ffffff !important; --wpforms-button-border-radius: 5px !important; --wpforms-button-size-font-size: 14px !important; /* 04.09.2026: an den Button im Kopfbereich der Eintragsseite (EDDY) */ --wpforms-button-size-height: 42px !important; /* dito, gemessen am Button 'zur Anmeldung' */ --wpforms-button-size-padding-h: 20px !important; /* dito */ --wpforms-button-size-margin-top: 20px !important; --wpforms-page-break-color: #d40d26 !important; } /* Das FORMULAR wird begrenzt, nicht das einzelne Feld. Gemessen 27.08.2026: alle sechs Felder tragen `wpforms-field-medium`, die Nachricht lief trotzdem ueber die volle Breite (1100 gegen 660 px), weil WPForms Textbereiche anders behandelt. Das wirkte unruhig neben der ruhigen Detailseite. Statt die Felder auf voll zu ziehen wird deshalb das Formular auf 680 px begrenzt. 🛑 DIE FELDER FLUCHTEN DABEI NICHT, UND DAS IST ENTSCHIEDEN SO. Hier stand bis zum 13.10.2026 "dann bleibt es kompakt und alles fluchtet" - und das war nie der gemessene Zustand: die einzeiligen Felder sind 408 px breit, der Textbereich 680 (bei 1440 px Bildschirm). Ursache ist WPForms' eigene Regel auf `.wpforms-container input.wpforms-field-medium` mit `max-width: 60%` - sie traegt dasselbe Gewicht [0,2,1] wie unsere und laedt SPAETER; 680 mal 0,6 sind genau die gemessenen 408. (Das Beispiel steht hier bewusst OHNE geschweifte Klammern: sie wuerden bei jeder Klammer-Bilanz und jeder Regelzaehlung mitzaehlen und eine Regel vortaeuschen, die es nicht gibt.) EDDY 10.09.2026: "Ungleiche Feldbreiten auf der Kontaktseite sind in Ordnung.", bestaetigt am 13.10.2026 (Entscheid 804): "Das Kontaktformular passt so von der unterschiedlichen Breite." ES WIRD NICHT REPARIERT. ⚠️ Der falsche Satz an dieser Stelle hat zweimal dazu gefuehrt, dass jemand dagegen misst und denselben Befund meldet (04.09. und 13.10.2026). Eine Beschreibung, die den Soll-Zustand behauptet statt den echten, erzeugt genau diese Schleife. */ .wpforms-container .wpforms-form { max-width: 680px; } .wpforms-container .wpforms-field-medium, .wpforms-container input.wpforms-field-medium, .wpforms-container textarea.wpforms-field-medium, .wpforms-container select.wpforms-field-medium { max-width: 100%; width: 100%; } /* Hoehe der EINZEILIGEN Felder: 42 px wie der Header-Button "Event eintragen". EDDY 13.10.2026: "auf der Kontaktseite sollen die felder zum Eingeben (ausser fuer Nachrichten) die selbe Hoehe und Rundung wie der Button oben rechts im Hauptmenue haben." Die Rundung war mit 5 px schon richtig, zu aendern war nur die Hoehe. 🛑 WARUM NICHT UEBER --wpforms-field-size-input-height, die oben auf 47px steht und dort BLEIBT: WPForms leitet daraus auch die Hoehe des TEXTBEREICHS ab. Gemessen am 13.10.2026 als Probe ohne Rollout: Variable auf 42 gesetzt, und die Nachricht sprang von 131,59 auf 117,59 px - also genau das Feld, das EDDY ausdruecklich ausgenommen hat. Eine Einstellung, die MEHR trifft als die Stelle (Skill §Die zweite Frage). `input` nimmt den Textbereich bauartbedingt aus, deshalb steht die Hoehe hier als echte Regel. 🛑 Ein Glied mehr Gewicht statt !important: [0,3,1] schlaegt die WPForms-Regel `div.wpforms-container-full input[type="text"]` [0,2,2], die die Hoehe aus der Variablen setzt. Dasselbe Muster wie beim font-weight des Knopfes weiter unten - dort hatte [0,2,1] acht Tage lang nichts getan. ⚠️ Die schmalen Spam-Fallen gehen in der HOEHE mit (auf AIMF field_4/field_8, 30 px breit). Sie tragen dasselbe Markup wie Betreff und Unternehmen (`wpforms-field-text` + `input.wpforms-field-medium`) und sind davon nur ueber ihre Feld-ID zu trennen - eine Formular-ID gehoert nicht in die zentrale Fassung. Ihre BREITE bleibt unberuehrt. */ .wpforms-container .wpforms-form input.wpforms-field-medium { height: 42px; } /* Was die Variablen NICHT koennen, deshalb als echte Regel. EDDY 27.08.2026: "Datenschutz ist doch logisch. Wer soll denn wissen, dass das verlinkt ist? Das muss unterstrichen sein." */ .wpforms-container .wpforms-field-checkbox a, .wpforms-container .wpforms-field-gdpr-checkbox a, .wpforms-container .wpforms-field-description a, .wpforms-container label a { text-decoration: underline; text-underline-offset: 2px; color: inherit; } .wpforms-container .wpforms-field-checkbox a:hover, .wpforms-container .wpforms-field-gdpr-checkbox a:hover, .wpforms-container .wpforms-field-description a:hover, .wpforms-container label a:hover { color: #d40d26; text-decoration-color: #d40d26; } /* 🛑 Eine Klasse mehr Gewicht, und das ist kein Schoenheitsfehler: Bis zum 04.09.2026 stand hier `.wpforms-container button[type=submit]` mit Gewicht [0,2,1]. Die WPForms-Regel `div.wpforms-container-full button[type=submit]` wiegt [0,2,2] und laedt spaeter - die Staerke 600 hat vom 27.08. bis 04.09. NIE gewirkt, gemessen wurden 500. Ein Fund im CSS ist eben kein Wirkungsnachweis. */ .wpforms-container .wpforms-form button[type=submit] { font-weight: 600; transition: opacity .15s ease; } /* Doppelwinkel vor der Beschriftung, wie bei den Buttons der Startseite (EDDY 04.09.2026, nach Ruecksprache ausdruecklich auch hier gewuenscht). 🛑 DASSELBE Zeichen, nicht ein aehnliches: Elementor rendert dort Font-Awesome "angle-double-right" als Inline-SVG. Ein getipptes » aus der Schrift saehe daneben anders aus. Deshalb steht hier derselbe Pfad als Maske. 🛑 mask statt background-image, damit das Zeichen die TEXTFARBE nimmt (currentColor) und beim Ueberfahren mitfaerbt. Ein eingefaerbtes Bild bliebe weiss, auch wenn der Text die Farbe wechselt. Masse von der Startseite gemessen: Symbol so gross wie die Schrift (dort 13 px bei 13 px), Abstand zum Text 5 px. Hier proportional als 1em und 0.4em, damit es bei der groesseren Buttonschrift mitwaechst. */ .wpforms-container .wpforms-form button[type=submit]::before { content: ""; display: inline-block; width: 1em; height: 1em; margin-right: 0.4em; vertical-align: -0.12em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z'/%3E%3C/svg%3E") no-repeat center / contain; } .wpforms-container button[type=submit]:hover { opacity: .88; } /* KEIN weisser Kasten mit Schatten wie auf der Detailseite. Dort steht er auf grauem Grund und hebt sich ab; die Kontaktseite hat weissen Grund, dort waere er unsichtbar. Am Bild geprueft und deshalb weggelassen, statt eine Regel zu schreiben, die nichts tut. Braucht eine Plattform den Kasten, gibt es dafuer --wpforms-background-color, --wpforms-container-padding, --wpforms-container-border-radius und --wpforms-container-shadow-size-box-shadow. */ /* === AIMF-ANPASSUNG #063: Mobile Reihenfolge der Detailseiten-Bausteine, unabhaengig vom Rechner (Snippet S-55) === */ @media only screen and (max-width: 768px) { #c27-single-listing .cts-main-column { display: flex; flex-direction: column; } #c27-single-listing .cts-main-column .ml-absage { order: 10; } #c27-single-listing .cts-main-column .ml-was { order: 20; } #c27-single-listing .cts-main-column .ml-fuerwen { order: 30; } #c27-single-listing .cts-main-column .ml-fakten { order: 40; } #c27-single-listing .cts-main-column .block-type-text { order: 50; } #c27-single-listing .cts-main-column .block-type-upcoming_dates { order: 60; } #c27-single-listing .cts-main-column .ml-anmeldung { order: 70; } } /* ========================================================================== AIMF-ANPASSUNG #065: Blockueberschriften auf jeder Breite gleich gross (Snippet S-57) Referenz-Fassung: PROJEKTE/_ALLGEMEIN/SNIPPETS/S-57-blockueberschrift-gleiche-groesse.css Aenderungen dort zuerst. Dies ist die Kopie, nicht hier bearbeiten. ========================================================================== */ /* -------------------------------------------------------------------------- S-57: Die Blockueberschriften der Detailseite sind auf JEDER Breite gleich gross -------------------------------------------------------------------------- EDDY 28.08.2026 (AIMF): *„Reduziere direkt die Ueberschriftengroesse auf dem Smartphone."* DER BEFUND, der dahinter steckt, ist gemessen und gilt fuer JEDE Plattform, weil er aus dem Theme kommt (`assets/dist/...`, my-listing 2.16): #c27-single-listing .pf-head .title-style-1__heading { font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 15px; line-height: 23px; } … dieselbe Regel noch einmal @media (min-width: 768px) { font-size: 14px; line-height: 21px; } **Das Theme macht die Ueberschrift auf schmalen Schirmen GROESSER, nicht kleiner.** Gemessen am Event-Typ: 390 px Ueberschrift 15 px Text daneben 14 px 1440 px Ueberschrift 14 px Text daneben 14 px ⚠️ **Am Rechner hat die Ueberschrift damit gar keinen Groessenvorsprung mehr**, sie unterscheidet sich nur ueber Fettung, Versalien und Sperrung. Genau das hat EDDY als „wuchtig" beschrieben. Diese Fassung vereinheitlicht auf die 14 px und nimmt dem Handy den Sonderweg. 🛑 **WAS DIESES SNIPPET NICHT LOEST, und das gehoert dazugesagt:** Es macht die Groesse ueberall gleich. Ob eine Ueberschrift, die genauso gross ist wie ihr Text, ueberhaupt genug Hierarchie traegt, ist eine offene Gestaltungsfrage. Wer sie beantworten will, aendert die Groesse nach OBEN (auf 15 px fuer alle Breiten) statt nach unten - dann kommt die Hierarchie aus der Groesse und nicht aus der Fettung. **Beides ist eine Zeile, die Entscheidung ist EDDYs.** ⚠️ **Es gilt fuer ALLE Bausteine der Detailseite, nicht fuer einzelne.** Das ist Absicht: Eine Ueberschrift, die nur an einem Block anders ist, faellt aus der Reihe - und genau das war der Anlass der ganzen Runde. -------------------------------------------------------------------------- */ /* Gewicht (1,2,0) - identisch zur Theme-Regel, gewinnt ueber die Ladereihenfolge (Child nach Theme). ⚠️ Kippt diese Reihenfolge, wirkt hier nichts mehr, und das sieht aus wie ein kaputtes Snippet: dann zuerst pruefen, ob child-style-css im HTML VOR mylisting-frontend-css steht (Falle 1 im Skill `individualisierungen`). Die Grenze 767.98 statt 767 schliesst an `min-width: 768px` des Themes nahtlos an; bei 767,5 px entstuende sonst eine Luecke ohne Regel. */ @media only screen and (max-width: 767.98px) { #c27-single-listing .pf-head .title-style-1__heading { font-size: 14px; line-height: 21px; } } /* --- Teil B: die Ueberschrift ist weniger wuchtig, 600 statt 700 ----------- EDDY 28.08.2026: *„Auf dem Desktop haben die Ueberschriften dieselbe Schriftgroesse wie der Text, wird aber irgendwie sehr wuchtig. Wenn es jetzt 700 ist, dass man auf 600 geht."* GEMESSEN vorher: 700 aus der Theme-Regel oben (Gewicht 1,2,0). Ohne Media- Query, weil dieselbe Ueberschrift auf jeder Breite dieselbe Wucht hat und EDDY die Angleichung ueber alle Bloecke will. Versalien und Sperrung bleiben, sie tragen die Hierarchie jetzt zusammen mit der Staerke 600. ⚠️ Ob die Schrift ein echtes 600 mitbringt, entscheidet die geladene Schriftdatei: Fehlt der Schnitt, synthetisiert der Browser oder faellt auf den naechsten zurueck. Nach dem Ausrollen an der Seite MESSEN, nicht annehmen (`css-wirkung-messen.py` zeigt den berechneten Wert). */ #c27-single-listing .pf-head .title-style-1__heading { font-weight: 600; } /* ========================================================================== AIMF-ANPASSUNG #066: Anmeldelink in der Tabellen-Zeile als roter Knopf (Snippet S-58) Referenz-Fassung: PROJEKTE/_ALLGEMEIN/SNIPPETS/S-58-anmeldelink-als-knopf.css Aenderungen dort zuerst. Dies ist die Kopie, nicht hier bearbeiten. ========================================================================== */ /* -------------------------------------------------------------------------- S-58: Der Anmeldelink in einer Tabellen-Zeile ist ein KNOPF, und zwar derselbe rote Knopf wie oben im Kopfbereich -------------------------------------------------------------------------- EDDY 28.08.2026 (AIMF): *„Beim Anmeldelink steht rechts ‚zur Anmeldung'. Statt dem Text haette ich gerne wiederum den roten Button, den wir auch im Header haben, weil der zu stark untergeht."* 🛑 **DIESES SNIPPET WIRKT NUR ZUSAMMEN MIT EINER KONFIGURATIONS-AENDERUNG.** Die Zeile im `table`-Baustein muss die Klasse und dieselbe Struktur wie der Kopf-Knopf mitbringen - Zeichen, dann Text im ``: zur Anmeldung ⚠️ **Das `` ist nicht Kosmetik.** Der Pfeil fuer externe Links haengt an ihm (siehe unten); ohne `` fehlt er kommentarlos. Ohne die Klasse passiert hier gar nichts, und das sieht aus wie ein totes Snippet. **Der Grund fuer die Klasse statt eines allgemeinen Selektors:** Im selben Block stehen weitere Links (Mail, Telefon aus `ml-kontaktzeilen`), und die duerfen NICHT zu Knoepfen werden. CSS kann eine Zeile nicht an ihrer Beschriftung erkennen, also muss die Kennzeichnung aus der Konfiguration kommen. DIE WERTE SIND NICHT GEWAEHLT, SIE SIND ABGESCHRIEBEN. Quelle ist die Theme-Regel des Kopf-Knopfs (`assets/dist/single-listing.css`, my-listing 2.16), gemessen am 28.08.2026: .lmb-calltoaction > a { background: var(--accent); padding: 0 20px; display: flex; color: #fff; border-radius: 5px; font-size: 14px; height: 48px; align-items: center; position: relative; z-index: 0; justify-content: center; white-space: nowrap; font-weight: 600 } .lmb-calltoaction > a { height: 42px } <- gewinnt, gemessen 42 .lmb-calltoaction > a > i { font-size: 18px; margin-right: 5px } ⚠️ **EIN Wert weicht bewusst ab: `display` ist hier `inline-flex`, im Kopf `flex`.** Im Kopfbereich sitzt der Knopf in einer eigenen Zeile und darf ueber die volle Breite gehen. In der Tabellen-Zeile steht er rechts neben seiner Beschriftung (das Theme setzt `.extra-details .item-property` auf `float: right`); ein `flex` wuerde ihn ueber die ganze Zeile ziehen. 🛑 **WAS DIESES SNIPPET NICHT LOEST:** Die Zeile wird dadurch **42 px hoch** statt 26. Ob ihre Beschriftung links danach noch auf der richtigen Hoehe sitzt, ist eine Frage an die NACHBARSCHAFT und nicht an den Knopf. Nach dem Ausrollen mit `ebene-messen.py` gegen die unveraenderten Zeilen desselben Blocks halten, nicht nur den Knopf messen. 🛑 **DER PFEIL FUER EXTERNE LINKS WECHSELT DIE SEITE, ER VERSCHWINDET NICHT.** Hier stand zuerst, der Kopf-Knopf trage kein `↗` und das Zeichen werde deshalb abgeschaltet. **Beides war falsch, und das Bild hat es widerlegt:** Der Kopf-Knopf traegt den Pfeil sehr wohl, hinter dem Wort. Er ist EDDYs ausdrueckliche Vorgabe vom 13.08.2026 (Snippet S-03): *„Der Pfeil suggeriert, dass sich was oeffnet. Koennen wir den auch an den anderen zwei Stellen aufnehmen?"* S-03 setzt ihn in **zwei verschiedenen Formen**, und genau das ist der Punkt: im Fliesstext `a[target="_blank"]::before` margin-right -. VOR dem Wort an Knoepfen `a[target="_blank"] span::after` margin-left -. HINTER dem Wort Unser Knopf steht raeumlich im Fliesstext-Bereich (`.extra-details .item-property`), ist aber ein Knopf. Er bekommt deshalb die **Knopf-Form**: das `::before` wird abgeschaltet und durch ein `span::after` ersetzt. **Das Zeichen bleibt, es wandert nur auf die richtige Seite.** ⚠️ **Dafuer MUSS der Text im `` stehen**, sonst gibt es kein Element, an das sich der Pfeil haengen kann - siehe die Markup-Vorgabe oben. -------------------------------------------------------------------------- */ /* Gewicht (1 ID, 4 Klassen, 1 Element) - schwerer als die vorhandenen Link-Regeln dieses Blocks, gemessen am 28.08.2026: [1,3,1] #c27-single-listing .extra-details .item-property a:hover [1,2,1] #c27-single-listing .extra-details .item-property a ⚠️ Wer den Selektor kuerzt, verliert gegen die Unterstreichung und bekommt einen roten Knopf mit weisser Unterstreichung darin. */ /* 🛑 DER KNOPF IST KLEINER ALS SEIN VORBILD, und das ist EDDYs Ansage vom 28.08.2026 nach dem Blick auf die ausgerollte Fassung: *„Roter Knopf beim Anmeldelink kleiner."* Kopf-Knopf (Vorbild) 42 px hoch 14 px Schrift 0 20px Polsterung hier 34 px hoch 13 px Schrift 0 14px Polsterung **Der Grund, warum das kein Widerspruch zum Vorbild ist:** Der Kopf-Knopf steht allein ueber einem Bild und ist die Hauptaktion der Seite. Dieser hier steht in einer Zeile zwischen anderen Zeilen; in Originalgroesse sprengt er die Reihe. **Form, Farbe und Zeichen bleiben identisch, nur das Mass nicht.** ⚠️ **34 und 13 sind ein erster Wurf, kein gemessener Wert** - eine optische Groesse ist ein Urteil (Entscheid 410). Beide Zahlen sind je ein Wort. */ #c27-single-listing .pf-body .extra-details .item-property a.ml-anmeldeknopf { display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 14px; border-radius: 5px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; text-decoration: none; position: relative; z-index: 0; } /* Der weisse Schleier beim Ueberfahren ist die Konstruktion des Themes, Zeichen fuer Zeichen uebernommen und NICHT verbessert. Wer hier `inset: 0` oder `border-radius: inherit` ergaenzt, weicht vom Kopf-Knopf ab - und der ist der Massstab, den EDDY genannt hat. */ #c27-single-listing .pf-body .extra-details .item-property a.ml-anmeldeknopf::after { content: ""; width: 100%; height: 100%; background: #fff; position: absolute; pointer-events: none; transition: 0.15s ease; opacity: 0; } #c27-single-listing .pf-body .extra-details .item-property a.ml-anmeldeknopf:hover::after { opacity: 0.1; } /* Ohne diese zwei Zeilen faerbt die Block-Regel den Text beim Ueberfahren rot (var(--accent) auf var(--accent)) und unterstreicht ihn. Gemessen, nicht vermutet: in Ruhe rgb(36,36,41), beim Ueberfahren rgb(212,13,38). */ #c27-single-listing .pf-body .extra-details .item-property a.ml-anmeldeknopf:hover, #c27-single-listing .pf-body .extra-details .item-property a.ml-anmeldeknopf:focus { color: #fff; text-decoration: none; } /* Der Pfeil, Teil 1: die Fliesstext-Form abschalten. Sie saesse VOR dem Wort, und der Kopf-Knopf traegt ihn dahinter. Siehe Kopf-Doku. */ #c27-single-listing .pf-body .extra-details .item-property a.ml-anmeldeknopf[target="_blank"]::before { content: none; } /* Der Pfeil, Teil 2: die Knopf-Form nachziehen. Werte Zeichen fuer Zeichen aus der Knopf-Regel von S-03 (AIMF #003, Ergaenzung vom 13.08.2026) - dieselbe Groesse, derselbe Abstand, dieselbe Grundlinie, damit die zwei Knoepfe auf einer Seite nicht verschieden aussehen. */ #c27-single-listing .pf-body .extra-details .item-property a.ml-anmeldeknopf[target="_blank"] span::after { content: "\2197"; display: inline-block; margin-left: 0.25em; font-size: 0.85em; text-decoration: none; vertical-align: baseline; } /* Das Zeichen im Knopf. Vorbild ist `.lmb-calltoaction > a > i` mit 18 px; weil der Knopf hier kleiner ist, geht das Zeichen im selben Verhaeltnis mit (18 zu 14 wie 42 zu 34, gerundet auf 16). **Sonst waere das Zeichen im kleineren Knopf relativ groesser als im Vorbild.** */ #c27-single-listing .pf-body .extra-details .item-property a.ml-anmeldeknopf i { font-size: 16px; margin-right: 5px; } /* ========================================================================== AIMF-ANPASSUNG #067: Kopfangaben ueberall 17 px (Snippet S-59) Referenz-Fassung: PROJEKTE/_ALLGEMEIN/SNIPPETS/S-59-kopfangaben-groesse.css Aenderungen dort zuerst. Dies ist die Kopie, nicht hier bearbeiten. ========================================================================== */ /* -------------------------------------------------------------------------- S-59: Die Angaben im Kopfbereich sind am Rechner GROESSER und am Handy KLEINER als das Theme sie macht -------------------------------------------------------------------------- EDDY 28.08.2026 (AIMF): *„Auf dem Desktop muessen wir wahrscheinlich im Head das Datum und den Preis vergroessern. Und auf dem Smartphone muessten wir Termin und Kosten von der Groesse etwas reduzieren."* 🛑 DER BEFUND DAHINTER IST DERSELBE WIE BEI S-57, und er gilt fuer JEDE Plattform, weil er aus dem Theme kommt (`assets/dist/single-listing.css`, my-listing 2.16). GEMESSEN am 28.08.2026 an einem Event-Eintrag: Fensterbreite Wert (Datum/Preis) Beschriftung (Termin/Kosten) 1440 px 16 px 14 px 390 px 18 px 13 px **Das Theme macht die Angabe auf schmalen Schirmen GROESSER, nicht kleiner** - genau die Richtung, die EDDY an beiden Enden stoert. Die Quelle sind zwei Regelpaare: .price-or-date .value { font-size: 16px; font-weight: 600 } .price-or-date .value { font-size: 18px } @ max-width: 1200px .price-or-date .lmb-label { font-size: 14px; opacity: .7 } .price-or-date .lmb-label { font-size: 13px } @ max-width: 768px ✅ **DIE ANGABE IST JETZT UEBERALL 17 px, UND DAS IST EDDYS ZAHL.** Er hat sie in zwei Schritten am fertigen Bild festgelegt, 28.08.2026: „Datum und Preis am Rechner auf 17." -> Rechner 18 -. 17 „Termin und Kosten am Handy auf 17." -> Handy 16 -. 17 🛑 **WARUM DARAUS EINE EINZIGE REGEL OHNE MEDIA-QUERY WURDE:** Der erste Wurf hatte die Theme-Werte ueber Kreuz getauscht (Rechner 18, Handy 16) und dafuer zwei Media-Queries gebraucht. **Nachdem beide Enden auf 17 stehen, waere ein Mittelband mit den 18 px des Themes uebrig geblieben** - eine Groesse, die niemand entschieden hat, sichtbar nur auf dem Tablet. Eine Regel ohne Bedingung ist hier nicht die bequemere, sondern die ehrlichere Loesung. ⚠️ **17 ist eine Urteils-Zahl, keine gemessene.** Das Theme verwendet sie nirgends. Wer dieses Snippet auf eine andere Plattform traegt, uebernimmt sie NICHT ungeprueft: Sie gilt fuer diese Schrift, diese Zeilenhoehe und dieses Kopfbild. **Dort wird sie neu beurteilt, nicht abgeschrieben.** 🛑 **WAS DIESES SNIPPET BEWUSST NICHT ANFASST: die BESCHRIFTUNG.** „Termin" und „Kosten" bleiben bei den Theme-Werten 14 px (Rechner) und 13 px (Handy). EDDY hat am Rechner ausdruecklich *„das Datum und den Preis"* genannt, also die Werte; am Handy hat er die zwei Angaben ueber ihre Beschriftung benannt. **Beide Lesarten decken den Wert ab, nur eine auch die Beschriftung.** Wenn sie mitgehen soll, ist es je eine Zeile mehr - die Entscheidung ist EDDYs, nicht die des Bauenden. ⚠️ **DER KOPFBEREICH HAENGT AN ZWEI ACHSEN** (Fensterbreite UND Textlaenge, Skill `individualisierungen` Falle 15). Eine groessere Schrift am Rechner kann einen langen Wert in die naechste Zeile oder ins Menue schieben. **Nach dem Ausrollen `kopfbereich-pruefen.py` ueber ALLE Testeintraege laufen lassen**, nicht nur ueber den mit dem laengsten Preis. -------------------------------------------------------------------------- */ /* Gewicht (1 ID, 2 Klassen) gegen die Theme-Regeln (0,2,0) - schwerer, und zwar auch als die Media-Fassung des Themes, weil die ebenfalls nur (0,2,0) wiegt. Die ID ist der Wrapper der Detailseite und damit vorhanden, solange es die Seite gibt. ⚠️ **Ohne Media-Query mit Absicht**, siehe Kopf-Doku. Wer hier wieder eine Bedingung einzieht, holt sich das Tablet-Band mit den 18 px des Themes zurueck, das niemand entschieden hat. */ #c27-single-listing .price-or-date .value { font-size: 17px; } /* ========================================================================== AIMF-ANPASSUNG #069: Symbole dunkel und ohne graue Flaeche (Snippet S-61) Referenz-Fassung: PROJEKTE/_ALLGEMEIN/SNIPPETS/S-61-symbole-schwarz-ohne-flaeche.css Aenderungen dort zuerst. Dies ist die Kopie, nicht hier bearbeiten. ========================================================================== */ /* -------------------------------------------------------------------------- S-61: Die Symbole der Detailseite sind dunkel und stehen ohne graue Flaeche -------------------------------------------------------------------------- EDDY 28.08.2026 (AIMF), am Smartphone: *„Die Icons, die du bei einigen der Ueberschriften angefuegt hast, die sind ja grau und das Grau gefaellt mir nicht. Mach sie bitte auf schwarz. Und unten bei Veranstalter machst du das Icon bitte auch ohne grauen Hintergrund, so wie in den anderen Bereichen."* **Zwei Baustellen, eine Absicht: kein Grau auf der Detailseite.** Beide Werte kommen aus dem Theme, beide sind gemessen: .title-style-1 i color: #9d9d9d <- das Ueberschriften-Zeichen .details-block-content>li>i background: #f4f4f4 <- die runde Kachel 40x40, min-width 40, border-radius 40 🛑 **„SO WIE IN DEN ANDEREN BEREICHEN" IST WOERTLICH ZU NEHMEN.** Die Einordnungs-Kachel hat ihre grauen Kreise am 27.08.2026 verloren (S-51), nachdem EDDY sie dort weghaben wollte. **Der `details`-Block war der letzte Ort, an dem sie noch standen.** Diese Fassung zieht ihn nach, statt eine zweite Gestaltung daneben zu stellen. ⚠️ **WAS DIE FLAECHE GETRAGEN HAT, und was deshalb mitgeht** (Skill `individualisierungen`, Falle 5c - wer etwas wegnimmt, prueft was daran hing): - **Die Hoehe der Zeile.** 40 px Kachel gegen 14 px Zeichen: Die Zeile wird nach dem Wegfall deutlich flacher. Das ist gewollt, nicht versehentlich. - **Der Abstand nach links.** `min-width: 40px` haelt die Textspalte auf Abstand. Ohne Ersatz ruecken die Zeichen verschieden weit ein, weil Buchstabenbreiten sich unterscheiden. Deshalb bleibt eine **feste Spur von 18 px** stehen - dieselbe Breite wie in S-51, aus demselben Grund: Sie haelt verschieden breite Zeichen in einer Flucht. - **Der Rundungswert.** `border-radius: 40px` war fuer den Kreis da. Bleibt er auf einem geschrumpften Kasten stehen, entsteht bei einem Element mit `overflow` eine Ellipse, die dem Zeichen die Ecken abschneidet - genau das ist am 22.08.2026 einmal passiert und sah nach einem kaputten Icon aus. 🛑 **„SCHWARZ" IST rgb(36,36,41), NICHT #000.** Das ist die Farbe, die die Ueberschrift daneben traegt und die die Seite ueberall fuer Text benutzt. Reines Schwarz kommt im Theme nirgends vor; es waere haerter als jeder andere Text der Seite und faellt dann seinerseits auf. ⚠️ **NICHT abgedeckt: die Zeichen der Einordnungs-Kachel.** Die haben ihre eigenen Farben aus S-51 (`rgb(85,85,88)` und `rgba(0,0,0,0.6)`) und bleiben unberuehrt. Wer hier eine Farbe aendert, aendert die Ueberschriften-Zeichen und die `details`-Bloecke, sonst nichts. -------------------------------------------------------------------------- */ /* --- 1. Das Zeichen vor der Block-Ueberschrift --------------------------- Gewicht (1 ID, 2 Klassen, 1 Element) gegen die Theme-Regel (0,1,1). ⚠️ NUR die Farbe wird angefasst. Groesse, Umfluss und Abstand des Themes bleiben, sie waren nie beanstandet. */ #c27-single-listing .pf-head .title-style-1 i { color: rgb(36, 36, 41); } /* --- 2. Die Icon-Kachel im `details`-Block -------------------------------- Gewicht (1 ID, 2 Klassen, 2 Elemente) gegen die Theme-Regel (0,1,2). ⚠️ Das `>` ist Absicht und muss stehen bleiben: Die Theme-Regel gilt fuer das DIREKTE Kind des Listenpunkts. Ein Zeichen tiefer im Text (etwa in einem Social-Block, der im selben `li` steckt) traegt die Kachel gar nicht und darf hier auch nicht getroffen werden. */ #c27-single-listing .pf-body .details-block-content > li > i { background: none; width: 18px; min-width: 18px; height: auto; border-radius: 0; justify-content: flex-start; font-size: 18px; color: rgb(36, 36, 41); } /* --- 3. Die Spur, damit sie nur EINMAL im System steht ------------------- 🛑 Andere Regeln richten sich an dieser Spur aus - S-30 setzt die Social-Reihe auf die Textkante der Zeilen darueber. Solange die Breite dort als feste Zahl steht, altert sie still: Die 55 (40 Kachel + 15 Abstand) waren nach dieser Aenderung falsch, **ohne dass irgendetwas kaputt aussah** - die Reihe stand 22 px zu weit rechts, und gefunden hat es EDDY am 28.08.2026. Der Wert ist die Summe aus der Spur oben (18) und dem `margin-right`, das das Theme dem Zeichen gibt (15). **Wer die 18 aendert, aendert hier mit.** */ #c27-single-listing .pf-body .details-block-content { --ml-icon-spur: 33px; } /* ========================================================================== AIMF-ANPASSUNG #070: Blocksymbole aus Material Symbols, Staerke einstellbar (Snippet S-62) Referenz-Fassung: PROJEKTE/_ALLGEMEIN/SNIPPETS/S-62-blocksymbole-material.css Aenderungen dort zuerst. Dies ist die Kopie, nicht hier bearbeiten. ========================================================================== */ /* -------------------------------------------------------------------------- S-62: Die Zeichen vor den Blockueberschriften, mit einstellbarer Staerke -------------------------------------------------------------------------- Gehoert zwingend zu S-62-blocksymbole-material.php (laedt die Schrift). Ohne dieses PHP-Stueck bleibt hier das Wort stehen statt des Zeichens - und genau daran erkennt man den Fehler auf dem Bild. 🛑 DER TRICK, DER DEN TEMPLATE-OVERRIDE ERSPART: Die Typ-Konfiguration kann nur eine KLASSE fuer das Zeichen mitgeben, keinen Textinhalt. Material Symbols arbeitet aber mit LIGATUREN: Das Wort `description` wird zur Zeichnung. **Eine Ligatur greift auch in CSS-erzeugtem Inhalt** - deshalb steht der Name hier in `content`, und die Konfiguration braucht nur `ml-sym ml-sym-` zu setzen. ⚠️ Faellt die Ligatur aus (Schrift nicht geladen, Feature abgeschaltet), steht das WORT auf der Seite. Das ist unschoen, aber ehrlich: Der Fehler ist sofort sichtbar und nicht, wie bei einem falschen icomoon-Namen, unsichtbar. DIE STAERKE STEHT AN GENAU EINER STELLE, in der Basis-Regel unten: `font-variation-settings: 'wght' 200`. Erlaubt ist 100 bis 700; 200 ist der Startwert vom 28.08.2026. **Eine Stufe duenner heisst 100, eine dicker 300.** ⚠️ Die Zeichen der EINORDNUNGS-Kachel und die Zeilen-Zeichen sind NICHT gemeint. Die kommen weiter aus icomoon und haben ihre eigene Gestaltung (S-51, S-61). -------------------------------------------------------------------------- */ /* Gewicht (1 ID, 3 Klassen, 1 Element) - schwerer als die Theme-Regel `.title-style-1 i` (0,1,1) und als die icomoon-Familie `[class^="icon-"]`. Groesse und Umfluss kommen weiter vom Theme, die Farbe aus S-61. */ #c27-single-listing .pf-head .title-style-1 i.ml-sym { font-family: 'Material Symbols Outlined'; font-style: normal; font-weight: normal; font-size: 20px; line-height: 20px; letter-spacing: normal; text-transform: none; white-space: nowrap; word-wrap: normal; direction: ltr; font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 20; -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; } /* Die Namen. 🛑 Jeder hier MUSS auch in der Adresse im PHP-Stueck stehen, sonst ist das Zeichen nicht in der Schrift - und umgekehrt schleppt die Adresse Ballast, wenn hier einer fehlt. */ /* EDDY hat beide am 28.08.2026 auf der Schau-Seite (#071) ausgesucht: *„event_note in 200 finde ich gut. Und subject fuer Beschreibung."* ✅ **Das ist der erste Wechsel, der KEINEN Rollout an der Konfiguration braucht** - die Klasse am Baustein bleibt, nur das Symbol dahinter aendert sich. Genau dafuer ist die Schau gebaut. */ #c27-single-listing .pf-head .title-style-1 i.ml-sym-beschreibung::before { content: "subject"; } #c27-single-listing .pf-head .title-style-1 i.ml-sym-fakten::before { content: "event_note"; } /* Von der Schau-Seite (#071) ausgesucht, 28.08.2026. 🛑 ZUR ANMELDUNG GEHOERT EIN ZWEITER SCHRITT, und der ist hier NICHT getan: Der rote Knopf im Kopfbereich traegt weiterhin `icon-file-tasks-checklist` (icomoon). Bis vorhin trug die Ueberschrift denselben Namen und damit dieselbe Zeichnung - **dieses Paar ist mit `person_add` aufgeloest.** EDDY hat das Zeichen bewusst gewaehlt; der Knopf gehoert bei Gelegenheit nachgezogen, sonst zeigen Ueberschrift und Knopf zwei verschiedene Bilder fuer dieselbe Sache. */ #c27-single-listing .pf-head .title-style-1 i.ml-sym-anmeldung::before { content: "person_add"; } /* Das reine Buerogebaeude - dasselbe wie `domain_add`, nur ohne den Plus. */ #c27-single-listing .pf-head .title-style-1 i.ml-sym-veranstalter::before { content: "domain"; } /* ========================================================================== AIMF-ANPASSUNG #071: Symbol-Schau: Kandidaten in echter Form beurteilen (Snippet S-63) Referenz-Fassung: PROJEKTE/_ALLGEMEIN/SNIPPETS/S-63-symbolschau.css Aenderungen dort zuerst. Dies ist die Kopie, nicht hier bearbeiten. ========================================================================== */ /* -------------------------------------------------------------------------- S-63: Eine Schau-Seite, um Symbole zu BEURTEILEN statt sie zu erraten -------------------------------------------------------------------------- EDDY 28.08.2026: *„Wir brauchen einen Weg, dass du mir irgendwo einen Link zeigst. Optimalerweise eine Unterseite, die heisst Icons und Symbole, auf noindex und nofollow. Und dort kannst du mir immer wieder mit Ueberschriften mehrere verschiedene zeigen, vielleicht sogar in verschiedenen Strichstaerken, bevor du die immer wieder fuenfmal an einer Stelle umbaust."* 🛑 DER ZWECK IST EIN ARBEITSWEG, KEINE GESTALTUNG. Vorher lief es so: ein Symbol setzen, ausrollen, Bild zeigen, verwerfen, naechstes. Das kostet je Runde einen Rollout und einen Blick - und trifft trotzdem nur EINEN Vorschlag auf einmal. Hier stehen fuenf bis zehn nebeneinander, und zwar in genau der Form, in der sie spaeter auf der Seite stehen. ⚠️ **DIE GLEICHHEIT IST DER GANZE WITZ, deshalb der ungewoehnliche Kniff:** Die Schau haengt in einem Element mit der ID `c27-single-listing`, obwohl es keine Inseratsseite ist. Damit greifen ALLE bestehenden Regeln der Detailseite woertlich - Groesse, Fettung, Versalien, Sperrung, Farbe, Abstand des Zeichens. **Jede nachgebaute Kopie wuerde frueher oder spaeter abweichen, und dann beurteilt man etwas, das es so nicht gibt.** ⚠️ Die ID darf auf dieser Seite genau EINMAL vorkommen. Wer die Schau in eine echte Inseratsseite einbaut, erzeugt sie doppelt - dann ist das Ergebnis nicht mehr vorhersagbar. 🛑 DIE SYMBOLNAMEN STEHEN NICHT IM CSS. Sie kommen ueber `attr()` aus dem Markup (`data-sym="list_alt"`). Deshalb braucht eine neue Auswahl KEINEN neuen Rollout - nur den Seiteninhalt und die Namensliste im PHP-Stueck. -------------------------------------------------------------------------- */ .ml-symbolschau { max-width: 760px; margin: 0 auto; padding: 48px 24px 160px; } /* Der Abstand ist der Punkt: EDDY will die Zeichen EINZELN sehen, nicht als Block. 96 px sind rund vier Zeilenhoehen - beim Scrollen steht nie mehr als eine Gruppe im Blick. */ .ml-symbolschau__gruppe { margin-bottom: 96px; } .ml-symbolschau__name { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: rgba(0, 0, 0, 0.45); margin-bottom: 20px; } .ml-symbolschau__zeile { display: flex; align-items: center; margin-bottom: 28px; } .ml-symbolschau__staerke { flex: 0 0 64px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; color: rgba(0, 0, 0, 0.3); } /* Der Kopf der Schau-Zeile darf nicht die Block-Abstaende der Detailseite mitbringen, sonst stimmt der Zeilenabstand hier nicht. Alles andere bleibt. */ .ml-symbolschau .pf-head { margin: 0; padding: 0; border: 0; flex: 1 1 auto; min-width: 0; } /* 🛑 Das Zeichen steht NEBEN der Ueberschrift, nicht darueber. Auf der echten Detailseite macht das ein `float: left` am Zeichen - in dieser schmalen Schau-Zeile bricht die Ueberschrift darunter, weil sie als Block bei null beginnt und der Float sie nur einrueckt. Am Handy sah das aus wie zwei Zeilen; **gesehen erst am Bild, die Werte waren alle richtig.** Deshalb hier ein Flex-Paar statt des Floats. Das ist eine Abweichung im MECHANISMUS und keine im Ergebnis: Groesse, Fettung, Versalien, Sperrung, Farbe und der 6-px-Abstand kommen weiter aus den echten Regeln, weil die Schau in einem Element mit der ID `c27-single-listing` haengt. */ .ml-symbolschau .title-style-1 { display: flex; align-items: center; } .ml-symbolschau .title-style-1 i { float: none; } .ml-symbolschau .title-style-1__heading { margin: 0; } /* Der Name kommt aus dem Markup, nicht aus dem CSS. */ #c27-single-listing .pf-head .title-style-1 i.ml-sym-vorschau::before { content: attr(data-sym); } /* Die Staerken. Gewicht (1 ID, 3 Klassen, 1 Element) - gleich schwer wie die Basis-Regel aus S-62 und spaeter in der Datei, also gewinnt sie. */ #c27-single-listing .ml-w100 .title-style-1 i.ml-sym { font-variation-settings: 'FILL' 0, 'wght' 100, 'GRAD' 0, 'opsz' 20; } #c27-single-listing .ml-w200 .title-style-1 i.ml-sym { font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 20; } #c27-single-listing .ml-w300 .title-style-1 i.ml-sym { font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20; } #c27-single-listing .ml-w400 .title-style-1 i.ml-sym { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20; } /* ========================================================================== AIMF-ANPASSUNG #072 — reCAPTCHA-Abzeichen kleiner (Snippet S-64) Referenz-Fassung: PROJEKTE/_ALLGEMEIN/SNIPPETS/S-64-recaptcha-abzeichen-kleiner.css Aenderungen dort zuerst. Dies ist die Kopie, nicht hier bearbeiten. ========================================================================== */ /* -------------------------------------------------------------------------- S-64: Das reCAPTCHA-Abzeichen kleiner - ohne seine Mechanik anzufassen -------------------------------------------------------------------------- EDDY 28.08.2026, in drei Schritten: 1. *„Kannst du das reCAPTCHA-Feld um 50 Prozent reduzieren."* 2. *„Die Groesse ist zu klein. Mach's noch mal um 25 Prozent groesser. Und wenn man's anklickt, faehrt's nach links auf und steht dann mitten auf der Webseite. Vorher war es rechtsbuendig drangeklebt."* 3. *„Groesse passt, aber wenn ich draufklicke, passiert nichts mehr. Das Rausfahren funktioniert nicht mehr."* 🛑 ES WIRD NICHT AUSGEBLENDET UND NICHT ABGESCHALTET. Beides hat EDDY ausdruecklich ausgeschlossen: *„Es darf nicht technisch deaktiviert werden."* Das Abzeichen bleibt sichtbar, der Schutz bleibt an. -------------------------------------------------------------------------- */ /* 🛑 WARUM HIER `zoom` STEHT UND NICHT `transform` - zwei Fehlversuche lang gelernt ------------------------------------------------------------------------- Das Abzeichen steht mit **`right: -186px`** und ragt rechts aus dem Fenster; sichtbar sind nur die linken rund 70 px mit dem Logo. **Beim Aufklappen faehrt es ueber `right` herein**, bis es buendig am rechten Rand klebt. **`transform: scale()` skaliert die DARSTELLUNG. Das Layout bleibt in den alten Koordinaten.** Das verkleinerte Abzeichen fuhr also weiterhin die vollen 186 px herein und stand dann mit einer Luecke mitten in der Seite. **`zoom` skaliert das KOORDINATENSYSTEM.** Damit skaliert sich `right` von selbst mit, in BEIDEN Zustaenden - und Googles Aufklapp-Mechanik bleibt voellig unberuehrt. Kein `right`-Override, kein `!important`, kein eigener `:hover`. **Das ist der entscheidende Unterschied.** ⚠️ DER FEHLVERSUCH, DER AM TEUERSTEN WAR, und die Lehre daraus: Der Zwischenstand hat `right` selbst ueberschrieben (`-116px !important`) und das Aufklappen ueber einen eigenen `:hover` nachgebaut. **Am Rechner sah das richtig aus. Am Smartphone war das Abzeichen tot** - dort gibt es kein Ueberfahren, also griff der eigene `:hover` nie, und das `!important` hielt Googles eigenen Wert dauerhaft nieder. 🛑 **Die uebertragbare Regel: Wer den MECHANISMUS eines fremden Bauteils nachbaut, statt nur sein Aussehen zu aendern, uebernimmt damit auch die Pflicht, JEDE Eingabeart zu bedienen** - Maus, Tastatur, Finger. Das ist fast immer der falsche Handel. **Zuerst nach einem Weg suchen, der die fremde Mechanik in Ruhe laesst.** ⚠️ Ein zweiter Fehlversuch davor, der Vollstaendigkeit halber: `transform-origin: bottom right` allein liess das Abzeichen **komplett verschwinden** - die rechte untere Ecke liegt ausserhalb des Fensters. **Die Messung meldete dabei korrekt „128 x 30 px"**: Das Element hatte die richtige Groesse und stand nur da, wo niemand hinsieht. Gefunden hat es allein das Bild. ------------------------------------------------------------------------- */ /* 0,625 = die halbe Groesse aus dem ersten Wurf, um EDDYs 25 Prozent angehoben. */ .grecaptcha-badge { zoom: 0.625; } /* -------------------------------------------------------------------------- ⚖️ DIE RECHTLICHE LAGE, recherchiert am 28.08.2026 - GESAMMELT, NICHT BEWERTET -------------------------------------------------------------------------- 🛑 Kein Agent bewertet einen Rechtstext. Was hier steht, sind Quellen und ihre woertlichen Aussagen; die Entscheidung trifft EDDY. 1. VERKLEINERN: Googles reCAPTCHA-FAQ sagt dazu **nichts**. Sie kennt nur zwei Themes (hell/dunkel) und regelt das Ausblenden. **Da das Abzeichen sichtbar bleibt, bleibt auch das Branding im Ablauf** - diese Regel ist damit konservativer als das Ausblenden, das Google ausdruecklich erlaubt. 2. AUSBLENDEN waere erlaubt, aber nur mit Gegenleistung. Google woertlich: *„You are allowed to hide the badge as long as you include the reCAPTCHA branding visibly in the user flow."* Google nennt dafuer selbst `.grecaptcha-badge { visibility: hidden; }` und verlangt den sichtbaren Hinweis *„This site is protected by reCAPTCHA."* ⚠️ **Eine verbreitete Netz-Behauptung ist FALSCH und wurde nachgelesen:** „`visibility: hidden` verstoesst gegen Googles Bedingungen." Die Quelle, der das zugeschrieben wird, sagt das Gegenteil - sie EMPFIEHLT `visibility: hidden` und warnt vor `display: none`, und zwar aus einem TECHNISCHEN Grund (uneinheitliches Verhalten je nach Browser und Skript-Ladeweg), nicht aus einem rechtlichen. **Wer nur die Suchergebnis-Zusammenfassung liest, uebernimmt die Umkehrung.** 3. „NUR DORT, WO ES EINGESETZT WIRD" ist eine gute Praxis, aber **keine Google-Vorgabe**. Die FAQ sagt nichts darueber, auf welchen Seiten reCAPTCHA laden darf. Faktisch laedt es ohnehin nur mit dem Formular, das es schuetzt. 🛑 4. ZWEI FUNDE, DIE SCHWERER WIEGEN ALS DIE ABZEICHEN-GROESSE und die nicht in dieses Snippet gehoeren, aber gemeldet sind (Aufgabe A-P_KONZ-7): · **Seit 02.04.2026** ist Google bei reCAPTCHA nicht mehr Verantwortlicher, sondern Auftragsverarbeiter. Datenschutzerklaerungen mussten angepasst werden; veraltete Klauseln koennen beanstandet werden (IT-Recht Kanzlei). · **Preismodell 2026:** 10.000 Pruefungen je Monat frei, darueber kostenpflichtig - ohne hinterlegte Zahlungsart kann der Dienst aussetzen. -------------------------------------------------------------------------- */ /* ⚠️ WAS DIESES SNIPPET NICHT KANN - Es macht das Abzeichen nicht lesbarER. **Je kleiner, desto eher laesst sich bestreiten, dass das Branding „visibly" im Ablauf steht** - das ist die Grenze, an der aus Verkleinern ein Ausblenden wird. - Es beruehrt den Schutz nicht. reCAPTCHA laeuft unveraendert weiter. - `zoom` ist in allen aktuellen Browsern verfuegbar (Firefox seit 126), in sehr alten nicht. Dort bleibt das Abzeichen schlicht in Originalgroesse - **ein harmloser Rueckfall, kein Defekt.** - Es sagt nichts darueber, WO das Abzeichen erscheint. Das entscheidet das Plugin, das reCAPTCHA einbindet. */ /* === AIMF-ANPASSUNG #073: Datenschutz-Link in den WooCommerce-Formularen unterstreichen (Snippet S-65) === */ /* ========================================================================== S-65 — Datenschutz-Link in den WooCommerce-Formularen unterstreichen -------------------------------------------------------------------------- Problem (EDDY 30.08. und erneut 04.09.2026): "Bei der Registrierung ist der Begriff Datenschutzerklaerung immer noch nicht unterstrichen." Der Link ist fast schwarz (rgb(36,36,41)) und traegt text-decoration: none — er sieht aus wie normaler Text. Loesung: dieselbe Handschrift wie S-54 auf der Kontaktseite, damit derselbe Satz an allen Orten gleich aussieht. 1 px Unterstreichung mit Abstand. 🛑 BEWUSST NUR DIE UNTERSTREICHUNG. Keine eigene Farbe im Ruhezustand — EDDY will die Akzentfarbe hier ausdruecklich NICHT (Briefing 01.09.2026), das Schwarz bleibt. Auch keine eigene text-decoration-color: der Strich nimmt damit die Textfarbe und faerbt beim Ueberfahren mit, genau wie ueberall sonst auf der Seite. Betrifft: Registrierung (/mein-konto/, Reiter Registrieren) und die Kasse. Die Kontaktseite braucht es NICHT — dort deckt S-54 (#062) es seit dem 27.08.2026 ab, weil das WPForms-Formular eigene Selektoren hat. ⚠️ Das Registrierungsformular ist bis zum Klick auf den Reiter versteckt (.register-form-wrap.hide). Wer die Seite nur laedt, misst ein unsichtbares Element und haelt das Ergebnis faelschlich fuer einen Befund. ========================================================================== */ .woocommerce-privacy-policy-text a { text-decoration: underline; text-underline-offset: 2px; } /* ========================================================================== AIMF-ANPASSUNG #074 — Region im Kartenkopf lesbar (Snippet S-66) Referenz-Fassung: PROJEKTE/_ALLGEMEIN/SNIPPETS/S-66-kartenkopf-region-lesbar.css Aenderungen dort zuerst. Dies ist die Kopie, nicht hier bearbeiten. ========================================================================== */ .lf-item-container .lf-head .ml-kopf-neutral { text-shadow: rgb(0, 0, 0) 0 0 2px; } /* ========================================================================== AIMF-ANPASSUNG #075: Karten-Icons in der Textfarbe statt grau (Snippet S-67) — 01.10.2026: Monitor-Zeichen in derselben Farbe; 75 %-Versuch zurueckgenommen Referenz-Fassung: PROJEKTE/_ALLGEMEIN/SNIPPETS/S-67-karten-icons-in-textfarbe.css Aenderungen dort zuerst. Dies ist die Kopie, nicht hier bearbeiten. ========================================================================== */ /* -------------------------------------------------------------------------- 🛑 NACHTRAG 01.10.2026: Das MONITOR-Zeichen der Hybrid-Zeile bekommt dieselbe Farbe wie die uebrigen Icons — es kam mit rgb(166,166,171) und war damit das hellste Element der ganzen Karte. ⚠️ Es braucht eine EIGENE Regel: Es steckt IM TEXT der Ortszeile („Wuerzburg + [Monitor] online"), nicht als direktes Kind des `li`, und wird deshalb von der Zeilen-Regel mit ihrem „>" nicht getroffen. ❌ UND EINE RUECKNAHME AM SELBEN TAG, damit sie niemand wieder einbaut: Zwischendurch standen hier alle drei Regeln zusaetzlich auf `opacity: .75` — so stark wie der Format-Begriff im Kartenfuss, der genau so abgeschwaecht ist (er ist NICHT grau gefaerbt, er traegt dieselbe Farbe bei 75 % Deckkraft). EDDY hatte das so angesagt und nach dem Blick auf die Seite verworfen: „Die Icons sind zu grau, mach es rueckgaengig." **Icons vertragen die Abschwaechung schlechter als Text**: ihre Striche sind duenner, und was beim Begriff als ruhig wirkt, laesst ein Zeichen verschwinden. Die Icons stehen deshalb auf voller Deckkraft, der Begriff bleibt bei 75 %. -------------------------------------------------------------------------- */ /* die Zeilen: Termin, Ort, Preis */ .lf-item-container .lf-item-info-2 > ul.lf-contact > li > i { color: rgb(36, 36, 41); } /* das Monitor-Zeichen der Hybrid-Zeile: steckt im Text, eigene Regel noetig */ .lf-item-container .lf-item-info-2 > ul.lf-contact > li i.icon-computer-screen-1 { color: rgb(36, 36, 41); } /* die Aktionen: Schnellansicht und Merken */ .lf-item-container a.c27-toggle-quick-view-modal > i, .lf-item-container a.c27-bookmark-button > i { color: rgb(36, 36, 41); } /* ========================================================================== AIMF-ANPASSUNG #076: Konto-Zeichen bleibt am Telefon sichtbar, auch eingeloggt - seit K1 fuehrt es ins Menue-Panel, Kopf-Dropdown mobil aus (Snippet S-68) Referenz-Fassung: PROJEKTE/_ALLGEMEIN/SNIPPETS/S-68-konto-mobil-sichtbar.css Aenderungen dort zuerst. Dies ist die Kopie, nicht hier bearbeiten. ========================================================================== */ @media only screen and (max-width: 768px) { /* 1. Der Konto-Bereich wird eingeblendet - NUR eingeloggt. `body.logged-in` ist eine WordPress-Standardklasse; das Theme nutzt sie selbst (`body:not(.logged-in) .user-area.signin-area`). Ohne diese Einschraenkung stuende im ausgeloggten Zustand plotzlich beides da: die Schriftzeile "Einloggen oder Registrieren" UND das mobile Zeichen. */ /* 🛑 MASSE UND LAGE KOMMEN VOM VORHANDENEN MUSTER, NICHT AUS EIGENER WAHL. Der ausgeloggte Zustand hat mit `.mob-sign-in` laengst ein mobiles Konto-Zeichen, das sitzt und antippbar ist. Gemessen 04.09.2026 bei 390 px: ausgeloggt (.mob-sign-in) 30 x 30 px, x 310-340, y 13 erste Fassung (.user-area) 60 x 50 px, x 280-340, y 3 🛑 Die erste Fassung war doppelt so breit und sass 10 px zu hoch - daher EDDYs Befund "der Abstand zum mobilen Menue ist zu weit weg". **Die Breite war der Abstand:** Das Zeichen steht mittig in seinem Kasten, die Theme-Polsterung (`padding: 0 15px`) schiebt es also 15 px vom Burger weg. Nicht der Zwischenraum war zu gross, sondern der Kasten. ⚠️ `margin-top` wird bewusst NICHT gesetzt: Das Theme gibt `.user-area` unter 1200 px `margin-top: 9px`, und genau daraus entsteht die richtige Hoehe. Die erste Fassung hat es auf 0 ueberschrieben und das Zeichen dadurch aus der Reihe gehoben. */ body.logged-in .header .user-area { display: inline-block; margin-right: 10px; } /* Die Theme-Polsterung weg, damit der Kasten so gross ist wie das Zeichen - und die Hoehe auf dieselben 30 px. Das Theme gibt dem Knopf 50 px Hoehe; dadurch sass das Zeichen 10 px ueber dem Burger statt auf einer Linie mit ihm (gemessen y=3 gegen y=13 beim ausgeloggten Muster). ⚠️ Die Hoehe wird hier gesetzt und NICHT ueber `margin-top` ausgeglichen: ein Ausgleich haette denselben Wert nur verschoben und beim naechsten Groessenwechsel wieder danebengelegen. */ body.logged-in .header-right .user-profile-name { padding: 0; height: 30px; } /* 🛑 DIE HOEHE MUSS DURCH DIE GANZE KETTE, nicht nur am Knopf. Nach dem ersten Versuch war der Knopf 30 px hoch, sein Container aber weiterhin 50 - das Zeichen sass deshalb OBEN im Container statt mittig (gemessen y=3 gegen y=13 beim ausgeloggten Muster). Derselbe Fehler wie eine Ebene darueber: Wer eine Groesse aendert, prueft die Kette bis zum sichtbaren Zeichen, nicht nur das Element, das er gerade anfasst. */ body.logged-in .header-right .user-profile-dropdown, body.logged-in .header .user-area { height: 30px; line-height: 30px; } /* 🛑 DIE HUELLE ALLEIN GENUEGT NICHT - das Theme versteckt den INHALT separat. Erste Fassung vom 04.09.2026 blendete nur `.user-area` ein und wirkte trotzdem nicht: EDDY sah am Telefon weiterhin nur den Burger. Angemeldet gemessen war `.user-area` dann 0 px BREIT, und der Grund lag eine Ebene tiefer - `.user-profile-dropdown` traegt sein eigenes `display: none`. Die Huelle war sichtbar und leer. ⚠️ Die Lehre gilt ueber diesen Fall hinaus: Wer etwas einblendet, prueft die ganze Kette bis zum sichtbaren Zeichen, nicht nur das aeusserste Element. Ein Kasten mit Breite 0 ist der Hinweis darauf - er sagt "ich bin da, mein Inhalt ist es nicht". 🛑 UND ES BRAUCHT `!important`, WEIL DAS THEME EINES SETZT. `assets/dist/header.css`: `.header-right .user-profile-dropdown { display: none !important }`. Gegen ein `!important` verliert JEDE normale Regel, egal wie schwer sie wiegt - meine zweite Fassung wog (0,3,1) gegen (0,2,0) und wirkte trotzdem nicht. ⚠️ Das ist der Grund, warum die Regel hier `!important` traegt, obwohl der Skill davon abraet: Es ist kein Gewichts-Problem, sondern die einzige Antwort auf ein fremdes `!important`. */ body.logged-in .header-right .user-profile-dropdown { display: block !important; } /* 2. Nur das ZEICHEN, nicht der Schriftzug. "Mein Konto" plus Pfeil wuerde die Kopfzeile am Telefon sprengen - neben Logo und Burger ist dort kein Platz fuer drei Elemente. `font-size: 0` am Elternteil blendet den Text aus, ohne ihn aus dem Markup zu nehmen: Vorlesegeraete lesen ihn weiter. */ body.logged-in .header-right .user-profile-name { font-size: 0; line-height: 1; } body.logged-in .header-right .user-profile-name .submenu-toggle { display: none; } /* 3. 🛑 DIE FARBE MUSS GESETZT WERDEN, SONST IST DAS ZEICHEN UNSICHTBAR. Das Theme gibt `.header .user-area` die Schriftfarbe WEISS (gemessen 04.09.2026: rgb(255,255,255)) - auf dem weissen Kopfbereich waere das Zeichen da und trotzdem nicht zu sehen. Das sieht auf einem Bild nicht nach einem Farbfehler aus, sondern nach einem fehlenden Symbol, und man sucht dann an der falschen Stelle. GROESSE UND FARBE sind die des ausgeloggten mobilen Zeichens, damit beide Zustaende gleich aussehen (`eddy_entscheidungen` 530: angleichen heisst ganz angleichen). Werte aus S-43 Abschnitt 2. ⚠️ DAS ZEICHEN SELBST WIRD HIER NICHT FESTGELEGT. Die Outline-Maske haengt an S-43 und gilt ueber denselben Selektor bereits mit. Wer das Symbol wechselt, aendert S-43 - diese Datei folgt dann von allein. */ body.logged-in .header-right .user-profile-name i.mi.person { font-size: 30px; line-height: 30px; color: rgb(36, 36, 41); margin-right: 0; } /* 4. 🛑 DAS KOPF-DROPDOWN BLEIBT AM TELEFON AUS - das Symbol fuehrt ins Panel. Bis 12.09.2026 stand hier die Gegenregel: `:focus-within` als Touch- Gegenpart zu `:hover`, damit das Dropdown beim Antippen aufklappt (EDDY 04.09.: "wenn man eingeloggt ist, dann muss es natuerlich aufklappen"). Es klappte auf - und beim zweiten Tipp nicht mehr zu, weil das Theme kein Dropdown-JS laedt und ein zweiter Tipp den Fokus nicht nimmt (gemessen 12.09.: 0 Treffer `bs.dropdown` in assets/dist/*.js). EDDYs Ansage vom 12.09.: kein zweiter Menuetyp mehr - das Symbol oeffnet das Menue-Panel mit aufgeklapptem Konto-Teil (S-75), gestaltet wie das Hauptmenue (S-69). 🛑 Deshalb hier `display: none`, und zwar mit `!important` (Falle 0 des Skills, dritter Fall in dieser Datei): Ein Tipp auf das Symbol setzt am Telefon den `:hover`-Zustand (Sticky-Hover), und das Theme zeigt das Dropdown genau darueber (`.user-profile-dropdown:hover .i-dropdown { opacity: 1 !important; visibility: visible }`). Ohne diese Regel stuende beim Tipp das alte Dropdown ueber dem neuen Panel. Deckkraft und Sichtbarkeit spielen bei `display: none` keine Rolle mehr - egal, was der Sticky-Hover setzt. ⚠️ Bewusst KEIN eigenes Dropdown-JS und kein Nachbau des Auf/Zu: Das Theme hat im Panel ein Kontomenue mit slideToggle (`header.js`), S-75 stoesst es nur an (Skill Falle 20: wer fremde Bedienlogik nachbaut, muss danach jede Eingabeart selbst bedienen). */ body.logged-in .header-right .user-profile-dropdown .i-dropdown { display: none !important; } /* (alt, bis 12.09.2026) Hier stand `.i-nav .mobile-nav-head .user-profile-dropdown { display: none }` - K2 vom 28.08. ("Konto und normales Menue getrennt, wie am Desktop"): der Konto-Knopf im Kopf des Panels war ausgeblendet, weil das Zeichen oben ihn ueberfluessig machte. Seit dem 12.09. ist genau dieser Panel-Kopf der Weg ins Konto (EDDYs Ansage: ein Menuetyp, rote Trennlinie statt zweier Menues) - die Regel ist ersatzlos entfallen, das Theme zeigt den Kopf von selbst. Die Trennung, die EDDY am 28.08. wollte, leistet jetzt die rote Linie in S-69. */ } /* ========================================================================== AIMF-ANPASSUNG #077: Icons der beiden mobilen Menues gleich gross und gleich dunkel; seit K1 auch der Konto-Teil im Panel, rote Trennlinie, Panel-Kopf wie Start (Snippet S-69) Referenz-Fassung: PROJEKTE/_ALLGEMEIN/SNIPPETS/S-69-menue-icons-mobil-gleich.css Aenderungen dort zuerst. Dies ist die Kopie, nicht hier bearbeiten. ========================================================================== */ @media only screen and (max-width: 1200px) { /* KONTOMENUE: 16 auf 20 px. Beide Ausgabeorte, weil das Theme im Kopfbereich `.dropdown-menu` und im Menue `.i-dropdown` verwendet - derselbe Bau, zwei Klassen. */ /* 🛑 `!important` IST HIER PFLICHT, NICHT NACHLAESSIGKEIT. Das Theme setzt `.user-profile-dropdown .i-dropdown li a i { font-size: 16px !important }` (`assets/dist/header.css`). Die erste Fassung ohne `!important` blieb wirkungslos - und zwar auf eine Art, die fast durchgerutscht waere: `line-height` wirkte (der Kasten wuchs auf 20 px), nur `font-size` nicht. **Eine halb gewirkte Regel sieht in der Messung nach Erfolg aus, wenn man nur den Kasten liest.** Es ist bereits das zweite `!important` des Themes in diesem Bereich (siehe S-68, dort `display: none !important`). 🛑 UND `!important` ALLEIN GENUEGT NICHT: BEI ZWEI `!important` ENTSCHEIDET WIEDER DAS GEWICHT. Der zweite Versuch trug `!important` und blieb trotzdem bei 16 px, weil der Theme-Selektor `.user-profile-dropdown .i-dropdown li a i` **(0,3,3)** schwerer wiegt als `.header-right .dropdown-menu li a i` **(0,2,3)**. Deshalb steht hier der Theme-Selektor SELBST, mit `.header-right` davor - gleiche Bauart, ein Glied mehr, damit er sicher gewinnt. */ .header-right .user-profile-dropdown .i-dropdown li a i, .header-right .user-profile-dropdown .dropdown-menu li a i { font-size: 20px !important; line-height: 20px !important; } /* NORMALES MENUE: 24 auf 20 px, und die Farbe auf die des eigenen Menuetextes. */ /* 🛑 AUCH HIER `!important`, UND ZWAR NUR FUER DIE FARBE. `ul.main-nav li a > i` traegt `color: rgb(72,72,72) !important` (`assets/dist/header.css`). Meine Regel wiegt mit (0,2,3) MEHR als dessen (0,1,4) - und verliert trotzdem, weil `!important` das Gewicht schlaegt. Die Groesse ging durch, weil sie dort kein `!important` hat. **Genau daran erkennt man den Fall: eine Regel wirkt halb.** 🛑 DAS IST DAS DRITTE `!important` DES THEMES IN DIESEM BEREICH (S-68 `display`, oben `font-size`, hier `color`). Wer im Kopfbereich oder in den Menues etwas aendert und es wirkt nicht, prueft hier ZUERST - nicht die Spezifitaet, sondern ob dort ein `!important` steht. Reihenfolge: erst `!important` suchen, dann Gewicht rechnen. */ .i-nav .main-nav li a i { font-size: 20px; line-height: 20px; color: rgb(36, 36, 41) !important; } /* KONTO-TEIL IM PANEL (seit 12.09.2026, K1): wie das Hauptmenue darunter. Das Theme gibt `.mobile-user-menu` grauen Grund (`#f9f9f9`) und den Icons `font-size: 24px; width: 40px` (assets/dist/header.css, kein !important); Zeile und Text kommen aus `.i-nav ul li a` (50 px hoch, 0 20px, 600) - dieselbe Regel wie im Hauptmenue. Die 40 px Icon-Spur bleibt, damit die Texte beider Teile in einer Flucht stehen (Hauptmenue: `.main-nav li a > i { width: 40px }`). Farbe erbt ueberall vom Link (`#242429` = rgb(36,36,41)), auch in der Abmelden-Zeile und ihrem Zeichen - deshalb hier KEINE Farbregel (EDDY 01.10.2026, siehe Kopf). Die rote Linie sitzt UNTER dem Konto-Bereich - und der ist je nach Zustand verschieden hoch, siehe den naechsten Block. */ .i-nav .mobile-user-menu { background: #fff; border-bottom: 1px solid var(--accent); } .i-nav .mobile-user-menu ul li a i { font-size: 20px; line-height: 20px; } /* Unter dem letzten Konto-Punkt liegt sonst die graue Zeilenlinie des Themes (`.i-nav ul li { border-bottom: 1px solid rgba(0,0,0,.1) }`) direkt UEBER der roten - am Pixel gemessen (390): y 315 grau 229, y 316 rot. Zusammen wirkt das wie ein dunkler 2-px-Strich; deshalb hier nur die rote. */ .i-nav .mobile-user-menu li:last-child { border-bottom: none; } /* 🛑 DIE ROTE LINIE MUSS IN BEIDEN ZUSTAENDEN DA SEIN (EDDY 01.10.2026: "gut waere, dass der rote Trennstrich auch angezeigt wird, wenn das Benutzerkonto nicht ausgeklappt ist"). Sie haengt oben am `.mobile-user-menu` - und das traegt zugeklappt `display: none`, womit sein Rahmen verschwindet. Der Konto-BEREICH ist zugeklappt nur der Panel-Kopf, aufgeklappt Kopf plus Liste. Also traegt der Kopf die rote Linie, solange die Liste unsichtbar ist, und gibt sie ab, sobald sie aufklappt - dann trennt ihn wieder das Theme-Grau von der Liste. ERKANNT WIRD DER ZUSTAND AM INLINE-STYLE, den jQuery selbst schreibt: `slideToggle` (Theme, Tipp auf "Mein Konto") und `slideDown`/`hide` (S-75) setzen `display: block` bzw. `display: none` direkt am Element. Im Grundzustand steht dort gar nichts, und genau dann gilt das Theme-CSS `display: none` - der Kopf ist rot, richtig so. Beide Schreibweisen abgedeckt, weil die Serialisierung des style-Attributs nicht garantiert ist. Gemessen am Pixel (390, angemeldet): zugeklappt y 60 rot rgb(212,13,38); aufgeklappt y 60 grau 229 und y 315 rot. ⚠️ `body.logged-in` ist Pflicht: Den Panel-Kopf gibt es auch AUSGELOGGT (dort nur mit dem Schliess-Zeichen), und eine rote Linie unter einem leeren Kopf waere sinnlos. */ body.logged-in .i-nav .mobile-nav-head { border-bottom-color: var(--accent); } body.logged-in .i-nav:has(.mobile-user-menu[style*="display: block"]) .mobile-nav-head, body.logged-in .i-nav:has(.mobile-user-menu[style*="display:block"]) .mobile-nav-head { border-bottom-color: rgba(0, 0, 0, .1); } /* PANEL-KOPF "Mein Konto" wie die Zeile "Start" darunter (EDDY 12.09. abends, am Geraet): kein Icon davor ("Start hat kein Icon - wir lassen die Icons im mobilen bei Mein Konto und bei Start weg"), Text auf 20 px Einzug und 15 px wie die Menuezeilen. Das Person-Zeichen wird nur ausgeblendet (S-43 haelt seine Maske weiter bereit). DER PFEIL - in zwei Runden, beide Male von EDDY am Geraet beurteilt: 12.09.: "ein bisschen klein, faengt oben am o an, unten Luft". Das Theme setzt `mi arrow_drop_down` mit 18 px in eine 0 px BREITE Inline-Box; das Dreieck war dadurch nur 4 px hoch (y 27-30) und sass am oberen Rand der Kleinbuchstaben. `width: auto` hebt die 0-px-Box auf, `right: 0` den Theme-Versatz (-4 px). 01.10.: "vielleicht den Pfeil einfach groesser machen, schwarz einfaerben, dass er so hoch ist wie das o - dann muessen wir nichts positionieren". Genau so gemessen und gebaut: die x-Hoehe des Textes ist 8 px (o: y 27-34), bei 28 px war das Dreieck 5 px, bei 37 px sind es 8 - mit dem bestehenden `top: 1px` deckt es y 27-34 exakt. 🛑 DIE DECKKRAFT WAR DER GROESSERE TEIL DES EINDRUCKS: Das Theme gibt der Box `opacity: .3` (`.user-profile-name .submenu-toggle`) und hebt sie nur bei `:hover` auf 1 - den es am Telefon nicht gibt. Am Pixel: dunkelster Punkt 177 gegen 37 beim Text daneben. Deshalb `opacity: 1`. ⚠️ Auf Mess-BILDERN faellt das nicht auf, weil der Mauszeiger des Werkzeugs nach dem Klick im Kopf steht und den Hover ausloest. FARBE: das Theme setzt dem Zeichen `color: #000` (`.user-profile-dropdown .user-profile-name .submenu-toggle i`) - reines Schwarz kommt im Theme sonst nirgends vor. Hier steht die Textfarbe rgb(36,36,41) wie im Wort daneben (Entscheid 530: angleichen heisst ganz angleichen; Entscheid #069: "schwarz" ist rgb(36,36,41), nicht #000). DRITTE RUNDE, EDDY am selben Abend: "jetzt wirkt der Pfeil sehr dominant - auf 32 reduzieren und einen Mittelwert zwischen dem vorherigen Grau und dem jetzigen Schwarz". 37 -> 32 px (Dreieck 8 -> 7 px, also knapp unter der x-Hoehe statt genau darauf) und `opacity: .65` - die MITTE zwischen der Theme-Deckkraft .3 und dem vollen 1, gerechnet und am Pixel nachgemessen. Ueber Weiss ergibt das rund rgb(113,113,116): dunkler als das Theme-Grau, heller als der Text daneben. 🛑 Die Deckkraft bleibt der Stellhebel, nicht ein neuer Farbwert - so bleibt der Ton an die Schriftfarbe gekoppelt und wandert mit, falls die sich je aendert. */ .i-nav .mobile-nav-head .user-profile-name i.mi.person { display: none; } .i-nav .mobile-nav-head .user-profile-name { padding-left: 20px; font-size: 15px; } .i-nav .mobile-nav-head .user-profile-name .submenu-toggle { display: flex; align-items: center; width: auto; height: auto; margin-left: 0; opacity: .65; } .i-nav .mobile-nav-head .user-profile-name .submenu-toggle i { font-size: 32px; line-height: 1; right: 0; top: 1px; color: rgb(36, 36, 41); } /* 🛑 UND DIE TEXTE DANEBEN GINGEN EBENFALLS AUSEINANDER - gefunden hat es EDDY, nicht ich. Seine Frage: „Kann es sein, dass die Textgroessen mobil in beiden Menues sich unterscheiden?" Gemessen: Kontomenue 16 px, normales Menue 14 px. Beide jetzt 15 px, von EDDY so entschieden. ⚠️ Die Lehre fuer den naechsten Angleich: Wer die ICONS zweier Bereiche angleicht, sieht sich im selben Zug ihre TEXTE an. Ich hatte nur das gemessen, wonach gefragt war - und die Zeile daneben stand die ganze Zeit mit im Bild. */ .header-right .dropdown-menu li a, .header-right .i-dropdown li a, .i-nav .main-nav li a, .i-nav .mobile-user-menu li a { font-size: 15px !important; } /* 🛑 `edit_note` KENNT DIE GELADENE ICON-SCHRIFT NICHT - das Zeichen kam als NICHTS, ohne Fehlermeldung. Gefunden nur am Bild. EDDY hat das Zeichen ausgewaehlt (04.09.2026, aus einer Tafel). Es gehoert zu den neueren Material SYMBOLS; die hier eingebundene Material-ICONS-Fassung enthaelt es nicht. Der Menuepunkt trug danach seinen Text und gar kein Zeichen mehr - im Menue faellt eine Luecke weniger auf als ein falsches Bild, und genau deshalb ist der Bild-Check nach jedem Icon-Wechsel Pflicht (Skill §Icons: HTTP 200 und ein unbekannter Name sehen gleich aus). ✅ Loesung wie beim Konto-Symbol in S-43: die offizielle SVG von Google HERUNTERGELADEN und als Maske eingebettet - kein zweiter Font-Download, kein Aufruf bei Google im Browser des Besuchers, und die Farbe kommt ueber `currentColor` weiter vom Element. Groesse 20 px wie die Nachbarn in diesem Menue. Staerke seit 12.09.2026 wght400 (vorher wght200): EDDY sah das Zeichen am Telefon duenner als die Nachbarn - am Pixel gemessen (tinte-helligkeit.py, 390 px, Dropdown angetippt): wght200 Tinte-Mittel 141 / 8 % satt, die Nachbarn 81-113 / 34-55 %. Drei Stufen als Probe (eingeloggt-messen.py --css=): wght300 116/41 %, wght400 116/36 %, wght500 106/38 %. EDDY-Wahl B = wght400 aus einer Tafel (A-P_PROG-171 K2, DEL-425) - dieselbe URI wie unten am Rechner, ein Daten-URI fuer beide Breiten. */ .header-right .dropdown-menu li a i.mi.edit_note::before, .header-right .i-dropdown li a i.mi.edit_note::before, .i-nav .mobile-user-menu li a i.mi.edit_note::before { content: ''; display: block; width: 20px; height: 20px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='M160-400v-80h280v80H160Zm0-160v-80h440v80H160Zm0-160v-80h440v80H160Zm360 560v-123l221-220q9-9 20-13t22-4q12 0 23 4.5t20 13.5l37 37q8 9 12.5 20t4.5 22q0 11-4 22.5T863-380L643-160H520Zm300-263-37-37 37 37ZM580-220h38l121-122-18-19-19-18-122 121v38Zm141-141-19-18 37 37-18-19Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='M160-400v-80h280v80H160Zm0-160v-80h440v80H160Zm0-160v-80h440v80H160Zm360 560v-123l221-220q9-9 20-13t22-4q12 0 23 4.5t20 13.5l37 37q8 9 12.5 20t4.5 22q0 11-4 22.5T863-380L643-160H520Zm300-263-37-37 37 37ZM580-220h38l121-122-18-19-19-18-122 121v38Zm141-141-19-18 37 37-18-19Z'/%3E%3C/svg%3E") center / contain no-repeat; } } /* ---------- AM RECHNER (ab 1201 px): NUR das `edit_note`-Zeichen ---------- EDDY 10.09.2026: „wenn ich mit der Maus auf Mein Konto klicke, dass ich unten bei Kontodetails kein Icon mehr habe." 🛑 MEIN FEHLER, derselbe wie beim Kopfsymbol am 04.09.: Die Maske oben steht in `@media (max-width: 1200px)`, weil der Auftrag „mobil" hiess. Am Rechner griff sie nie, und weil die Icon-Schrift den Namen nicht kennt, blieb dort NICHTS - gemessen 11.09.2026 angemeldet bei 1440 mit geoeffnetem Dropdown (`eingeloggt-messen.py --hover=`): das `i` war 5 x 0 px, keine Maske. Ein Block nur fuer eine Breite ist eine stille Grenze: Er faellt am Rechner ohne Fehler aus. Vor jeder Fertigmeldung vier Bilder (390/1440 x angemeldet/ausgeloggt). 🛑 UND NICHT EINFACH DIE %3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='M160-400v-80h280v80H160Zm0-160v-80h440v80H160Zm0-160v-80h440v80H160Zm360 560v-123l221-220q9-9 20-13t22-4q12 0 23 4.5t20 13.5l37 37q8 9 12.5 20t4.5 22q0 11-4 22.5T863-380L643-160H520Zm300-263-37-37 37 37ZM580-220h38l121-122-18-19-19-18-122 121v38Zm141-141-19-18 37 37-18-19Z'/%3E%3C/svg%3E VON OBEN WIEDERVERWENDEN: Sie ist wght200, bei 16 px ein Strich von 0,67 px - am Pixel gemessen zerfaellt er (Tinte- Mittel 146, nur 7 % satte Pixel), waehrend die Nachbarn im selben Dropdown (icon-laptop-1, icon-location-pin-check-2, bookmark_border, alle 16 px) bei 110-136 und 27-44 % liegen. Vier Staerken angemeldet mit Proben-CSS gemessen (`eingeloggt-messen.py --css=`): wght200 146/7 %, wght300 132/26 %, **wght400 117/32 %**, wght500 105/28 %. Hier steckt deshalb **wght400** (Google-Original, .../edit_note/default/24px.svg) - bei 16 px ein 1,33-px- Strich, dasselbe Mass wie wght300 bei 20 px (EDDYs Wahl fuer das Kopfsymbol, S-43). Am Telefon (20 px) stand oben wght200 - seit 12.09.2026 ebenfalls wght400 (EDDY-Wahl B, A-P_PROG-171 K2, DEL-425): am Pixel war wght200 bei 20 px genauso duenn wie hier bei 16 (8 % satt gegen 34-55 % der Nachbarn). Seitdem EIN Daten-URI fuer beide Breiten, zwei Groessen, ein Eindruck. Groesse `1em`: folgt der Schriftgroesse des Zeichens, die das Theme am Rechner mit `font-size: 16px !important` setzt - kein zweiter Wert, der auseinanderlaufen kann. Gewicht (0,5,3) plus Pseudo, der Theme-Block setzt am ::before nichts. */ @media only screen and (min-width: 1201px) { .header-right .user-profile-dropdown .dropdown-menu li a i.mi.edit_note::before, .header-right .user-profile-dropdown .i-dropdown li a i.mi.edit_note::before { content: ''; display: block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='M160-400v-80h280v80H160Zm0-160v-80h440v80H160Zm0-160v-80h440v80H160Zm360 560v-123l221-220q9-9 20-13t22-4q12 0 23 4.5t20 13.5l37 37q8 9 12.5 20t4.5 22q0 11-4 22.5T863-380L643-160H520Zm300-263-37-37 37 37ZM580-220h38l121-122-18-19-19-18-122 121v38Zm141-141-19-18 37 37-18-19Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='M160-400v-80h280v80H160Zm0-160v-80h440v80H160Zm0-160v-80h440v80H160Zm360 560v-123l221-220q9-9 20-13t22-4q12 0 23 4.5t20 13.5l37 37q8 9 12.5 20t4.5 22q0 11-4 22.5T863-380L643-160H520Zm300-263-37-37 37 37ZM580-220h38l121-122-18-19-19-18-122 121v38Zm141-141-19-18 37 37-18-19Z'/%3E%3C/svg%3E") center / contain no-repeat; } } /* === AIMF-ANPASSUNG #079: Konto-Aktionen duerfen einen Zeilenumbruch tragen (Snippet S-71) === */ #job-manager-job-dashboard ul.job-dashboard-actions li a { white-space: pre-line; } /* ========================================================================== AIMF-ANPASSUNG #081: Termin-Status als eigenes Element, Kalender-Knoepfe untereinander, alle drei 30 px, ohne Icons, bei Absage naechster Termin rot (Snippet S-73) Referenz-Fassung: PROJEKTE/_ALLGEMEIN/SNIPPETS/S-73-termin-status-eigenes-element.css Aenderungen dort zuerst. Dies ist die Kopie, nicht hier bearbeiten. ========================================================================== */ /* 1. Jeder Termin ist eine Spalte: Datum, dann die drei Elemente untereinander, linksbuendig */ #c27-single-listing .event-dates-timeline li.upcoming-event-date { flex-direction: column; align-items: flex-start; } /* 2. Alle drei Elemente 30 px hoch: 20 px Zeile + 5 + 5 (Theme: 8,5 + 8,5 = 37). Weg dorthin: erst alle drei 34 (wie a.ml-anmeldeknopf), dann die Kalender-Knoepfe 30 (EDDY 12.09. 13:5x), dann auch der Status 30 (EDDY 12.09. 16:4x: „der Status-Button schaut deutlich hoeher aus, der sollte genauso hoch sein"). */ #c27-single-listing .event-dates-timeline li.upcoming-event-date a.add-to-google-cal, #c27-single-listing .event-dates-timeline li.upcoming-event-date a.add-to-i-cal { padding-top: 5px; padding-bottom: 5px; } /* 3. Der Status (vom Theme als dritter Kalender-Link mit javascript-href ausgegeben) wird zum invertierten Knopf: weiss, grauer Rand als innerer Schatten (gleiche Masse wie die Knoepfe), steht VOR den beiden Kalender-Knoepfen und ist nicht klickbar */ #c27-single-listing .event-dates-timeline li.upcoming-event-date a.add-to-google-cal[href^="javascript"] { order: 1; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); margin: 0 0 8px 0; pointer-events: none; cursor: default; } /* 4. Google (echter Link) an zweiter, Apple an dritter Stelle; die Theme-Seitenabstaende (10 px) weg */ #c27-single-listing .event-dates-timeline li.upcoming-event-date a.add-to-google-cal[href^="http"] { order: 2; margin: 0 0 8px 0; } #c27-single-listing .event-dates-timeline li.upcoming-event-date a.add-to-i-cal { order: 3; margin: 0; } /* 5. Die Icons der beiden Kalender-Knoepfe weg - das "+" steht im Uebersetzungstext (Loco: "+ Google Kalender", "+ Apple, Outlook & Co."); das Status-Symbol bleibt */ #c27-single-listing .event-dates-timeline li.upcoming-event-date a.add-to-google-cal[href^="http"] i, #c27-single-listing .event-dates-timeline li.upcoming-event-date a.add-to-i-cal i { display: none; } /* 6. Abgesagtes Event (der Absage-Baustein traegt .ml-absage - dieselbe Weiche wie der rote Durchstrich in S-18): der Status des NAECHSTEN Termins zeigt "abgesagt" statt "geplant", Text und Symbol im Absage-Rot, der Rahmen bleibt grau (EDDY 12.09.2026, Wahl A aus der Tafel). Alle weiteren Termine bleiben "geplant". !important, weil single-listing.css color und font-size der Kalender-Links mit !important setzt (.map-block-address a, a.add-to-google-cal, a.add-to-i-cal). Der Theme-Text "geplant" wird ueber font-size 0 ausgeblendet, "abgesagt" kommt als ::after; Symbol und Luecke behalten ihre gemessenen Masse. */ body:has(.ml-absage) #c27-single-listing .event-dates-timeline li.upcoming-event-date:first-child a.add-to-google-cal[href^="javascript"] { color: var(--ml-absage, #c0392b) !important; font-size: 0 !important; } body:has(.ml-absage) #c27-single-listing .event-dates-timeline li.upcoming-event-date:first-child a.add-to-google-cal[href^="javascript"] i { font-size: 13px !important; color: var(--ml-absage, #c0392b) !important; /* Theme: a.add-to-google-cal i { color: #000 !important } */ } body:has(.ml-absage) #c27-single-listing .event-dates-timeline li.upcoming-event-date:first-child a.add-to-google-cal[href^="javascript"]::after { content: "abgesagt"; font-size: 14px; margin-left: 4px; } /* ========================================================================== AIMF-ANPASSUNG #085 Referenz-Fassung: (nicht angegeben) Aenderungen dort zuerst. Dies ist die Kopie, nicht hier bearbeiten. ========================================================================== */ /* -------------------------------------------------------------------------- S-77: Die Zeichen der Einordnungs-Kachel, die icomoon nicht hat -------------------------------------------------------------------------- WOFUER: Zwei Faelle, bei denen die Theme-Schrift icomoon nichts Passendes anbietet, und die deshalb als Maske aus Material Symbols kommen. 1) DIE STUFEN-REIHE (`ml-stufe-1` bis `ml-stufe-3`) Eine Reihe, die WAECHST statt zu RANKEN - dieselbe Raute, nur mehr Lagen. EDDY 17.10.2026: *"mach Rauten rein"*, nach seiner Wahl am 16.10. (*"A bei den Schichten. Die Rauten."*). 🛑 Warum ueberhaupt eine Reihe und keine drei Einzelzeichen: Die Begriffe koennen alphabetisch sortiert erscheinen. Drei unverwandte Zeichen (Pflanze, Blume, Doktorhut) ergeben dann keine Stufenfolge mehr. EDDY am 16.10.: *"Die passen mir alle drei nicht, weil die werden eventuell auch nach Alphabet sortiert."* ⚠️ Und bewusst OHNE Sieger-Metapher: kein Podest, keine Medaille, kein Pokal, keine Sterne. EDDY: *"dass jemand sich denkt, er ist ein Verlierer, wenn er nur einen dritten Platz gemacht hat."* 2) DIE RAKETE (`ml-rakete`) Fuer "Gruendung & Startups", das in ZWEI Taxonomien steht (Zielgruppe und Themengebiet). EINE Klasse fuer beide Stellen - damit ist "dasselbe Zeichen an beiden Stellen" strukturell gesichert und nicht nur gepflegt. EDDY 16.10.: *"Das ganz rechte, das ist diese nicht ausgefuellte Rakete."* 🛑 DIE STUFE 1 GIBT ES BEI GOOGLE NICHT - SIE IST GEBAUT. Material hat `layers` (zwei Lagen) und `stacks` (drei), aber keine EINZELNE Lage dieser Form; `layers_clear` ist durchgestrichen, und EDDY wollte ausdruecklich keine Durchstreichung. Die Raute entstand aus `layers`, indem die untere Lage entfernt wurde - dadurch ist sie FORMGLEICH mit den anderen beiden (dieselbe Raute, dieselbe Strichstaerke). ⚠️ Die Teilpfade von `layers` sind RELATIV (kleines m) und haengen am Endpunkt des vorherigen. Wer den ersten streicht, verschiebt alles Weitere. Deshalb sind beide Teile ABSOLUT gerechnet: die obere Raute laeuft 480,-320 -> 120,-600 -> 480,-880 -> 840,-600, das Loch 480,-422 -> 710,-600 -> 480,-778 -> 250,-600. 🛑 UND SIE WIRD ZENTRIERT - das ist Fassung 2 vom 17.10.2026, nach EDDYs Blick auf die erste. Beim Entfernen der unteren Lage bleibt deren leerer Raum im viewBox stehen; die Raute sass dadurch im oberen Drittel und "schwebte" neben ihrem Begriff. Gerechnet statt geraten: stacks y -880..-80 Mitte -480 = viewBox-Mitte, passt layers y -880..-118 Mitte -499 = 19 daneben, faellt nicht auf Raute y -880..-320 Mitte -600 = 120 daneben Deshalb beide Teile um +120 nach unten, das ergibt die Werte in der Regel. EDDY woertlich: *"die Raute schwebt irgendwie weiter oben. Bei den anderen 2 bei Fortgeschrittenen und bei Experten passt es."* Nachgemessen mit `zeichen-sitz.py`: Raute-Mitte 7,0 -> 9,5 px, Oberkante jetzt buendig mit der des "E" daneben (beide y=5). **Wer die Raute neu baut, muss zentrieren - sonst kehrt genau dieser Fehler zurueck.** **`fill-rule='evenodd'` ist hier KONSTRUKTIV noetig**, nicht vorsorglich: Das Loch ist gleichlaeufig gezeichnet, ohne die Angabe waere die Raute eine gefuellte Flaeche. Bei `layers`, `stacks` und der Rakete steht es NICHT - die zeichnet Google gegenlaeufig, dort wuerde evenodd die Loecher kippen. 🛑 DIE MASKE GEHOERT AN DAS ::before, NICHT AN DAS - zwei Anlaeufe am 16.10.2026 sind genau daran gescheitert. Am `` maskiert sie einen Hintergrund, den es dort nicht gibt: Das Zeichen verschwindet, und es erscheint NICHTS. Ohne Fehlermeldung, auf jeder Messung unauffaellig. Das Muster hier ist das von S-43 (laeuft seit dem 24.08.2026): content leer + display block + feste Masse + background-color currentColor + BEIDE mask-Formen + "center / contain no-repeat". DIE KLASSEN STEHEN IM TERM-META, NICHT IM CSS-SELEKTOR. Die Begriffe tragen `ml-stufe-1..3` bzw. `ml-rakete` als `icon`-Term-Meta (Konfiguration, daher ohne eigene Anpassungs-Nummer; Altwerte im Register). ⚠️ Bewusst NICHT die alten icomoon-Klassen maskiert: Dann haette `icon-nature-plant-1` (Pflanze) eine Raute bezeichnet - ein Datenbestand, der das Gegenteil des Zeichens behauptet, im Backend sichtbar und fuer jeden Naechsten eine stille Falle. ⚠️ Kein Seiten-Anker im Selektor: Erscheint ein Begriff auf einer anderen Ansicht, soll sein Zeichen dort mitkommen. Ein `#c27-single-listing` davor wuerde es dort unsichtbar machen, statt es zu schuetzen. GROESSE: 18 px, und das ist die OBERGRENZE, keine Wahl. Beide `` sind 18x20 (gemessen), nur die Schriftgroesse darin weicht ab (rechte Spalte 16, Zielgruppen 18). Feste Pixel halten die Rakete an beiden Stellen exakt gleich gross. ⚠️ **20 px wurde gemessen und ist schlechter:** die Maske ragt aus dem 18 px breiten Kasten, und die sichtbare Tinte SINKT dadurch (stacks 118 -> 100 Tintenpixel). Wer die Zeichen groesser will, muss den Kasten mitvergroessern - und der gehoert den Nachbar-Icons mit. STAERKE: die Standardstufe (`default`, entspricht wght400). ⚠️ Die Strichstaerke ist eine ACHSE DER SCHRIFT, keine CSS-Angabe: Wer sie aendert, tauscht den PFAD, nicht einen Wert. 🛑 **Die Stufen heissen wght100..wght300, dann `default`, dann wght500..wght700 - ein `wght400` gibt es NICHT.** Google antwortet darauf mit HTTP 404 und einer 1.631 Byte grossen HTML-Seite; die ist groesser als jedes echte Icon-SVG (244-400 Byte), `curl` meldet keinen Fehler, und eingebettet waere daraus eine Maske, die stillschweigend nichts zeigt. Vor dem Einbetten pruefen, dass die Datei mit ` 45 px hoch, alles darunter rueckt 5 px nach oben. Gewollt - der Abstand nach unten bleibt davon unberuehrt, weil er am margin des BLOCKS haengt, nicht an dessen Inhalt. UNTEN: Der sichtbare Abstand ist eine SUMME aus zwei Teilen (Falle 19 - wer nur die Stellschraube sieht, rechnet die Prozente auf den falschen Wert). Gemessen vom Slider-Balken bis zur Ueberschrift „Sortieren nach": 6 px Rest im Regler-Block (Balken endet 1841, Block endet 1847) 20 px margin-bottom des Blocks ------ 26 px sichtbar -> x 1,25 = 32,5 px Die Stellschraube ist der margin, also 20 + 6,5 = 26,5 px. **Nicht 25 px**: Das waere „25 % auf die Stellschraube" und ergaebe sichtbar nur 31 px, also +19 % statt +25 %. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 4) ZWEITE FEINJUSTIERUNG, EDDY am 18.10.2026: *„Den Abstand zwischen kostenlos und den Zahlen und auch den Abstand zwischen den Zahlen und dem Range-Schieberegler um 25 % reduzieren."* OBEN: 15 px (aus Punkt 3) x 0,75 = 11,25 px UNTEN: wieder eine SUMME, und der zweite Teil ist nicht abstellbar: 10 px padding-bottom des Zahlen-Kastens 10 px ZEILEN-SPALT - `.amount` ist `display: inline-block` und sitzt auf der Grundlinie seiner Zeile; darunter bleibt der Platz fuer Unterlaengen stehen. Der Slider hat `margin: 0` (gemessen), die Luecke kommt also NICHT von ihm. ------ 20 px sichtbar -> x 0,75 = 15 px -> padding-bottom 10 - 5 = 5 px ⚠️ Der Spalt liesse sich mit `display: block` ganz entfernen - das waere dann aber 0 statt 15 px und damit weit unter EDDYs Vorgabe. Deshalb bleibt die Anzeige-Art unberuehrt und nur die Polsterung traegt die Aenderung. -------------------------------------------------------------------------- */ .search-filters .explore-filter.range-filter .amount { padding-top: 11.25px; padding-bottom: 5px; } /* 🛑 SECHS Klassen sind hier kein Zierrat, sondern gemessen. Um den margin-bottom streiten ZWEI Theme-Regeln, die schwerer sind als der naheliegende Selektor: [0,5,0] .search-filters .form-group.explore-filter:not(.md-group) [0,4,0] .search-filters .form-group.explore-filter.range-slider Eine Regel `.search-filters .explore-filter.range-filter` wiegt nur [0,3,0] und ist wirkungslos - erster Versuch, am Abstand nachgemessen: unveraendert 26 px. `!important` braucht es NICHT (die Theme-Regeln haben dort keines, nur auf `width`), wohl aber mehr Gewicht als [0,5,0]. Deshalb [0,6,0]: dann gewinnt die Regel unabhaengig von der Ladereihenfolge, nicht nur weil das Child-Theme spaeter kommt. */ .search-filters .filter-wrapper .form-group.explore-filter.range-filter:not(.md-group) { margin-bottom: 26.5px; } /* === AIMF-ANPASSUNG #087: Kalender-Zeichen am Datums-Filter aus der Theme-Schrift statt Font Awesome (Snippet S-79) === */ /* -------------------------------------------------------------------------- S-79: Das Kalender-Zeichen am Datums-Filter der Suche kommt aus einer FREMDEN Schrift - vereinheitlicht auf das Theme-Zeichen -------------------------------------------------------------------------- EDDY am 13.10.2026 (ueber DEL-427, AIMF): das Kalender-Icon am Datumsfilter soll dasselbe sein wie ueberall sonst auf der Plattform. DER BEFUND: MyListing zeichnet die ganze Oberflaeche mit seiner eigenen icomoon-Schrift (`icon-…`), **nur den Datums-Filter nicht**. Dort setzt `assets/dist/datepicker.css` ein Zeichen aus FONT AWESOME: #finderSearch .datepicker-wrapper:before, .search-filters .datepicker-wrapper:before { content: "\f073"; font: 22px/1 "Font Awesome 5 Free"; } … .datepicker-wrapper.active:before { content: "\f274"; } Das ist kein Gestaltungswunsch, sondern eine Inkonsequenz des Themes: `\f073` ist eine FLAECHE (gefuellte Kopfleiste), waehrend das Theme-Zeichen `icon-calendar-1` eine Kontur-Zeichnung ist. Nebeneinander sieht man es sofort, einzeln nicht - deshalb faellt es lange nicht auf. (Vergroessert gegenuebergestellt, 6fach: 8 % der Pixel unterscheiden sich.) 🛑 DAS GEWICHT WIRD AM ERSTEN TEIL DER GRUPPE GERECHNET, NICHT AM ZWEITEN. Die Theme-Regel ist eine Selektor-GRUPPE, und bei einer Gruppe zaehlt jeder Teil fuer sich: [1,2,0] #finderSearch .datepicker-wrapper:before <- dieser gewinnt [0,3,0] .search-filters .datepicker-wrapper:before `#finderSearch` umschliesst die Filterspalte der Suchseite mit - wer nur den zweiten Teil liest (er nennt ja die Suche beim Namen), rechnet gegen [0,3,0] und baut eine Regel, die nichts bewirkt. Genau so ist die erste Fassung dieses Snippets gescheitert: [0,4,0] gegen eine ID, `font-family` blieb bei der Messung unveraendert auf "Font Awesome 5 Free". `!important` ist dabei NICHT im Spiel (geprueft: nur `.reset-value:before` traegt eines) - es genuegt also Gewicht, und [1,3,0] gewinnt unabhaengig von der Ladereihenfolge der Stylesheets. ⚠️ BEIDE ZUSTAENDE BEKOMMEN DASSELBE ZEICHEN, und das ist eine Entscheidung: Das Theme unterscheidet "noch kein Datum" (`\f073`) von "Datum gewaehlt" (`\f274`, Kalender mit Haken). **icomoon hat nur EIN Kalender-Zeichen** (`icon-calendar-1` = `\e928`, nachgezaehlt ueber alle 350 Zeichen in `includes/utils/icons/theme-icons.php`) - eine Entsprechung fuer den aktiven Zustand gibt es nicht. Die Unterscheidung traegt weiterhin die FARBE: das Theme faerbt den ausgefuellten Wrapper dunkler als den leeren. Wer das anders will, braucht ein zweites Zeichen und damit eine Entscheidung von EDDY - nicht ein anderes Snippet. ⚠️ NICHT die Schrift-Kurzform `font` ueberschreiben, nur `font-family`. Das Theme setzt mit `font: 22px/1 …` zugleich Groesse, Zeilenhoehe und Schriftstaerke; wer die Kurzform neu schreibt, setzt alle drei unbeabsichtigt zurueck. Die Groesse bleibt hier bewusst bei den 22 px des Themes. ⚠️ SICHTBAR ERST NACH EINEM KLICK. Die beiden Datumsfelder liegen hinter dem Knopf „Datum auswaehlen"; ohne Klick zeigt jedes Bild nur die Bereichs-Knoepfe und kein Zeichen. Wer hier misst oder ein Bild macht, klickt vorher. -------------------------------------------------------------------------- */ #finderSearch .explore-filter .datepicker-wrapper::before, #finderSearch .explore-filter .datepicker-wrapper.active::before { content: "\e928"; font-family: icomoon; } /* === AIMF-ANPASSUNG #088: Lade-Kreis des Themes in der Akzentfarbe statt Schwarz (Snippet S-80) === */ .paper-spinner .spinner-layer, .paper-spinner .layer-1, .paper-spinner .layer-2, .paper-spinner .layer-3, .paper-spinner .layer-4 { border-color: var(--accent) !important; }