/* Source Sans 3 selbst gehostet (docs/01-planung.md Approach 6 -- kein externes Laden von fonts.googleapis.com) */ @font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("/fonts/source-sans-3-normal.woff2") format("woff2"); } @font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 200 900; font-display: swap; src: url("/fonts/source-sans-3-italic.woff2") format("woff2"); } /* Basis-Reset + Typografie-Baseline (docs/design-system/01-*.md Abschnitt 5) */ * { box-sizing: border-box; } body { margin: 0; font-family: "Source Sans 3"; font-size: 20px; line-height: 32px; letter-spacing: 0.4px; color: #333; background: #fff; } @media (max-width: 480px) { body { font-size: 16px; line-height: 25.6px; } } a { color: rgb(0, 102, 191); text-decoration: none; } img { max-width: 100%; display: block; } /* ---------- Header (docs/design-system/01-*.md Abschnitt 1) ---------- */ #site-header { color: #333; background-color: rgba(0, 0, 0, 0.8); background-image: url("/images/menu-bg-2.png"); background-repeat: repeat-x; background-size: contain; font-family: "Source Sans 3"; font-size: 20px; font-weight: 400; line-height: 32px; letter-spacing: 0.4px; width: 100%; height: 78px; position: absolute; top: 0; left: 0; z-index: 100; display: block; } @media (max-width: 480px) { #site-header { font-size: 16px; line-height: 25.6px; height: 68px; } } #site-header.is-scrolled { position: fixed; box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px 0; } #site-header-inner { padding: 10px 40px 0; position: relative; height: 78px; display: flex; align-items: center; } .custom-logo { max-width: 200px; max-height: 45px; width: auto; /* height:auto ist zwingend, sobald das Logo ein srcset hat: Ohne diese Regel greift der Praesentations-Hinweis aus dem HTML-Attribut height="46", und der Browser rechnet die dichtekorrigierte Eigengroesse der 2x-Datei (150x34) wieder auf 198,5x45 hoch -- genau der Fehler, den srcset beheben soll. Am Original gemessen: DPR 1 -> 195,6x45 (1x-Datei, von max-height gedeckelt), DPR 2/3 -> 150x34 (2x-Datei, ungedeckelt). */ height: auto; } /* Original (OceanWP): #site-logo float:left, #site-navigation-wrap + .after-header-content float:right und liegen direkt nebeneinander am rechten Rand -- keine Gleichverteilung ueber die ganze Breite (curl-Direktvergleich der Original-Layoutmasse). Mit margin-left:auto auf dem Nav-Wrap im Flex-Kontext nachgebildet. */ #site-navigation-wrap { display: flex; align-items: center; margin-left: auto; } #site-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; } .menu-link { color: #fff; font-size: 16px; font-weight: 600; line-height: 68px; letter-spacing: 1px; text-transform: uppercase; padding: 0 18px; height: 68px; display: block; } .menu-link:hover, .menu-link.current-menu-item { color: rgb(0, 156, 247); } /* Aktiver Menuepunkt: Das Original faerbt den Punkt der aktuellen Rubrik blau ein -- Elternpunkt UND Pfeil, direkt an /werke/mythos/ gemessen (beide rgb(0,156,247)). Die Klassen setzt layouts/partials/header.html per exaktem URL-Vergleich (current-menu-item = diese Seite, current-menu-ancestor = ein Unterpunkt ist es). Der Pfeil braucht eine eigene Regel, weil #site-navigation .nav-arrow weiter unten unbedingt color:#fff setzt und den geerbten Wert sonst ueberschreibt. */ #site-navigation > ul > li.current-menu-item > .menu-link, #site-navigation > ul > li.current-menu-ancestor > .menu-link { color: rgb(0, 156, 247); } #site-navigation > ul > li.current-menu-item > .menu-link .nav-arrow, #site-navigation > ul > li.current-menu-ancestor > .menu-link .nav-arrow { color: inherit; } #site-navigation ul li { position: relative; } #site-navigation .nav-arrow { color: #fff; margin-left: 6px; vertical-align: middle; } #site-navigation .sub-menu { display: none; position: absolute; top: 100%; left: 0; background-color: #000; width: 240px; list-style: none; margin: 0; padding: 0; z-index: 200; flex-direction: column; box-shadow: rgba(0, 0, 0, 0.1) 0 2px 6px 0; } #site-navigation li.dropdown:hover .sub-menu, #site-navigation li.dropdown:focus-within .sub-menu { display: flex; } #site-navigation .sub-menu li { border-bottom: 1px solid rgb(193, 193, 193); } #site-navigation .sub-menu li:last-child { border-bottom: none; } #site-navigation .sub-menu .menu-link { display: block; color: #fff; font-size: 16px; font-weight: 400; line-height: 19.2px; text-transform: none; padding: 12px 15px; height: auto; letter-spacing: normal; white-space: normal; } #site-navigation .sub-menu .menu-link:hover { color: rgb(0, 156, 247); background-color: rgb(22, 22, 22); } #site-navigation .sub-menu li.current-menu-item .menu-link { color: rgb(0, 156, 247); background-color: #000; } /* Original: .after-header-content (Instagram) ist ein GESCHWISTER von #site-navigation-wrap, kein Kind (curl-Direktvergleich der Original-DOM-Struktur) -- sonst verschwindet Instagram mobil zusammen mit der (dort ausgeblendeten) Desktop-Nav. */ .after-header-content-inner { display: flex; align-items: center; } .menu-instagram { background-image: url("/images/menu-instagram-40px.png"); background-repeat: no-repeat; background-position: center; background-size: auto; width: 50px; height: 50px; margin-top: 8px; margin-left: 20px; display: block; } /* Wechselbild beim Ueberfahren -- im Original vorhanden, das Asset lag bereits im Build, wurde aber von keiner Regel referenziert (background-image wechselt auf die -hover-Datei). */ .after-header-content-inner a:hover .menu-instagram, .after-header-content-inner a:focus-visible .menu-instagram { background-image: url("/images/menu-instagram-hover-40px.png"); } /* Schliessleiste und Untermenue-Umschalter gehoeren zum Mobil-Panel und sind am Desktop ausgeblendet (Panel-Regeln weiter unten unter dem 1080px-Breakpoint). */ .mobile-menu-close { display: none; } #site-navigation .dropdown-toggle { display: none; } /* Abdunkelung hinter dem Mobil-Panel, Werte 1:1 aus dem Original (.oceanwp-sidr-overlay): position:fixed ueber die volle Viewportflaeche, rgba(0,0,0,0.3), z-index 99. Belegt per Pixelprobe hinter dem offenen Panel: Original rgb(178,178,178) statt Seitenweiss. */ .mobile-menu-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.3); z-index: 99; } .mobile-menu-icon { display: none; } a.mobile-menu { display: none; color: #fff; font-family: "Source Sans 3"; font-size: 16px; font-weight: 600; line-height: 68px; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; } a.mobile-menu:hover { color: rgb(0, 156, 247); } .mobile-menu-bars { vertical-align: middle; margin-top: -2px; } .mobile-menu-text, .mobile-menu-close-text { padding-left: 6px; } .mobile-menu-close-text { display: none; } a.mobile-menu.opened .mobile-menu-text { display: none; } a.mobile-menu.opened .mobile-menu-close-text { display: inline; } @media (max-width: 480px) { a.mobile-menu { font-size: 12.8px; line-height: 68px; } } /* ---------- Footer (docs/design-system/01-*.md Abschnitt 2) ---------- */ footer.site-footer { color: #333; background-color: transparent; position: relative; } #footer-bottom { color: rgb(204, 204, 204); background-color: #000; font-size: 12px; line-height: 12px; padding: 15px 0; } /* width:1200px + max-width:90% (nicht nur max-width:1200px) -- dies ist die theme-generische OceanWP .container-Klasse, kein Elementor-per-Element- max-width. Beim Zurueckrollen einer faelschlich generalisierten Aenderung (vgl. docs/learnings.md L12) wurde diese Regel versehentlich mitresettet; per Multi-Width-Sweep wieder aufgefallen. */ /* Original nutzt kein Flexbox hier, sondern float:left/right (siehe #copyright/ #footer-bottom-menu) mit einem Breakpoint bei genau 959px, der auf float:none (gestapelt) wechselt -- flex mit justify-content:space-between erzwang stattdessen bei sehr schmalen Breiten (320px) beide Elemente nebeneinander in eine zu schmale Zeile und verursachte horizontalen Overflow. */ #footer-bottom-inner { width: 1200px; max-width: 90%; margin: 0 auto; display: block; overflow: hidden; } #copyright { float: left; width: 600px; max-width: 100%; color: rgb(204, 204, 204); font-size: 14.4px; font-weight: 700; line-height: 14.4px; letter-spacing: 1.5px; text-transform: uppercase; text-align: left; padding: 0 15px 0 0; } #footer-bottom-menu { float: right; list-style: none; margin: 0; padding: 0; display: flex; } /* Original: kein Literal-Trennzeichen im Markup -- "|" kommt aus li::after (curl-Direktvergleich der Original-DOM-Struktur, kein separates
  • ). */ #footer-bottom-menu li::after { content: "|"; margin-left: 5px; margin-right: 5px; } #footer-bottom-menu li:last-child::after { content: ""; margin-left: 0; margin-right: 0; } /* Original: #copyright ist ein
    (block), das gestapelt volle Breite einnimmt und zentriert wird -- war vorher ein (inline), das nach float:none auf seine natuerliche inline-Darstellung zurueckfiel und width/max-width dadurch komplett ignorierte (CSS-Spec: width wirkt nicht auf nicht ersetzte inline-Elemente). justify-content:center statt text-align, da #footer-bottom-menu ein Flex-Container bleibt (Original nutzt zwar text-align auf einem Block-Element, visuell aequivalent). */ @media (max-width: 959px) { #copyright, #footer-bottom-menu { float: none; } #copyright { display: block; width: 100%; max-width: 100%; text-align: center; padding: 0; margin-bottom: 15px; } #footer-bottom-menu { justify-content: center; } } #footer-bottom-menu a { color: rgb(204, 204, 204); font-size: 14.4px; font-weight: 700; line-height: 14.4px; letter-spacing: 1.4px; text-transform: uppercase; } /* ---------- Content-Container (aus wp-custom-css im Original-Head) ---------- */ #content { padding-left: 50px; padding-right: 50px; } @media (max-width: 600px) { #content { padding-left: 10px; padding-right: 10px; } } @media (min-width: 1200px) { #content { padding-left: 100px; padding-right: 100px; } } /* Werk-Detail (WP "single post"): schwarzer Hintergrund, heller Text (wp-custom-css .single-post). Original setzt background-color auf selbst (WordPress body_class() traegt "single-post"), NICHT auf das Artikel-Element -- direkt am Original verifiziert (body.style.backgroundColor ist rgb(0,0,0), #content/article selbst sind transparent). Bei Anwendung auf das Artikel-Element allein blieb ein weisser Rand seitlich UND oben/unten sichtbar, da #content ein eigenes Padding hat und die Box nicht die volle Seitenhoehe/-breite deckt (Nutzer-Meldung). */ body.single-post { background-color: #000; } /* article.single-post (nicht generisch .single-post) -- body traegt seit L22 ebenfalls die Klasse "single-post" (fuer den vollflaechigen schwarzen Hintergrund), ein generischer Klassenselektor haette padding:40px 0 dadurch DOPPELT angewendet (body UND article), sichtbar als ca. 40px zu grosser Abstand vor dem Titel. */ article.single-post { color: #bbb; padding-top: 30px; padding-bottom: 40px; } .single-post h2, .single-post h3 { color: #fff; } /* Original: kompletter Content-Body (Titel, Tag-Liste, Fliesstext, Bilder) liegt in einer zentrierten 960px-Spalte innerhalb des breiteren Artikels (Elementor-Container max-width:980px + 10px Widget-Wrap-Padding je Seite = 960px netto, ueber 4 Breiten 1583/1200/1099/1000px direkt verifiziert, kein Einzelmesswert). War komplett linksbuendig am Artikelrand statt zentriert. */ .entry-content { max-width: 960px; margin: 0 auto; } .entry-content strong { color: #fff; font-weight: 700; } .entry-content figcaption { color: #fff; text-align: left; font-size: 0.8em; } /* Original hat kein responsives Maps-Embed (Elementor-Widget bleibt bei jeder Breite 960px breit) -- unser generisches iframe erbt aber das width="960"-HTML-Attribut als Bild-analoge Intrinsic-Groesse; max-width:1000px allein greift nie (960<1000), das Iframe ragt deshalb ab Breiten <960px ueber den Viewport hinaus (Abschluss-Gate-Fund, Test Plan Punkt 4). width:100% ergaenzt, damit es wie ein Bild mitschrumpft. Selektor article.single-post iframe, NICHT .entry-content iframe -- das Maps-Iframe liegt in layouts/werke/single.html als Geschwister NACH .entry-content, nicht darin verschachtelt (Fund beim Testen dieses Fixes: .entry-content iframe griff nie). */ article.single-post iframe { display: block; width: 100%; margin: 0 auto; max-width: 1000px; } /* padding:0 20px unabhaengig von der Breite -- gleiches Muster wie .post-tags (L12: eigener Wert je Komponente, hier aber beide 20px). Fehlte komplett, Text lag direkt an der 960px-Spaltenkante statt mit Innenabstand. */ .entry-content p { color: rgb(187, 187, 187); font-size: 20px; line-height: 32px; letter-spacing: 0.4px; margin: 30px 0; padding: 0 20px; box-sizing: border-box; } /* Site-weite Basis-Typografie-Skalierung (design-system-extraktion.md) fehlte hier -- .entry-content p ueberschreibt font-size/line-height eigenstaendig ohne Breakpoint-Gegenstueck. */ @media (max-width: 480px) { .entry-content p { font-size: 16px; line-height: 25.6px; margin: 24px 0; } } .entry-content img { max-width: 100%; display: block; margin: 30px auto; } /* Original: Fliesstext liegt linksbuendig im vollen 1000px-Textblock (Elementor Text-Editor-Widget), Bilder liegen in eigenen, um sich selbst zentrierten Image-Widgets (kleinere Breite als der Textblock + margin:auto). Da der Content hier aus einem durchgehenden Markdown-Fluss kommt (nicht getrennten Widgets), wird das ueber :has() nachgebildet:

    , die NUR ein Bild enthalten, zentrieren sich selbst -- reine Text-

    bleiben linksbuendig. */ .entry-content p.entry-image-block { margin: 30px auto; } /* ---------- Standard-Content-Seiten (Impressum/Datenschutz/Kuenstler/Sonderseiten) ---------- Helles Theme (weiss/#333, GEGENSATZ zum dunklen .single-post-Werk-Detail-Theme) -- eigener Wrapper ".entry.clr" (NICHT ".entry-content.clr" wie bei Werk-Detail-Posts, Original unterscheidet Page- von Post-Template explizit, docs/design-system/03-*.md). Direkt am Original (/impressum/) gemessen: h2 50px/600/70px/#0a0a0a, Body-Text erbt die globale 20px/32px/#333-Baseline unveraendert (kein eigener Override noetig). KORREKTUR: .entry selbst war OHNE eigene Breitenbeschraenkung geblieben (volle #content-Breite, 1383px bei 1583px Viewport) -- Original zentriert den gesamten Inhalt zusaetzlich auf 1000px (bei 1583px direkt verifiziert: h2/Artikel/Absatz alle exakt 1000px, x=292 = zentriert innerhalb von #content, nicht dessen volle Breite). Betraf ALLE .entry-Seiten gleichermassen (Impressum, Datenschutz, Cookie-Richtlinie, Kuenstler-Seiten, Sonderseiten). */ .entry { max-width: 1000px; margin: 0 auto; } /* Standard-Technik fuer semantisch vorhandene, aber visuell nicht dargestellte Elemente -- bleibt fuer Screenreader/Suchmaschinen lesbar (anders als display:none), aendert aber nichts am sichtbaren Erscheinungsbild. Genutzt fuer H1s auf Seiten, deren Original ebenfalls kein sichtbares H1 hatte (SEO-Review 02, Fund 2 -- B1 verlangt ein H1, "originalgetreu" verlangt keine neue sichtbare Flaeche). */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .entry h2 { color: #0a0a0a; font-size: 50px; font-weight: 600; line-height: 70px; letter-spacing: 0.4px; margin: 0 0 20px; } .entry img { max-width: 100%; display: block; margin: 30px auto; } .entry p.entry-image-block { margin: 30px auto; } .entry hr { border: none; border-top: 1px solid #ccc; margin: 30px 0; } /* Fliesstext faellt bei <=480px auf 16px/25.6px (identisch zu .entry-content p bei den Werk-Detail-Seiten) -- generischer .entry-Fund (Runde 2, Schritt 1, an /der-kuenstler/ nachverifiziert, betraf auch dort bereits freigegebene Seiten, nie multi-width-gegated). margin-bottom explizit mitgesetzt: ohne eigene Regel greift sonst der em-basierte Browser-Default (1em skaliert MIT dem gerade gesunkenen font-size auf 16px) -- am Original bleibt der Absatzabstand unveraendert 20px, unabhaengig von der Schriftgroesse. */ @media (max-width: 480px) { .entry p { font-size: 16px; line-height: 25.6px; margin-bottom: 20px; } } /* Kategorie-Archiv-Intro (Runde 2, Schritt 1): Original-Ueberschrift ist dort ein echtes Elementor-Heading-Widget (eigener line-height:1-Default), nicht die Theme-H2 von Impressum/Kuenstler-Seiten -- direkt an /werke/skulptur-und-plastik/ gemessen: line-height 50px (== font-size), nicht 70px. Gescopt auf .archive-intro, damit die oben verifizierte generische .entry-h2-Regel fuer Impressum/Kuenstler unangetastet bleibt. */ .archive-intro h2 { line-height: 50px; } /* font-size/line-height faellt in 2 Stufen (Breiten-Sweep an /werke/skulptur-und-plastik/, gleiches Muster wie #content h1:not(.single-post-title) an anderer Stelle in dieser Datei, Breakpoints ebenfalls 768/480px). Ohne Fix umbrach "Skulptur im Raum" bei 390px auf 2 statt 1 Zeile. */ @media (max-width: 768px) { .archive-intro h2 { font-size: 40px; line-height: 40px; } } @media (max-width: 480px) { .archive-intro h2 { font-size: 32px; line-height: 32px; } } /* 20px Innenabstand links/rechts -- direkt am Original gemessen: h2/p sind dort NICHT 1000px (volle .entry-Breite) sondern 960px (Elementor-Spalten-Padding dieser konkreten Widget-Instanz). Auf /der-kuenstler/ (kein Elementor, einfache WP-Page) sind h2/p dagegen die vollen 1000px -- .entry selbst bleibt daher unangetastet, nur .archive-intro bekommt den Inset. Ohne das wraeppt Flieundtext bei mehreren Absaetzen (z. B. /werke/mythos/, 40px mehr Breite) in weniger Zeilen um, was sich ueber mehrere Absaetze zu spuerbarem Hoehenunterschied aufsummiert (hier: 2 Absaetze je eine Zeile zu wenig, 64px). */ .archive-intro { padding: 10px 20px 20px; box-sizing: border-box; } /* Seitliches Padding schrumpft unterhalb 768px von 20px auf 10px (am Original per Breiten-Sweep verifiziert: konstant 20px/Seite von >=1367px, konstant 10px/Seite von 1024px bis mind. 390px runter; der Uebergangsbereich 1300-1366px zeigt fliessende Zwischenwerte, vermutlich Elementors fluid-responsive Spalten-Padding -- fuer diese Zwischenzone (Tablet-Breite, weit ausserhalb der fuer Runde 2 relevanten Breakpoints) bewusst nicht pixelgenau nachgebaut, 768px liegt sicher im flachen 10px-Bereich). */ @media (max-width: 768px) { .archive-intro { padding-left: 10px; padding-right: 10px; } } /* Erstes Kindelement OHNE eigenes margin-top -- betrifft konkret /werke/mythos/: kein Heading vor dem Intro-Text (anders als /werke/skulptur-und-plastik/ mit h2 davor, dessen margin:0 das Problem dort bereits neutralisiert), der erste

    traegt sonst einen ungereseteten margin-top (globale Absatz-Baseline), der den sichtbaren Text 20px zu tief startet (direkt am Original verifiziert: Text beginnt durchgehend bei .entry-top, kein Vorabstand -- Elementors interner Flex-Column-Wrapper verhindert Margin-Collapse dort strukturell, unser .entry ist ein normaler Block). Gescopt auf .archive-intro, .entry selbst bleibt unangetastet. */ .archive-intro > *:first-child { margin-top: 0; } /* Titel: Das Original verlangt hier per CSS die Schrift "Source Sans Pro", laedt sie aber nicht -- der Browser faellt deshalb auf eine Serifenschrift zurueck. Das war zunaechst bewusst 1:1 nachgebaut (Quell-Inkonsistenz nachbilden). Auf Nutzerwunsch jetzt korrigiert: der Werktitel nutzt dieselbe Sans wie der Rest der Seite. Bewusste Abweichung vom Original. */ .single-post-title { color: #fff; font-family: "Source Sans 3"; font-size: 40px; font-weight: 600; line-height: 56px; letter-spacing: 0.6px; text-align: center; margin: 0 auto 15px; padding: 0 0 20px; border-bottom: 1px solid #fff; max-width: 960px; } /* Breakpoint 480px direkt am Original bisektiert (Schritt 2, /werke/cat/) -- fehlte komplett, Titel blieb bei jeder Breite auf voller 40px-Groesse. */ @media (max-width: 480px) { .single-post-title { font-size: 24px; line-height: 33.6px; } } /* Werk-Detail Tag-Liste (post-tags, ANDERS als die Tag-Cloud auf Archivseiten) -- font-size war 20px (geerbte Body-Groesse), muss 11px sein; Zentrierung fehlte komplett (lag linksbuendig am Artikelrand statt in der 1000px-Spalte). Beide Werte direkt am Original nachgemessen (Text-Editor-Fliesstext braucht 960px, Tag-Liste eigenstaendig 1000px -- bewusst NICHT auf denselben Wert generalisiert, vgl. L12). */ /* font-weight/line-height/text-transform fehlten komplett (nur geerbte Body-Werte) -- bei cat.md (0 Tags) unsichtbar geblieben, erst bei sphaere.md (Schritt-3-Stichprobe, hat Tags) aufgefallen. Werte aus design-system/03-*.md Teil A Abschnitt 1 (Tag-Liste), dort bereits dokumentiert, aber nie umgesetzt. */ .post-tags { color: #bbb; font-size: 11px; font-weight: 600; line-height: 17.6px; text-transform: uppercase; max-width: 1000px; margin: 16.5px auto 20px; padding: 0 20px; box-sizing: border-box; } .post-tags a { display: inline-block; color: #000; background-color: rgb(170, 170, 170); border: 1px solid rgb(204, 204, 204); border-radius: 8px; padding: 5px 15px; margin: 0 5px 5px 0; font-size: 11px; font-weight: 600; line-height: 17.6px; letter-spacing: 0.4px; text-transform: uppercase; } .post-tags a:hover { background-color: #009cf7; color: #fff; } /* "mehr erfahren"-Toggle-Button (wp-custom-css .readmoretoggle) */ /* max-width:1180px wie die anderen Bio-White-Elemente -- war ohne eigene Breitenbeschraenkung auf die volle Section-Breite gefallen (Review-03- Nachtrag-Fund). */ .readmoretoggle .elementor-tab-title { display: flex; justify-content: center; font-weight: 700; padding: 15px; line-height: 20px; max-width: 1180px; margin-left: auto; margin-right: auto; } /* padding wechselt bei <=749px (eigener Breakpoint), line-height/font-size erst bei <=480px (folgt der allgemeinen Typografie-Skalierung) -- zwei unabhaengige Schwellen auf demselben Element, am Original einzeln nachgemessen statt angenommen (vgl. L12). */ @media (max-width: 749px) { .readmoretoggle .elementor-tab-title { padding: 12px; } } @media (max-width: 480px) { .readmoretoggle .elementor-tab-title { line-height: 16px; } } .readmoretoggle .elementor-tab-title.elementor-active { display: none; } .readmoretoggle .elementor-tab-title a { display: inline-block; padding: 0.4em 1.6em; margin: 0.14em 0; border-radius: 2em; border-top: 3px solid transparent; font-weight: 600; color: rgba(255, 255, 255, 0.9); text-align: center; background-color: rgba(0, 0, 0, 0.5); transition: all 0.34s ease; cursor: pointer; } .readmoretoggle .elementor-tab-title a:hover { color: #fff; background-color: rgba(0, 0, 0, 0.4); transform: scale(1.05); } .elementor-tab-content { display: none; } .elementor-tab-content.is-open { display: block; } /* Absaetze im Aufklapper -- am Original gemessen (20px/32px, letter-spacing 0.4px, margin 0 0 20px, Spaltenbreite 1180px wie die uebrigen .readmoretoggle-Elemente). Vorher lag dort ein einziger Absatz ohne

    , der die globale Baseline erbte. */ .readmoretoggle .elementor-tab-content { max-width: 1180px; margin-left: auto; margin-right: auto; text-align: left; } .readmoretoggle .elementor-tab-content p { color: #333; font-size: 20px; line-height: 32px; letter-spacing: 0.4px; margin: 0 0 20px; } /* font-weight:600, nicht der Browser-Default 700 -- am Original gemessen (gleiches Muster wie .hero-quote b und .buecher > h2 b). Bei 700 wird der fette Absatz 1180px breit und bricht in zwei Zeilen um, im Original bleibt er mit 1176,8px knapp einzeilig. */ .readmoretoggle .elementor-tab-content p b { font-weight: 600; } @media (max-width: 480px) { .readmoretoggle .elementor-tab-content p { font-size: 16px; line-height: 25.6px; } } /* ---------- Homepage (docs/design-system/02-*.md) ---------- Live-Original: fast alle Homepage-Sections liegen auf einem dunklen Verlauf linear-gradient(rgb(54,54,54) 0%, rgb(0,0,0) 5%) als background-image (nicht background-color!) auf Elementor-Section-Ebene; body selbst ist weiss. Hier vereinfacht auf den #content-Wrapper gelegt, deckt denselben visuellen Effekt fuer alle Homepage-Sections ab. */ body.home #content { background-image: linear-gradient(rgb(54, 54, 54) 0%, rgb(0, 0, 0) 5%); background-color: #000; /* Homepage-Sections tragen jetzt ihr eigenes, individuell am Original gemessenes responsives Padding (siehe .buecher/.bio-white/.werke-entdecken/ .hero weiter unten) -- #content's generisches Padding (fuer Nicht-Homepage- Seiten gedacht) wuerde sich sonst zusaetzlich draufaddieren. */ padding-left: 0; padding-right: 0; } /* Nicht-Homepage-Seiten: Content muss den transparenten, absolut positionierten Header freihalten (Original: #wrap padding-top 150px). */ body:not(.home) #content { padding-top: 150px; } /* Breakpoints 768px/480px direkt am Original bisektiert (Runde 2, Schritt 1, /der-kuenstler/ als Referenz -- betrifft generisch alle .entry-Seiten, nicht nur die neuen Kategorie-Seiten, war zuvor nie multi-width-gegated). Exakte Grenzen: 769px=150px, 768px=100px, 481px=100px, 480px=80px. */ @media (max-width: 768px) { body:not(.home) #content { padding-top: 100px; } } @media (max-width: 480px) { body:not(.home) #content { padding-top: 80px; } } /* Original hat einen generischen #content-wrap-Wrapper (max-width:90%; margin:auto) um #content, der unterhalb 768px greift -- fehlte bisher komplett fuer alle .entry-Seiten (repliziert direkt auf #content selbst statt einen neuen Wrapper-Div einzufuehren, gleiches sichtbares Ergebnis). Verifiziert per Breiten-Sweep an /der-kuenstler/ (320/375/390/414/480/600/768px), durchgehend konstant 90% in diesem gesamten Bereich, keine weitere Zwischenstufe. */ @media (max-width: 768px) { body:not(.home) #content { max-width: 90%; margin-left: auto; margin-right: auto; } } /* Original: Hero-Container-max-width faellt in 3 Stufen (per Multi-Width-Sweep an den echten Breakpoints 1099px/749px gemessen, nicht die zuvor angenommenen 600px/1200px-Schwellen des generischen #content-Paddings): 980px (>1099px), 1024px (750-1099px), 767px (<=749px). Weil der jeweilige Cap in den unteren beiden Stufen groesser als der Viewport ist, wirkt es dort wie randloses Vollbild -- ist aber technisch weiterhin ein einfacher max-width-Wechsel, kein Sonderfall. */ /* .hero-Inhalt (Zitat/Bild/Caption) liegt im Original in einer eigenen Elementor-Spalte, die ZUSAETZLICH zum max-width-Rahmen ein eigenes Padding traegt -- direkt am Original gemessen (nicht von .buecher/ .bio-white generalisiert, vgl. L12): 20px je Seite oberhalb 749px, 10px je Seite ab 749px und darunter (deckt sich mit dem bestehenden max-width-Breakpoint). box-sizing:border-box haelt den AEUSSEREN Rahmen (980/1024/767) unveraendert, nur der Inhalt wird schmaler. */ .hero { position: relative; text-align: center; padding-top: 120px; padding-left: 20px; padding-right: 20px; box-sizing: border-box; max-width: 980px; margin: 0 auto; } @media (max-width: 1099px) { .hero { max-width: 1024px; } } @media (max-width: 749px) { .hero { max-width: 767px; padding-left: 10px; padding-right: 10px; } } .hero-quote { color: #fff; font-size: 42px; line-height: 46.2px; text-align: center; margin: 0 0 20px; } @media (max-width: 480px) { .hero-quote { font-size: 33.6px; line-height: 36.96px; } } /* Original: in diesem Zitat ist font-weight:600, nicht der Browser-Default fuer / (700) -- ohne explizite Regel zu fett gerendert. */ .hero-quote b { font-weight: 600; } /* width:100% fehlte -- max-width allein (ein fixer px-Wert) schrumpft NICHT mit, wenn der Elternbereich schmaler als der Cap ist (ueberschreibt sonst sogar den globalen responsiven img{max-width:100%}-Reset wegen hoeherer Spezifitaet). Verursachte horizontalen Overflow/zu wenig Randabstand unter ~800px Breite. */ /* KRITISCHER FUND (Nutzer-Meldung "vertikaler Abstand stimmt nicht" bei 1583px Fensterbreite): das Bild sitzt im Original in einem Wrapper mit overflow:hidden -- das Bild selbst ist AUTO-hoch (folgt seinem Seitenverhaeltnis) und wird dadurch am unteren Rand ABGESCHNITTEN. KORREKTUR (Nachmessung mit der echten Fensterhoehe des Nutzers, 1190px statt der zuvor verwendeten 900px-Testhoehe): die Hoehen-Grenze ist KEINE feste 630px, sondern max-height:70vh (900px*0.7=630, deckungsgleich mit dem alten Fund -- war nur bei 900px Testhoehe zufaellig richtig). Die Breite ist ausserdem KEIN fixer 80%-Wert, sondern folgt denselben 3 Stufen wie .hero (direkt am Original gemessen): 80% ab 1100px, 90% zwischen 750-1099px, 100% ab 749px und darunter -- deckt sich mit den .hero max-width-Breakpoints. Kein aspect-ratio-Sonderfall unterhalb 650px im Original (frueherer Fix war eine falsche Kompensation eines anderen Fehlers, nicht die tatsaechliche Ursache). */ .hero-image-crop { width: 80%; max-width: 1000px; height: auto; max-height: 70vh; margin: 0 auto; overflow: hidden; position: relative; } @media (max-width: 1099px) { .hero-image-crop { width: 90%; } } @media (max-width: 749px) { .hero-image-crop { width: 100%; } } .hero-image { width: 100%; height: auto; display: block; } /* text-align:left, nicht center -- am Original direkt gemessen (Box-Breite folgt dem kurzen Text, links ausgerichtet statt zentriert). margin-left: Original positioniert Caption/Signatur ueber ein eigenes, festes Elementor-Widget-Margin ZUSAETZLICH zum .hero-Padding (kein einfaches Center/Right-Align) -- direkt am Original je Breakpoint gemessen (Werte sind Aufschlag auf das bereits vorhandene .hero-Padding von 20px/10px, nicht der absolute Gesamtwert). */ /* Original: p ist inhaltsbreit (kein volles Block-Width:100%) -- Elementor-Text-Editor-Widget ist ein Flex-Item ohne flex-grow, dadurch content-sized trotz computed display:block. display:table erreicht dasselbe sichtbare Ergebnis (Breite = Textinhalt), bleibt aber wie ein Block-Element durch margin-left positionierbar -- inline-block wuerde stattdessen vom text-align:center der Eltern-Section (.hero) mittig ausgerichtet, was die margin-left- Positionierung ueberschreibt. */ .hero-caption { display: table; color: #fff; font-size: 20px; text-align: left; margin: 0 0 20px; margin-left: 110px; } @media (max-width: 1099px) { .hero-caption { margin-left: 0; } } @media (max-width: 480px) { .hero-caption { font-size: 16px; } } /* width:100% beruecksichtigt NICHT automatisch margin-left -- ohne calc() ragte die Signatur bei jeder Breakpoint-Stufe um genau den margin-left-Wert rechts ueber den Viewport hinaus (Abschluss-Gate-Fund, Test Plan Punkt 4, horizontaler Overflow). */ .hero-signature { max-width: 300px; width: calc(100% - 371px); display: block; margin: 0 0 0 371px; } @media (max-width: 1099px) { .hero-signature { width: calc(100% - 261px); margin-left: 261px; } } /* Original bricht Caption+Signatur ab hier per Flex-Wrap in eine neue Zeile um (Inhaltsbreite-abhaengig, kein rundes Breakpoint-Raster) -- am Original bisektiert: 572px letzter Wert der oberen Stufe. */ @media (max-width: 571px) { .hero-signature { width: calc(100% - 110px); margin-left: 110px; } } /* h2/h3 sind nur auf dunklem Grund (Homepage, Werk-Detail/.single-post) weiss -- auf hellen Content-Seiten (Kuenstler, Legal etc.) bleibt die Body-Grundfarbe #333. */ /* Original: responsive Typografie fehlte hier komplett -- h2/h3/body/etc. blieben bei JEDER Breite auf der Desktop-Groesse. Am Original ueber 3 Breiten (1909/700/400px) direkt gemessen: h2 faellt bei <=768px auf 40px, bei <=479px auf 32px; Ueberschriften mit eigener, groesserer Desktop-Schrift (Bio 50px/Werke-entdecken 60px, siehe dort) fallen UNTERHALB von 769px auf exakt dieselbe generische h2-Kaskade zurueck -- ihre Sondergroesse gilt nur auf Desktop-Breite. */ h2 { font-size: 50px; font-weight: 400; line-height: 50px; letter-spacing: 0.4px; } h3 { font-size: 26px; font-weight: 600; line-height: 26px; letter-spacing: 0.4px; margin: 0; } @media (max-width: 768px) { h2 { font-size: 40px; line-height: 40px; } } @media (max-width: 480px) { h2 { font-size: 32px; line-height: 32px; } h3 { font-size: 20.8px; line-height: 20.8px; } } body.home h2, body.home h3, .single-post h2, .single-post h3 { color: #fff; } /* Werk-Detail-Unterueberschriften ("Werkfotos" etc., SEO-Review 02 Fund 5): waren im Content rohes

    , sprang direkt von H1 (Werktitel, aus dem Template) zu H3 ohne H2 dazwischen -- B2-Blocker, identisches Muster im Original, hier fuer sauberere Semantik auf H2 angehoben. Eigene Klasse statt generisches h2, damit die 50px-H2-Groesse (z.B. digitalgrafiken.md, das bereits eine echte H2-Sektionsueberschrift hatte) unangetastet bleibt -- Werte 1:1 von der alten h3-Regel uebernommen, damit sich am sichtbaren Ergebnis nichts aendert. */ .werk-subheading { font-size: 26px; font-weight: 600; line-height: 26px; letter-spacing: 0.4px; margin: 0; } @media (max-width: 480px) { .werk-subheading { font-size: 20.8px; line-height: 20.8px; } } .werk-teaser p { font-size: 20px; line-height: 32px; letter-spacing: 0.4px; margin: 0 0 20px; } .werk-teaser p { color: #fff; } @media (max-width: 480px) { .werk-teaser p { font-size: 16px; line-height: 25.6px; } } /* Original: Elementor "Min Height: 100vh" auf dieser Section -- Inhalt (Buchcover) ist deutlich kuerzer als ein Viewport, der Rest bleibt als Leerraum mit dem Section-Hintergrund (dunkler Verlauf von body.home #content) sichtbar, bevor die naechste Section beginnt. Verifiziert: window.innerHeight === section-height (beide exakt 1000px). */ /* Original: Elementor-Container aller Homepage-Sections (ausser Hero: 980px) ist max-width:1200px, zentriert -- dies ist Elementors eigenes per-Element-max-width (nicht die theme-generische .container-Klasse mit ihrer width:1200px+max-width:90%-Bremse, siehe #footer-bottom-inner weiter unten -- per direkter CSS-Regel-Inspektion beider Mechanismen unterschieden, nicht verwechseln). Der seitliche Randabstand kommt NICHT von einem Padding auf diesem Grid selbst, sondern vom individuellen, responsiven Section-Padding (.buecher/.bio-white/.werke-entdecken, siehe dort) -- jede Section hat im Original ihren eigenen, per Multi-Width-Sweep gemessenen Padding-Wert pro Breakpoint (100px/20px/30px je nach Section), nicht denselben Wert wie eine andere Section. KORRIGIERTER FUND (Review-03-Nachtrag deckte die vorherige Annahme als falsch auf): Ueberschrift und Bild-Grid sitzen NICHT in unterschiedlich breiten Containern -- beide haben dieselbe 1180px-Content-Breite. Der vorherige Fund maß bei der Ueberschrift die SPALTE (1200px, .elementor-widget-wrap) statt das Element selbst (.elementor-heading-title ist davon nochmal 20px schmaler, exakt wie beim Bild-Grid) -- derselbe Elementor-Widget-Container-Padding- Mechanismus wie bei den Werk-Teaser-Bildern (vgl. main.css .werk-teaser-link), nur hier nicht erkannt. Ueberschrift UND Grid brauchen beide max-width:1180px. */ .buecher-grid, .bio-white-grid, .tagcloud-box-wrap { max-width: 1180px; margin-left: auto; margin-right: auto; box-sizing: border-box; } /* Section-Padding-Breakpoints direkt am Original gemessen (elementor-top-section computed style bei 1909/1400/1150/1100/1099/1024/900/800/750/749/700/600/480/390px) -- Buecher/Bio teilen dieselben HORIZONTALEN Werte (100px/20px/0px), Werke-entdecken hat einen ABWEICHENDEN Wert in der mittleren Stufe (30px statt 20px). Das VERTIKALE padding-top ist NOCHMAL ein eigener Wert PRO Section (siehe .buecher/.bio-white/ .werke-entdecken einzeln weiter unten) -- bewusst nirgends generalisiert (vgl. docs/learnings.md L12). */ .buecher, .bio-white { padding-left: 100px; padding-right: 100px; box-sizing: border-box; } .werke-entdecken { padding-left: 100px; padding-right: 100px; box-sizing: border-box; } @media (max-width: 1099px) { /* 20px Section-Padding direkt am Original verifiziert (getComputedStyle der Section selbst, nicht von der Ueberschriften-Position abgeleitet). Die Ueberschriften-eigene Randbreite bei 750-1099px ist GROESSER als dieses Section-Padding (zusaetzliche Zentrierungs-Marge der Ueberschrift selbst, pro Section unterschiedlich -- offener Rest-Befund, siehe docs/06-implementierung.md). */ .buecher, .bio-white { padding-left: 20px; padding-right: 20px; } .werke-entdecken { padding-left: 30px; padding-right: 30px; } } @media (max-width: 749px) { .buecher, .bio-white { padding-left: 0; padding-right: 0; } .werke-entdecken { padding-left: 0; padding-right: 0; } } /* padding-top faellt an denselben Breakpoints (1099px/749px) wie das horizontale Section-Padding, aber mit EIGENEN Werten -- war bisher unconditional 110px, dadurch bei mittleren/schmalen Breiten zu viel Abstand vor der Ueberschrift (Nutzer-Meldung: Abstand bei "Buecher von..." stimmt nicht). Jede der drei Homepage-Sections hat ihren eigenen Werteverlauf, bewusst nicht generalisiert (vgl. L12). */ .buecher { min-height: 100vh; padding-top: 120px; } @media (max-width: 1099px) { .buecher { padding-top: 50px; } } @media (max-width: 749px) { .buecher { padding-top: 30px; } } /* Original: Ueberschrift ist NICHT zentriert (text-align:start/left, anders als die "Werke entdecken"-Ueberschrift -- Verwechslungsgefahr, vgl. docs/learnings.md L12) -- nur die BOX ist im 1200px-Grid positioniert, der Text darin bleibt linksbuendig. Abstand nach oben kommt komplett aus dem Section-padding-top. War bisher komplett ungestylt (Browser-Default: volle Section-Breite, kein Abstand nach oben). */ .buecher > h2 { max-width: 1180px; margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: 0; } /* Browser-Default fuer ist font-weight:700 (bold) -- Original nutzt 600, Nutzer-Fund beim Live-Check ("Schrift zu dick"). */ .buecher > h2 b { font-weight: 600; } /* Original: 4 gleich breite Elementor-Spalten ohne Zwischenabstand; jedes Buchcover behaelt sein Seitenverhaeltnis bei fixer Hoehe (~310px, am Original gemessen) statt fixer Breite -- eine feste Bildbreite (frueher: 300px) fuehrt bei 4 Covern zu einem Zeilenumbruch, den das Original nicht hat. */ /* margin-top:50px am Original gemessen (Abstand Ueberschrift-Unterkante zu Cover-Oberkante) -- fehlte komplett, wodurch die Cover direkt an der Ueberschrift klebten und der bei min-height:100vh unten fehlende Platz als zu grosser Leerraum nach den Covern erschien. */ /* Nutzerwunsch: das erste Cover ("Malerei") steht gross und allein in der ersten Zeile, die drei uebrigen kleiner darunter. Die Staffelung haengt an der Position (:first-child), nicht an einer zweiten Klasse -- die Reihenfolge im Template bestimmt damit allein, welches Cover hervorgehoben ist. Bewusste Abweichung vom Original (dort vier gleich grosse Cover in einer Reihe). */ .buecher-grid { display: flex; flex-wrap: wrap; row-gap: 50px; margin-top: 50px; } .buecher-grid > a:first-child { flex: 0 0 100%; } /* min-width:0 noetig, sonst schrumpft ein Flex-Item nicht unter die Content-Groesse des Bildes (Default-Flexbox-Verhalten min-width:auto) -- Cover blieben bei mittleren Breiten in voller 312px-Bildhoehe statt mit der Spalte zu schrumpfen. */ /* flex-basis 25% statt 0: Mit Basis 0 zaehlen die drei kleinen Cover bei der Zeilenaufteilung als "nimmt keinen Platz" und bleiben deshalb in derselben Zeile wie das 100% breite erste Cover -- sie werden dann auf Breite 0 gequetscht. Mit 25% passt hinter das erste Cover keines mehr, sie brechen um und teilen sich die zweite Zeile. */ .buecher-grid > a { flex: 1 1 25%; min-width: 0; display: flex; justify-content: center; } /* border-radius + box-shadow fehlten komplett -- erst nach Korrektur eines fehlerhaften Original-Selektors sichtbar geworden (traf zuvor ein unsichtbares Platzhalterbild statt das echte Cover, vgl. docs/learnings.md L15 Punkt b). */ /* max-height statt fixer height: bei fixer height:312px + width:auto blieb die Hoehe bei knapperen Spaltenbreiten (max-width:100% greift) unveraendert 312px, waehrend die Breite schrumpfte -- das Cover wurde dadurch seitlich gestaucht statt proportional zu skalieren (Multi-Width-Sweep-Fund, 900/767px). */ .buecher-grid img { height: auto; width: auto; max-height: 230px; max-width: 100%; display: block; border-radius: 3px; box-shadow: rgba(255, 255, 255, 0.5) 8px 8px 5px -4px; } .buecher-grid > a:first-child img { max-height: 420px; } /* ---------- Bio-Sektion: WEISSER Hintergrund (kein Teil des dunklen Homepage-Themes) ---------- Ebenfalls min-height:100vh im Original (gleicher Befund wie .buecher). */ /* Original: Body selbst ist weiss, diese Section ist dort transparent -- der weisse Hintergrund reicht daher immer bis zum echten Seitenrand, WAEHREND der innere Inhalt (.bio-white-grid) ganz normal denselben genestet-padding-Regeln folgt wie .buecher-grid (per Multi-Width-Sweep verifiziert: an jeder getesteten Breite identische Randwerte wie .buecher-grid). Nur der HINTERGRUND muss aus #content's Padding ausbrechen, nicht die Section selbst -- sonst rechnet .bio-white-grids eigene max-width:1200-Zentrierung gegen die volle Viewport-Breite statt gegen die #content-gepolsterte Breite und weicht bei mittleren Breiten (z.B. 1366px: 83px statt 100px Rand) vom Original ab. Deshalb: Hintergrund als eigene, absolut positionierte Full-Bleed-Ebene (::before) statt width:100vw auf der Section selbst. */ .bio-white { position: relative; /* z-index:0 noetig, damit .bio-white einen EIGENEN Stacking-Context bildet -- sonst "entkommt" das z-index:-1 des ::before-Hintergrunds nach oben und wird hinter #content's dunklen Hintergrund statt nur hinter den eigenen Inhalt gemalt (position:relative allein OHNE explizites z-index erzeugt noch keinen neuen Stacking-Context). */ z-index: 0; min-height: 100vh; color: #333; padding-top: 110px; padding-bottom: 60px; text-align: center; } /* padding-top-Breakpoints direkt am Original gemessen (Abstand Section-Top zu Ueberschrift-Top) -- eigener Werteverlauf, NICHT identisch mit .buecher (110/50/30px dort vs. 110/70/50px hier), vgl. docs/learnings.md L12. */ @media (max-width: 1099px) { .bio-white { padding-top: 70px; } } @media (max-width: 749px) { .bio-white { padding-top: 50px; } } .bio-white::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw; background-color: #fff; z-index: -1; } /* font-size/line-height NUR ab Desktop-Breite (>=769px) -- darunter faellt die Ueberschrift auf dieselben Werte wie die generische h2-Kaskade zurueck (40px/40px bei <=768px, 32px/32px bei <=479px, siehe h2-Regel oben), OBWOHL font-weight:600 (anders als h2s 400) bei JEDER Breite bestehen bleibt -- am Original ueber 3 Breiten direkt gemessen, keine einfache Vererbung/kein reines "wie h2". */ /* margin:0 (nicht 0 0 30px) -- am Original ueber 13 Breiten (320-1583px) direkt gemessen, durchgaengig margin:0. Der fruehere 30px-Wert war eine ungeprueft uebernommene Annahme. */ /* max-width:1180px wie .buecher/.werke-entdecken h2 -- Review-03-Nachtrag deckte auf, dass die Ueberschrift ohne eigene Breitenbeschraenkung auf die volle Section-Breite faellt statt der am Original gemessenen 1180px-Content-Breite. */ body.home .bio-white h2 { color: #0a0a0a; font-weight: 600; margin: 0; max-width: 1180px; margin-left: auto; margin-right: auto; } @media (min-width: 769px) { body.home .bio-white h2 { font-size: 50px; line-height: 50px; } } .bio-white-grid { display: flex; gap: 50px; text-align: left; align-items: flex-start; } .bio-photo { margin: 0; flex-shrink: 0; } /* max-width:100% als Sicherheitsnetz -- ein fixer width:300px allein schrumpft nicht mit, wenn der Elternbereich (nach dem Stacking auf Mobile) schmaler als 300px wird. Selbes Bug-Muster wie L13 (.hero-image), hier praeventiv behoben statt erst nach Overflow-Meldung. */ /* 388px am Original gemessen (nicht 300px) -- Fund aus der Untersuchung der bioText-Breiten-Abweichung (Review-03): das Foto war zu schmal, wodurch der Text daneben zu viel Restbreite bekam. */ .bio-photo img { width: 388px; max-width: 100%; display: block; } .bio-photo figcaption { color: #666; font-size: 14px; font-style: italic; margin-top: 5px; } .bio-text { flex: 1; } .bio-text p { font-size: 20px; line-height: 32px; letter-spacing: 0.4px; margin: 0 0 20px; color: #333; } @media (max-width: 480px) { .bio-text p { font-size: 16px; line-height: 25.6px; } } .bio-white .readmoretoggle { margin-top: 20px; } .phoenix-divider { max-width: 400px; margin: 20px auto; } .tagcloud-box-wrap { display: flex; justify-content: center; padding: 40px 0; } .tagcloud-box { border: 2px solid #fff; border-radius: 30px; padding: 50px; max-width: 980px; } /* Original: Tags sind linksbuendig innerhalb der Box (kein justify-content:center) -- direkt an der Original-Tag-Position verifiziert (erster Tag am Box-Innenrand, nicht mittig im verbleibenden Zeilenrest). */ .tagcloud-box .tagcloud { justify-content: flex-start; } /* Original: In dieser Breakpoint-Stufe (Tag-Cloud sitzt in einer eigenen, verschachtelten Elementor-Inner-Section mit eigenem Padding/Breite) direkt am Original gemessen -- Randabstand bleibt hier konstant bei 90px (unabhaengig von der Viewportbreite innerhalb dieser Stufe), waehrend Padding auf 30px sinkt. Nicht aus der 980px-Formel herleitbar. */ @media (max-width: 1099px) and (min-width: 750px) { .tagcloud-box { padding: 30px; max-width: calc(100vw - 180px); } } /* Nur vertikales Padding hier -- das seitliche kommt aus der responsiven Section-Padding-Regel weiter oben; ein Shorthand "padding: 40px 0" wuerde dessen padding-left/right sonst durch die spaetere Position im Cascade wieder auf 0 zuruecksetzen. padding-top war faelschlich 40px (Platzhalter- Wert) -- am Original ist der Abstand bis zur Ueberschrift wie bei den anderen Homepage-Sections 110px auf Desktop, mit eigenem Werteverlauf (110/60/50px) an denselben Breakpoints (1099px/749px). */ .werke-entdecken { padding-top: 110px; padding-bottom: 40px; } @media (max-width: 1099px) { .werke-entdecken { padding-top: 60px; } } @media (max-width: 749px) { .werke-entdecken { padding-top: 50px; } } /* Original: Ueberschrift ist zentriert und im 1200px-Grid geboxt -- war bisher linksbuendig ueber die volle (gepolsterte) Section-Breite, da sie direktes Kind von .werke-entdecken ohne eigene text-align/max-width-Regel ist. */ /* font-size/line-height NUR ab Desktop-Breite, gleiches Muster wie body.home .bio-white h2 oben -- faellt darunter auf die generische h2-Kaskade zurueck, font-weight:600 bleibt aber immer bestehen. */ .werke-entdecken > h2 { text-align: center; max-width: 1180px; margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: 0; font-weight: 600; } @media (min-width: 769px) { .werke-entdecken > h2 { font-size: 60px; line-height: 60px; } } /* Original: dieser Row-Container ist NICHT Teil des 1200px-Grids der anderen Homepage-Sections, sondern ein eigener, 980px breiter Elementor-Container (wie Hero) -- Text/Bild teilen sich den Platz dabei content-basiert (Elementor flex:0 1 auto, kein 50/50-Split), am Original gemessen mit ~58%/42%-Verhaeltnis (571px/409px bei 980px Gesamtbreite, kein Row-Gap -- der sichtbare Abstand kommt aus einem Inset auf der bildzugewandten Seite des Textes/der textzugewandten Seite des Bildes). Bisher: 1200px-Breite + 50/50-Flex-Split ergab einen 660px statt 521px breiten Textblock. */ .werk-teaser { display: flex; align-items: flex-start; gap: 0; padding: 40px 0; text-align: left; max-width: 980px; margin: 0 auto; box-sizing: border-box; } .werk-teaser.reverse { flex-direction: row-reverse; } /* min-width:0 noetig: Flex-Items haben per Default min-width:auto, was bei einem auf dessen intrinsische (natuerliche) Breite aufloest -- ohne diese Ueberschreibung schrumpft das Bild trotz flex-shrink:1 und kleiner flex-basis NICHT unter seine Dateibreite, was bei schmaleren Viewports (z.B. 768px) zu horizontalem Overflow fuehrte. */ /* Original: die Text/Bild-Aufteilung ist PRO TEASER unterschiedlich gemessen (Joy 58,3/41,7%, Minotaurus 38,2/61,8%, Feuerliane 38,6/61,4%) -- auf ausdruecklichen Nutzerwunsch HIER BEWUSST NICHT uebernommen: alle drei Textbloecke sollen gleich breit sein (Joy-Verhaeltnis als einheitlicher Wert), auch wenn das vom Original abweicht. Absichtliche 1:1-Abweichung, kein Messfehler. */ .werk-teaser-text { flex: 0 1 58.3%; min-width: 0; } /* Original wickelt jedes Teaser-Bild in einen Link zur Werk-Detail-Seite ( ist der eigentliche Flex-Item, nicht das ) -- Flex-Basis/Padding gehoeren deshalb auf .werk-teaser-link, nicht auf img direkt. Das sichtbare Inset kommt aus ZWEI verschachtelten Original-Elementen (.elementor-widget-wrap Spalten-Gap + .elementor-widget-container Padding), je Seite SYMMETRISCH (nicht nur textzugewandt wie zuvor angenommen): Joy/Minotaurus 10px+20px = 30px je Seite, Feuerliane (eigene Spalten-Gap-Klasse im Original) nur 20px je Seite -- direkt nachgemessen, erneuter L12-Fall (einheitliche 60px einseitig war falsch, sowohl Betrag als auch Seite). */ .werk-teaser-link { flex: 0 1 41.7%; max-width: 100%; box-sizing: border-box; min-width: 0; display: block; padding: 0 30px; } .werk-teaser-link img { width: 100%; height: auto; display: block; } .werk-teaser-feuerliane .werk-teaser-link { padding: 0 20px; } /* max-width:1180px wie h2/readmoretoggle/tagcloud-box in dieser Section (design-system/02-*.md Abschnitt 4: divider width 1180px) -- ohne max-width spannte der
    die volle Section-Breite statt der 1180px-Inhaltsspalte (Nutzer-Fund beim Live-Check: "Linien ... zu breit"). */ .werk-teaser-divider { border: none; border-top: 1px solid #fff; margin: 0 auto; max-width: 1180px; } .elementor-button .btn-arrow-icon { margin-left: 6px; vertical-align: middle; } .elementor-button { color: #fff; font-size: 15px; font-weight: 400; line-height: 15px; letter-spacing: 0.4px; text-align: left; padding: 12px 24px; border-radius: 3px; display: inline-block; } .btn-digitalgraphiken { background-color: rgb(19, 145, 198); } .btn-skulpturen { background-color: rgb(125, 125, 125); } .btn-gemaelde { background-color: rgb(192, 71, 1); } .social-links img { max-width: 120px; margin: 0 auto; } /* ---------- Werke-Uebersicht/Kategorie-Archiv (recent-posts) ---------- */ /* :not(.single-post-title) noetig -- #content h1 (ID+Element) schlug sonst per Spezifitaet die Werk-Detail-Titel-Regel .single-post-title (nur Klasse) und ueberschrieb Farbe/Zeilenhoehe/Margin mit den falschen (hellen Theme) Werten -- Titel war dadurch fast unlesbar dunkelgrau auf schwarzem Grund statt weiss. */ /* max-width:960px + margin:auto -- Original zentriert Ueberschrift/Tagbox/Liste zusaetzlich innerhalb von #content (Elementor-Spalte 980px + 10px Widget-Wrap-Padding = 960px netto, direkt am Original bei 1583px verifiziert: H1 width=960px x=312, nicht die volle #content-Breite). War komplett linksbuendig an #content geblieben. */ #content h1:not(.single-post-title) { color: #333; font-size: 40px; font-weight: 600; line-height: 40px; margin: 0 auto; max-width: 960px; } /* Breakpoints 749px/480px direkt am Original bisektiert (Schritt 3, /werke/). */ @media (max-width: 749px) { #content h1:not(.single-post-title) { text-align: center; } } @media (max-width: 480px) { #content h1:not(.single-post-title) { font-size: 32px; line-height: 32px; } } /* .term-title (Tag-Archiv + Kategorie-Seiten, SEO-Review 02 Fund 4): Original hat hier gar keine Ueberschrift -- neue, sichtbare UI-Ergaenzung auf Nutzerwunsch (Orientierung: "wo bin ich gelandet"), keine 1:1-Original-Wiedergabe. Typografie an die bestehende #content-h1-Regel angelehnt fuer Konsistenz mit dem Rest der Seite, eigene Klasse statt Wiederverwendung, da der Tag-Archiv-Kontext (#content-wrap, nicht #content) eine eigene max-width/Breakpoint-Basis braucht. */ #content h1.term-title { color: #333; font-size: 40px; font-weight: 600; line-height: 40px; margin: 0 0 28px; max-width: none; } @media (max-width: 480px) { #content h1.term-title { font-size: 32px; line-height: 32px; } } /* margin-bottom:28px direkt am Original verifiziert (nicht 15px) -- betraf auch die bereits vorhandene "Gesamtuebersicht der"-Ueberschrift, war dort ebenfalls falsch, nur nie diff-gegated (Reviewer-Fund: fehlende H5-Bildunterschriften ueber den Tag-Clouds). */ /* text-align:center + line-height:19.6px direkt am Original nachgemessen (Runde 2, Schritt 1) -- beide fehlten bisher komplett (Erbschaft: text-align:start, line-height:32px von der globalen Baseline), betraf alle 3 bestehenden H5-Instanzen (Homepage, /werke/ x2), nie diff-gegated. */ #content h5 { color: #333; font-size: 14px; font-weight: 600; margin: 0 0 28px; text-align: center; line-height: 19.6px; } /* Auf der Startseite steht diese Ueberschrift auf schwarzem Grund -- mit der hellen Grundfarbe #333 war sie praktisch unlesbar. Gleiche Behandlung wie h2/h3 dort (body.home ... { color: #fff }). Auf /werke/ und den Kategorieseiten bleibt #333, dort ist der Hintergrund weiss. */ body.home #content h5 { color: #fff; } /* Nur die H5s, die direkt in #content stehen (nicht in .werke-tagbox verschachtelt), sind auf die 960px-Spalte zentriert -- "Alle Werke nach Schlagworten" sitzt in .werke-tagbox (eigene max-width:400px) und braucht das nicht (Original: width:auto dort, width:960px hier). */ #content > h5 { max-width: 960px; margin-left: auto; margin-right: auto; } .werke-tagbox-wrap { display: flex; margin: 0 auto 30px; max-width: 960px; } /* max-width 400px (nicht 500px) -- am Original war die Tag-Cloud selbst nur 356px breit, 500px liess pro Zeile mehr Tags zu und dadurch 6 statt 8 Zeilen umbrechen (Reviewer-Fund: Vertikalabstand H1-zu-Liste auf /werke/ stimmte nicht). */ .werke-tagbox { background-color: #eee; border-radius: 12px; padding: 20px; max-width: 400px; } .tagcloud.light { display: flex; flex-wrap: wrap; gap: 8px; } .tagcloud.light .tag-cloud-link { background-color: #ccc; color: #333; border: 1px solid #333; border-radius: 8px; padding: 8px 12px; text-transform: uppercase; font-size: 12px; line-height: 12px; letter-spacing: 0.4px; display: block; } /* max-width:940px (nicht 960px wie H1/Tagbox) -- design-system/02-*.md Abschnitt 6 dokumentiert li.width:940px explizit, eigener Wert fuer diese Komponente (L12). */ .recent-posts { list-style: none; margin: 0 auto; padding: 0; max-width: 940px; } /* margin-top+padding-top:15px fehlten komplett -- Original hat 15px Abstand ZWISCHEN den Zeilen (margin-top) PLUS 15px Innenabstand vor dem Zeileninhalt (padding-top), beim ersten Eintrag beides 0. Ohne das lagen alle 96 Zeilen ohne jeden Abstand direkt aneinander, wodurch die Gesamtliste ca. 2000px zu kurz war. */ .recent-posts li { display: flex; align-items: center; position: relative; margin-top: 15px; padding-top: 15px; } .recent-posts li:first-child { margin-top: 0; padding-top: 0; } .recent-posts-thumbnail { display: block; min-width: 100px; max-width: 100px; height: 100px; margin: 0 38px 0 0; } .recent-posts-thumbnail img { display: inline; border-radius: 3px; width: 100px !important; min-width: 100px !important; height: 100px; } .recent-posts-title { color: rgb(0, 102, 191); font-size: 1em; font-weight: 500; } /* ---------- Tag-Archiv (natives Blog-Layout + Sidebar) ---------- */ /* KORRIGIERT: #content-wrap war ohne max-width/Zentrierung (volle Viewport-Breite statt 1200px zentriert); #primary hatte falsche Breite/Padding (max-width:940+padding:0 50 statt flex:1 mit nur rechtsseitigem 30px-Padding, Rest fuellt Sidebar aus); #right-sidebar war 300px statt 336px. Ausserdem fehlte komplett ein VERSCHACHTELTER zweiter Wrapper (.primary-content-inner) innerhalb von #primary mit eigenem, zum globalen #content identischem responsivem Padding (50px Basis/10px <=600/100px >=1200) -- im Original traegt dieser innere Wrapper ebenfalls id="content" (dieselbe Klasse wie der aeussere Seiten-Wrapper, im Original technisch doppelt vergeben) und war bisher komplett unrepliziert, wodurch der Blog-Listen-Inhalt ca. 100px zu breit/zu weit links lag. Alle Werte direkt am Original bei 1583px nachgemessen: content-wrap=1200px zentriert, primary=864px, sidebar=336px, primary-content-inner=833px (== primary minus dessen 30px-Padding), blog-entries=633px (== primary-content-inner minus 2x100px). */ /* KORRIGIERT (Blocker): #content-wrap war display:flex mit einer fixen, nicht schrumpfenden 336px-Sidebar und ganz ohne Breakpoint -- die Inhaltsspalte wurde dadurch mit jedem Pixel Fensterbreite schmaler (bei 390px Viewport nur noch 4px breit, bei 360px 0px, dazu horizontaler Overflow). Das Original nutzt hier KEIN Flexbox, sondern das klassische OceanWP-Float-Layout, direkt ueber 19 Breiten (320-1600px) an /werke/tag/stele/ gemessen: - #content-wrap width:1200px + max-width:90% (dieselbe Container-Bremse wie #footer-bottom-inner), padding 150/0/100 -> 100/0/30 ab 768px -> 80/0/20 ab 480px - #primary float:left, width:72% (864px bei 1200px Container), padding-right 30px - #right-sidebar float:right, width:28% (336px), padding 20px - ab 959px: beide float:none und 100% breit, Sidebar rutscht UNTER den Inhalt, #primary bekommt 40px Abstand nach unten, die Sidebar verliert ihr Innenpadding. Bisektiert: 960px = noch zweispaltig, 959px = gestapelt. */ #content-wrap { width: 1200px; max-width: 90%; margin: 0 auto; padding: 150px 0 100px; } #content-wrap::after { content: ""; display: table; clear: both; } #primary { float: left; width: 72%; padding: 0 30px 0 0; position: relative; } .primary-content-inner { padding-left: 50px; padding-right: 50px; } @media (max-width: 600px) { .primary-content-inner { padding-left: 10px; padding-right: 10px; } } @media (min-width: 1200px) { .primary-content-inner { padding-left: 100px; padding-right: 100px; } } #blog-entries .blog-entry { position: relative; border-bottom: 1px solid #ccc; padding-bottom: 10px; margin-bottom: 10px; } #blog-entries .blog-entry-inner { display: flex; gap: 15px; align-items: flex-start; } #blog-entries .thumbnail { min-width: 100px; max-width: 100px; } #blog-entries .thumbnail img { border-radius: 4px; width: 100px !important; min-width: 100px !important; } #blog-entries .blog-entry-title a { font-size: 19.2px; font-weight: normal; line-height: 26.88px; letter-spacing: 0.6px; color: rgb(0, 102, 191); } #right-sidebar { float: right; width: 28%; background-color: rgb(238, 238, 238); font-size: 13px; line-height: 20.8px; padding: 20px; } @media (max-width: 959px) { #primary { float: none; width: 100%; padding: 0; margin-bottom: 40px; } #right-sidebar { float: none; width: 100%; padding: 0; } } @media (max-width: 768px) { #content-wrap { padding: 100px 0 30px; } } @media (max-width: 480px) { #content-wrap { padding: 80px 0 20px; } } /* padding-top:20px + margin-bottom:20px (nicht 30px) -- direkt an allen 3 Sidebar-Widgets gemessen (Runde 2, Schritt 0, docs/design-system/02-*.md Abschnitt 8.1). */ .sidebar-box { padding-top: 20px; margin-bottom: 20px; } .sidebar-box:last-child { margin-bottom: 0; } .searchform .field { width: 100%; padding: 6px 12px; color: #333; background-color: #f7f7f7; border: 1px solid #ddd; border-radius: 3px; line-height: 25.2px; } /* display:block (nicht flex) -- direkt am Original-Sidebar-Widget gemessen (Runde 2, Schritt 2). Die Pills sind inline-block mit eigenem Margin (.tag-cloud-link unten), keine Flex-Gap noetig; .tagcloud.light (Homepage/Werke-Uebersicht) ueberschreibt das separat mit eigenem display:flex, bleibt unangetastet. Zuvor nie sichtbar falsch, da .tagcloud bislang nur mit .light-Zusatzklasse live war -- diese reine Basisklasse kam erst durchs Sidebar-Widget zum ersten Mal ungestylt zum Einsatz und wrappte dadurch in mehr Zeilen als das Original (85px zu hohe Tag-Box). */ .tagcloud { display: block; } .tag-cloud-link { display: inline-block; color: #fff; background-color: #777; border: 1px solid #777; border-radius: 8px; padding: 8px 15px; line-height: 16px; margin: 0 2px 5px 0; font-size: 14px; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; } /* Sidebar-Tag-Cloud (Tag-Archiv-Seite): eigenes, helleres Farbschema -- anders als Homepage (dunkel) und Werke-Uebersicht (#ccc/#333). */ #right-sidebar .tag-cloud-link { color: #333; background-color: rgb(214, 214, 214); border-color: #fff; font-size: 12px; line-height: 12px; letter-spacing: 0.4px; padding: 8px 12px; } .widget-title { color: #000; font-size: 22px; font-weight: 700; line-height: 32px; letter-spacing: 0.4px; padding: 0 0 0 5px; margin: 0 0 10px; } /* Sidebar-Kontext (Tag-Archiv-Widgets "Entdecken"/Instagram) hat abweichende Typografie -- direkt an beiden Instanzen gemessen: 20px/600/20px/1px, nicht die generische 22px/700/32px/0.4px (Runde 2, Schritt 0). Padding/Margin stimmen bereits, nur Schrift-Metrik gescopt korrigiert. */ #right-sidebar .widget-title { font-size: 20px; font-weight: 600; line-height: 20px; letter-spacing: 1px; } /* ---------- Mobile (docs/design-system/04-*.md) ---------- */ /* KORRIGIERT (Blocker): Umschaltpunkt lag bei 767px, im Original liegt er bei 1080px -- bisektiert (1080px = Burger, 1081px = Desktop-Navigation). Im gesamten Bereich 768-1080px zeigte der Build die volle Desktop-Navigation, wo das Original den Burger hat. KORRIGIERT (Blocker): Statt eines aufklappenden Streifens unter dem Header faehrt im Original ein Panel von rechts ein (#sidr). Direkt bei 390x844 gemessen und hier nachgebaut: 300px breit, volle Hoehe, deckend schwarz, z-index 999999, padding 0 0 30px, transition right .3s, eigene Schliessleiste (67px hoch, rgb(0,156,247), 15px/600, letter-spacing 0.6px, Versalien, padding 20px) und je Elternpunkt ein "+"-Umschalter (60x51px am rechten Rand, 20px Innenabstand rechts, 20px Schrift), der das Untermenue an Ort und Stelle aufklappt. Ohne ihn waren mobil 10 von 13 Menuepunkten unerreichbar. Panel bleibt im geschlossenen Zustand im DOM (fuer die Einfahr-Animation), ist aber per visibility:hidden aus Bedienung und Screenreader-Baum genommen. */ @media (max-width: 1080px) { /* margin-left:auto haengt am Burger, nicht mehr am Nav-Wrap: Der Nav-Wrap ist mobil aus dem Fluss genommen (position:fixed) und kann den Block deshalb nicht mehr nach rechts schieben -- Burger und Instagram klebten dadurch am Logo statt buendig am rechten Rand zu sitzen (gemessen: rechte Kante lokal konstant 267,7px statt 375px bei 390px Viewport). */ .mobile-menu-icon { display: block; margin-left: auto; } a.mobile-menu { display: inline; } #site-navigation-wrap { display: block; position: fixed; top: 0; bottom: 0; right: -300px; width: 300px; max-width: 100%; margin-left: 0; padding: 0 0 30px; background-color: #000; z-index: 999999; overflow-x: hidden; overflow-y: auto; visibility: hidden; transition: right 0.3s; /* Panel-eigene Basiswerte wie im Original (#sidr): sonst erbt das Panel unterhalb 480px die auf 16px/25.6px verkleinerte Body-Baseline. */ font-size: 15px; line-height: 24px; } #site-navigation-wrap.is-open { right: 0; visibility: visible; } /* Ruhefarbe ist WEISS, nicht blau -- die erste Messung traf versehentlich den Hover-Zustand (Playwright laesst den Mauszeiger nach dem Klick auf dem Burger stehen, der bei 390px genau unter der Schliessleiste liegt). Mit Mauszeiger ausserhalb: rgb(255,255,255), bei Hover rgb(0,156,247). */ .mobile-menu-close { display: block; color: #fff; font-size: 15px; font-weight: 600; line-height: 27px; letter-spacing: 0.6px; text-transform: uppercase; padding: 20px; } .mobile-menu-close:hover { color: rgb(0, 156, 247); } /* Elternpunkt mit aufgeklapptem Untermenue wird blau -- am Original gemessen (Biographie aufgeklappt rgb(0,156,247), Œuvre zugeklappt rgb(255,255,255)). */ #site-navigation li.submenu-open > .menu-link { color: rgb(0, 156, 247); } /* 1:1-Abgleich: Das Original markiert im Mobil-Panel NICHT die aktuelle Seite -- die Aktiv-Klassen werden beim Umbau in das Panel umbenannt und greifen dort nicht mehr. Blau bedeutet im Panel ausschliesslich "Untermenue offen". */ #site-navigation > ul > li.current-menu-item > .menu-link, #site-navigation > ul > li.current-menu-ancestor > .menu-link { color: #fff; } #site-navigation > ul > li.current-menu-item.submenu-open > .menu-link, #site-navigation > ul > li.current-menu-ancestor.submenu-open > .menu-link { color: rgb(0, 156, 247); } /* vertical-align:bottom + 8px Innenabstand rechts wie am Original gemessen (Icon-Box dort 23,6x15px). Mit vertical-align:middle und 16px Hoehe wurde die Schliessleiste 67,8 statt 67px hoch und schob alle Menuepunkte um 1px nach unten. */ .mobile-menu-close-icon { display: inline-block; vertical-align: bottom; padding-right: 8px; box-sizing: content-box; } .mobile-menu-close-label { vertical-align: bottom; } #site-navigation ul { display: block; } /* Trennlinien wie im Original: Nur der ERSTE Punkt hat eine obere Linie, jeder Punkt eine untere -- nicht beide auf jedem li, sonst stehen zwischen zwei Punkten 2px statt 1px und die Liste laeuft nach unten aus dem Raster (gemessen: Original 68/120/172, davor 68/121/174). Das Untermenue bringt seine obere Linie am