/* ============================================================ LEFX - Layout-CSS ============================================================ ERZEUGT AUS den Einzeldateien unter _lab/ - nicht direkt bearbeiten. Erzeugt mit _lab/werkzeuge/css-bauen.ps1. ============================================================ */ /* ============================================================ LEFX - Beitragsseiten aufraeumen ============================================================ Astra Pro haengt unter jeden Beitrag zwei Bereiche, die nicht zum Aufbau der Projektseiten passen: .navigation.post-navigation "Vorheriger / Naechster Beitrag" .ast-single-related-posts-container "Related Posts" Beide zeigen die Titel im Rohzustand an - bei den alten Beitraegen also samt der Sprachmarkierungen aus der zweisprachigen Installation ("[:DE]Digitalisierung[:EN]..."). Ausserdem endet jeder Projektbeitrag bereits mit einem eigenen Abschluss samt Handlungsaufforderung. HINWEIS: Das hier blendet die Bereiche nur aus. Sauberer ist es, sie ganz abzuschalten: Customizer -> Blog -> Einzelbeitrag "Aehnliche Beitraege" ausschalten "Beitragsnavigation" ausschalten Dann werden sie gar nicht erst erzeugt und WordPress spart die zugehoerigen Datenbankabfragen. Sobald das gesetzt ist, kann diese Datei entfallen. ============================================================ */ .single-post .ast-single-related-posts-container, .single-post .navigation.post-navigation { display: none; } /* ============================================================ LEFX Header - CSS zur Block-Variante ============================================================ Gehoert nach: Design -> Customizer -> Zusaetzliches CSS (spaeter dauerhaft in wp-content/plugins/lefxblocks/) Passt genau zu header-blocks.html. Die Klassen stecken bereits in der Blockauszeichnung - du musst nichts von Hand eintragen. Struktur, die dieses CSS erwartet: .lefx-hero group, volle Breite, Farbverlauf .lefx-hero-inner columns, zwei Spalten 56/44 .lefx-hero-title h1 .lefx-hero-video figure > video .lefx-graphic figure > img, volle Breite .lefx-band group, volle Breite, dunkel .lefx-band-inner group .lefx-band-kicker h2 .lefx-band-text p .lefx-band-btn Button ============================================================ */ :root { --lefx-pink: var(--ast-global-color-0, #eb5b93); --lefx-petrol: var(--ast-global-color-1, #027775); --lefx-mint: var(--ast-global-color-4, #70c2b4); --lefx-dark: var(--ast-global-color-5, #232323); /* Die Unterkante von grafik_header.png ist #222222, nicht der Astra-Wert #232323. Ein Punkt Unterschied - auf grossen ruhigen Flaechen aber als Kante sichtbar. Alle Flaechen, die direkt an die Grafik anschliessen, verwenden deshalb genau diesen Wert und NICHT --lefx-dark. */ --lefx-grafik-dunkel: #222222; /* Containerbreite im Header. Bewusst breiter als die 1200px des uebrigen Seitenrasters, ab etwa 1500px Fensterbreite. */ --lefx-hero-width: clamp(1100px, 78vw, 1900px); /* Wie weit die Grafik in den Hero hineinragt. Der Wert muss in einem Fenster liegen: Untergrenze 14,7vw - sonst bleibt die Unterkante des Videos sichtbar. Die tiefste deckende Kante von grafik_header.png liegt bei 40,7 % ihrer Hoehe, die Grafik ist 36,1vw hoch. Obergrenze - sonst schneidet die Diagonale die Ueberschrift. Auf der Test-Site gemessen, mit mittig gesetzter Ueberschrift und halber Spaltenbreite: 32,7vw bei 1280px, 31,6vw bei 1600px, 35,1vw bei 2400px. 22vw liegt bei jeder Breite sicher im Fenster. Gegengeprueft: 54px Ueberdeckung bei 1366px, 130px bei 2400px. NICHT ohne Nachmessen aendern. */ --lefx-overlap: 22vw; /* Einzug der Textspalte im Band */ --lefx-band-indent: clamp(0px, 7vw, 120px); } /* ============================================================ ASTRA-BREITENZWANG ============================================================ Astra begrenzt Bloecke und deren Kindelemente auf die Inhaltsbreite: .ast-page-builder-template .entry-content[data-ast-blocks-layout] > ... > * { max-width: var(--wp--custom--ast-content-width-size); margin-left: auto; } !important steht hier bewusst: Astras Selektor bringt vier Klassen mit. Ihn regulaer zu ueberbieten hiesse, die eigene Klasse fuenfmal zu wiederholen - unleserlich und nicht robuster. */ .lefx-hero, .lefx-graphic, .lefx-band { max-width: none !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; } /* ============================================================ 1. HERO ============================================================ */ .lefx-hero { /* Farbverlauf hier statt in den Blockeinstellungen, weil sich Zwischenstopps in Prozent dort nicht setzen lassen. #04413f haelt es links lange dunkel, ohne eine gleichmaessige Flaeche in --lefx-dark zu erzeugen - sonst geht die Kante zur Grafik verloren, die dieselbe Farbe hat. */ background: linear-gradient(100deg, var(--lefx-dark) 0%, #04413f 36%, var(--lefx-petrol) 64%, var(--lefx-mint) 100%); padding-top: clamp(40px, 6vw, 88px); padding-bottom: 0; overflow: hidden; } .lefx-hero .lefx-hero-inner { max-width: var(--lefx-hero-width); margin-inline: auto; margin-bottom: 0; padding-inline: 24px; /* Ueberschrift mittig zum Video. Die Spalten stehen im Block auf "mittig ausgerichtet" - das hier ist die Absicherung, falls die Blockeinstellung verlorengeht. */ align-items: center; } /* Ueberschrift. Zwei Klassen, weil Astra Ueberschriften ueber Regeln wie ".entry-content h1" formatiert - eine Klasse allein verliert dagegen. */ /* Klasse doppelt - kein Tippfehler. WordPress setzt in seinen globalen Stilen NICHT nur fuer das erste, sondern auch fuer das letzte Kind einen Abstand zurueck: :root :where(.is-layout-flow) > :last-child { margin-block-end: 0; } Die Ueberschrift ist einziges Kind ihrer Spalte, also zugleich erstes und letztes. Ohne die erhoehte Spezifitaet wird der untere Abstand auf 0 gesetzt - und genau der positioniert sie. */ .lefx-hero.lefx-hero .lefx-hero-title { /* Die Spalten sind mittig ausgerichtet. Bei einem mittig ausgerichteten Flex-Element hebt ein unterer Aussenabstand den Inhalt um die HAELFTE dieses Wertes an. 18vw, NICHT --lefx-overlap (22vw): Mit 22vw sass die Ueberschrift 32px hoeher als auf den Unterseiten, die mit --lefx-ph-hub von 18vw rechnen. Beim Wechsel zwischen den Seiten sprang sie dadurch sichtbar. Der Abstand zur Grafik bleibt auch mit 18vw ausreichend: gemessen 72px bei 1024px, 74px bei 1280px, 69px bei 1600px und 121px bei 2400px. */ margin: 0 0 18vw; font-weight: 300; line-height: 1.12; /* Laufweite war auf Roboto abgestimmt (.06em). Oxanium laeuft breiter: "MANUFACTURING" braucht damit 529px, die Spalte ist 526px breit - das Wort brach um. Gemessen bei 1440px Fensterbreite. Mit .02em sind es 498px, also rund 5 Prozent Reserve fuer laengere Woerter. */ letter-spacing: .02em; text-transform: uppercase; font-size: clamp(30px, 4.6vw, 58px); color: #fff; } .lefx-hero .lefx-hero-title .is-pink { color: var(--lefx-pink); } /* Video quadratisch */ .lefx-hero .lefx-hero-video { margin: 0; } .lefx-hero .lefx-hero-video video { display: block; width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; background: #0a2b2a; } /* ============================================================ 2. GRAFIK - verdeckt die Unterkante des Videos ============================================================ */ .lefx-graphic { margin-top: calc(var(--lefx-overlap) * -1) !important; margin-bottom: -1px !important; /* verhindert eine Haarlinie */ /* Ebene 2: ueber dem Hintergrund von .lefx-band, damit dieser den Petrol-Keil nicht abschneidet */ position: relative; z-index: 1; /* liegt ueber dem Video und darf keine Klicks abfangen */ pointer-events: none; } .lefx-graphic img { display: block; width: 100%; height: auto; } /* ============================================================ 3. BAND ============================================================ */ .lefx-band { /* exakt der Farbwert der Grafikunterkante - siehe oben */ background: var(--lefx-grafik-dunkel); padding-bottom: clamp(16px, 2vw, 32px); /* KEIN z-index. Der Hintergrund muss hinter der Grafik liegen. */ } /* Klasse doppelt geschrieben - das ist kein Tippfehler. WordPress setzt in seinen globalen Stilen: :root :where(.is-layout-flow) > :first-child { margin-block-start: 0; } .lefx-band-inner ist das erste Kind von .lefx-band, und die Regel hat mit 0-2-0 dieselbe Spezifitaet wie ".lefx-band .lefx-band-inner". Bei Gleichstand entscheidet die Reihenfolge, und die globalen Stile stehen NACH dem Plugin-CSS - das negative margin wurde dadurch auf 0 zurueckgesetzt. Mit der doppelten Klasse liegen wir bei 0-3-0 und gewinnen. Achtung: Dieselbe Falle trifft jeden ersten Block innerhalb einer Gruppe. */ .lefx-band.lefx-band .lefx-band-inner { max-width: var(--lefx-hero-width); margin-inline: auto; padding-inline: 24px; /* Das negative margin sitzt hier, nicht am Elternelement. So ragt nur der Text ueber die Grafik, nicht die Flaeche. */ margin-top: calc(var(--lefx-overlap) * -1); /* Ebene 3: ueber der Grafik */ position: relative; z-index: 2; } /* Textspalte eingerueckt und schmal, damit sie nicht unter das Video laeuft */ /* Kein Einzug: Die Textspalte soll links buendig mit der Ueberschrift "Manufacturing Realities" stehen. Die steht am Contentrand und kann nicht weiter nach links. */ .lefx-band .lefx-band-inner > * { max-width: 560px; margin-left: 0; margin-right: 0; } .lefx-band .lefx-band-kicker { font-size: clamp(17px, 1.8vw, 26px); font-weight: 700; line-height: 1.4; /* wie bei der Hero-Ueberschrift: "VR | AR | ECHTZEITVISUALISIERUNG" braucht mit .18em 589px, die Spalte ist 560px breit. Mit Roboto waren es 577px - die Zeile brach also schon vorher um, nur weniger auffaellig. .11em ergibt 532px. */ letter-spacing: .11em; text-transform: uppercase; color: #fff; margin-top: 0; margin-bottom: 18px; } .lefx-band .lefx-band-text { font-size: clamp(14px, 1.05vw, 17px); line-height: 1.75; color: rgba(255,255,255,.82); margin-top: 0; margin-bottom: 28px; } /* Der Button-Block bringt einen eigenen unteren Blockabstand mit. Gemessen blieben dadurch 126px unter dem Button, obwohl der Innenabstand des Bandes nur 32px betraegt. */ .lefx-band .lefx-band-buttons { margin-bottom: 0 !important; } .lefx-band .lefx-band-btn .wp-block-button__link { background: var(--lefx-pink); color: #fff; font-size: clamp(13px, 1vw, 16px); font-weight: 400; line-height: 1.4; letter-spacing: .05em; padding: 13px 26px; border-radius: 3px; transition: background .2s, transform .2s; } .lefx-band .lefx-band-btn .wp-block-button__link:hover, .lefx-band .lefx-band-btn .wp-block-button__link:focus-visible { background: #d94b81; transform: translateY(-2px); } /* ============================================================ MOBIL ============================================================ Der Spaltenblock bricht von sich aus bei 781px um. --lefx-overlap bleibt bei 18vw: der Wert ist an die Grafik gebunden und skaliert mit der Breite. Ein kleinerer Wert legt die Videounterkante frei. */ @media (max-width: 781px) { .lefx-hero .lefx-hero-video { max-width: 460px; margin-inline: auto; } .lefx-band .lefx-band-inner > * { margin-left: 0; } /* Der untere Aussenabstand der Ueberschrift ist am Bildschirm ein Trick zur senkrechten Zentrierung (siehe oben). Hier stehen die Spalten untereinander - daraus wird schlichter Leerraum. Gemessen bei 520px: 159px zwischen Ueberschrift und Video. */ .lefx-hero.lefx-hero .lefx-hero-title { margin-bottom: clamp(18px, 5vw, 36px); } /* Die Grafik muss die Unterkante des Videos verdecken. Am Bildschirm reichen dafuer --lefx-overlap (22vw); schmal nicht mehr, weil das Video dort quadratisch und damit im Verhaeltnis viel hoeher ist. Die deckende Oberkante der Grafik liegt bei 40,7 % ihrer Hoehe, die Grafik ist 36,1vw hoch - also 14,7vw unterhalb ihrer Oberkante. Dazu die 48px, die das Video ueber dem Ende des Kopfbereichs endet, plus 22px Reserve. */ .lefx-graphic { margin-top: calc((14.7vw + 70px) * -1) !important; } } @media (prefers-reduced-motion: reduce) { .lefx-band .lefx-band-btn .wp-block-button__link { transition: none; } } /* ============================================================ KOPFBEREICH UNTER DIE NAVIGATION ============================================================ Gilt fuer alle SEITEN, nicht fuer Beitraege: Dort steht oben das Kopfbild, das eine eigene Betrachtung braucht. Ausgangslage: Astras transparenter Header ist aktiv, die Navigation hat also keinen eigenen Hintergrund mehr. Sichtbar wurde davon trotzdem nichts - ueber dem Kopfbereich standen noch zwei Dinge auf dem dunklen Seitenhintergrund von Astra: der Seitentitel (.entry-header, 64px Aussenabstand + 36px hoch) und der Abstand darunter. Die Navigation lag also nicht auf dem Farbverlauf, sondern auf dieser dunklen Flaeche. Deshalb: Seitentitel ausblenden und den Kopfbereich bis an die Oberkante ziehen. Der Innenabstand waechst um die Hoehe der Kopfleiste (76px), damit Ueberschrift und Video nicht unter der Navigation liegen. */ body.page .entry-header { display: none !important; } /* Beide Kopfvarianten: .lefx-hero auf der Startseite, .lefx-ph-hero auf Profession, Showroom, Team, Kontakt, Blog. KEIN :first-child. Auf der Blog-Seite steht vor dem Kopf ein leerer Absatz aus dem eingefuegten Markup - die Regel griff dort deshalb nicht, und die Ueberschrift sass 116px hoeher als auf den uebrigen Seiten. */ body.page .entry-content > .lefx-hero, body.page .entry-content > .lefx-ph-hero { margin-top: 0 !important; padding-top: calc(var(--lefx-kopfleiste, 76px) + clamp(40px, 6vw, 88px)) !important; } @media (max-width: 921px) { /* Unter 922px schaltet Astra den transparenten Header ab, die Leiste steht dann wieder im Fluss - kein Ausgleich noetig. */ body.page .entry-content > .lefx-hero, body.page .entry-content > .lefx-ph-hero { padding-top: clamp(40px, 6vw, 88px) !important; } } /* ============================================================ LEFX Abschnitt "Unsere Profession" ============================================================ Passt zu profession-blocks.html. Struktur: .lefx-profession group, volle Breite, Farbverlauf .lefx-profession-inner group, zwei Spalten: Titel | Raster .lefx-profession-title h2, um 90 Grad gedreht .lefx-profession-grid group, 3 x 2 Kacheln .lefx-card group .lefx-card-icon figure > img .lefx-card-title h3 .lefx-card-text p ============================================================ */ /* Astra begrenzt Bloecke auf die Inhaltsbreite - siehe Begruendung im Header-CSS. */ .lefx-profession { max-width: none !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; } /* ============================================================ 1. ABSCHNITT ============================================================ */ .lefx-profession { /* Senkrechter Verlauf von Grau nach gedaempftem Gruen. Zwei Vorgaben sind hier bindend: - Oben muss --lefx-dark im Vollton stehen, damit die Kante zur Grafik darueber unsichtbar bleibt. Deshalb der zweite Stopp bei 12 % mit derselben Farbe. - Der Vollton von --lefx-petrol (#027775) darf nie erreicht werden. Endwert ist #16443f, also deutlich dunkler und entsaettigter. */ background: linear-gradient(180deg, var(--lefx-grafik-dunkel, #222222) 0%, var(--lefx-grafik-dunkel, #222222) 12%, #1d3a37 58%, #16443f 100%); /* !important, weil die Innenabstaende sonst von aussen auf 48px gesetzt werden. Die verantwortliche Regel liess sich ueber die Stylesheets nicht auffinden - ein Testelement mit denselben Werten rechnete korrekt, der Abschnitt bekam trotzdem 48px. Deshalb hier der direkte Weg statt weiterer Spezifitaetsstufen. */ /* Zwischen Band und diesem Abschnitt liegen von aussen 54px Blockabstand, und im Band bleiben unter dem Button noch 126px stehen. Das negative margin holt diesen Leerraum zurueck - gemessen bei 2000px: Abstand Button zu Kacheln von 220px auf 120px. */ margin-top: calc(-1 * clamp(24px, 2.5vw, 50px)) !important; padding-top: clamp(20px, 2.5vw, 40px) !important; /* Der folgende Abschnitt zieht sein Bild um --lefx-projekte-hub nach oben in diesen hinein. Ohne reservierten Platz verdeckt es die Kacheln - gemessen waren es 336px bei 2400px Fensterbreite. Mit dem Zuschlag bleiben 56px Abstand. */ /* Der Zuschlag ist klein, weil der kleinere obere Innenabstand die Kacheln zusaetzlich nach oben zieht. Gemessen bei 2000px: mit 92px Zuschlag wurden daraus 172px Abstand zur Grafik, mit diesem Wert rund 100px. */ padding-bottom: calc(var(--lefx-projekte-hub, 18vw) + clamp(60px, 5vw, 100px)) !important; } /* Die Aufteilung "Ueberschrift links, Raster rechts" kommt aus der Layout-Eigenschaft des Blocks (flex, nowrap), nicht aus diesem CSS. Nur so stellt der Blockeditor sie ebenfalls dar. Hier stehen ausschliesslich Breite, Abstaende und Farben. */ .lefx-profession .lefx-profession-inner { max-width: var(--lefx-hero-width, clamp(1200px, 80vw, 2000px)); margin-inline: auto; padding-inline: 24px; /* Abstand zwischen gedrehter Ueberschrift und Kachelraster */ gap: clamp(28px, 5vw, 96px); /* buendig mit der Textspalte im Header */ padding-left: calc(24px + var(--lefx-band-indent, clamp(0px, 7vw, 120px))); } /* Das Raster nimmt den Rest der Zeile ein */ .lefx-profession .lefx-profession-grid { flex: 1; min-width: 0; } /* ============================================================ 2. GEDREHTE UEBERSCHRIFT ============================================================ writing-mode statt transform: rotate(). Bei rotate() bliebe der urspruengliche Platzbedarf stehen und das Raster bekaeme eine falsch breite erste Spalte. */ .lefx-profession .lefx-profession-title { writing-mode: vertical-rl; transform: rotate(180deg); margin: 0; justify-self: start; align-self: center; font-size: clamp(19px, 1.8vw, 30px); font-weight: 700; letter-spacing: .22em; text-transform: uppercase; line-height: 1; color: #fff; white-space: nowrap; } /* ============================================================ 3. RASTER ============================================================ */ /* Die drei Spalten kommen aus der Grid-Layout-Eigenschaft des Blocks (columnCount 3). WordPress erzeugt dafuer eine eigene Regel mit einer Klasse - unsere zwei Klassen ueberbieten sie, deshalb greifen die Umbrueche weiter unten. */ .lefx-profession .lefx-profession-grid { gap: clamp(12px, 1.4vw, 24px); margin: 0; } /* ============================================================ 4. KACHEL ============================================================ */ /* Ausrichtung untereinander und zentriert kommt aus der Layout-Eigenschaft des Blocks (flex, vertikal, zentriert). */ .lefx-profession .lefx-card { gap: 14px; padding: clamp(18px, 2vw, 32px) clamp(14px, 1.6vw, 26px); margin: 0; /* Farbverlauf und Outline. Beides bewusst sehr zurueckhaltend, damit die Kacheln sich vom Hintergrund abheben, ohne als eigene Flaeche zu wirken. */ background: linear-gradient(155deg, rgba(255,255,255,.075) 0%, rgba(255,255,255,.02) 55%, rgba(255,255,255,0) 100%); border: 1px solid rgba(112,194,180,.28); border-radius: 4px; transition: border-color .2s, background .2s, transform .2s; } .lefx-profession .lefx-card:hover { border-color: rgba(112,194,180,.6); transform: translateY(-3px); } /* -- Icon -- Breite an der Kachel statt in Pixeln, damit sie mitskaliert. 54 % entspricht der gemessenen Breite von "Interaktive Story" (173px bei 321px Kachelbreite). Keine Farbanpassung per Filter: Die Icons werden spaeter durch Fassungen in passenden Farben ersetzt. Ein Filter wuerde die dann verfaelschen. */ .lefx-profession .lefx-card-icon { margin: 0; width: 54%; } .lefx-profession .lefx-card-icon img { display: block; width: 100%; height: auto; } /* -- Texte -- */ .lefx-profession .lefx-card-title { margin: 0; text-align: center; font-size: clamp(17px, 1.5vw, 23px); font-weight: 400; line-height: 1.3; letter-spacing: .02em; color: var(--lefx-mint, #70c2b4); } .lefx-profession .lefx-card-text { margin: 0; text-align: center; font-size: clamp(13px, 1vw, 16px); line-height: 1.55; color: rgba(255,255,255,.62); } /* ============================================================ MOBIL ============================================================ */ @media (max-width: 1024px) { .lefx-profession .lefx-profession-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 781px) { .lefx-profession .lefx-profession-inner { flex-wrap: wrap; padding-left: 24px; } /* gedreht ist auf schmalen Geraeten nicht lesbar - und waagerecht steht sie mittig ueber dem Inhalt */ .lefx-profession .lefx-profession-title { writing-mode: horizontal-tb; transform: none; margin-bottom: 20px; align-self: center; text-align: center; } .lefx-profession .lefx-profession-grid { grid-template-columns: minmax(0, 1fr); flex-basis: 100%; } } @media (prefers-reduced-motion: reduce) { .lefx-profession .lefx-card { transition: none; } .lefx-profession .lefx-card:hover { transform: none; } } /* ============================================================ LEFX Abschnitt "Unsere Projekte" ============================================================ Passt zu projekte-blocks.html. Struktur: .lefx-projekte group, volle Breite, HELL .lefx-projekte-bild figure > img, volle Breite .lefx-projekte-inner group, Containerbreite .lefx-projekte-kachel group, mintfarben .lefx-projekte-vorzeile p .lefx-projekte-titel h2 .lefx-projekte-text p .lefx-projekte-btn Button, ragt rechts heraus ============================================================ */ :root { /* Wie weit das Bild in den Abschnitt darueber ragt. image-startseite.png ist 2560x1203, bei voller Breite also 47vw hoch. Die obere Alpha-Kante liegt zwischen 3,8 % und 35,3 % der Hoehe - der tiefste Punkt am rechten Rand. Damit die Kante zum Abschnitt darueber NIRGENDS sichtbar bleibt, muss das Bild mindestens 0,353 x 47vw = 16,6vw ueberlappen. 18vw laesst etwas Reserve. NICHT ohne Nachmessen verkleinern. */ --lefx-projekte-hub: 18vw; /* Verankerung der Kachel. Wichtig: Verankert wird die UNTERKANTE, nicht die Oberkante. Grund: Die Kachelhoehe haengt am Text und waechst nicht mit der Fensterbreite - die Schriftgroessen sind nach oben gedeckelt. Bei einer Verankerung der Oberkante wanderte die Kachel deshalb je nach Aufloesung stark: gemessen 13,7 % der Fensterbreite unterhalb der Fotokante bei 1600px, aber nur 5,1 % bei 2400px. Mit der Verankerung unten sind es 7,1 % und 7,8 %. --lefx-kachel-hub Hoehe des Bereichs, in dem die Kachel liegt --lefx-kachel-unten Abstand der Kachelunterkante zur Bildunterkante */ --lefx-kachel-hub: 27vw; --lefx-kachel-unten: 6vw; } /* Astra begrenzt Bloecke auf die Inhaltsbreite - Begruendung siehe Header-CSS. */ .lefx-projekte, .lefx-projekte-bild { max-width: none !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; } /* ============================================================ 1. ABSCHNITT ============================================================ */ .lefx-projekte { /* Hell, weil der naechste Abschnitt in diesen Bereich hineinragt. */ background: #ffffff; /* Der Bereich der Kachel traegt netto --lefx-kachel-unten negativ zur Hoehe bei - der Zuschlag gleicht das aus, sonst ruecken die folgenden Inhalte nach oben. */ padding-bottom: calc(var(--lefx-kachel-unten) + clamp(16px, 2vw, 36px)) !important; position: relative; z-index: 1; } /* ============================================================ 2. BILD ============================================================ Klasse doppelt geschrieben - kein Tippfehler. WordPress setzt in seinen globalen Stilen :root :where(.is-layout-flow) > :first-child { margin-block-start: 0; } und das Bild ist das erste Kind des Abschnitts. Die Regel hat dieselbe Spezifitaet wie eine einzelne Klasse und steht in der Ladereihenfolge NACH unserem CSS - das negative margin waere sonst wirkungslos. */ .lefx-projekte-bild.lefx-projekte-bild { margin-top: calc(var(--lefx-projekte-hub) * -1) !important; /* !important: Der Blockabstand setzt sonst 16px, und dort scheint der dunkle Seitenhintergrund als Linie durch. */ margin-bottom: 0 !important; position: relative; z-index: 1; pointer-events: none; } .lefx-projekte-bild img { display: block; width: 100%; height: auto; } /* ============================================================ 2b. BILDWECHSEL ============================================================ Ohne JavaScript. Aufbau in seite-startseite-neu-blocks.html: .lefx-projekte-bild.lefx-projekte-wechsel group .lefx-pw-bild figure > img (mehrfach) Das ERSTE Bild steht im Fluss und gibt die Hoehe des Bereichs vor. Alle weiteren liegen deckungsgleich darueber und werden der Reihe nach eingeblendet; jedes bleibt danach stehen. Am Ende des Durchlaufs blenden alle gemeinsam aus - darunter kommt wieder das erste Bild zum Vorschein. So liegt unter jeder Ueberblendung immer eine deckende Ebene, und der Seitenhintergrund scheint nie durch. Die Bilder sind oben diagonal freigestellt. Alle fuenf sind 2560x1200 und haben dieselbe Alphakante (tiefster Punkt bei 35,3 % der Hoehe, am rechten Rand) - gemessen mit System.Drawing.Bitmap. --lefx-projekte-hub deckt das ab: 0,353 x 46,9vw = 16,6vw noetig, gesetzt sind 18vw. NEUE BILDER NUR IN 2560x1200 UND MIT DERSELBEN ALPHAKANTE. image-startseite.png war 2560x1203 - drei Pixel mehr. Weil die Hoehe des Bereichs am ersten Bild haengt und die uebrigen formatfuellend darueberliegen, lief es unten nicht bis an den Rand. Es ist deshalb nicht mehr Teil der Auswahl. Die Zeiten stehen als Variablen; das Raster der Keyframes haengt aber an der ANZAHL der Bilder (fuenf Stufen zu je 20 %). Kommt ein Bild hinzu oder faellt eines weg, muessen die Prozentwerte neu gesetzt werden. */ .lefx-projekte-wechsel { --lefx-pw-dauer: 35s; /* ein kompletter Durchlauf, 5 x 7s */ position: relative; /* Die Gruppe bringt 48px Innenabstand und einen Blockabstand mit. Beides muss weg, und zwar aus einem Grund, der nicht nach Kosmetik aussieht: Das erste Bild steht IM Inhaltsbereich (also 96px schmaler), die uebrigen liegen mit inset:0 auf dem PADDING-Bereich - also 96px breiter und entsprechend hoeher. `object-fit: cover` skaliert sie dann hoch und beschneidet sie. Die diagonale Kante sass dadurch bei jedem Bildwechsel an einer anderen Stelle, und am oberen Rand blitzte das darunter liegende Bild als heller Saum hervor. Gemessen bei 1600px Fensterbreite: erstes Bild 1489x698, die uebrigen 1585x794. Ohne Innenabstand sind alle fuenf 1585x743 - das entspricht genau 2560:1200. */ padding: 0 !important; gap: 0 !important; } /* Der Blockabstand zwischen den Bildern muss weg - er wuerde die Hoehe des Bereichs vergroessern. */ .lefx-projekte-wechsel .lefx-pw-bild { margin: 0 !important; } /* Alle ausser dem ersten deckungsgleich darueber. Die Reihenfolge im Markup bestimmt die Ebenen: spaetere Bilder liegen oben. */ .lefx-projekte-wechsel .lefx-pw-bild:not(:first-child) { position: absolute; inset: 0; opacity: 0; animation-duration: var(--lefx-pw-dauer); animation-timing-function: linear; animation-iteration-count: infinite; animation-fill-mode: both; } /* height/object-fit statt height:auto - so bleibt der Ausschnitt auch dann deckungsgleich, wenn ein Bild einmal ein anderes Seitenverhaeltnis hat. Drei Klassen, weil ".lefx-projekte-bild img" mit height:auto dagegensteht. */ .lefx-projekte-wechsel .lefx-pw-bild img { width: 100%; height: 100%; object-fit: cover; } .lefx-projekte-wechsel .lefx-pw-bild:first-child img { height: auto; } .lefx-projekte-wechsel .lefx-pw-bild:nth-child(2) { animation-name: lefx-pw-2; } .lefx-projekte-wechsel .lefx-pw-bild:nth-child(3) { animation-name: lefx-pw-3; } .lefx-projekte-wechsel .lefx-pw-bild:nth-child(4) { animation-name: lefx-pw-4; } .lefx-projekte-wechsel .lefx-pw-bild:nth-child(5) { animation-name: lefx-pw-5; } /* Je Bild: verdeckt bleiben, an der eigenen Stufe in 2,6 % (rund 0,9s) einblenden, stehen bleiben, am Schluss mit allen anderen ausblenden - darunter kommt das erste Bild hervor. */ @keyframes lefx-pw-2 { 0%, 17.4% { opacity: 0 } 20%, 97.4% { opacity: 1 } 100% { opacity: 0 } } @keyframes lefx-pw-3 { 0%, 37.4% { opacity: 0 } 40%, 97.4% { opacity: 1 } 100% { opacity: 0 } } @keyframes lefx-pw-4 { 0%, 57.4% { opacity: 0 } 60%, 97.4% { opacity: 1 } 100% { opacity: 0 } } @keyframes lefx-pw-5 { 0%, 77.4% { opacity: 0 } 80%, 97.4% { opacity: 1 } 100% { opacity: 0 } } /* Im Blockeditor kein Stapel: Dort sollen alle Bilder untereinander stehen und einzeln bearbeitbar bleiben. */ .editor-styles-wrapper .lefx-projekte-wechsel .lefx-pw-bild { position: static !important; opacity: 1 !important; animation: none !important; } .editor-styles-wrapper .lefx-projekte-wechsel .lefx-pw-bild img { height: auto !important; } /* ============================================================ 3. KACHEL ============================================================ */ /* Klasse doppelt - .lefx-projekte-inner ist das erste Kind der Gruppe, und WordPress setzt dort margin-block-start auf 0. Ohne erhoehte Spezifitaet waere das negative margin wirkungslos. */ .lefx-projekte.lefx-projekte .lefx-projekte-inner { max-width: var(--lefx-hero-width, clamp(1200px, 84vw, 2100px)); margin-inline: auto; padding-inline: 24px; /* Zieht den Bereich nach oben ins Bild. Die feste Hoehe und "align-items: flex-end" sorgen dafuer, dass die UNTERKANTE der Kachel verankert ist: Sie liegt immer --lefx-kachel-unten oberhalb der Bildunterkante, unabhaengig davon, wie hoch die Kachel durch ihren Text wird. Wird die Kachel hoeher als der Bereich, waechst sie nach oben ins Bild hinein - genau das ist gewuenscht. */ margin-top: calc(var(--lefx-kachel-hub) * -1) !important; height: calc(var(--lefx-kachel-hub) - var(--lefx-kachel-unten)); display: flex; align-items: flex-end; position: relative; z-index: 2; } .lefx-projekte .lefx-projekte-kachel { /* linksbuendig mit der gedrehten Ueberschrift aus "Unsere Profession" - dort gilt derselbe Einzug */ margin-left: var(--lefx-band-indent, clamp(0px, 7vw, 120px)); width: clamp(280px, 24vw, 420px); background: var(--lefx-mint, #70c2b4); /* Rechts deutlich mehr Innenabstand als links: Der Button ragt von rechts in die Kachel und darf den Text nicht ueberdecken. */ padding: clamp(20px, 2vw, 34px) clamp(58px, 7vw, 116px) clamp(24px, 2.6vw, 44px) clamp(18px, 1.6vw, 28px); border-radius: 6px; position: relative; } /* -- Texte -- */ .lefx-projekte .lefx-projekte-vorzeile { margin: 0 0 14px; font-size: clamp(14px, 1.05vw, 17px); line-height: 1.45; color: #fff; } .lefx-projekte .lefx-projekte-titel { margin: 0 0 18px; font-size: clamp(19px, 1.7vw, 26px); font-weight: 700; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; color: #fff; } .lefx-projekte .lefx-projekte-text { margin: 0; font-size: clamp(14px, 1.05vw, 17px); line-height: 1.65; color: rgba(255,255,255,.9); } /* -- Button, ueberlagert die rechte Kante der Kachel -- */ .lefx-projekte .lefx-projekte-buttons { position: absolute; right: 0; bottom: clamp(18px, 2.4vw, 42px); /* schiebt den Button ueber die Kachelkante hinaus */ transform: translateX(62%); margin: 0; } .lefx-projekte .lefx-projekte-btn .wp-block-button__link { background: var(--lefx-dark, #232323); color: #fff; font-size: clamp(13px, 1vw, 16px); font-weight: 400; line-height: 1.4; letter-spacing: .02em; padding: clamp(11px, 1.1vw, 16px) clamp(16px, 1.6vw, 26px); border-radius: 6px; white-space: nowrap; transition: background .2s; } .lefx-projekte .lefx-projekte-btn .wp-block-button__link:hover, .lefx-projekte .lefx-projekte-btn .wp-block-button__link:focus-visible { background: #000; } /* ============================================================ MOBIL ============================================================ */ @media (max-width: 781px) { /* Auf schmalen Geraeten steht die Kachel UNTER dem Bild, nicht darin. Die Verankerung an der Bildunterkante ergibt hier keinen Sinn - gemessen ragte die Kachel sonst 326px ins Bild. */ .lefx-projekte.lefx-projekte .lefx-projekte-inner { margin-top: 0 !important; height: auto !important; display: block !important; padding-top: clamp(24px, 6vw, 44px); } .lefx-projekte { padding-bottom: clamp(32px, 8vw, 60px) !important; } .lefx-projekte .lefx-projekte-kachel { margin-left: 0; width: auto; /* Der Button rueckt unter den Text, deshalb rechts kein Sonderabstand mehr noetig. */ padding-right: clamp(18px, 1.6vw, 28px); padding-bottom: clamp(70px, 16vw, 110px); } .lefx-projekte .lefx-projekte-buttons { right: auto; left: clamp(18px, 1.6vw, 28px); transform: none; } } @media (prefers-reduced-motion: reduce) { .lefx-projekte .lefx-projekte-btn .wp-block-button__link { transition: none; } /* Kein Bildwechsel, wenn im Betriebssystem "Bewegung reduzieren" gesetzt ist. Es bleibt beim ersten Bild. */ .lefx-projekte-wechsel .lefx-pw-bild:not(:first-child) { animation: none !important; opacity: 0 !important; } } /* ============================================================ LEFX Abschnitt "Was uns ausmacht" ============================================================ Passt zu ausmacht-blocks.html. Struktur: .lefx-ausmacht group, volle Breite, Farbverlauf .lefx-ausmacht-inner group, flex: Titel | Raster .lefx-ausmacht-title h2, um 90 Grad gedreht .lefx-ausmacht-grid group, 3 Spalten .lefx-usp group .lefx-usp-icon figure > img .lefx-usp-title h3 .lefx-usp-text p ============================================================ */ :root { /* Wie weit die Kacheln oben ueber den Farbverlauf hinausragen und den weissen Abschnitt darueber ueberdecken. */ --lefx-ausmacht-hub: 5vw; } /* Astra begrenzt Bloecke auf die Inhaltsbreite - Begruendung siehe Header-CSS. */ .lefx-ausmacht { max-width: none !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; } /* ============================================================ 1. ABSCHNITT ============================================================ */ .lefx-ausmacht { /* Farbverlauf wie im Header */ background: linear-gradient(100deg, var(--lefx-dark, #232323) 0%, #04413f 36%, var(--lefx-petrol, #027775) 64%, var(--lefx-mint, #70c2b4) 100%); /* KEIN oberer Innenabstand: Der Inhalt soll ueber die Abschnittskante nach oben hinausragen. Ein Innenabstand wuerde das negative margin des Inhalts wieder aufheben - genau daran lag es, dass die Kacheln zuerst 72px UNTERHALB der Kante begannen statt darueber. */ padding-top: 0 !important; /* faengt den nach oben gezogenen Inhalt unten wieder auf */ padding-bottom: calc(var(--lefx-ausmacht-hub) + clamp(48px, 6vw, 110px)) !important; position: relative; z-index: 2; /* Ohne oberen Innenabstand wandert der negative Aussenabstand des Inhalts an den Abschnitt selbst weiter, statt den Inhalt darin nach oben zu ziehen - der ganze Abschnitt ruecke hoch, die Kacheln blieben an der Kante kleben. "flow-root" unterbindet das, ohne den Ueberstand abzuschneiden. */ display: flow-root; } /* Klasse doppelt: .lefx-ausmacht-inner ist erstes Kind der Gruppe, und WordPress setzt dort margin-block-start auf 0. */ .lefx-ausmacht.lefx-ausmacht .lefx-ausmacht-inner { max-width: var(--lefx-hero-width, clamp(1200px, 84vw, 2100px)); margin-inline: auto; padding-inline: 24px; gap: clamp(28px, 5vw, 96px); /* buendig mit der gedrehten Ueberschrift aus "Unsere Profession" */ padding-left: calc(24px + var(--lefx-band-indent, clamp(0px, 7vw, 120px))); /* Mindestabstand der gedrehten Ueberschrift zur Ober- und Unterkante des Farbverlaufs. Sie ist mittig ausgerichtet und waechst mit der Fensterbreite; ohne diesen Innenabstand stiess sie bei manchen Breiten genau an die Kante - gemessen 0px bei 1366, 1500 und 1700px Fensterbreite. Ist sie hoeher als das Kachelraster, waechst der Abschnitt jetzt mit. */ padding-block: clamp(24px, 3vw, 56px); /* Kein negativer Abstand hier: Sonst wandert auch die gedrehte Ueberschrift mit nach oben und steht weiss auf weissem Grund. Nach oben gezogen wird ausschliesslich das Kachelraster. */ margin-top: 0 !important; } /* ============================================================ 2. GEDREHTE UEBERSCHRIFT ============================================================ */ .lefx-ausmacht .lefx-ausmacht-title { writing-mode: vertical-rl; transform: rotate(180deg); margin: 0; justify-self: start; align-self: center; font-size: clamp(19px, 1.8vw, 30px); font-weight: 700; letter-spacing: .22em; text-transform: uppercase; line-height: 1; color: #fff; white-space: nowrap; } /* ============================================================ 3. RASTER ============================================================ */ /* Volle Restbreite - deckungsgleich mit dem Raster aus "Unsere Profession" (gemessen: beide links 455px, Kachelbreite 551 zu 558px bei 2400px Fensterbreite). align-items: start ist noetig. Bei "stretch" waeren die Kacheln so hoch wie die Zeile, und das feste Seitenverhaeltnis unten bliebe wirkungslos. */ .lefx-ausmacht .lefx-ausmacht-grid { flex: 1; min-width: 0; gap: clamp(14px, 1.8vw, 34px); margin: 0; /* stretch statt start: Alle drei Kacheln bekommen dieselbe Hoehe, auch wenn ein Text eine Zeile mehr braucht. Frueher stand hier "start", damit das feste Seitenverhaeltnis wirkt - das ist jetzt eine Mindesthoehe, keine feste Hoehe mehr, und ungleich hohe Kacheln fielen sonst auf. */ align-items: stretch; /* Nur das Raster ragt ueber die Abschnittskante nach oben. */ align-self: flex-start; margin-top: calc(var(--lefx-ausmacht-hub) * -1); } /* ============================================================ 4. KACHEL ============================================================ Einfarbig, ohne Outline - anders als die Kacheln im Abschnitt "Unsere Profession". */ .lefx-ausmacht .lefx-usp { /* WordPress gibt senkrechten Gruppen "flex-wrap: wrap" mit. Passt der Inhalt nicht in die durch aspect-ratio festgelegte Hoehe, bricht er deshalb in eine ZWEITE SPALTE um - der Text stand dann rechts neben der Kachel und ragte aus ihr heraus. Das zeigte sich nur bei Zwischengroessen, weil der Text bei manchen Breiten eine Zeile mehr braucht. nowrap zwingt alles in eine Spalte. */ flex-wrap: nowrap; /* Kein gap: Die Abstaende werden gezielt gesetzt, damit Ueberschrift und Text dicht beieinander stehen. */ gap: 0; /* Deutlich mehr Seitenrand als zuvor - orientiert an den Kacheln aus "Unsere Profession". */ padding: clamp(26px, 2.8vw, 48px) clamp(28px, 3.2vw, 64px) clamp(26px, 2.8vw, 48px); margin: 0; background: var(--lefx-dark, #232323); border-radius: 6px; /* WordPress setzt bei senkrechtem Flex-Layout "align-items: flex-start". Die Ueberschrift waere dann nur so breit wie ihr Text, und "text-align: center" haette keine Wirkung. Gemessen: 112px statt 271px Kachelinnenbreite. */ align-items: stretch; /* Hochformat. 3:4 statt 5:8 - das senkt die Hoehe bei 2400px Fensterbreite von 882px auf 735px, ohne das Format aufzugeben. */ aspect-ratio: 3 / 4; justify-content: flex-start; } /* Icon mit Luft ringsum statt randbuendig. */ .lefx-ausmacht .lefx-usp-icon { margin: clamp(10px, 1.4vw, 24px) 0; width: 72%; align-self: center; } .lefx-ausmacht .lefx-usp-icon img { display: block; width: 100%; height: auto; } /* "margin-top: auto" schiebt Ueberschrift und Text gemeinsam an den unteren Rand der Kachel, das Icon bleibt oben. */ .lefx-ausmacht .lefx-usp-title { margin: auto 0 clamp(6px, .6vw, 10px); text-align: center; font-size: clamp(17px, 1.5vw, 23px); font-weight: 400; line-height: 1.3; color: var(--lefx-mint, #70c2b4); } .lefx-ausmacht .lefx-usp-text { margin: 0; text-align: center; font-size: clamp(13px, 1vw, 16px); line-height: 1.55; color: rgba(255,255,255,.62); } /* ============================================================ MOBIL ============================================================ */ @media (max-width: 1024px) { .lefx-ausmacht .lefx-ausmacht-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 781px) { /* Die Ueberschrift steht hier waagerecht und saesse sonst direkt auf der Abschnittskante. */ .lefx-ausmacht { padding-top: clamp(44px, 12vw, 90px) !important; } .lefx-ausmacht.lefx-ausmacht .lefx-ausmacht-inner { flex-wrap: wrap; padding-left: 24px; } .lefx-ausmacht .lefx-ausmacht-title { writing-mode: horizontal-tb; transform: none; margin-bottom: 20px; align-self: center; text-align: center; } .lefx-ausmacht .lefx-ausmacht-grid { grid-template-columns: minmax(0, 1fr); flex-basis: 100%; } /* Einspaltig ist die Kachel so breit wie der Inhaltsbereich. Mit dem Hochformat 3:4 wird sie dadurch sehr hoch, und "margin: auto" verteilte den Ueberschuss als Leerraum zwischen Icon und Ueberschrift - gemessen 150px bei 520px Fensterbreite. Schmal traegt das Format nichts bei: Die Kachel darf so hoch sein, wie ihr Inhalt braucht. */ .lefx-ausmacht .lefx-usp { aspect-ratio: auto; padding-block: clamp(24px, 6vw, 40px); } .lefx-ausmacht .lefx-usp-icon { width: min(58%, 260px); margin: 0 0 clamp(14px, 4vw, 26px); } /* ohne "auto" - die Ueberschrift folgt dicht auf das Icon */ .lefx-ausmacht .lefx-usp-title { margin-top: 0; } } /* ============================================================ LEFX Abschnitt "Unser Netzwerk" ============================================================ Passt zu netzwerk-blocks.html. Struktur: .lefx-netzwerk group, volle Breite, Verlauf weiss -> mint .lefx-netzwerk-inner group, flex: Bild | Farbflaeche .lefx-netzwerk-bild figure > img .lefx-netzwerk-panel group, petrol .lefx-netzwerk-titel h2 .lefx-netzwerk-text p (dreimal) .lefx-netzwerk-btn Button, ragt rechts heraus ============================================================ */ :root { /* Zusaetzliche Hoehe am unteren Ende. Der Abschnitt "Unsere Kunden" zieht sein weisses Overlay um --lefx-kunden-hub nach oben in diesen hinein; hier ist der Platz dafuer reserviert. Deshalb an denselben Wert gekoppelt. */ --lefx-netzwerk-reserve: var(--lefx-kunden-hub, 17vw); /* Wie weit der Button ueber die rechte Kante der Farbflaeche hinausragt. Derselbe Wert rueckt die Flaeche nach links - dadurch endet der Button genau buendig mit dem Contentrand, also mit den Kacheln aus "Was uns ausmacht". */ --lefx-netzwerk-btn-ueberstand: clamp(56px, 5.5vw, 120px); } /* Astra begrenzt Bloecke auf die Inhaltsbreite - Begruendung siehe Header-CSS. */ .lefx-netzwerk { max-width: none !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; } /* ============================================================ 1. ABSCHNITT ============================================================ */ .lefx-netzwerk { /* Oben reines Weiss, damit die Kante zum dunklen Abschnitt darueber sauber sitzt, unten helles Mint. */ background: linear-gradient(180deg, #ffffff 0%, #e2f1ec 24%, #c6e4db 62%, #aed8ce 100%); /* KEIN oberer Innenabstand: Die Farbflaeche soll buendig an der Oberkante des Abschnitts beginnen. */ padding-top: 0 !important; padding-bottom: calc(var(--lefx-netzwerk-reserve) + clamp(48px, 6vw, 110px)) !important; position: relative; z-index: 1; } /* Klasse doppelt: erstes Kind der Gruppe, sonst setzt WordPress margin-block-start auf 0 - siehe Header-CSS. */ .lefx-netzwerk.lefx-netzwerk .lefx-netzwerk-inner { max-width: var(--lefx-hero-width, clamp(1200px, 84vw, 2100px)); margin-inline: auto; margin-top: 0 !important; padding-inline: 24px; gap: clamp(32px, 6vw, 150px); align-items: flex-start; /* Bild links, Farbflaeche rechts. Der Einzug links ist derselbe wie bei den gedrehten Ueberschriften - dadurch beginnt die Grafik buendig mit dem Content darueber. */ justify-content: space-between; padding-left: calc(24px + var(--lefx-band-indent, clamp(0px, 7vw, 120px))); } /* ============================================================ 2. BILD ============================================================ */ /* Feste Breite statt "fuellt den Rest": Nur so bleibt das Groessenverhaeltnis zur Farbflaeche wie im Mockup (gemessen 1,4 : 1). */ /* Nimmt den Platz links der Farbflaeche ein und zentriert die Grafik darin. Die Breite ist so gewaehlt, dass die Grafik ungefaehr auf Hoehe der Farbflaeche abschliesst - gemessen 682px zu 701px bei 2000px Fensterbreite. */ .lefx-netzwerk .lefx-netzwerk-bild { flex: 1 1 auto; width: auto; min-width: 0; margin: 0; display: flex; justify-content: center; align-self: center; } .lefx-netzwerk .lefx-netzwerk-bild img { display: block; width: clamp(240px, 35vw, 780px); max-width: 100%; height: auto; } /* ============================================================ 3. FARBFLAECHE ============================================================ */ .lefx-netzwerk .lefx-netzwerk-panel { /* Schmaler als zuvor - dadurch weniger Zeichen je Zeile und die Flaeche wird hoeher, wie im Mockup. */ flex: 0 0 clamp(280px, 24vw, 620px); /* nach links geruecktt, damit der herausragende Button rechts buendig mit dem Contentrand abschliesst */ margin: 0 var(--lefx-netzwerk-btn-ueberstand) 0 0; background: var(--lefx-petrol, #027775); /* oben buendig mit der Abschnittskante, unten abgerundet */ border-radius: 0 0 8px 8px; /* Rechts mehr Innenabstand als links: Der Button ragt von rechts herein und darf den Text nicht ueberdecken. Aufbau wie im Abschnitt "Unsere Projekte". */ /* Unten Platz fuer den Button: Der Innenabstand rechts haelt nur den Ueberstand frei, der Button ragt aber mit seiner ganzen Breite in die Flaeche und schnitt bei 900px die letzte Textzeile an. 76px = Abstand von unten plus Buttonhoehe. */ padding: clamp(28px, 3vw, 56px) clamp(48px, 5.5vw, 104px) clamp(76px, 6vw, 110px) clamp(22px, 2.2vw, 44px); position: relative; } .lefx-netzwerk .lefx-netzwerk-titel { margin: 0 0 clamp(18px, 2vw, 32px); font-size: clamp(19px, 1.8vw, 30px); font-weight: 700; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; color: #fff; } .lefx-netzwerk .lefx-netzwerk-text { margin: 0 0 clamp(14px, 1.4vw, 24px); font-size: clamp(14px, 1.05vw, 17px); line-height: 1.7; color: rgba(255,255,255,.92); } .lefx-netzwerk .lefx-netzwerk-text:last-of-type { margin-bottom: 0; } /* -- Button, ueberlagert die rechte Kante -- */ /* Fester Ueberstand statt Prozentwert: Nur so ist die rechte Kante des Buttons berechenbar und deckt sich mit dem Contentrand. */ .lefx-netzwerk .lefx-netzwerk-buttons { position: absolute; right: calc(var(--lefx-netzwerk-btn-ueberstand) * -1); bottom: clamp(18px, 2.4vw, 44px); margin: 0; } .lefx-netzwerk .lefx-netzwerk-btn .wp-block-button__link { background: var(--lefx-dark, #232323); color: #fff; font-size: clamp(13px, 1vw, 16px); font-weight: 400; line-height: 1.4; letter-spacing: .02em; padding: clamp(11px, 1.1vw, 16px) clamp(16px, 1.6vw, 26px); border-radius: 6px; white-space: nowrap; transition: background .2s; } .lefx-netzwerk .lefx-netzwerk-btn .wp-block-button__link:hover, .lefx-netzwerk .lefx-netzwerk-btn .wp-block-button__link:focus-visible { background: #000; } /* ============================================================ MOBIL ============================================================ */ @media (max-width: 781px) { .lefx-netzwerk.lefx-netzwerk .lefx-netzwerk-inner { flex-wrap: wrap; } .lefx-netzwerk .lefx-netzwerk-bild { flex-basis: 100%; } /* Am Bildschirm steht das Bild neben der Farbflaeche und ist ueber 35vw bemessen. Untereinander greift dort die Untergrenze von 240px - das Bild stand deutlich schmaler als die Textflaeche darunter. Hier deshalb volle Breite. */ .lefx-netzwerk .lefx-netzwerk-bild img { width: 100%; } .lefx-netzwerk .lefx-netzwerk-panel { flex-basis: 100%; margin-right: 0; border-radius: 8px; /* Der Button rueckt nach unten in die Flaeche */ padding-right: clamp(22px, 2.2vw, 44px); padding-bottom: clamp(76px, 18vw, 120px); } .lefx-netzwerk .lefx-netzwerk-buttons { right: auto; left: clamp(22px, 2.2vw, 44px); transform: none; } } @media (prefers-reduced-motion: reduce) { .lefx-netzwerk .lefx-netzwerk-btn .wp-block-button__link { transition: none; } } /* ============================================================ LEFX Abschnitt "Unsere Kunden" ============================================================ Passt zu kunden-blocks.html. Struktur: .lefx-kunden-overlay figure > img, volle Breite, ragt als weisses Dreieck nach oben .lefx-kunden group, volle Breite, weiss .lefx-kunden-inner group, flex: Titel | Raster .lefx-kunden-title h2, um 90 Grad gedreht, gruen .lefx-kunden-grid group, 4 Spalten .lefx-kunden-logo figure > img (14 Stueck) ============================================================ */ :root { /* Wie weit das Overlay in den Abschnitt darueber ragt. image-weiss.overlay.png ist 2560x1044, bei voller Breite also 40,8vw hoch. Die obere Alpha-Kante liegt zwischen 3,4 % und 39,2 % der Hoehe - der tiefste Punkt am rechten Rand. Damit die Kante zum Abschnitt darueber nirgends sichtbar bleibt, sind mindestens 0,392 x 40,8vw = 16,0vw noetig. 17vw laesst Reserve. NICHT ohne Nachmessen verkleinern. */ --lefx-kunden-hub: 17vw; /* Wie weit der Inhalt in das Overlay hineinragt. Ohne das sitzen die Logos erst unterhalb der Grafik und der Abstand zum Farbverlauf darueber wird zu gross. */ --lefx-kunden-inhalt-hub: 25vw; } /* Astra begrenzt Bloecke auf die Inhaltsbreite - Begruendung siehe Header-CSS. */ .lefx-kunden, .lefx-kunden-overlay { max-width: none !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; } /* ============================================================ 1. OVERLAY ============================================================ Klasse doppelt, weil WordPress bei erstem und letztem Kind die Aussenabstaende auf 0 setzt - siehe Header-CSS. */ .lefx-kunden-overlay.lefx-kunden-overlay { margin-top: calc(var(--lefx-kunden-hub) * -1) !important; /* verhindert eine Haarlinie zur weissen Flaeche darunter */ margin-bottom: -1px !important; position: relative; z-index: 1; pointer-events: none; } .lefx-kunden-overlay img { display: block; width: 100%; height: auto; } /* ============================================================ 2. ABSCHNITT ============================================================ */ .lefx-kunden { background: #ffffff; padding-top: 0 !important; /* Der Abstand unter den Logos entspricht genau diesem Wert. Er muss NICHT den nach oben gezogenen Inhalt ausgleichen: Die Abschnittsunterkante liegt immer um diesen Betrag unter dem Inhalt, unabhaengig von --lefx-kunden-inhalt-hub. Gemessen bei 2000px: 230px unter den Logos. */ padding-bottom: clamp(110px, 11.5vw, 250px) !important; position: relative; z-index: 2; /* Ohne oberen Innenabstand wandert der negative Aussenabstand des Inhalts sonst an den Abschnitt selbst weiter, statt den Inhalt darin nach oben zu ziehen. "flow-root" unterbindet das, ohne den Ueberstand abzuschneiden. */ display: flow-root; } /* Klasse doppelt: erstes Kind der Gruppe. */ .lefx-kunden.lefx-kunden .lefx-kunden-inner { max-width: var(--lefx-hero-width, clamp(1100px, 78vw, 1900px)); margin-inline: auto; /* zieht Ueberschrift und Logoraster nach oben in das Overlay */ margin-top: calc(var(--lefx-kunden-inhalt-hub) * -1) !important; padding-inline: 24px; gap: clamp(28px, 5vw, 96px); /* buendig mit den gedrehten Ueberschriften der anderen Abschnitte */ padding-left: calc(24px + var(--lefx-band-indent, clamp(0px, 7vw, 120px))); } /* ============================================================ 3. GEDREHTE UEBERSCHRIFT ============================================================ */ .lefx-kunden .lefx-kunden-title { writing-mode: vertical-rl; transform: rotate(180deg); margin: 0; align-self: center; font-size: clamp(19px, 1.8vw, 30px); font-weight: 700; letter-spacing: .22em; text-transform: uppercase; line-height: 1; /* gruen, nicht weiss - der Hintergrund ist hell */ color: var(--lefx-petrol, #027775); white-space: nowrap; } /* ============================================================ 4. LOGORASTER ============================================================ Vier Spalten kommen aus der Grid-Layout-Eigenschaft des Blocks. */ .lefx-kunden .lefx-kunden-grid { flex: 1; min-width: 0; gap: clamp(20px, 2.6vw, 52px); margin: 0; align-items: center; justify-items: center; } /* Logos: einheitliche Hoehe, damit das Raster ruhig wirkt. Nicht klickbar - es sind reine Bilder ohne Link. */ .lefx-kunden .lefx-kunden-logo { margin: 0; width: 100%; display: flex; align-items: center; justify-content: center; } .lefx-kunden .lefx-kunden-logo img { display: block; width: auto; max-width: 100%; height: auto; max-height: clamp(48px, 4.4vw, 88px); object-fit: contain; } /* ============================================================ MOBIL ============================================================ */ @media (max-width: 1024px) { .lefx-kunden .lefx-kunden-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 781px) { .lefx-kunden.lefx-kunden .lefx-kunden-inner { flex-wrap: wrap; padding-left: 24px; } .lefx-kunden .lefx-kunden-title { writing-mode: horizontal-tb; transform: none; margin-bottom: 20px; align-self: center; text-align: center; } .lefx-kunden .lefx-kunden-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); flex-basis: 100%; } } /* ============================================================ LEFX Profession-Seite - Header ============================================================ Passt zu ph-header-blocks.html. Eigene Klassen mit Praefix "lefx-ph-", NICHT die der Startseite. Das CSS gilt auf allen Seiten; die Geometrie unterscheidet sich aber, weil die Abschlussgrafik andere Masse hat. Struktur: .lefx-ph-hero group, volle Breite, Farbverlauf .lefx-ph-inner columns, zwei Spalten 50/50 .lefx-ph-title h1, dreifarbig .lefx-ph-video figure > video .lefx-ph-grafik figure > img, volle Breite .lefx-ph-band group, transparent, liegt AUF der Grafik .lefx-ph-band-inner group .lefx-ph-kicker h2 .lefx-ph-text p ============================================================ */ :root { /* Wie weit die Abschlussgrafik in den Hero hineinragt. grafik-abschluss-header-professions.png ist 2559x1242, bei voller Breite also 48,5vw hoch. Die obere Alpha-Kante liegt zwischen 0,2 % und 30 % der Hoehe - der tiefste Punkt bei 80 % Breite. Damit die Kante zum Hero nirgends sichtbar bleibt, sind mindestens 0,30 x 48,5vw = 14,6vw noetig. 18vw laesst Reserve. NICHT ohne Nachmessen verkleinern. 22vw, NICHT 18vw: Derselbe Wert wie --lefx-overlap auf der Startseite. Beide Grafiken sind zwar verschieden hoch, ihre deckende Oberkante liegt aber fast gleich tief (14,7vw bzw. 14,6vw). Mit demselben Zug wird die Unterkante des Videos deshalb genauso weit verdeckt wie auf der Startseite - gemessen 59px dort und 61px hier bei 1440px, 95px und 97px bei 1920px. Mit 18vw lag sie bei Tabletbreiten frei. */ --lefx-ph-hub: 22vw; /* Wie weit der Textblock nach oben auf die Grafik gezogen wird. Anders als auf der Startseite gibt es hier KEINE eigene Farbflaeche - der Text steht direkt auf der dunklen Flaeche der Grafik. Deren Unterkante laeuft diagonal: gemessen bei 64,2 % der Grafikhoehe ganz links und 85,6 % bei halber Breite, also rund 0,43 Prozentpunkte je Prozent Breite. WARUM ZWEI WERTE: Der Zug in vw skaliert mit dem Fenster, die Texthoehe aber nicht - die Schriftgroessen sind nach oben gedeckelt, der Teaser bleibt zwischen 203px und 255px hoch. Schmal wird der Zug damit zu klein, und der weisse Text lief unter die dunkle Form auf die weisse Flaeche. Gemessene Reserve auf der Team-Seite (laengster Teaser), vor der Korrektur: 800px -64px 1280px +41px 900px -42px 1440px +72px 1024px -14px 1920px +162px 1100px +1px 2560px +325px 34,4vw stellt den Teaser an DIESELBE Stelle wie auf der Startseite. Rechnung mit H = Unterkante des Hero: Startseite: Grafik 36,1vw hoch, Zug 22vw -> Grafikunterkante H + 14,1vw -> Teaser oben H - 7,9vw Hier: Grafik 48,5vw hoch, Zug 22vw -> Grafikunterkante H + 26,5vw -> Zug 34,4vw ergibt ebenfalls H - 7,9vw Nachgemessen (Kicker): 1440px 663 hier / 664 Startseite, 1920px 815 / 815, 834px 518 / 515. Der Platz auf der dunklen Form reicht damit fuer einen Teaser von 17,1vw Hoehe. Ist der Text hoeher, laeuft er darunter - siehe die Messwerte in der Antwort vom 14.09.2026. Die Grafik wird NICHT mehr verlaengert oder abgedeckt; beide Versuche erzeugten sichtbare Kanten und Zipfel. */ --lefx-ph-band-hub: 34.4vw; } /* Astra begrenzt Bloecke auf die Inhaltsbreite - Begruendung siehe Header-CSS der Startseite. */ .lefx-ph-hero, .lefx-ph-grafik, .lefx-ph-band { max-width: none !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; } /* ============================================================ 1. HERO ============================================================ */ .lefx-ph-hero { /* Farbverlauf wie auf der Startseite */ background: linear-gradient(100deg, var(--lefx-dark, #232323) 0%, #04413f 36%, var(--lefx-petrol, #027775) 64%, var(--lefx-mint, #70c2b4) 100%); padding-top: clamp(40px, 6vw, 88px); padding-bottom: 0; overflow: hidden; } .lefx-ph-hero .lefx-ph-inner { max-width: var(--lefx-hero-width, clamp(1100px, 78vw, 1900px)); margin-inline: auto; margin-bottom: 0; padding-inline: 24px; align-items: center; } /* Ueberschrift dreifarbig. Klasse doppelt: WordPress setzt bei erstem und letztem Kind die Aussenabstaende auf 0, und genau der untere positioniert sie. */ .lefx-ph-hero.lefx-ph-hero .lefx-ph-title { /* 18vw fest, NICHT --lefx-ph-hub: Der Wert entscheidet ueber die senkrechte Lage der Ueberschrift, und die soll auf allen Seiten gleich sein. Die Startseite rechnet ebenfalls mit 18vw. Waere er an den Zug der Grafik gekoppelt, sprungen die Ueberschriften beim Seitenwechsel. */ margin: 0 0 18vw; font-weight: 300; line-height: 1.12; letter-spacing: .06em; text-transform: uppercase; font-size: clamp(30px, 4.6vw, 58px); color: #fff; } .lefx-ph-hero .lefx-ph-title .is-mint { color: var(--lefx-mint, #70c2b4); } .lefx-ph-hero .lefx-ph-title .is-gruen { color: var(--lefx-petrol, #027775); } .lefx-ph-hero .lefx-ph-title .is-pink { color: var(--lefx-pink, #eb5b93); } /* Video quadratisch */ .lefx-ph-hero .lefx-ph-video { margin: 0; } .lefx-ph-hero .lefx-ph-video video { display: block; width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; background: #0a2b2a; } /* ============================================================ 2. ABSCHLUSSGRAFIK ============================================================ */ .lefx-ph-grafik.lefx-ph-grafik { margin-top: calc(var(--lefx-ph-hub) * -1) !important; margin-bottom: 0 !important; position: relative; z-index: 1; pointer-events: none; /* Die Grafik ist rechts unten transparent. Ohne eigenen Hintergrund scheint dort der dunkle Seitenhintergrund von Astra durch - im Mockup ist die Flaeche hell. Der obere Teil MUSS transparent bleiben: Dort liegt die Grafik ueber dem Farbverlauf des Hero. Deshalb wird erst unterhalb der Ueberlappung auf Weiss umgeschaltet. */ background: linear-gradient(180deg, transparent 0, transparent var(--lefx-ph-hub), #ffffff var(--lefx-ph-hub), #ffffff 100%); } .lefx-ph-grafik img { display: block; width: 100%; height: auto; position: relative; z-index: 1; } /* ============================================================ 3. TEXTBLOCK AUF DER GRAFIK ============================================================ Kein eigener Hintergrund - die dunkle Flaeche kommt aus der Grafik. Deshalb liegt der Block darueber statt darunter. */ .lefx-ph-band { /* WEISS, nicht transparent: Der Block selbst liegt unterhalb der Abschlussgrafik - sein Text wird nur nach oben darauf gezogen. Ohne Hintergrund schien dort der dunkle Seitenhintergrund als Streifen durch, gemessen 96px hoch. */ background: #ffffff; position: relative; z-index: 2; padding-bottom: clamp(24px, 3vw, 56px); } /* Klasse doppelt: erstes Kind der Gruppe, sonst setzt WordPress margin-block-start auf 0 und das negative margin verpufft. */ .lefx-ph-band.lefx-ph-band .lefx-ph-band-inner { max-width: var(--lefx-hero-width, clamp(1100px, 78vw, 1900px)); margin-inline: auto; padding-inline: 24px; margin-top: calc(var(--lefx-ph-band-hub) * -1) !important; position: relative; } /* Textspalte links, buendig mit der Ueberschrift im Hero */ .lefx-ph-band .lefx-ph-band-inner > * { max-width: 620px; margin-left: 0; margin-right: 0; } .lefx-ph-band .lefx-ph-kicker { margin: 0 0 18px; font-size: clamp(17px, 1.8vw, 26px); font-weight: 700; line-height: 1.4; letter-spacing: .18em; text-transform: uppercase; color: #fff; } .lefx-ph-band .lefx-ph-text { margin: 0; font-size: clamp(14px, 1.05vw, 17px); line-height: 1.75; color: rgba(255,255,255,.82); } /* Zweiter Absatz - auf der Team-Seite steht der Einleitungstext in zwei Absaetzen. Ohne diese Regel klebten sie aneinander. */ .lefx-ph-band .lefx-ph-text + .lefx-ph-text { margin-top: clamp(14px, 1.2vw, 22px); } /* ============================================================ MOBIL ============================================================ */ @media (max-width: 781px) { /* GROESSERE Ueberlappung als auf dem Desktop. Sie zieht die Grafik weiter nach oben, und genau dadurch verdeckt deren Oberkante die Unterkante des Videos. An mehreren Stellen quer gemessen bei 390px Breite: 15vw -> schlechteste Stelle -42px (Video sichtbar) 24vw -> -7px 30vw -> +17px 32vw -> rund +24px Die Untergrenze fuer die Kante zum Hero (14,6vw) ist damit ohnehin erfuellt. */ :root { --lefx-ph-hub: 32vw; } .lefx-ph-hero .lefx-ph-video { max-width: 460px; margin-inline: auto; } /* Wie auf der Startseite: Der untere Aussenabstand der Ueberschrift ist am Bildschirm der Zentriertrick. Stehen die Spalten untereinander, wird daraus blosser Leerraum - mit --lefx-ph-hub von 32vw sogar sehr viel. */ .lefx-ph-hero.lefx-ph-hero .lefx-ph-title { margin-bottom: clamp(18px, 5vw, 36px); } } /* ============================================================ KOPF AUF SCHMALEN GERAETEN WIE AUF DER STARTSEITE ============================================================ Ueberschrift und Video sitzen schmal schon auf derselben Hoehe wie auf der Startseite - gemessen bei 390px beide bei 120px bzw. 251px. Der Teaser stand dagegen 76px tiefer, und zwar bei jeder Breite gleich: 663 statt 587 bei 390px, 775 statt 699 bei 500px, 829 statt 754 bei 700px, 840 statt 760 bei 781px. Deshalb ein fester Wert und kein vw: Die Abweichung kommt aus dem Aufbau (Band im Fluss statt Text auf die Grafik gezogen), nicht aus der Fensterbreite. Zusammen mit dem entfallenden oberen Innenabstand ergeben -36px den passenden Versatz; nachgemessen auf der Team-Seite gegen die Startseite: 360px +4 390px +4 500px +4 700px -5 781px -2 Die dunkle Flaeche des Bandes gilt hier fuer ALLE Seiten mit diesem Kopf - auch fuer Blog und Showroom, die weiter oben ausgenommen sind. Ohne sie stand der Teaser auf der hellen Flaeche: auf der Blog-Seite gemessen 94px darunter. Die Klasse steht mehrfach: Die Regeln fuer den Zwischenbereich weiter oben bringen `body`, zwei Klassen und ein :not() mit. Bei gleicher Spezifitaet gewinnt die spaetere Regel - deshalb hier genau ein Schritt mehr, nicht `!important` allein. */ @media (max-width: 781px) { body .lefx-ph-band.lefx-ph-band.lefx-ph-band { background: var(--lefx-grafik-dunkel, #222222) !important; margin-top: calc(-1 * 20vw) !important; padding-bottom: clamp(32px, 8vw, 60px) !important; } body .lefx-ph-band.lefx-ph-band.lefx-ph-band.lefx-ph-band .lefx-ph-band-inner { margin-top: -36px !important; padding-top: 0 !important; } } /* ============================================================ ZWEITE GRAFIK FUER SCHMALE FENSTER (782-2559px) ============================================================ Das Problem: Die Schriftgroessen sind nach oben gedeckelt, der Teaser bleibt also rund 255px hoch, waehrend die dunkle Form der Grafik mit der Fensterbreite schrumpft. Sie bietet nur 17,1vw - unter etwa 1300px reicht das nicht, der weisse Text lief auf die helle Flaeche. Loesung: eine zweite Grafik mit tieferer Diagonale. grafik-abschluss-header-mobile.png ist 2559x1711, bei voller Breite also 66,9vw hoch. Gemessene Alphakanten: deckende Oberkante 0,2 % links bis 23,2 % bei 75 % Breite Unterkante der Form 75,9 % links, 91,5 % bei halber Breite -> 0,312 Prozentpunkte je Prozent Breite Daraus die Werte: Zug 22vw bleibt - noetig waeren 0,232 x 66,9 = 15,5vw, die Unterkante des Videos wird also weiter verdeckt. Band 52,8vw statt 34,4vw. Die Grafik ist 18,4vw hoeher, ihre Unterkante liegt entsprechend tiefer; mit demselben Aufschlag steht der Teaser wieder genau dort, wo er auf der Startseite steht (H - 7,9vw). Platz auf der dunklen Form damit 39,1vw statt 17,1vw: 782px 306px 1024px 400px 1279px 500px Der laengste Teaser braucht 255px - passt ueberall. Eingebaut als Pseudoelement, NICHT als zweiter background: Showroom und Blog ueberschreiben den Hintergrund der Grafik mit eigenen Verlaeufen. Ein background-image hier wuerde entweder von ihnen geloescht oder muesste ihre Verlaeufe mitschleppen. Das Bild im Markup bleibt stehen und gibt weiter die Hoehe vor (aspect-ratio auf das neue Verhaeltnis), ist aber unsichtbar. */ @media (min-width: 782px) and (max-width: 2559px) { :root { --lefx-ph-band-hub: 52.8vw; } .lefx-ph-grafik.lefx-ph-grafik img { aspect-ratio: 2559 / 1711; height: auto; visibility: hidden; } .lefx-ph-grafik.lefx-ph-grafik::after { content: ""; position: absolute; inset: 0; background: url("https://test.lefx.de/wp-content/uploads/2026/09/grafik-abschluss-header-mobile.png") top center / 100% 100% no-repeat; z-index: 1; pointer-events: none; } } /* ============================================================ LEFX Profession-Seite - Abschnitt je Leistung ============================================================ Passt zu ph-story-blocks.html. Bewusst allgemein gehalten: Auf der Seite folgen sechs solcher Abschnitte. Fuer die gespiegelte Variante - Grafik links, Box rechts - genuegt die Zusatzklasse "is-gespiegelt" am aeusseren Block. Struktur: .lefx-pf-story group, volle Breite, hell .lefx-pf-inner group, flex: Titel | Box | Grafik .lefx-pf-vtitle h3, um 90 Grad gedreht, gruen .lefx-pf-box group, petrol .lefx-pf-boxtitle h4 .lefx-pf-text p (mehrfach) .lefx-pf-bild figure > img, ueberlappt die Box ============================================================ */ :root { /* Wie weit die Grafik ueber die rechte Kante der Box ragt. */ --lefx-pf-ueberlappung: clamp(60px, 9vw, 190px); } /* Astra begrenzt Bloecke auf die Inhaltsbreite - Begruendung siehe Header-CSS der Startseite. */ .lefx-pf-story { max-width: none !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; } /* ============================================================ 1. ABSCHNITT ============================================================ */ .lefx-pf-story { /* transparent - der Farbverlauf liegt im Rahmenblock */ background: transparent; padding-block: clamp(32px, 4vw, 80px) !important; /* Muss ueber dem Textblock des Headers liegen. Der hat eine weisse Flaeche und z-index 2 - ohne diesen Wert legt er sich ueber die gruene Box, weil deren Inhalt um --lefx-pf-header-hub nach oben gezogen wird. Gemessen: 380px Ueberlappung, sichtbar als weisser Streifen quer ueber der Box. */ position: relative; z-index: 3; } /* Klasse doppelt: erstes Kind der Gruppe, sonst setzt WordPress margin-block-start auf 0 - siehe Header-CSS der Startseite. */ .lefx-pf-story.lefx-pf-story .lefx-pf-inner { max-width: var(--lefx-hero-width, clamp(1100px, 78vw, 1900px)); margin-inline: auto; margin-top: 0 !important; padding-inline: 24px; /* wie der Abstand zum Kachelraster auf der Startseite - dadurch beginnt die Box auf derselben Linie */ gap: clamp(28px, 5vw, 96px); /* buendig mit den gedrehten Ueberschriften der Startseite */ padding-left: calc(24px + var(--lefx-band-indent, clamp(0px, 7vw, 120px))); } /* ============================================================ 2. GEDREHTE UEBERSCHRIFT ============================================================ */ .lefx-pf-story .lefx-pf-vtitle { writing-mode: vertical-rl; transform: rotate(180deg); margin: 0; align-self: center; flex: 0 0 auto; /* identisch mit den gedrehten Ueberschriften der Startseite */ font-size: clamp(19px, 1.8vw, 30px); font-weight: 700; letter-spacing: .22em; text-transform: uppercase; line-height: 1; color: var(--lefx-petrol, #027775); white-space: nowrap; } /* ============================================================ 3. TEXTBOX ============================================================ */ .lefx-pf-story .lefx-pf-box { flex: 1 1 auto; min-width: 0; margin: 0; background: var(--lefx-petrol, #027775); /* Rechts mehr Innenabstand als links: Die Grafik ragt von rechts in die Box und darf den Text nicht ueberdecken. */ padding: clamp(26px, 3vw, 56px) calc(var(--lefx-pf-ueberlappung) + clamp(20px, 2vw, 40px)) clamp(30px, 3.4vw, 64px) clamp(24px, 2.6vw, 48px); border-radius: 8px; /* liegt unter der Grafik */ position: relative; z-index: 1; align-self: flex-start; } .lefx-pf-story .lefx-pf-boxtitle { margin: 0 0 clamp(18px, 2vw, 30px); /* wie .lefx-usp-title auf der Startseite */ font-size: clamp(17px, 1.5vw, 23px); font-weight: 700; line-height: 1.35; letter-spacing: .12em; text-transform: uppercase; color: #fff; } .lefx-pf-story .lefx-pf-text { margin: 0 0 clamp(14px, 1.4vw, 24px); font-size: clamp(13px, 1vw, 16px); line-height: 1.7; color: rgba(255,255,255,.9); } .lefx-pf-story .lefx-pf-text:last-of-type { margin-bottom: 0; } /* ============================================================ 4. GRAFIK ============================================================ Ueberlappt die Box von rechts. Das negative margin nimmt genau den Betrag zurueck, der oben als zusaetzlicher Innenabstand in der Box steckt - dadurch bleibt der Text frei. */ /* Groesser als zuvor, und bewusst tiefer gesetzt: Die Box beginnt oberhalb des Bildes und endet frueher. */ .lefx-pf-story .lefx-pf-bild { flex: 0 0 clamp(240px, 28vw, 580px); margin: clamp(28px, 4vw, 80px) 0 0 calc(var(--lefx-pf-ueberlappung) * -1); position: relative; z-index: 2; align-self: flex-start; } .lefx-pf-story .lefx-pf-bild img { display: block; width: 100%; height: auto; } /* Bild waagerecht spiegeln. Am Bildblock die zusaetzliche Klasse "is-gespiegelt-bild" setzen (im Editor unter Erweitert -> Zusaetzliche CSS-Klassen). Gespiegelt wird nur das Bild, nicht der ganze Block - sonst waeren Ueberlappung und Ausrichtung mitgedreht. */ .lefx-pf-story .lefx-pf-bild.is-gespiegelt-bild img { transform: scaleX(-1); } /* ============================================================ 5. ERSTER ABSCHNITT - ueberlappt die Abschlussgrafik ============================================================ Am aeusseren Block zusaetzlich die Klasse "is-erste" setzen. Nach oben gezogen werden Box, Grafik UND die gedrehte Ueberschrift - sie soll auf Hoehe der Box bleiben. Der Wert ist so gewaehlt, dass die Ueberschrift dabei unterhalb der dunklen Flaeche bleibt: gemessen 183px Abstand bei 2000px Breite. */ .lefx-pf-story.is-erste { --lefx-pf-header-hub: 23vw; /* KEIN Zuschlag auf den unteren Innenabstand. Der Inhalt ist nach oben gezogen, der Abschnitt wird dadurch entsprechend kuerzer - und der Abstand zum naechsten Abschnitt ist derselbe wie zwischen allen anderen. Mit Zuschlag war er um --lefx-pf-header-hub groesser. */ } .lefx-pf-story.is-erste .lefx-pf-box, .lefx-pf-story.is-erste .lefx-pf-bild, .lefx-pf-story.is-erste .lefx-pf-vtitle { margin-top: calc(var(--lefx-pf-header-hub) * -1); } .lefx-pf-story.is-erste .lefx-pf-bild { margin-top: calc(clamp(28px, 4vw, 80px) - var(--lefx-pf-header-hub)); } /* ============================================================ 6. GESPIEGELTE VARIANTE ============================================================ Fuer die Abschnitte, in denen die Grafik links steht. Am aeusseren Block zusaetzlich die Klasse "is-gespiegelt" setzen. */ .lefx-pf-story.is-gespiegelt .lefx-pf-inner { flex-direction: row-reverse; } .lefx-pf-story.is-gespiegelt .lefx-pf-box { padding-left: calc(var(--lefx-pf-ueberlappung) + clamp(20px, 2vw, 40px)); padding-right: clamp(24px, 2.6vw, 48px); } .lefx-pf-story.is-gespiegelt .lefx-pf-bild { margin: clamp(28px, 4vw, 80px) calc(var(--lefx-pf-ueberlappung) * -1) 0 0; } /* Die gedrehte Ueberschrift bleibt links. Bei "row-reverse" laeuft die Anordnung von rechts nach links - das Element mit dem HOECHSTEN order-Wert landet also ganz links. Deshalb 1 und nicht -1. Ergebnis von links nach rechts: Ueberschrift, Grafik, Box. */ .lefx-pf-story.is-gespiegelt .lefx-pf-vtitle { order: 1; } /* ============================================================ MOBIL ============================================================ */ /* Bis 1400px steht der Teaser im Kopf in einer eigenen dunklen Flaeche (siehe lefx-ph-header.css) und damit tiefer. Mit dem vollen Zug von 23vw schob sich die erste Box darueber - gemessen 91px bei 797px, 135px bei 1024px, 168px bei 1200px. Mit 6vw bleiben ueberall 35 bis 44px Abstand. */ @media (max-width: 1400px) { .lefx-pf-story.is-erste { --lefx-pf-header-hub: 6vw; } } @media (max-width: 781px) { .lefx-pf-story.lefx-pf-story .lefx-pf-inner, .lefx-pf-story.is-gespiegelt .lefx-pf-inner { flex-direction: column; padding-left: 24px; } .lefx-pf-story .lefx-pf-vtitle { writing-mode: horizontal-tb; transform: none; align-self: center; text-align: center; margin-bottom: 16px; /* Reihenfolge zuruecksetzen: In der Spalte wuerde order:1 die Ueberschrift ans ENDE schieben - gemessen stand sie hinter Box und Grafik statt davor. */ order: 0 !important; } /* Der erste Abschnitt ueberlappt hier nichts - die Abschlussgrafik ist auf schmalen Geraeten zu klein dafuer. */ .lefx-pf-story.is-erste .lefx-pf-box, .lefx-pf-story.is-erste .lefx-pf-bild, .lefx-pf-story.is-erste .lefx-pf-vtitle { margin-top: 0 !important; } /* Die Grafik steht unter der Box, keine Ueberlappung. */ .lefx-pf-story .lefx-pf-box, .lefx-pf-story.is-gespiegelt .lefx-pf-box { padding-left: clamp(24px, 2.6vw, 48px); padding-right: clamp(24px, 2.6vw, 48px); width: 100%; } .lefx-pf-story .lefx-pf-bild, .lefx-pf-story.is-gespiegelt .lefx-pf-bild { margin: clamp(16px, 4vw, 32px) 0 0; flex-basis: auto; max-width: 460px; align-self: center; } } /* ============================================================ 7. RAHMENBLOCK UM ALLE ABSCHNITTE ============================================================ Traegt den Farbverlauf von Weiss nach Mint ueber die gesamte Hoehe der sieben Abschnitte. Bewusst ein Rahmenblock und keine Regel auf die Seiten-Kennung: Ein Duplikat der Seite bekommt eine neue Kennung, und der Verlauf waere dort still verschwunden. padding: 0 - eine Gruppe gibt ihren Kindern sonst 48px Innenabstand, und die Abschnitte liefen nicht mehr randlos. */ .lefx-pf-bereich { max-width: none !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; /* Unten Platz fuer das weisse Overlay des naechsten Abschnitts. Ohne diesen Wert ragte es 260px in die letzte Box hinein - gemessen bei 2000px Fensterbreite. */ padding: 0 0 var(--lefx-pw-hub, 17vw) !important; background: linear-gradient(180deg, #ffffff 0%, #ffffff 16%, #eaf5f2 58%, #cfe8e1 100%); } /* ============================================================ 8. DUNKLE VARIANTE ============================================================ Zusatzklasse "is-dunkel" am aeusseren Block. */ .lefx-pf-story.is-dunkel .lefx-pf-box { background: var(--lefx-dark, #232323); } /* ============================================================ 9. HINWEISZEILE ============================================================ "Anwendungsbeispiel: ..." am Fuss der Box. */ .lefx-pf-story .lefx-pf-hinweis { margin: clamp(20px, 2.2vw, 36px) 0 0; font-size: clamp(12px, .9vw, 14px); line-height: 1.6; color: rgba(255,255,255,.7); } /* Mit der zweiten Grafik (782-2559px, siehe lefx-ph-header.css) liegt die dunkle Form viel tiefer. Der erste Abschnitt soll sie wieder ueberlappen. Gemessen bei 1024px: Textende des Teasers 729px, Unterkante der Form links 893px, Box bisher bei 1151px. Der Wert stellt sie auf 698/815/946px bei 782/1024/1279px, also 47 bis 122px unter dem Teaser. Der feste Abzug von 32px ist noetig, weil die Texthoehe nicht mit der Breite schrumpft: ohne ihn blieben schmal nur 15px Abstand. */ @media (min-width: 782px) and (max-width: 2559px) { .lefx-pf-story.is-erste { --lefx-pf-header-hub: calc(40vw - 32px); } /* Die gedrehte Ueberschrift steht links, wo die Unterkante der dunklen Form am hoechsten liegt. Mit dem vollen Zug ragte ihr oberer Teil bei Zwischengroessen darauf - gruen auf dunkel, kaum lesbar. Sie bekommt deshalb 100 bis 280px weniger Zug als Box und Bild und bleibt damit auf der hellen Flaeche. */ .lefx-pf-story.is-erste .lefx-pf-vtitle { margin-top: calc(var(--lefx-pf-header-hub) * -1 + clamp(100px, 11vw, 300px)); } } /* ============================================================ LEFX Profession-Seite - "Wir arbeiten mit" und Showroom ============================================================ Passt zu ph-tools-blocks.html. Aufbau wie der Abschnitt "Unsere Kunden" der Startseite: ein weisses Overlay ragt als Dreieck in den Farbverlauf darueber, darunter das Logoraster. Zusaetzlich rechts eine Farbflaeche mit Button. Struktur: .lefx-pw-overlay figure > img, volle Breite .lefx-pw-tools group, volle Breite, weiss .lefx-pw-inner group, flex: links | Farbflaeche .lefx-pw-links group .lefx-pw-title h2, waagerecht, gruen .lefx-pw-grid group, 4 Spalten .lefx-pw-logo figure > img (12 Stueck) .lefx-pw-box group, petrol .lefx-pw-vorzeile p .lefx-pw-boxtitle h2 .lefx-pw-text p .lefx-pw-btn Button, ragt links heraus ============================================================ */ :root { /* Wie weit das Overlay in den Abschnitt darueber ragt. Dieselbe Grafik wie auf der Startseite: 2560x1044, bei voller Breite 40,8vw hoch, tiefste Alpha-Kante bei 39,2 % - also mindestens 16,0vw noetig. 17vw laesst Reserve. */ --lefx-pw-hub: 17vw; /* Wie weit die Farbflaeche nach oben ins Overlay ragt. 35vw sorgt dafuer, dass sie die Diagonale schneidet - gemessen bei 2000px Fensterbreite ragt knapp ein Drittel der Flaeche darueber hinaus, wie im Mockup. */ --lefx-pw-box-hub: 35vw; /* Abstand der Ueberschrift "Wir arbeiten mit" zur Oberkante. Bewusst NICHT an --lefx-pw-box-hub gekoppelt: Sie soll etwa auf halber Hoehe der Farbflaeche stehen, gemessen 4px Abweichung. */ --lefx-pw-links-oben: clamp(80px, 9vw, 200px); /* Wie weit der Button ueber die LINKE Kante der Flaeche ragt. */ --lefx-pw-btn-ueberstand: clamp(56px, 5.5vw, 120px); } /* Astra begrenzt Bloecke auf die Inhaltsbreite - Begruendung siehe Header-CSS der Startseite. */ .lefx-pw-tools, .lefx-pw-overlay { max-width: none !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; } /* ============================================================ 1. OVERLAY ============================================================ */ .lefx-pw-overlay.lefx-pw-overlay { margin-top: calc(var(--lefx-pw-hub) * -1) !important; margin-bottom: -1px !important; position: relative; z-index: 1; pointer-events: none; } .lefx-pw-overlay img { display: block; width: 100%; height: auto; } /* ============================================================ 2. ABSCHNITT ============================================================ */ .lefx-pw-tools { background: #ffffff; padding-top: 0 !important; padding-bottom: clamp(48px, 6vw, 110px) !important; position: relative; z-index: 2; /* verhindert, dass der negative Abstand des Inhalts an den Abschnitt weiterwandert - siehe Startseite */ display: flow-root; } /* Klasse doppelt: erstes Kind der Gruppe. */ .lefx-pw-tools.lefx-pw-tools .lefx-pw-inner { max-width: var(--lefx-hero-width, clamp(1100px, 78vw, 1900px)); margin-inline: auto; margin-top: calc(var(--lefx-pw-box-hub) * -1) !important; padding-inline: 24px; /* Derselbe Einzug wie bei den gedrehten Ueberschriften der Leistungsabschnitte - dadurch beginnen "Wir arbeiten mit" und das Logoraster genau auf deren Linie. Gemessen: 0px Abweichung. */ padding-left: calc(24px + var(--lefx-band-indent, clamp(0px, 7vw, 120px))); gap: clamp(28px, 5vw, 110px); /* Ueberschrift und Farbflaeche stehen in einer Zeile und enden unten buendig. Das Logoraster bricht in die naechste Zeile um. "align-items: flex-end" macht die Ausrichtung exakt und selbstjustierend - ein fester Abstand haette nicht gereicht: Die noetige Verschiebung lag bei 329px bei 2000px Breite, aber bei 351px bei 1400px. */ flex-wrap: wrap !important; align-items: flex-end; } /* ============================================================ 3. LINKE SPALTE ============================================================ */ .lefx-pw-tools .lefx-pw-links { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; } .lefx-pw-tools .lefx-pw-title { margin: 0; font-size: clamp(19px, 1.8vw, 30px); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; line-height: 1.3; color: var(--lefx-petrol, #027775); } /* ============================================================ 4. LOGORASTER ============================================================ */ /* Eigene Zeile unterhalb von Ueberschrift und Farbflaeche. Die Breite entspricht der bisherigen linken Spalte. */ .lefx-pw-tools .lefx-pw-grid { flex: 0 0 100%; max-width: clamp(480px, 48vw, 1100px); gap: clamp(20px, 2.6vw, 52px); margin: clamp(24px, 3vw, 56px) 0 0; align-items: center; justify-items: center; } .lefx-pw-tools .lefx-pw-logo { margin: 0; width: 100%; display: flex; align-items: center; justify-content: center; } .lefx-pw-tools .lefx-pw-logo img { display: block; width: auto; max-width: 100%; height: auto; max-height: clamp(44px, 3.6vw, 74px); object-fit: contain; } /* ============================================================ 5. FARBFLAECHE MIT BUTTON ============================================================ */ .lefx-pw-tools .lefx-pw-box { flex: 0 0 clamp(280px, 22vw, 460px); margin: 0; background: var(--lefx-petrol, #027775); /* rundum, nicht nur unten: Die Flaeche ist vollstaendig sichtbar und wirkte oben sonst angeschnitten. */ border-radius: 8px; /* Links mehr Innenabstand: Der Button ragt von links herein und darf den Text nicht ueberdecken. */ /* Unten so viel Platz, dass der Button unter dem letzten Absatz steht. Der Innenabstand links haelt nur den UEBERSTAND frei - der Button ragt aber mit seiner ganzen Breite in die Box, bei 900px gemessen 156px bei 56px Ueberstand. Er schnitt damit die letzte Textzeile an. 72px = Abstand von unten (max 40px) plus Buttonhoehe (40px). */ padding: clamp(26px, 3vw, 52px) clamp(22px, 2.2vw, 44px) clamp(72px, 6vw, 110px) calc(var(--lefx-pw-btn-ueberstand) + clamp(16px, 1.6vw, 32px)); position: relative; } .lefx-pw-tools .lefx-pw-vorzeile { margin: 0 0 12px; font-size: clamp(13px, 1vw, 16px); line-height: 1.5; color: rgba(255,255,255,.92); } .lefx-pw-tools .lefx-pw-boxtitle { margin: 0 0 clamp(16px, 1.8vw, 28px); font-size: clamp(19px, 1.7vw, 26px); font-weight: 700; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; color: #fff; } .lefx-pw-tools .lefx-pw-text { margin: 0; font-size: clamp(13px, 1vw, 16px); line-height: 1.7; color: rgba(255,255,255,.9); } /* -- Button, ueberlagert die LINKE Kante -- */ .lefx-pw-tools .lefx-pw-buttons { position: absolute; left: calc(var(--lefx-pw-btn-ueberstand) * -1); bottom: clamp(18px, 2.4vw, 40px); margin: 0; } .lefx-pw-tools .lefx-pw-btn .wp-block-button__link { background: var(--lefx-dark, #232323); color: #fff; font-size: clamp(13px, 1vw, 16px); font-weight: 400; line-height: 1.4; letter-spacing: .02em; padding: clamp(11px, 1.1vw, 16px) clamp(16px, 1.6vw, 26px); border-radius: 6px; white-space: nowrap; transition: background .2s; } .lefx-pw-tools .lefx-pw-btn .wp-block-button__link:hover, .lefx-pw-tools .lefx-pw-btn .wp-block-button__link:focus-visible { background: #000; } /* ============================================================ MOBIL ============================================================ */ @media (max-width: 1024px) { .lefx-pw-tools .lefx-pw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 781px) { .lefx-pw-tools.lefx-pw-tools .lefx-pw-inner { flex-wrap: wrap; margin-top: calc(var(--lefx-pw-box-hub) * -0.5) !important; } /* Reihenfolge auf schmalen Geraeten: erst die Farbflaeche, dann die Ueberschrift, dann die Logos. Ohne die Angabe beim Raster stand es an erster Stelle. */ .lefx-pw-tools .lefx-pw-links { flex-basis: 100%; padding-top: clamp(24px, 6vw, 48px); order: 2; } .lefx-pw-tools .lefx-pw-grid { order: 3; } .lefx-pw-tools .lefx-pw-box { flex-basis: 100%; order: 1; border-radius: 8px; /* Der Button rueckt nach unten in die Flaeche. */ padding-left: clamp(22px, 2.2vw, 44px); padding-bottom: clamp(76px, 18vw, 120px); } .lefx-pw-tools .lefx-pw-buttons { left: clamp(22px, 2.2vw, 44px); } .lefx-pw-tools .lefx-pw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ============================================================ LEFX Showroom-Seite - Filterleiste ============================================================ Passt zu sh-header-blocks.html. Der Header selbst nutzt die Klassen der Profession-Seite (lefx-ph-*). Hier steht nur, was zusaetzlich dazukommt: die Reihe der Filterbuttons im unteren Bereich der Grafik. Die Kategorie steckt in einer Klasse, NICHT in einem data-Attribut: Zusaetzliche Attribute am Link wuerden die Blockpruefung von WordPress ausloesen ("Dieser Block enthaelt unerwarteten Inhalt"). Klassen sind unbedenklich. .lefx-sh-filter Buttonleiste .lefx-sh-filter-btn einzelner Button .is-kat-alle zeigt alles .is-kat-games usw. .is-aktiv aktuell gewaehlt ============================================================ */ /* ============================================================ 0. HELLE FLAECHE STATT WEISS ============================================================ Grafik und Textband stammen von der Profession-Seite und fuellen ihren unteren Bereich mit Weiss. Direkt darunter folgt hier der Farbverlauf des Projektrasters, der oben Mint ist - dazwischen entstand ein weisser Streifen. Deshalb wird die Fuellung auf derselben Mint-Stufe angesetzt, mit der das Raster beginnt. Eigene Klassen (lefx-sh-grafik, lefx-sh-band), damit die Profession-Seite weiss bleibt. */ .lefx-sh-grafik.lefx-sh-grafik { background: linear-gradient(180deg, transparent 0, transparent var(--lefx-ph-hub), var(--lefx-sh-verlauf-oben, #cfe8e1) var(--lefx-ph-hub), var(--lefx-sh-verlauf-oben, #cfe8e1) 100%); } .lefx-sh-band.lefx-sh-band { background: var(--lefx-sh-verlauf-oben, #cfe8e1); } /* ============================================================ 1. FILTERLEISTE ============================================================ */ .lefx-ph-band .lefx-sh-filter { /* Deutlich mehr Abstand nach oben als nach unten: Die Leiste gehoert optisch zu den Kacheln, nicht zum Text darueber. */ margin: clamp(48px, 7.5vw, 150px) 0 0; gap: clamp(8px, .9vw, 14px); /* darf breiter laufen als die Textspalte */ max-width: none; } .lefx-sh-filter .lefx-sh-filter-btn .wp-block-button__link { background: var(--lefx-petrol, #027775); color: #fff; /* Buttongroesse der uebrigen Seiten */ font-size: clamp(12px, .9vw, 14px); font-weight: 400; line-height: 1.3; letter-spacing: .02em; padding: clamp(7px, .8vw, 11px) clamp(11px, 1.1vw, 18px); border-radius: 3px; white-space: nowrap; cursor: pointer; transition: background .2s, color .2s; } .lefx-sh-filter .lefx-sh-filter-btn .wp-block-button__link:hover, .lefx-sh-filter .lefx-sh-filter-btn .wp-block-button__link:focus-visible { background: var(--lefx-mint, #70c2b4); color: var(--lefx-dark, #232323); } /* aktuell gewaehlter Filter */ .lefx-sh-filter .lefx-sh-filter-btn.is-aktiv .wp-block-button__link { background: var(--lefx-mint, #70c2b4); color: var(--lefx-dark, #232323); } /* ============================================================ MOBIL ============================================================ Auf schmalen Geraeten bricht die Leiste um. Ein waagerechtes Scrollen waere hier unpraktisch, weil die Leiste auf der dunklen Flaeche liegt und ihr Rand nicht sichtbar ist. */ /* Schmal (unter 782px) steht der Kopf gestapelt - dort gilt die gemeinsame Mobilregel aus lefx-ph-header.css. Fuer die Breiten darueber braucht der Showroom nichts Eigenes mehr: Die dunkle Form der Grafik wird bei Bedarf verlaengert, statt sie mit einem Rechteck abzudecken. */ @media (max-width: 781px) { .lefx-ph-band .lefx-sh-filter { margin-top: clamp(20px, 5vw, 36px); gap: 6px; } .lefx-sh-filter .lefx-sh-filter-btn .wp-block-button__link { font-size: 12px; padding: 7px 11px; } } /* ============================================================ LEFX Showroom-Seite - Projektraster ============================================================ Passt zu sh-projekte-blocks.html. Struktur: .lefx-sh-projekte group, volle Breite .lefx-sh-raster group, 2 Spalten .lefx-sh-karte group, dunkel, verlinkt .lefx-sh-karte-bild figure > img .lefx-sh-karte-titel h3 > a .lefx-sh-karte-unter p Die Kategorien stehen als Klassen an der Kachel (is-kat-story, is-kat-games, ...). Der Filter blendet ueber diese Klassen ein und aus - siehe lefx-filter.js. ============================================================ */ /* Astra begrenzt Bloecke auf die Inhaltsbreite - Begruendung siehe Header-CSS der Startseite. */ .lefx-sh-projekte { max-width: none !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; } /* ============================================================ 1. ABSCHNITT ============================================================ */ :root { /* Wie weit die erste Kachelreihe in die Abschlussgrafik des Headers hineinragt. Derselbe Wert wie auf der Profession-Seite, wo die gruene Box denselben Weg nimmt. */ --lefx-sh-hub: 15vw; /* Startfarbe des Verlaufs. Grafik und Textband des Headers nutzen denselben Wert als Fuellung, damit dazwischen kein weisser Streifen steht - siehe lefx-sh-filter.css. */ --lefx-sh-verlauf-oben: #cfe8e1; } .lefx-sh-projekte { /* Oben Mint, unten Weiss. */ background: linear-gradient(180deg, var(--lefx-sh-verlauf-oben) 0%, #eaf5f2 45%, #ffffff 100%); /* KEIN oberer Innenabstand: Die Kacheln sollen ueber die Abschnittskante nach oben hinausragen. */ padding-top: 0 !important; /* Bewusst NICHT um --lefx-sh-hub erhoeht: Das haette den nach oben gezogenen Inhalt rechnerisch ausgeglichen, ergab aber gemessen rund 550px weissen Streifen ueber der Abschlussgrafik. */ padding-bottom: clamp(48px, 6vw, 110px) !important; /* Muss ueber dem Textblock des Headers liegen - der hat eine eigene Flaeche mit z-index 2. */ position: relative; z-index: 3; /* verhindert, dass der negative Abstand des Rasters an den Abschnitt weiterwandert statt die Kacheln zu ziehen */ display: flow-root; } /* Klasse doppelt: erstes Kind der Gruppe - sonst setzt WordPress margin-block-start auf 0. */ .lefx-sh-projekte.lefx-sh-projekte .lefx-sh-raster { max-width: var(--lefx-hero-width, clamp(1100px, 78vw, 1900px)); margin-inline: auto; /* zieht die Kacheln nach oben in die Abschlussgrafik */ margin-top: calc(var(--lefx-sh-hub) * -1) !important; padding-inline: 24px; gap: clamp(16px, 2vw, 40px); } /* ============================================================ 2. KACHEL ============================================================ */ .lefx-sh-projekte .lefx-sh-karte { margin: 0; padding: 0 0 clamp(16px, 1.8vw, 28px); /* Farbverlauf statt einfarbigem Dunkelgrau: Auf der dunklen Abschlussgrafik war die Kante der Kachel nicht mehr zu erkennen - beide Flaechen hatten denselben Ton. Von unten gerechnet, nicht von oben: Sichtbar ist nur der Streifen unter dem Bild, und der ist je nach Spaltenbreite rund 80 bis 120px hoch. Oben beginnt er mit einer Mischung aus Petrol und Dunkelgrau (haelftig), unten laeuft er in das Dunkelgrau des Styleguides. Alles oberhalb liegt hinter dem Bild und ist nie zu sehen. */ background: linear-gradient(to top, var(--lefx-dark, #232323) 0, #124d4c clamp(80px, 5.6vw, 120px)); border-radius: 6px; overflow: hidden; /* Bezug fuer die Klickflaeche der Ueberschrift */ position: relative; transition: transform .2s; } .lefx-sh-projekte .lefx-sh-karte:hover { transform: translateY(-3px); } .lefx-sh-projekte .lefx-sh-karte-bild { margin: 0 0 clamp(14px, 1.6vw, 24px); } .lefx-sh-projekte .lefx-sh-karte-bild img { display: block; width: 100%; /* Dasselbe Verhaeltnis wie in den Galerien der Projektbeitraege. Die Kachelbilder liegen in 1024x550 vor, also praktisch deckungsgleich - mit den vorherigen 16:10 waeren sie an den Seiten um rund 14 % beschnitten worden. cover, NICHT contain: Der Unterschied zwischen 1,862 (1024x550) und 1,874 (1600x854) betraegt weniger als ein Prozent. Beim Einpassen blieben davon oben und unten schmale dunkle Streifen stehen; so fuellt das Bild die Kachel und verliert dafuer einen kaum sichtbaren Rand. Das Seitenverhaeltnis des Bildes selbst bleibt dabei unveraendert. */ aspect-ratio: 1600 / 854; height: auto; object-fit: cover; background: var(--lefx-dark, #232323); } /* -- Ueberschrift -- Der Link darin deckt die ganze Kachel ab. So ist die komplette Flaeche klickbar, ohne dass mehrere Links noetig sind - und Tastatur und Vorleseprogramme bekommen genau EIN Ziel. */ .lefx-sh-projekte .lefx-sh-karte-titel { margin: 0 clamp(16px, 1.8vw, 28px) 6px; /* Zwischenueberschrift der uebrigen Seiten */ font-size: clamp(17px, 1.5vw, 23px); font-weight: 400; line-height: 1.3; } .lefx-sh-projekte .lefx-sh-karte-titel a { color: var(--lefx-mint, #70c2b4); text-decoration: none; } .lefx-sh-projekte .lefx-sh-karte-titel a::after { content: ""; position: absolute; inset: 0; } .lefx-sh-projekte .lefx-sh-karte:hover .lefx-sh-karte-titel a { color: #fff; } .lefx-sh-projekte .lefx-sh-karte-titel a:focus-visible { outline: 2px solid var(--lefx-mint, #70c2b4); outline-offset: 3px; } .lefx-sh-projekte .lefx-sh-karte-unter { margin: 0 clamp(16px, 1.8vw, 28px); /* Fliesstextgroesse der uebrigen Seiten */ font-size: clamp(13px, 1vw, 16px); line-height: 1.5; color: rgba(255,255,255,.6); } /* ============================================================ 2b. TEXTKACHEL ============================================================ Gleiches Format wie eine Kachel, aber ohne Bild und ohne Link. Traegt bewusst NICHT die Klasse lefx-sh-karte, sonst wuerde der Filter sie mit ausblenden. */ .lefx-sh-projekte .lefx-sh-textkarte { margin: 0; padding: clamp(24px, 2.6vw, 44px) clamp(16px, 1.8vw, 28px); border-radius: 6px; background: linear-gradient(135deg, var(--lefx-petrol, #027775) 0%, var(--lefx-mint, #70c2b4) 100%); /* Der Text sitzt unten, wie die Beschriftung der Bildkacheln. */ display: flex; flex-direction: column; justify-content: flex-end; } .lefx-sh-projekte.lefx-sh-projekte .lefx-sh-textkarte-titel { margin: 0 0 clamp(10px, 1vw, 16px) !important; font-size: clamp(17px, 1.5vw, 23px); font-weight: 400; line-height: 1.3; color: #fff; } .lefx-sh-projekte.lefx-sh-projekte .lefx-sh-textkarte-text { margin: 0 !important; font-size: clamp(13px, 1vw, 16px); line-height: 1.7; color: #fff; } /* ============================================================ 3. AUSGEFILTERTE KACHELN ============================================================ Wird von lefx-filter.js gesetzt. */ .lefx-sh-karte.is-versteckt, .lefx-sh-textkarte.is-versteckt { display: none; } /* ============================================================ UEBERLAPPUNG NACH FENSTERBREITE ============================================================ Die Ueberlappung ist ein fester Anteil der Fensterbreite, der Platzbedarf der Filterleiste darueber aber nicht: Sie bricht auf schmalen Fenstern in mehrere Zeilen um und wird dadurch HOEHER, waehrend die dunkle Flaeche der Grafik flacher wird. Bei 1024px Breite deckten die Kacheln die Filter zu. In CSS laesst sich die Hoehe der Leiste nicht abfragen, deshalb wird die Ueberlappung stufenweise zurueckgenommen - passend zu der Breite, bei der die Leiste jeweils eine Zeile mehr braucht. ============================================================ */ /* 1850px statt 1400px: Zwischen 1400 und 1750 lagen die Kacheln mit 23vw ueber der Filterleiste - gemessen 84px bei 1401, 85px bei 1500, 18px bei 1700. Mit 16vw beginnen sie ueberall darunter. Ab 1850px reicht 23vw wieder, dort ist die Leiste einzeilig und der Kopf entsprechend hoeher. */ /* Neu vermessen nach der Umstellung auf die gemeinsame Kopf-Geometrie. Vorher lagen die Kacheln wieder ueber der Leiste: -89px bei 1960px, -46px bei 1440px, -24px bei 2560px. Abstand Filterleiste -> erste Kachel mit diesen Werten: 900px +60 1024px +109 1040px +70 1200px +142 1440px +69 1960px +68 2560px +181 */ @media (max-width: 1850px) { :root { --lefx-sh-hub: 8vw; } } @media (max-width: 1200px) { :root { --lefx-sh-hub: 4vw; } } @media (max-width: 1024px) { :root { --lefx-sh-hub: 0vw; } } /* Zusaetzliche Absicherung: Die Filterleiste bleibt in JEDEM Fall lesbar. Der Abschnitt mit den Kacheln hat z-index 3, die Leiste liegt mit 4 darueber. */ .lefx-ph-band .lefx-sh-filter { position: relative; z-index: 4; } /* ============================================================ MOBIL ============================================================ */ @media (max-width: 781px) { /* Keine Ueberlappung: Die Abschlussgrafik ist auf schmalen Geraeten zu klein dafuer - dieselbe Entscheidung wie auf der Profession-Seite. */ .lefx-sh-projekte { padding-top: clamp(32px, 8vw, 60px) !important; padding-bottom: clamp(40px, 8vw, 72px) !important; } .lefx-sh-projekte.lefx-sh-projekte .lefx-sh-raster { margin-top: 0 !important; grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { .lefx-sh-projekte .lefx-sh-karte { transition: none; } .lefx-sh-projekte .lefx-sh-karte:hover { transform: none; } } /* Zweite Grafik (782-2559px): Das Raster ueberlappt die tiefer liegende dunkle Form wieder. Grenze ist die Filterleiste - sie darf nie verdeckt werden. Gemessen bei 1024px: Unterkante der Leiste 754/854/931px bei 782/1024/1279px. Der Wert laesst 72/55/73px Abstand, das Raster steht bei 826/909/1004px. Reines vw ging nicht: Die Leiste bricht schmal um, dort waere der Abstand auf 21px geschrumpft. */ @media (min-width: 782px) and (max-width: 2559px) { :root { --lefx-sh-hub: calc(50vw - 220px); } /* Filterleiste dichter an den Teaser. Sie und das Raster ruecken damit gemeinsam nach oben, und unter den Kacheln bleibt mehr von der dunklen Form sichtbar. */ .lefx-ph-band .lefx-sh-filter { margin-top: clamp(24px, 3vw, 48px); } } /* ============================================================ LEFX Showroom-Seite - Abschluss ============================================================ Passt zu sh-abschluss-blocks.html. Die Seite endet mit der schwarzen Grafik. Rechts im Inhaltsbereich liegt eine Farbflaeche darauf, der Button ragt ueber deren linke Kante hinaus - genau wie die Box im Abschnitt "Wir arbeiten mit" auf der Profession-Seite. Struktur: .lefx-sk-abschluss group, volle Breite, weiss .lefx-sk-grafik figure > img, volle Breite .lefx-sk-inner group, Inhaltsbreite, Box rechts .lefx-sk-box group, petrol .lefx-sk-vorzeile p .lefx-sk-boxtitle h2 .lefx-sk-buttons Button, ragt links heraus ============================================================ */ :root { /* Abstand der Farbflaeche zur OBERKANTE der Grafik. Die Flaeche soll die Diagonale schneiden: oben steht sie auf Weiss, unten auf Schwarz. Gemessen an der Vorschau lag die Diagonale an der Stelle der Flaeche rund 70px unter deren gewuenschter Oberkante. Sie wird ueberlagernd gesetzt, nicht mit einem negativen Abstand hochgezogen: Die Hoehe der Grafik haengt an der Fensterbreite, die Hoehe der Flaeche am Text. Mit einem negativen Abstand waere der Abschnitt je nach Breite kuerzer als die Grafik gewesen. */ --lefx-sk-box-oben: 6vw; /* Wie weit der Button ueber die LINKE Kante der Flaeche ragt. Derselbe Wert wie auf der Profession-Seite. */ --lefx-sk-btn-ueberstand: clamp(56px, 5.5vw, 120px); } /* Astra begrenzt Bloecke auf die Inhaltsbreite - Begruendung siehe Header-CSS der Startseite. */ .lefx-sk-abschluss, .lefx-sk-grafik { max-width: none !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; } /* ============================================================ 1. ABSCHNITT ============================================================ */ .lefx-sk-abschluss { /* SCHWARZ, nicht weiss: Alles unterhalb der Grafik gehoert zur schwarzen Flaeche und soll buendig am Footer enden. Auf schmalen Geraeten steht die Farbflaeche unter der Grafik, dort klaffte sonst ein weisser Streifen bis zum Footer. Das Weiss ueber der Diagonale kommt stattdessen aus der Grafik selbst - siehe unten. So braucht es keine Annahme ueber deren Hoehe. */ background: var(--lefx-grafik-dunkel, #222222); padding-top: 0 !important; padding-bottom: 0 !important; /* Die Grafik liegt INNERHALB dieser Gruppe, anders als die entsprechende Grafik auf der Profession-Seite. Gruppen bekommen von WordPress einen seitlichen Innenabstand (--wp--style--root--padding-left/right), und der lief hier als heller Streifen links und rechts neben der schwarzen Flaeche durch. Die Grafik selbst kann ihn nicht ueberschreiben - er gehoert dem Elternelement. */ padding-left: 0 !important; padding-right: 0 !important; /* Bezug fuer die ueberlagernde Farbflaeche */ position: relative; /* verhindert, dass Aussenabstaende der Kinder an den Abschnitt weiterwandern - siehe Startseite */ display: flow-root; } /* ============================================================ 2. GRAFIK ============================================================ */ /* Klasse doppelt: erstes Kind der Gruppe - sonst setzt WordPress margin-block-start auf 0. */ .lefx-sk-abschluss.lefx-sk-abschluss .lefx-sk-grafik { /* volle Breite, unabhaengig davon, was die Gruppe vorgibt */ width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; margin-top: 0 !important; /* -1px schliesst die Fuge zum Seitenfuss, die durch das Aufrunden der skalierten Bildhoehe entsteht. */ margin-bottom: -1px !important; position: relative; z-index: 1; pointer-events: none; } /* Die Grafik ist oberhalb ihrer Diagonale transparent. Dort soll Weiss stehen, damit der Uebergang vom Kachelabschnitt weiterlaeuft. Das Weiss sitzt deshalb an der Grafik selbst und nicht am Abschnitt - der ist unterhalb der Grafik schwarz. */ .lefx-sk-grafik.lefx-sk-grafik { background: #ffffff; } .lefx-sk-grafik img { display: block; width: 100%; height: auto; } /* ============================================================ 3. BOX ============================================================ */ .lefx-sk-abschluss.lefx-sk-abschluss .lefx-sk-inner { /* Liegt AUF der Grafik, statt sie mit einem negativen Abstand hochzuziehen - Begruendung siehe oben. */ position: absolute; top: var(--lefx-sk-box-oben); left: 0; right: 0; z-index: 2; max-width: var(--lefx-hero-width, clamp(1100px, 78vw, 1900px)); margin: 0 auto !important; padding-inline: 24px; /* Box am RECHTEN Rand des Inhaltsbereichs */ display: flex; justify-content: flex-end; } .lefx-sk-abschluss .lefx-sk-box { flex: 0 0 clamp(280px, 22vw, 460px); margin: 0; background: var(--lefx-petrol, #027775); border-radius: 8px; /* Links mehr Innenabstand: Der Button ragt von links herein und darf den Text nicht ueberdecken. */ padding: clamp(26px, 3vw, 52px) clamp(22px, 2.2vw, 44px) clamp(48px, 5vw, 88px) calc(var(--lefx-sk-btn-ueberstand) + clamp(16px, 1.6vw, 32px)); position: relative; } .lefx-sk-abschluss .lefx-sk-vorzeile { margin: 0 0 12px; font-size: clamp(13px, 1vw, 16px); line-height: 1.5; color: rgba(255,255,255,.92); } .lefx-sk-abschluss .lefx-sk-boxtitle { margin: 0; /* Groesser als die uebrigen Boxtitel: Die Kachel ist der Abschluss der Seite und traegt sonst nur zwei Zeilen Text. */ font-size: clamp(22px, 2.2vw, 34px); font-weight: 700; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; color: #fff; } /* -- Button, ueberlagert die LINKE Kante -- */ .lefx-sk-abschluss .lefx-sk-buttons { position: absolute; left: calc(var(--lefx-sk-btn-ueberstand) * -1); bottom: clamp(18px, 2.4vw, 40px); margin: 0; } .lefx-sk-abschluss .lefx-sk-btn .wp-block-button__link { background: var(--lefx-mint, #70c2b4); color: #fff; font-size: clamp(13px, 1vw, 16px); font-weight: 400; line-height: 1.4; letter-spacing: .02em; padding: clamp(11px, 1.1vw, 16px) clamp(16px, 1.6vw, 26px); border-radius: 6px; white-space: nowrap; text-decoration: none; transition: background .2s; } .lefx-sk-abschluss .lefx-sk-btn .wp-block-button__link:hover, .lefx-sk-abschluss .lefx-sk-btn .wp-block-button__link:focus-visible { background: var(--lefx-petrol-hell, #0a9490); } /* ============================================================ MOBIL ============================================================ Die Grafik ist auf schmalen Geraeten nur noch wenige hundert Pixel hoch - die Box passt dort nicht mehr darauf. Sie steht deshalb darunter auf voller Breite, wie auf der Profession-Seite. */ @media (max-width: 781px) { .lefx-sk-abschluss { padding-bottom: clamp(32px, 8vw, 60px) !important; } /* Ueberlagernd geht hier nicht: Die Grafik ist zu flach, die Flaeche stuende halb darunter. Sie kommt zurueck in den Textfluss. */ .lefx-sk-abschluss.lefx-sk-abschluss .lefx-sk-inner { /* "relative", NICHT "static": Die Grafik hat z-index 1. Ohne eigene Positionierung greift der z-index hier nicht mehr und die dunkle Flaeche lag ueber der Box. */ position: relative; margin-top: calc(-14vw) !important; } .lefx-sk-abschluss .lefx-sk-box { flex-basis: 100%; /* Der Button rueckt nach unten in die Flaeche. */ padding-left: clamp(22px, 2.2vw, 44px); padding-bottom: clamp(76px, 18vw, 120px); } .lefx-sk-abschluss .lefx-sk-buttons { left: clamp(22px, 2.2vw, 44px); } } /* ============================================================ LEFX Team-Seite - Personenraster ============================================================ Passt zu tm-team-blocks.html. Struktur: .lefx-tm-team group, volle Breite, weiss .lefx-tm-raster group, 4 Spalten .lefx-tm-person group .lefx-tm-bild figure > img .lefx-tm-bild-hover figure > img (nur bei zwei Kacheln) .lefx-tm-name p .lefx-tm-rolle p, Grossbuchstaben Die runden Ecken stecken bereits in den PNG-Dateien, das CSS setzt hier bewusst KEIN border-radius. ============================================================ */ :root { /* Wie weit das Raster nach oben in die Abschlussgrafik des Headers ragt. Es gibt eine Unter- UND eine Obergrenze: NACH UNTEN: Die Unterkante der dunklen Flaeche laeuft schraeg. Am linken Rand liegt sie am hoechsten - gemessen bei 2000px Fensterbreite 181px ueber der Oberkante der Bilder. Erst darueber ueberlappt auch die ERSTE Kachel. NACH OBEN: Der Name darf nicht auf die dunkle Flaeche geraten. Deren tiefster Punkt lag gemessen 348px unter der Oberkante der Bilder. Die Bilder sind quadratisch, bei vier Spalten also rund 17,5vw hoch. 20vw heisst: Der Name steht 1,9vw oberhalb der Unterkante der Grafik, der tiefste dunkle Punkt liegt 2,9vw darueber - er bleibt also auf Weiss. Die erste Kachel ueberlappt dabei um rund 60px. Beim Aendern gilt: Ueberstand ueber die Bildhoehe hinaus (hier 2,5vw) NICHT groesser als 2,9vw waehlen. */ --lefx-tm-hub: 20vw; } /* Astra begrenzt Bloecke auf die Inhaltsbreite - Begruendung siehe Header-CSS der Startseite. */ .lefx-tm-team { max-width: none !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; } /* ============================================================ 1. ABSCHNITT ============================================================ */ .lefx-tm-team { background: #ffffff; /* KEIN oberer Innenabstand: Das Raster ragt nach oben hinaus. */ padding-top: 0 !important; padding-bottom: clamp(48px, 6vw, 110px) !important; /* Muss ueber dem Textblock des Headers liegen - der hat z-index 2. */ position: relative; z-index: 3; /* verhindert, dass der negative Abstand des Rasters an den Abschnitt weiterwandert statt die Kacheln zu ziehen */ display: flow-root; } /* Klasse doppelt: erstes Kind der Gruppe - sonst setzt WordPress margin-block-start auf 0 und das negative margin verpufft. */ .lefx-tm-team.lefx-tm-team .lefx-tm-raster { max-width: var(--lefx-hero-width, clamp(1100px, 78vw, 1900px)); margin-inline: auto; margin-top: calc(var(--lefx-tm-hub) * -1) !important; padding-inline: 24px; gap: clamp(20px, 2.4vw, 48px) clamp(16px, 2vw, 40px); align-items: start; } /* ============================================================ 2. PERSON ============================================================ */ .lefx-tm-team .lefx-tm-person { margin: 0; padding: 0; text-align: center; /* Bezug fuer das Hover-Bild, das deckungsgleich darueber liegt */ position: relative; } .lefx-tm-team .lefx-tm-bild, .lefx-tm-team .lefx-tm-bild-hover { margin: 0 0 clamp(12px, 1.2vw, 20px); } .lefx-tm-team .lefx-tm-bild img, .lefx-tm-team .lefx-tm-bild-hover img { display: block; width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; } /* -- Bildwechsel beim Ueberfahren -- Nur bei den beiden Kacheln mit der Klasse "hat-wechsel". Das zweite Bild liegt deckungsgleich ueber dem ersten und wird eingeblendet; es nimmt keinen eigenen Platz ein, sonst waeren diese beiden Kacheln doppelt so hoch. */ .lefx-tm-team .lefx-tm-bild-hover { position: absolute; top: 0; left: 0; right: 0; opacity: 0; transition: opacity .25s; pointer-events: none; } .lefx-tm-team .lefx-tm-person.hat-wechsel:hover .lefx-tm-bild-hover, .lefx-tm-team .lefx-tm-person.hat-wechsel:focus-within .lefx-tm-bild-hover { opacity: 1; } /* ============================================================ 3. BESCHRIFTUNG ============================================================ Klasse doppelt: Astra gewinnt sonst mit .entry-content p. */ .lefx-tm-team.lefx-tm-team .lefx-tm-name { margin: 0 0 6px !important; font-size: clamp(15px, 1.2vw, 18px); font-weight: 400; line-height: 1.35; color: var(--lefx-dark, #232323); } .lefx-tm-team.lefx-tm-team .lefx-tm-rolle { margin: 0 !important; font-size: clamp(12px, .9vw, 14px); font-weight: 400; line-height: 1.45; letter-spacing: .08em; text-transform: uppercase; color: rgba(35,35,35,.62); } /* ============================================================ MOBIL ============================================================ */ /* Bis 1250px bekommt der Teaser im Kopf eine eigene dunkle Flaeche und steht dadurch tiefer (siehe lefx-ph-header.css). Zieht sich das Raster dort weiter nach oben, legen sich die Kacheln ueber den Text - es hat z-index 3, der Textblock nur 2. */ @media (max-width: 1400px) { .lefx-tm-team { padding-top: clamp(32px, 5vw, 64px) !important; } .lefx-tm-team.lefx-tm-team .lefx-tm-raster { margin-top: 0 !important; } } @media (max-width: 1024px) { .lefx-tm-team.lefx-tm-team .lefx-tm-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Drei Spalten heisst hoehere Bilder - rund 23vw statt 17,5vw. Die Ueberlappung waechst im gleichen Mass mit, damit der Ueberstand ueber die Bildhoehe gleich bleibt. */ :root { --lefx-tm-hub: 25vw; } } @media (max-width: 781px) { /* Keine Ueberlappung: Die Abschlussgrafik ist auf schmalen Geraeten zu flach dafuer - dieselbe Entscheidung wie auf den uebrigen Seiten. */ .lefx-tm-team { padding-top: clamp(32px, 8vw, 60px) !important; } .lefx-tm-team.lefx-tm-team .lefx-tm-raster { margin-top: 0 !important; grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Auf Geraeten ohne Maus gibt es kein Ueberfahren - dort bleibt es beim ersten Bild. */ .lefx-tm-team .lefx-tm-bild-hover { display: none; } } @media (prefers-reduced-motion: reduce) { .lefx-tm-team .lefx-tm-bild-hover { transition: none; } } /* Zweite Grafik (782-2559px): Das Raster ueberlappt die tiefer liegende dunkle Form wieder. Werte siehe unten. */ @media (min-width: 782px) and (max-width: 2559px) { .lefx-tm-team { padding-top: 0 !important; } .lefx-tm-team.lefx-tm-team .lefx-tm-raster { /* Zwei Grenzen, die kleinere gewinnt: 47vw - 194px haelt rund 60px Abstand zum Teaser. 18vw + 110px haelt Namen und Rollenzeile der ersten Reihe unterhalb der Grafik. Sonst rutschen sie auf die dunkle Flaeche und sind unlesbar - rechts reicht die dunkle Form bis zur Unterkante. Gemessen (782/1024/1150/1366/1999px): Abstand zum Teaser 60/60/81/144/324 Rollenzeile unter der Grafik 206/140/43/45/29 (bis 2559px) */ margin-top: calc(-1 * min(47vw - 194px, 18vw + 110px)) !important; } } /* ============================================================ LEFX Team-Seite - Uebergang und Jobs-Box ============================================================ Passt zu tm-jobs-blocks.html. Struktur: .lefx-tj-uebergang figure > img, volle Breite .lefx-tj-jobs group, volle Breite, dunkel .lefx-tj-inner group, Inhaltsbreite .lefx-tj-box group, mint .lefx-tj-titel h2 .lefx-tj-text p Ausgemessen an image-Team.png (2560x1203, also 47vw hoch bei voller Breite): - oben transparent, die Alpha-Kante liegt je nach Stelle zwischen 3,8 % und 35,3 % der Hoehe. Dort MUSS Weiss stehen, sonst scheint der dunkle Seitenhintergrund von Astra durch. Eine Ueberlappung nach oben braucht es nicht. - unten ueber die ganze Breite deckend in #232323. Die dunkle Flaeche steckt also bereits in der Datei; der Abschnitt darunter fuehrt dieselbe Farbe fort. ============================================================ */ :root { /* Wie weit die Textbox nach oben auf die Grafik gezogen wird. Am Mockup gemessen beginnt sie rund 26 % der Grafikhoehe oberhalb deren Unterkante - bei 47vw Grafikhoehe also 12vw. */ --lefx-tj-box-hub: 12vw; /* Abstand der Box zum RECHTEN Rand des Inhaltsbereichs, als Anteil dessen Breite. Im Mockup endet die Box bei 78 % der Inhaltsbreite. */ --lefx-tj-box-rechts: 22%; } /* Astra begrenzt Bloecke auf die Inhaltsbreite - Begruendung siehe Header-CSS der Startseite. */ .lefx-tj-jobs, .lefx-tj-uebergang { max-width: none !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; } /* ============================================================ 1. UEBERGANGSGRAFIK ============================================================ */ .lefx-tj-uebergang.lefx-tj-uebergang { margin-top: 0 !important; /* -1px schliesst die Fuge zum Abschnitt darunter, die durch das Aufrunden der skalierten Bildhoehe entsteht. */ margin-bottom: -1px !important; position: relative; z-index: 1; pointer-events: none; /* Fuellt den transparenten Bereich oberhalb der Diagonale. Ohne diese Angabe schien dort der dunkle Seitenhintergrund von Astra durch. Ein einfacher Hintergrund reicht: Unterhalb der Kante ist die Datei durchgehend deckend - nachgemessen an fuenf Stellen jeweils nur ein bis zwei halbtransparente Zeilen, das ist die Kantenglaettung. Der weisse Hintergrund ist dort also vollstaendig verdeckt. */ background: #ffffff; } .lefx-tj-uebergang img { display: block; width: 100%; height: auto; } /* ============================================================ 2. ABSCHNITT ============================================================ */ .lefx-tj-jobs { /* dieselbe Farbe, in der die Grafik unten auslaeuft */ background: var(--lefx-dark, #232323); /* KEIN oberer Innenabstand: Die Box ragt nach oben hinaus. */ padding-top: 0 !important; padding-bottom: clamp(48px, 6vw, 110px) !important; position: relative; z-index: 2; /* verhindert, dass der negative Abstand des Inhalts an den Abschnitt weiterwandert statt die Box zu ziehen */ display: flow-root; } /* Klasse doppelt: erstes Kind der Gruppe - sonst setzt WordPress margin-block-start auf 0 und das negative margin verpufft. */ .lefx-tj-jobs.lefx-tj-jobs .lefx-tj-inner { max-width: var(--lefx-hero-width, clamp(1100px, 78vw, 1900px)); margin-inline: auto; margin-top: calc(var(--lefx-tj-box-hub) * -1) !important; margin-bottom: 0 !important; padding-inline: 24px; display: flex; justify-content: flex-end; } /* ============================================================ 3. BOX ============================================================ */ .lefx-tj-jobs .lefx-tj-box { flex: 0 0 clamp(280px, 26vw, 470px); margin-right: var(--lefx-tj-box-rechts); background: var(--lefx-mint, #70c2b4); border-radius: 8px; padding: clamp(26px, 3vw, 52px) clamp(22px, 2.2vw, 44px); } .lefx-tj-jobs.lefx-tj-jobs .lefx-tj-titel { margin: 0 0 clamp(20px, 2.2vw, 36px) !important; font-size: clamp(19px, 1.7vw, 26px); font-weight: 700; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; color: #fff; } .lefx-tj-jobs.lefx-tj-jobs .lefx-tj-text { margin: 0 !important; font-size: clamp(13px, 1vw, 16px); line-height: 1.7; color: #fff; } /* ============================================================ MOBIL ============================================================ */ @media (max-width: 781px) { /* Die Grafik ist auf schmalen Geraeten nur noch rund 180px hoch - die Box passt dort nicht mehr darauf und steht darunter auf voller Breite, wie auf den uebrigen Seiten. */ .lefx-tj-jobs { padding-top: clamp(24px, 6vw, 48px) !important; } .lefx-tj-jobs.lefx-tj-jobs .lefx-tj-inner { margin-top: 0 !important; } .lefx-tj-jobs .lefx-tj-box { flex-basis: 100%; margin-right: 0; } } /* ============================================================ LEFX Team-Seite - Initiativbewerbung ============================================================ Passt zu tm-formular-blocks.html. Struktur: .lefx-tf-formular group, volle Breite, dunkel .lefx-tf-inner group, Inhaltsbreite .lefx-tf-titel h2 .lefx-tf-spalten columns 55/45 links Shortcode des Plugins Quform rechts .lefx-tf-text, .lefx-tf-adresse Das Formular selbst wird vom Plugin ausgegeben, sein Markup laesst sich nicht aendern. Die Farben kommen deshalb ueber dessen Klassen (quform-*). Alle Regeln sind auf .lefx-tf-formular eingegrenzt - das Formular auf anderen Seiten, etwa auf der Kontaktseite, bleibt unveraendert. Klassennamen abgelesen am gerenderten Formular auf test.lefx.de/kontakt/ (Quform 2). ============================================================ */ :root { /* Flaeche der Eingabefelder. Etwas dunkler als der Abschnitt, damit die Felder ohne kraeftigen Rahmen erkennbar sind. */ --lefx-tf-feld: #141414; --lefx-tf-feld-rand: rgba(255,255,255,.14); } /* Astra begrenzt Bloecke auf die Inhaltsbreite - Begruendung siehe Header-CSS der Startseite. */ .lefx-tf-formular { max-width: none !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; } /* ============================================================ 1. ABSCHNITT ============================================================ */ .lefx-tf-formular { /* fuehrt die dunkle Flaeche des Abschnitts darueber fort */ background: var(--lefx-dark, #232323); padding-block: clamp(40px, 5vw, 96px) !important; } .lefx-tf-formular.lefx-tf-formular .lefx-tf-inner { max-width: var(--lefx-hero-width, clamp(1100px, 78vw, 1900px)); margin-inline: auto; padding-inline: 24px; } .lefx-tf-formular.lefx-tf-formular .lefx-tf-titel { margin: 0 0 clamp(28px, 3.5vw, 64px) !important; font-size: clamp(19px, 1.8vw, 30px); font-weight: 700; line-height: 1.3; letter-spacing: .18em; text-transform: uppercase; text-align: center; color: #fff; } .lefx-tf-formular .lefx-tf-spalten { gap: clamp(28px, 4vw, 90px); align-items: flex-start; } /* ============================================================ 2. TEXTSPALTE ============================================================ */ .lefx-tf-formular.lefx-tf-formular .lefx-tf-text { margin: 0 0 clamp(24px, 2.6vw, 44px) !important; font-size: clamp(13px, 1vw, 16px); line-height: 1.7; color: rgba(255,255,255,.82); } .lefx-tf-formular.lefx-tf-formular .lefx-tf-adresse { margin: 0 0 clamp(16px, 1.6vw, 26px) !important; font-size: clamp(13px, 1vw, 16px); line-height: 1.7; color: rgba(255,255,255,.7); } .lefx-tf-formular .lefx-tf-adresse a { color: var(--lefx-mint, #70c2b4); text-decoration: none; } .lefx-tf-formular .lefx-tf-adresse a:hover, .lefx-tf-formular .lefx-tf-adresse a:focus-visible { text-decoration: underline; } /* ============================================================ 3. FORMULAR ============================================================ */ /* -- Schriftfarbe im gesamten Formular -- Das Plugin bringt eine Grundfarbe mit: .quform-theme-bootstrap { color: #000 } und faerbt einzelne Teile nach: .quform-theme-bootstrap .quform-description { color: #333 } Die zweite Regel hat dieselbe Spezifitaet wie eine eigene mit zwei Klassen - und quform.css wird NACH unserer Datei geladen, gewinnt bei Gleichstand also. Deshalb hier drei Klassen (Abschnittsklasse doppelt) plus !important. Ohne das blieben Beschriftungen und Hinweistexte dunkel auf dunkel. */ .lefx-tf-formular .quform, .lefx-tf-formular .quform-theme-bootstrap { color: #fff; } .lefx-tf-formular.lefx-tf-formular .quform-label-text, .lefx-tf-formular.lefx-tf-formular .quform-description, .lefx-tf-formular.lefx-tf-formular .quform-option-text, .lefx-tf-formular.lefx-tf-formular .quform-option-label, .lefx-tf-formular.lefx-tf-formular .quform-element, .lefx-tf-formular.lefx-tf-formular .quform-element label { color: #fff !important; } .lefx-tf-formular .quform-label-text { font-size: clamp(13px, 1vw, 16px); line-height: 1.5; } /* Sternchen bei Pflichtfeldern. Klasse doppelt aus demselben Grund wie oben - das Plugin setzt .quform-theme-bootstrap .quform-label>label>.quform-required auf Rot. */ .lefx-tf-formular.lefx-tf-formular .quform-required { color: var(--lefx-mint, #70c2b4) !important; } /* -- Abstand zwischen den Feldern -- */ .lefx-tf-formular .quform-element { margin-bottom: clamp(14px, 1.4vw, 24px); } .lefx-tf-formular .quform-spacer { padding: 0; } /* -- Eingabefelder -- input und textarea einzeln benannt: Quform vergibt je nach Feldtyp eigene Klassen, die gemeinsame ist .quform-input am umschliessenden Element, nicht am Feld selbst. */ .lefx-tf-formular .quform-input input[type="text"], .lefx-tf-formular .quform-input input[type="email"], .lefx-tf-formular .quform-input input[type="tel"], .lefx-tf-formular .quform-input input[type="url"], .lefx-tf-formular .quform-input input[type="number"], .lefx-tf-formular .quform-input textarea, .lefx-tf-formular .quform-input select { width: 100%; background: var(--lefx-tf-feld); border: 1px solid var(--lefx-tf-feld-rand); /* Das Plugin legt einen hellen Schatten nach innen - auf dunklem Grund sieht das aus wie ein Rand aus Schmutz. */ box-shadow: none; border-radius: 4px; padding: clamp(9px, .9vw, 14px) clamp(11px, 1.1vw, 16px); font-size: clamp(13px, 1vw, 16px); line-height: 1.5; color: #fff; transition: border-color .2s; } .lefx-tf-formular .quform-input textarea { min-height: clamp(120px, 12vw, 200px); resize: vertical; } .lefx-tf-formular .quform-input input:focus, .lefx-tf-formular .quform-input textarea:focus, .lefx-tf-formular .quform-input select:focus { border-color: var(--lefx-mint, #70c2b4); outline: none; } /* Der Browser faerbt automatisch ausgefuellte Felder sonst hell. Ein Hintergrund laesst sich dort nicht setzen, ein sehr grosser innerer Schatten ueberdeckt ihn aber vollstaendig. */ .lefx-tf-formular .quform-input input:-webkit-autofill, .lefx-tf-formular .quform-input textarea:-webkit-autofill { -webkit-text-fill-color: #fff; box-shadow: 0 0 0 1000px var(--lefx-tf-feld) inset; } .lefx-tf-formular .quform-input input::placeholder, .lefx-tf-formular .quform-input textarea::placeholder { color: rgba(255,255,255,.38); } /* -- Ankreuzfeld Datenschutz -- */ .lefx-tf-formular .quform-option-label, .lefx-tf-formular .quform-option-text { font-size: clamp(13px, 1vw, 16px); line-height: 1.5; color: rgba(255,255,255,.82); } .lefx-tf-formular .quform-option input[type="checkbox"], .lefx-tf-formular .quform-option input[type="radio"] { accent-color: var(--lefx-mint, #70c2b4); margin-right: 8px; } /* -- Hinweistexte unter den Feldern -- Farbe siehe Sammelregel weiter oben. */ .lefx-tf-formular .quform-description { font-size: clamp(11px, .85vw, 13px); line-height: 1.5; } /* -- Fehlermeldungen -- */ .lefx-tf-formular .quform-error-message, .lefx-tf-formular .quform-error .quform-label-text { color: #ff8f8f; } .lefx-tf-formular .quform-error .quform-input input, .lefx-tf-formular .quform-error .quform-input textarea { border-color: #ff8f8f; } /* -- Absendeknopf -- ACHTUNG bei den Klassennamen: .quform-button-submit ist die HUELLE, der Knopf selbst ist button.quform-submit. Auf die Huelle gesetzte Farben liegen hinter dem Knopf, nicht darauf. */ .lefx-tf-formular .quform-button-submit { background: none; padding: 0; } .lefx-tf-formular.lefx-tf-formular button.quform-submit { background: var(--lefx-mint, #70c2b4) !important; /* Astra gibt Buttons einen farbigen Rahmen - der erschien als pinke Umrandung. border allein reichte nicht, weil Astra ihn zusaetzlich als Schatten zeichnet. */ border: none !important; box-shadow: none !important; border-radius: 6px; padding: clamp(11px, 1.1vw, 16px) clamp(20px, 2vw, 34px); font-size: clamp(13px, 1vw, 16px); font-weight: 400; letter-spacing: .02em; color: var(--lefx-dark, #232323) !important; cursor: pointer; transition: background .2s; } .lefx-tf-formular.lefx-tf-formular button.quform-submit .quform-button-text { color: var(--lefx-dark, #232323) !important; } .lefx-tf-formular.lefx-tf-formular button.quform-submit:hover { background: #8ad2c6 !important; } /* Bei Bedienung ueber die Tastatur bleibt eine sichtbare Markierung - nur die pinke des Themes ist weg. */ .lefx-tf-formular.lefx-tf-formular button.quform-submit:focus { outline: none; } .lefx-tf-formular.lefx-tf-formular button.quform-submit:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } /* -- Erfolgsmeldung nach dem Absenden -- */ .lefx-tf-formular .quform-success-message { font-size: clamp(13px, 1vw, 16px); line-height: 1.7; color: var(--lefx-mint, #70c2b4); } /* ============================================================ MOBIL ============================================================ */ @media (max-width: 781px) { /* Die Textspalte gehoert VOR das Formular: Sie erklaert, worum es geht. Nebeneinander steht sie rechts, untereinander muss sie nach oben. */ .lefx-tf-formular .lefx-tf-spalten { flex-direction: column; } .lefx-tf-formular .lefx-tf-spalten > .wp-block-column { flex-basis: 100% !important; } .lefx-tf-formular .lefx-tf-spalten > .wp-block-column:last-child { order: -1; } } /* ============================================================ LEFX Projektbeitrag - Header und Galerie ============================================================ Passt zu pj-header-blocks.html. Aufbau wie der Header der Profession-Seite, mit zwei Unterschieden: - oben KEIN Farbverlauf mit Video, sondern ein vollflaechiges Bild - die Abschlussgrafik sitzt tiefer Struktur: .lefx-pj-hero figure > img, volle Breite .lefx-pj-grafik figure > img, volle Breite .lefx-pj-band group, weiss, liegt AUF der Grafik .lefx-pj-inner group .lefx-pj-titel h1, Grossbuchstaben .lefx-pj-galerie group .lefx-pj-gross figure > img .lefx-pj-thumbs group, Raster figure > img beliebig viele Die Vorschaubilder werden ueber ihren Platz im Raster angesprochen und NICHT ueber eine eigene Klasse: So laesst sich im Editor ein Bild ergaenzen oder loeschen, ohne an eine CSS-Klasse denken zu muessen. Die Spaltenzahl steht als Blockeinstellung am Raster und ist dort aenderbar. ============================================================ */ :root { /* Wie weit die Abschlussgrafik in das Bild darueber ragt. grafik-abschluss-header-professions.png ist 2559x1242, bei voller Breite also 48,5vw hoch. Die obere Alpha-Kante liegt zwischen 0,2 % und 30 % der Hoehe, der tiefste Punkt bei 80 % Breite - mindestens 14,6vw sind noetig, damit die Kante zum Bild nirgends sichtbar bleibt. 16vw statt der 18vw der uebrigen Seiten: Die Grafik soll hier tiefer sitzen. NICHT unter 15vw. */ --lefx-pj-hub: 16vw; /* Wie weit Titel und Galerie nach oben auf die Grafik gezogen werden. Obergrenze: Die Grafik hat rechts einen gruenen Keil. Dessen tiefster Punkt liegt gemessen 28,06vw ueber der Unterkante der Grafik - die Galerie darf nicht darueber hinaus, sonst liegt sie im Gruen. Ueber der Galerie steht noch der Titel; der Block aus Titel und Abstand ist je nach Fensterbreite 4 bis 6vw hoch. Mit 32vw beginnt die Galerie also rund 27vw ueber der Unterkante und bleibt damit knapp unter dem Gruen. 32vw ist die Obergrenze - darueber liegt die Galerie im gruenen Keil. Wer den Titel weiter nach oben braucht, macht das Kopfbild flacher (siehe --lefx-pj-hero-format), nicht diesen Wert groesser. */ --lefx-pj-band-hub: 32vw; /* Seitenverhaeltnis des Kopfbildes. Ein festes Verhaeltnis sorgt dafuer, dass alle Projektbeitraege gleich aussehen, egal welche Datei hochgeladen wird. Dieser Wert bestimmt, wie weit oben der Titel auf dem Bildschirm steht - er ist der wirksamste Hebel dafuer. Die Rechnung bei Fensterbreite W: Titel = Kopfleiste + W/Verhaeltnis + 0,005 x W Bei 1920px Breite: 2:1 -> rund 1030px, also erst nach dem Scrollen sichtbar 3:1 -> rund 710px, ohne Scrollen sichtbar 4:1 -> rund 550px 3:1 ist der Ausgleich: Der Titel steht auf einem Bildschirm mit 1080 Zeilen ohne Scrollen im Bild, und vom Kopfbild bleibt noch genug zu sehen. */ --lefx-pj-hero-format: 3 / 1; /* Seitenverhaeltnis der Galeriebilder. Die Bilder der Projekte liegen in 1600x854 vor - genau dieses Mass steht hier, damit sie unbeschnitten zu sehen sind. Zusammen mit object-fit: contain gilt das auch fuer Bilder, die davon abweichen: Sie werden eingepasst statt zugeschnitten. Der freie Rand bekommt die Farbe der Flaeche dahinter. */ --lefx-pj-galerie-format: 1600 / 854; } /* Astra begrenzt Bloecke auf die Inhaltsbreite - Begruendung siehe Header-CSS der Startseite. */ .lefx-pj-hero, .lefx-pj-grafik, .lefx-pj-band { max-width: none !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; } /* ============================================================ 1. KOPFBILD ============================================================ */ .lefx-pj-hero.lefx-pj-hero { margin: 0 !important; } .lefx-pj-hero img { display: block; width: 100%; aspect-ratio: var(--lefx-pj-hero-format); height: auto; object-fit: cover; background: var(--lefx-dark, #232323); } /* ============================================================ 2. ABSCHLUSSGRAFIK ============================================================ */ .lefx-pj-grafik.lefx-pj-grafik { margin-top: calc(var(--lefx-pj-hub) * -1) !important; margin-bottom: 0 !important; position: relative; z-index: 1; pointer-events: none; /* Der obere Teil MUSS transparent bleiben: Dort liegt die Grafik ueber dem Kopfbild. Unterhalb der Ueberlappung wird auf Weiss umgeschaltet, sonst scheint dort der dunkle Seitenhintergrund von Astra durch. */ background: linear-gradient(180deg, transparent 0, transparent var(--lefx-pj-hub), #ffffff var(--lefx-pj-hub), #ffffff 100%); } .lefx-pj-grafik img { display: block; width: 100%; height: auto; } /* ============================================================ 3. TITEL UND GALERIE AUF DER GRAFIK ============================================================ */ .lefx-pj-band { /* WEISS, nicht transparent: Der Block liegt unterhalb der Grafik, sein Inhalt wird nur nach oben darauf gezogen. Ohne Hintergrund schiene dort der dunkle Seitenhintergrund als Streifen durch. */ background: #ffffff; position: relative; z-index: 2; padding-bottom: clamp(40px, 5vw, 96px); } /* Klasse doppelt: erstes Kind der Gruppe - sonst setzt WordPress margin-block-start auf 0 und das negative margin verpufft. */ .lefx-pj-band.lefx-pj-band .lefx-pj-inner { max-width: var(--lefx-hero-width, clamp(1100px, 78vw, 1900px)); margin-inline: auto; padding-inline: 24px; margin-top: calc(var(--lefx-pj-band-hub) * -1) !important; position: relative; } .lefx-pj-band.lefx-pj-band .lefx-pj-titel { margin: 0 0 clamp(20px, 2.4vw, 44px) !important; font-size: clamp(17px, 1.8vw, 26px); font-weight: 700; line-height: 1.4; letter-spacing: .18em; text-transform: uppercase; color: #fff; } /* ============================================================ 4. GALERIE ============================================================ */ .lefx-pj-band .lefx-pj-galerie { margin: 0; } /* -- grosses Bild -- Es beginnt auf der dunklen Flaeche und laeuft nach unten ins Weisse. */ .lefx-pj-band.lefx-pj-band .lefx-pj-gross { margin: 0 0 clamp(14px, 1.4vw, 24px) !important; /* KEINE eigene Breitenbegrenzung: Grosses Bild, Vorschauzeile, Text und Trailer stehen alle in derselben Spalte und schliessen links wie rechts buendig ab. */ max-width: none; } .lefx-pj-gross img { display: block; width: 100%; aspect-ratio: var(--lefx-pj-galerie-format); height: auto; /* contain, NICHT cover: Die Bilder sollen vollstaendig zu sehen sein. cover haette sie an den Kanten abgeschnitten. */ object-fit: contain; background: var(--lefx-dark, #232323); } /* -- Vorschaubilder -- Die Reihe ist immer so breit wie das grosse Bild darueber, ganz gleich wie viele Bilder darin stehen. Deshalb KEINE feste Spaltenzahl, sondern eine Spalte je Bild, alle gleich breit. Der Block bringt zwar eine Einstellung "Spalten" mit, die wird hier aber bewusst uebergangen: Sonst muesste sie beim Ergaenzen oder Loeschen eines Bildes jedes Mal von Hand nachgezogen werden, und bei zu wenigen Bildern endete die Reihe mitten unter dem grossen Bild. grid-template-columns: none setzt die Vorgabe des Blocks zurueck - ohne das blieben beide Angaben nebeneinander stehen und die feste Spaltenzahl gaebe den Ausschlag. */ .lefx-pj-band.lefx-pj-band .lefx-pj-thumbs { margin: 0 !important; max-width: none; gap: clamp(4px, .5vw, 9px); grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } .lefx-pj-band .lefx-pj-thumbs .wp-block-image { margin: 0; cursor: pointer; /* Die Vorschau wird per Skript anklickbar gemacht. Ohne JavaScript bleibt sie ein normales Bild - deshalb hier kein Hinweis, der eine Funktion verspricht, die dann fehlt. */ transition: filter .2s, outline-color .2s; outline: 2px solid transparent; outline-offset: 0; } .lefx-pj-thumbs .wp-block-image img { display: block; width: 100%; aspect-ratio: var(--lefx-pj-galerie-format); height: auto; /* wie beim grossen Bild: einpassen statt zuschneiden */ object-fit: contain; background: var(--lefx-dark, #232323); } /* Beim Zeigen wird das Vorschaubild MINTGRUEN eingefaerbt und bekommt einen mintfarbenen Rahmen. Der Weg dahin: grayscale nimmt die eigenen Farben heraus sepia faerbt einheitlich braun ein hue-rotate dreht diesen Braunton auf Mint saturate hebt ihn auf die Kraft der Hausfarbe Das ist ein Umweg, aber der einzige, der ohne zusaetzliches Markup auskommt - eine Farbflaeche darueber braeuchte ein Element, das der Galerieblock nicht hat. Vorher wurde nur aufgehellt (brightness 1.3). Das war auf hellen Bildern kaum zu sehen. Nicht transparent machen: Die Vorschauzeile liegt auf der Kante zwischen dunkler Grafik und weisser Flaeche - bei Transparenz schien mal das eine, mal das andere durch, dasselbe Bild sah je nach Position anders aus. */ .lefx-pj-band .lefx-pj-thumbs .wp-block-image { transition: filter .18s ease, outline-color .18s ease; } .lefx-pj-band .lefx-pj-thumbs .wp-block-image:hover { /* Echte Zweitonung statt Filterkette: Unter dem Bild liegt Mint, das Bild selbst wird nur noch mit seiner HELLIGKEIT darauf gerechnet (mix-blend-mode: luminosity). Damit bleibt der volle Hell-Dunkel-Umfang des Bildes erhalten - Motive sind weiter zu erkennen -, und nur der Farbton wird ersetzt. Die vorherigen Versuche gingen ueber grayscale/sepia/hue-rotate/saturate. Diese Kette zieht alle Tonwerte zur Mitte und macht die Bilder flau; erst hell und ueberbelichtet, dann dunkel und undeutlich. Der Fehler lag nicht am Wert, sondern am Verfahren. contrast leicht ueber 1 gleicht aus, dass eine Einfarbigkeit immer etwas weicher wirkt als das bunte Original. */ background: var(--lefx-mint, #70c2b4); outline-color: var(--lefx-mint, #70c2b4); } .lefx-pj-band .lefx-pj-thumbs .wp-block-image:hover img { mix-blend-mode: luminosity; filter: contrast(1.08); } @media (prefers-reduced-motion: reduce) { .lefx-pj-band .lefx-pj-thumbs .wp-block-image { transition: none; } } /* aktuell im grossen Bereich gezeigtes Bild */ .lefx-pj-band .lefx-pj-thumbs .wp-block-image.is-aktiv { outline-color: var(--lefx-mint, #70c2b4); } .lefx-pj-band .lefx-pj-thumbs .wp-block-image:focus-visible { outline-color: var(--lefx-mint, #70c2b4); outline-offset: 2px; } /* ============================================================ MOBIL ============================================================ */ @media (max-width: 781px) { /* Das Kopfbild wird hochkant genutzt, sonst bleibt davon bei voller Breite kaum etwas uebrig. */ :root { --lefx-pj-hero-format: 4 / 3; --lefx-pj-hub: 26vw; /* wird hier nicht mehr gebraucht - der Hub sitzt am Block */ --lefx-pj-band-hub: 0px; } /* Der Titel steht hier NICHT auf der Grafik - die ist auf schmalen Geraeten zu flach dafuer. Der Block bekommt eine eigene dunkle Flaeche, wie auf der Profession-Seite. Das negative margin ist dabei entscheidend: Die dunkle Form IN der Grafik endet je nach Stelle zwischen 64 % und 94 % ihrer Hoehe, darunter ist die Grafik weiss gefuellt. Beginnt der Block erst an deren Unterkante, klafft dazwischen ein weisser Spalt. Bei 48,5vw Grafikhoehe liegt die hoechste Stelle 17,5vw ueber der Unterkante - 20vw startet also darueber. */ .lefx-pj-band { background: var(--lefx-grafik-dunkel, #222222); margin-top: calc(-1 * 20vw); padding-bottom: clamp(32px, 8vw, 60px); } /* Der Hub sitzt jetzt am Block selbst, der Inhalt darin braucht keinen mehr - sonst wanderte er doppelt nach oben. */ .lefx-pj-band.lefx-pj-band .lefx-pj-inner { margin-top: 0 !important; padding-top: clamp(16px, 4vw, 32px); } /* Hier gilt die Aufteilung von oben NICHT: Acht Vorschauen nebeneinander waeren je rund 40px breit und nicht mehr erkennbar. Auf schmalen Geraeten stehen deshalb vier in einer Reihe, der Rest bricht um - die Reihe bleibt trotzdem so breit wie das grosse Bild. */ .lefx-pj-band.lefx-pj-band .lefx-pj-thumbs { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (prefers-reduced-motion: reduce) { .lefx-pj-band .lefx-pj-thumbs .wp-block-image { transition: none; } } /* ============================================================ LEFX Projektbeitrag - Textabschnitt und Trailer ============================================================ Passt zu pj-text-blocks.html. Struktur: .lefx-pj-text group, volle Breite, weiss .lefx-pj-text-inner group .lefx-pj-subtitel h2 .lefx-pj-fliess p (mehrere moeglich) .lefx-pj-trailer group, volle Breite, weiss .lefx-pj-trailer-inner group, Farbverlauf .lefx-pj-vtitel h2, gedreht .lefx-pj-video embed (YouTube) ============================================================ */ :root { /* Wie weit das Video oben ueber den Farbverlauf hinausragt. Am Screenshot gemessen rund 97px bei 2019px Fensterbreite. */ --lefx-pj-video-hub: 4.5vw; /* Innenabstand der Verlaufsflaeche. Steht als eigener Wert da, weil der Hub des Videos damit rechnet: Es muss um Innenabstand PLUS Hub nach oben, um genau um den Hub aus der Flaeche herauszuragen. */ --lefx-pj-innen: clamp(28px, 3.5vw, 64px); } /* Astra begrenzt Bloecke auf die Inhaltsbreite - Begruendung siehe Header-CSS der Startseite. */ .lefx-pj-text, .lefx-pj-trailer, .lefx-pj-weitere { max-width: none !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; } /* ============================================================ 1. TEXTABSCHNITT ============================================================ */ .lefx-pj-text { background: #ffffff; padding-top: clamp(40px, 5vw, 96px) !important; /* Unten mehr Platz: Dort ragt das Video des naechsten Abschnitts herein. */ padding-bottom: calc(clamp(40px, 5vw, 96px) + var(--lefx-pj-video-hub)) !important; } /* -- Abstaende zwischen den Abschnitten -- Der Innenabstand unten rechnet oben mit dem Video des naechsten Abschnitts. Folgt aber KEIN Video, ist er um genau diesen Hub zu gross - dann steht zwischen Text und Farbflaeche deutlich mehr Luft als zwischen allen anderen Abschnitten. */ .lefx-pj-text:has(+ .lefx-pt-tour) { padding-bottom: clamp(40px, 4vw, 80px) !important; } /* Die Farbflaeche haelt ausserdem Platz fuer das herausragende Bild frei. Nach einem Textabschnitt braucht sie den nicht zusaetzlich - darueber steht dort ohnehin schon Weiss. */ .lefx-pj-text + .lefx-pt-tour { --lefx-pt-luft-oben: clamp(10px, 1.2vw, 24px); } /* Umgekehrter Fall: Folgt auf die Farbflaeche ein Videoabschnitt, wird dessen Video um Innenabstand plus Hub nach oben gezogen - es sass damit fast auf der Unterkante der Farbflaeche. Der Abstand gleicht genau diesen Zug wieder aus. WICHTIG als Innenabstand der Farbflaeche, NICHT als Aussen- abstand des Videoabschnitts: Ein Aussenabstand zeigt den Hintergrund des Elternelements, und der ist bei Astra dunkel - statt weisser Luft entstand dort ein schwarzer Streifen ueber dem Trailer. Der Abschnitt der Farbflaeche ist dagegen weiss. */ .lefx-pt-tour:has(+ .lefx-pj-trailer), .lefx-pt-tour:has(+ .lefx-pj-weitere) { padding-bottom: calc(clamp(40px, 5vw, 96px) + var(--lefx-pj-innen) + var(--lefx-pj-video-hub)) !important; } /* Vor der Abschlussgrafik etwas mehr Luft: Sie laeuft oben spitz zu, ohne Abstand stiesse der Text direkt an die Spitze. */ .lefx-pj-text:has(+ .lefx-pa-abschluss) { padding-bottom: clamp(60px, 7vw, 130px) !important; } /* Dieselbe Spalte wie Titel, grosses Bild und Vorschauzeile: Der gesamte Inhalt des Beitrags beginnt links und endet rechts auf einer Linie. */ .lefx-pj-text.lefx-pj-text .lefx-pj-text-inner { max-width: var(--lefx-hero-width, clamp(1100px, 78vw, 1900px)); margin-inline: auto; padding-inline: 24px; } .lefx-pj-text.lefx-pj-text .lefx-pj-subtitel { margin: 0 0 clamp(12px, 1.2vw, 20px) !important; font-size: clamp(17px, 1.5vw, 23px); font-weight: 700; line-height: 1.35; color: var(--lefx-dark, #232323); } /* Kleine Zwischenueberschrift innerhalb eines Abschnitts, z.B. "360° Tour". Gleicher Schnitt wie die grosse, nur kleiner - damit die Rangfolge erkennbar bleibt. */ .lefx-pj-text.lefx-pj-text .lefx-pj-subtitel-klein { margin: clamp(24px, 2.6vw, 44px) 0 clamp(10px, 1vw, 16px) !important; /* Gleiche Groesse wie die grosse Ueberschrift. Sie war frueher kleiner, damit die Rangfolge sichtbar wird - im Beitrag standen dadurch aber zwei verschieden grosse Ueberschriften untereinander, was wie ein Fehler aussah. Die Rangfolge tragen jetzt allein die Abstaende: Vor einer kleinen Ueberschrift ist weniger Luft als vor einer grossen. */ font-size: clamp(17px, 1.5vw, 23px); font-weight: 700; line-height: 1.35; color: var(--lefx-dark, #232323); } .lefx-pj-text.lefx-pj-text .lefx-pj-subtitel-klein + * { margin-top: 0 !important; } /* Links im Fliesstext werden fett gesetzt. Sie sind sonst nur an der Farbe zu erkennen, und die traegt auf der Farbflaeche kaum. Gilt fuer alle Beitraege - der Knopf des Abschlusses ist davon nicht betroffen, er liegt in einem eigenen Abschnitt. */ .lefx-pj-text a, .lefx-pt-tour a { font-weight: 700; } /* Foerderlogo im Fliesstext - linksbuendig, in eigener Groesse. Ohne Begrenzung liefe es ueber die volle Inhaltsbreite und waere damit groesser als die Bilder des zweispaltigen Teils. */ .lefx-pj-text.lefx-pj-text .lefx-pj-foerderlogo { margin: clamp(24px, 2.6vw, 44px) 0 0 !important; } .lefx-pj-text .lefx-pj-foerderlogo img { display: block; /* Bis zur eigenen Groesse der Datei (1384px), darueber hinaus wuerde sie unscharf. Breiter als die Textspalte geht nicht. */ width: min(1384px, 100%); height: auto; } /* Quellenangabe unter einem Bild. Kleiner als der Fliesstext und etwas zurueckgenommen - sie gehoert zum Bild, nicht zum Text. */ .lefx-pj-text.lefx-pj-text .lefx-pj-quelle { margin: clamp(8px, 0.8vw, 14px) 0 0 !important; font-size: clamp(11px, 0.85vw, 14px); line-height: 1.6; color: #5a5a5a; } .lefx-pj-text.lefx-pj-text .lefx-pj-quelle + .lefx-pj-quelle { margin-top: 2px !important; } /* Fette Zeile innerhalb des Fliesstextes, etwa "PERFORMANCE". Bewusst KEINE Ueberschrift: gleiche Schriftgroesse wie der Fliesstext, nur fett und in Versalien. Sie steht damit eine Stufe unter lefx-pj-subtitel-klein. Versalien kommen hier aus dem CSS, nicht aus dem Text - so bleibt der Wortlaut unveraendert und die Uebersetzung in TranslatePress arbeitet mit der normalen Schreibweise. */ .lefx-pj-text.lefx-pj-text .lefx-pj-fettzeile { margin: clamp(20px, 2.2vw, 36px) 0 clamp(6px, 0.6vw, 10px) !important; font-size: clamp(13px, 1vw, 16px); font-weight: 700; line-height: 1.75; letter-spacing: .06em; text-transform: uppercase; color: var(--lefx-dark, #232323); } .lefx-pj-text.lefx-pj-text .lefx-pj-fettzeile + * { margin-top: 0 !important; } .lefx-pj-text.lefx-pj-text .lefx-pj-fliess { margin: 0 !important; font-size: clamp(13px, 1vw, 16px); line-height: 1.75; color: var(--lefx-dark, #232323); } /* -- Aufzaehlung -- Steht auf mehreren alten Seiten, etwa die Partnerliste bei CityPlanning XR oder die Merkmale der Trainingsplattform. Gleiche Schriftgroesse wie der Fliesstext. */ .lefx-pj-text.lefx-pj-text .lefx-pj-liste { margin: clamp(14px, 1.2vw, 22px) 0 0 !important; padding-left: 1.3em; font-size: clamp(13px, 1vw, 16px); line-height: 1.75; color: var(--lefx-dark, #232323); } .lefx-pj-text .lefx-pj-liste li + li { margin-top: 6px; } /* -- Zitat -- Bislang nur bei der Trainingsplattform: ein Kundenzitat. */ .lefx-pj-text.lefx-pj-text .lefx-pj-zitat { margin: clamp(20px, 2vw, 36px) 0 0 !important; padding-left: clamp(14px, 1.4vw, 24px); border-left: 3px solid var(--lefx-mint, #70c2b4); } .lefx-pj-text.lefx-pj-text .lefx-pj-zitat p { margin: 0 !important; font-size: clamp(13px, 1vw, 16px); line-height: 1.75; font-style: italic; color: var(--lefx-dark, #232323); } /* Aufzaehlung auf der Farbflaeche - dort steht der Text in Weiss. */ .lefx-pt-tour.lefx-pt-tour .lefx-pt-liste { margin: clamp(14px, 1.2vw, 22px) 0 0 !important; padding-left: 1.3em; font-size: clamp(13px, 1vw, 16px); line-height: 1.75; color: #fff; } /* -- Infografik ueber die volle Inhaltsbreite -- Steht als eigener Block direkt unter der Galerie. */ .lefx-pj-text.lefx-pj-text .lefx-pj-infografik { margin: 0 0 clamp(28px, 3vw, 56px) !important; max-width: none; } .lefx-pj-text .lefx-pj-infografik img { display: block; width: 100%; height: auto; } /* -- Eingebettete 3D-Anwendung (WebGL) -- Wie die 360-Grad-Tour: Der Rahmen gibt die Hoehe vor, das iframe bringt keine mit. Auf der alten Seite stand dort 600px fest - hier waechst die Hoehe mit der Fensterbreite mit. */ .lefx-pj-text .lefx-pj-webgl { margin: clamp(24px, 2.6vw, 44px) 0 0; height: clamp(360px, 38vw, 720px); overflow: hidden; background: var(--lefx-dark, #232323); } .lefx-pj-text .lefx-pj-webgl iframe, .lefx-pj-text .lefx-pj-webgl .BorlabsCookie, .lefx-pj-text .lefx-pj-webgl ._brlbs-content-blocker { display: block; width: 100%; height: 100%; border: 0; } /* -- 360-Grad-Tour -- Eingebettet von einer fremden Adresse. Der Rahmen gibt die Hoehe vor, das iframe bringt keine mit. Borlabs Cookie ersetzt die Einbettung bis zur Einwilligung durch einen Hinweis - der bekommt dieselbe Hoehe, damit der Abschnitt beim Freigeben nicht springt. */ .lefx-pj-text .lefx-pj-tour { height: clamp(320px, 34vw, 640px); margin: 0; overflow: hidden; background: var(--lefx-dark, #232323); } .lefx-pj-text .lefx-pj-tour iframe, .lefx-pj-text .lefx-pj-tour .BorlabsCookie, .lefx-pj-text .lefx-pj-tour ._brlbs-content-blocker { display: block; width: 100%; height: 100%; border: 0; } .lefx-pj-text.lefx-pj-text .lefx-pj-fliess + .lefx-pj-fliess { margin-top: clamp(14px, 1.2vw, 22px) !important; } /* Eine Zwischenueberschrift MITTEN im Abschnitt braucht Luft nach oben - die erste nicht, dort sitzt schon der Abstand des Abschnitts. Deshalb ueber den Geschwisterbezug und nicht am Element selbst. */ .lefx-pj-text.lefx-pj-text * + .lefx-pj-subtitel { margin-top: clamp(28px, 3vw, 56px) !important; } /* Der Abstand von der Ueberschrift zum FOLGENDEN Element gehoert allein der Ueberschrift. Was danach kommt, bringt keinen eigenen oberen Abstand mehr mit. Ohne diese Regel war der Abstand ungleich: Nach einer Ueberschrift mit Absatz darunter 20px, nach einer Ueberschrift mit zweispaltigem Teil darunter 56px - der Block hat einen eigenen oberen Abstand, der sich dazuaddierte. */ .lefx-pj-text.lefx-pj-text .lefx-pj-subtitel + * { margin-top: 0 !important; } /* ============================================================ 1b. ZWEISPALTIGER TEIL ============================================================ Text links, Bild rechts. Die Aufteilung steht als Blockeinstellung an den Spalten und ist im Editor aenderbar - hier wird nur der Abstand und das Verhalten auf schmalen Geraeten geregelt. */ .lefx-pj-text.lefx-pj-text .lefx-pj-zwei { margin: clamp(20px, 2vw, 36px) 0 0 !important; gap: clamp(20px, 2.5vw, 52px); /* Beide Spalten gleich hoch, damit Text und Bild unten auf einer Linie abschliessen - unabhaengig von der Textlaenge. Das ist die Voraussetzung fuer die Vorlage: Bei jedem Projekt steht dort ein anderer Text. */ align-items: stretch; } /* Die Spalte selbst wird zum Flexcontainer, damit das Bild darin die volle Hoehe einnehmen kann. */ .lefx-pj-text.lefx-pj-text .lefx-pj-zwei > .wp-block-column { display: flex; flex-direction: column; } /* Ein Absatz NACH dem zweispaltigen Teil laeuft wieder ueber die ganze Breite. */ .lefx-pj-text.lefx-pj-text .lefx-pj-zwei + .lefx-pj-fliess { margin-top: clamp(24px, 2.6vw, 44px) !important; } /* -- Bild in der zweiten Spalte -- Es fuellt die Hoehe, die der Text daneben vorgibt. Das Bild wird dabei beschnitten (object-fit: cover) - anders geht es nicht: Ein Bild hat ein festes Seitenverhaeltnis, der Text nicht. Wer beides unten buendig will, muss eines von beiden anpassen lassen, und das Bild vertraegt es besser als der Text. Beschnitten wird oben und unten gleichmaessig, das Motiv bleibt also mittig. Bei Bildern, bei denen das nicht passt, laesst sich der Bildausschnitt pro Beitrag verschieben - dann sag mir, an welcher Stelle. */ .lefx-pj-text.lefx-pj-text .lefx-pj-bild { margin: 0 !important; flex: 1 1 auto; /* Bezug fuer das Bild darin */ position: relative; /* Untergrenze: Bei einem sehr kurzen Text waere das Bild sonst nur noch ein schmaler Streifen. Dann waechst die Zeile eben mit und der Text endet etwas hoeher. */ min-height: clamp(200px, 18vw, 380px); } /* Absolut gesetzt, damit die Hoehe allein von der Spalte kommt und nicht vom Bild selbst. */ .lefx-pj-text .lefx-pj-bild img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; } /* -- Lage des Bildausschnitts -- Beschnitten wird von Haus aus mittig. Wo das Motiv am Rand sitzt, wird es dabei angeschnitten - bei der Digitalen Trainingsplattform etwa der Handscanner rechts. CSS kennt den Bildinhalt nicht, die Lage muss also pro Bild gesetzt werden. Am Bildblock im Editor unter "Erweitert -> Zusaetzliche CSS-Klassen" eine dieser Klassen ergaenzen: is-bild-rechts haelt den rechten Teil des Motivs is-bild-links haelt den linken Teil is-bild-oben haelt den oberen Teil is-bild-unten haelt den unteren Teil 70 und nicht 100 Prozent, also nicht ganz an den Rand: Das Motiv hat meist selbst etwas Abstand zur Bildkante und waere sonst wieder angeschnitten. Gemessen am Handscanner (Quelle 1600px breit, Motiv bei 860 bis 1180). Sichtbarer Ausschnitt mittig und mit 70 Prozent: 1024px 405px breit 896-1301 -> 837-1242 1435px 513px breit 816-1328 -> 761-1274 1750px 578px breit 511-1089 -> 715-1293 2559px 1066px breit 401-1466 -> 374-1440 Ab 1024px steht das Geraet damit vollstaendig im Bild. GRENZE: Unter rund 900px ist der Ausschnitt schmaler als das Motiv selbst - bei 850px sind es nur 276px von 320px. Dort hilft keine Verschiebung mehr, das Bild muesste beschnitten geliefert werden. Ab 781px abwaerts stehen die Spalten untereinander, dann wird ueberhaupt nicht mehr beschnitten. */ .lefx-pj-text .lefx-pj-bild.is-bild-rechts img { object-position: 70% center; } .lefx-pj-text .lefx-pj-bild.is-bild-links img { object-position: 30% center; } .lefx-pj-text .lefx-pj-bild.is-bild-oben img { object-position: center 30%; } .lefx-pj-text .lefx-pj-bild.is-bild-unten img { object-position: center 70%; } /* ============================================================ 2. TRAILER ============================================================ */ .lefx-pj-trailer { /* Der Farbverlauf beginnt LINKS auf der Linie des Inhaltsbereichs und laeuft nach rechts bis zum Fensterrand - wie die Farbflaeche weiter unten auf der Seite. Umgesetzt im Verlauf selbst: Bis zum Versatz ist er durchsichtig, danach folgen die Farben. Die harte Kante (zweimal derselbe Punkt) verhindert, dass die erste Farbe nach links ausblendet. Der Versatz nutzt 100% - das ist hier die Fensterbreite, weil der Abschnitt randlos ist. */ background: linear-gradient(90deg, transparent 0, transparent var(--lefx-pt-versatz), var(--lefx-dark, #232323) var(--lefx-pt-versatz), #04413f 60%, var(--lefx-petrol, #027775) 100%); /* Oben KEIN Innenabstand: Das Video wird ueber die Oberkante der Flaeche hinausgezogen. Mit einem Abstand hier wuerde die Flaeche mitwachsen und der Ueberstand verschwinden. */ padding-top: 0 !important; padding-bottom: clamp(40px, 5vw, 96px) !important; /* verhindert, dass der negative Abstand des Videos an den Abschnitt weiterwandert statt das Video zu ziehen */ display: flow-root; } /* Der Inhalt steht in derselben Spalte wie der uebrige Beitrag. Die gedrehte Ueberschrift sitzt an deren linkem Rand, das Video fuellt den Rest bis zum rechten Rand. */ .lefx-pj-trailer.lefx-pj-trailer .lefx-pj-trailer-inner { max-width: var(--lefx-hero-width, clamp(1100px, 78vw, 1900px)); margin-inline: auto; padding: var(--lefx-pj-innen) 24px; display: flex; align-items: stretch; gap: clamp(16px, 2vw, 40px); } /* -- gedrehte Ueberschrift -- Gleiche Gestaltung wie die gedrehten Ueberschriften der Profession-Seite, nur in Weiss: Sie steht hier auf dunklem Grund. */ .lefx-pj-trailer.lefx-pj-trailer .lefx-pj-vtitel, .lefx-pj-weitere.lefx-pj-weitere .lefx-pj-vtitel { writing-mode: vertical-rl; transform: rotate(180deg); margin: 0 !important; align-self: center; flex: 0 0 auto; font-size: clamp(19px, 1.8vw, 30px); font-weight: 700; letter-spacing: .22em; text-transform: uppercase; line-height: 1; color: #fff; white-space: nowrap; } /* -- Video -- Ragt oben aus der Flaeche heraus, unten bleibt es darin. */ .lefx-pj-trailer.lefx-pj-trailer .lefx-pj-video { /* Breite FEST vorgegeben, nicht ueber das Wachsen im Flexlayout: Der Einbettungsblock von WordPress richtet sich nach der Groesse des iframe und wuchs nicht auf die vorgegebene Hoechstbreite - gemessen blieb er bei 44vw statt 60vw. min(..., 100%) verhindert, dass er auf schmalen Fenstern ueber die Spalte hinauslaeuft. */ flex: 0 0 auto; width: min(61vw, 100%); min-width: 0; /* margin-left: auto haelt es RECHTS buendig mit dem uebrigen Inhalt. Der Platz entsteht dadurch links, also zur Ueberschrift hin - genau dort ist er gewuenscht. Oben Innenabstand der Flaeche PLUS Hub: Nur so ragt das Video genau um den Hub darueber hinaus. */ margin: calc(-1 * (var(--lefx-pj-innen) + var(--lefx-pj-video-hub))) 0 0 auto !important; } /* -- Spalte mit Video und Bildunterschrift -- Steht unter dem Video eine Ueberschrift, umschliesst diese Gruppe beides. Sie uebernimmt dann Breite und Ueberstand des Videos, das Video selbst fuellt sie nur noch aus. Ohne die Gruppe stuende die Ueberschrift als drittes Element NEBEN dem Video, denn die Zeile ist ein Flexlayout. */ .lefx-pj-trailer.lefx-pj-trailer .lefx-pj-vspalte { /* Breite in flex-basis UND width: Astra setzt Gruppen sonst auf die Inhaltsbreite zurueck, dann schrumpfte die Spalte auf die Eigengroesse des iframe zusammen. */ flex: 0 0 min(61vw, 100%); width: min(61vw, 100%) !important; max-width: none !important; min-width: 0; margin: calc(-1 * (var(--lefx-pj-innen) + var(--lefx-pj-video-hub))) 0 0 auto !important; } .lefx-pj-trailer.lefx-pj-trailer .lefx-pj-vspalte .lefx-pj-video { width: 100% !important; max-width: none !important; margin: 0 !important; } /* -- zwei Videos nebeneinander im Trailer -- Ausnahme fuer Beitraege, bei denen zwei Videos zusammengehoeren. Das Raster uebernimmt Breite und Ueberstand des einzelnen Videos, die Videos darin teilen sich die Flaeche. */ .lefx-pj-trailer.lefx-pj-trailer .lefx-pj-vraster { flex: 0 0 min(61vw, 100%); width: min(61vw, 100%) !important; max-width: none !important; min-width: 0; margin: calc(-1 * (var(--lefx-pj-innen) + var(--lefx-pj-video-hub))) 0 0 auto !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 40px); } .lefx-pj-trailer.lefx-pj-trailer .lefx-pj-vraster .lefx-pj-video { width: auto !important; max-width: none !important; margin: 0 !important; } .lefx-pj-trailer.lefx-pj-trailer .lefx-pj-vunter { margin: clamp(12px, 1.1vw, 20px) 0 0 !important; font-size: clamp(15px, 1.2vw, 20px); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1.3; color: #fff; } /* -- Seitenverhaeltnis der Videos -- Wird hier selbst festgelegt, nicht dem Theme ueberlassen: WordPress bringt zwar Regeln fuer 16:9 mit, die haengen aber an der Klasse "wp-embed-responsive" am body - und die setzt Astra nicht. Ohne sie hat der Rahmen keine Hoehe. Astra wiederum setzt das iframe ueber body .ast-oembed-container * { position:absolute; height:100% } absolut, ein Seitenverhaeltnis am iframe selbst bleibt dadurch wirkungslos. Deshalb: Das Verhaeltnis sitzt am Rahmen, das iframe fuellt ihn aus. Damit stimmt es unabhaengig von Theme und Einstellungen. */ .lefx-pj-video.lefx-pj-video .wp-block-embed__wrapper { position: relative; aspect-ratio: 16 / 9; } .lefx-pj-video.lefx-pj-video .ast-oembed-container { position: absolute; inset: 0; } .lefx-pj-video.lefx-pj-video iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; } /* ============================================================ 3. WEITERE VIDEOS ============================================================ Im Trailer steht immer nur EIN Video. Hat ein Projekt mehrere, folgen die uebrigen am Ende des Textes - im selben Aufbau wie der Trailer: Farbflaeche ab der Linie des Inhaltsbereichs bis zum rechten Fensterrand, gedrehte Ueberschrift links, daneben die Videos. ein Video -> eine Spalte mehrere -> zwei Spalten nebeneinander Struktur: .lefx-pj-weitere group, volle Breite .lefx-pj-weitere-inner group, Inhaltsbreite, flex .lefx-pj-vtitel h2, gedreht .lefx-pj-weitere-raster group, Raster mit den Videos ============================================================ */ .lefx-pj-weitere { max-width: none !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; /* Begruendung des Verlaufs siehe Trailer. */ background: linear-gradient(90deg, transparent 0, transparent var(--lefx-pt-versatz), var(--lefx-dark, #232323) var(--lefx-pt-versatz), #04413f 60%, var(--lefx-petrol, #027775) 100%); padding-top: 0 !important; padding-bottom: clamp(40px, 5vw, 96px) !important; display: flow-root; } .lefx-pj-weitere.lefx-pj-weitere .lefx-pj-weitere-inner { max-width: var(--lefx-hero-width, clamp(1100px, 78vw, 1900px)); margin-inline: auto; padding: var(--lefx-pj-innen) 24px; display: flex; align-items: stretch; gap: clamp(16px, 2vw, 40px); } /* Das Raster nimmt den Platz neben der gedrehten Ueberschrift ein und wird oben wie das Video des Trailers herausgezogen. */ .lefx-pj-weitere.lefx-pj-weitere .lefx-pj-weitere-raster { flex: 1 1 auto; min-width: 0; margin: calc(-1 * (var(--lefx-pj-innen) + var(--lefx-pj-video-hub))) 0 0 auto !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 40px); } /* Ein einzelnes Video steht in EINER Spalte - und zwar genau so breit wie das des Trailers. Vorher fuellte das Raster als flex: 1 1 auto den ganzen Rest der Zeile, dadurch war dieses Video groesser als das obere und stand naeher an der Ueberschrift. Die feste Breite erzeugt beides zugleich: gleiche Groesse und, weil der uebrige Platz nach links faellt, denselben Abstand zur gedrehten Ueberschrift. */ .lefx-pj-weitere.is-voll .lefx-pj-weitere-raster { grid-template-columns: minmax(0, 1fr); flex: 0 0 auto; width: min(61vw, 100%); } .lefx-pj-weitere .lefx-pj-weitere-raster .lefx-pj-video { width: auto; max-width: none; margin: 0 !important; } /* -- Shorts -- Videos im Hochformat, drei nebeneinander. Sie sitzen im selben Abschnitt wie die weiteren Videos und uebernehmen dessen Farbflaeche und gedrehte Ueberschrift - nur Spaltenzahl und Seitenverhaeltnis sind andere. */ .lefx-pj-weitere.is-shorts .lefx-pj-weitere-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lefx-pj-weitere.lefx-pj-weitere .lefx-pj-hoch .wp-block-embed__wrapper { aspect-ratio: 9 / 16; } /* ============================================================ MOBIL ============================================================ */ @media (max-width: 781px) { /* Zwei Videos nebeneinander waeren hier je rund 170px breit - untereinander. Die gedrehte Ueberschrift steht wie beim Trailer waagerecht darueber. */ .lefx-pj-weitere.lefx-pj-weitere .lefx-pj-weitere-inner { flex-direction: column; padding: clamp(20px, 5vw, 36px) 24px; } .lefx-pj-weitere.lefx-pj-weitere .lefx-pj-weitere-raster { grid-template-columns: minmax(0, 1fr); margin: 0 !important; } /* Wie beim Trailer: die feste Breite der Desktop-Ansicht muss hier weg, sonst steht das einzelne Video schmaler als der uebrige Inhalt. */ .lefx-pj-weitere.is-voll .lefx-pj-weitere-raster { width: 100%; } /* Shorts bleiben auch mobil nebeneinander: Untereinander waeren drei Hochformate zusammen mehr als zwei Bildschirmhoehen lang. */ .lefx-pj-weitere.is-shorts .lefx-pj-weitere-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 2vw, 16px); } /* Zwei Spalten untereinander. Das Bild gehoert dabei NACH den Text: Es erklaert ihn, umgekehrt stuende es ohne Bezug am Anfang. WordPress stapelt hier von sich aus in der richtigen Reihenfolge, die Angabe stellt das nur sicher. */ .lefx-pj-text.lefx-pj-text .lefx-pj-zwei { flex-direction: column; } .lefx-pj-text.lefx-pj-text .lefx-pj-zwei > .wp-block-column { flex-basis: 100% !important; } /* Untereinander gibt es keine gemeinsame Hoehe mehr - hier soll das Bild wieder in seinem eigenen Format stehen und nicht beschnitten werden. */ .lefx-pj-text.lefx-pj-text .lefx-pj-bild { flex: 0 0 auto; min-height: 0; position: static; } .lefx-pj-text .lefx-pj-bild img { position: static; height: auto; } /* Waagerecht 24px wie ueberall sonst - damit ist das Video genau so breit wie der Fliesstext der uebrigen Abschnitte. Der Verlauf laeuft weiter randlos. */ .lefx-pj-trailer.lefx-pj-trailer .lefx-pj-trailer-inner { flex-direction: column; padding: clamp(20px, 5vw, 36px) 24px; } /* Waagerecht und zentriert - dieselbe Entscheidung wie fuer die gedrehten Ueberschriften der Profession-Seite. */ .lefx-pj-trailer.lefx-pj-trailer .lefx-pj-vtitel, .lefx-pj-weitere.lefx-pj-weitere .lefx-pj-vtitel { writing-mode: horizontal-tb; transform: none; text-align: center; align-self: stretch; margin-bottom: 14px !important; } /* width MUSS hier zurueckgesetzt werden: Die Angabe der Desktop-Ansicht ist min(61vw, 100%) und waehlte auf schmalen Geraeten die 61vw - das Video stand deutlich schmaler als der uebrige Inhalt und dabei linksbuendig. */ .lefx-pj-trailer.lefx-pj-trailer .lefx-pj-video { width: 100%; max-width: none; margin: 0 auto !important; } /* dasselbe fuer die Spalte, wenn eine Ueberschrift unter dem Video steht */ .lefx-pj-trailer.lefx-pj-trailer .lefx-pj-vspalte { width: 100%; margin: 0 !important; } /* Zwei Videos nebeneinander waeren hier je rund 170px breit - also untereinander, wie im zweiten Videoabschnitt. */ .lefx-pj-trailer.lefx-pj-trailer .lefx-pj-vraster { width: 100% !important; margin: 0 !important; grid-template-columns: minmax(0, 1fr); } .lefx-pj-trailer.lefx-pj-trailer .lefx-pj-vunter { text-align: center; } } /* ============================================================ EINGEBETTETE 360-GRAD-TOUR AUF SCHMALEN GERAETEN ============================================================ Die feste Hoehe der Tour ergibt schmal ein sehr breites Querformat - der Player zeigt darin kaum noch Inhalt. Deshalb gilt hier ein Seitenverhaeltnis statt einer festen Hoehe: Die Tour wird nie flacher als 4:3. Die Untergrenze von 320px bleibt, damit sie auf sehr kleinen Geraeten nicht winzig wird - dort steht sie dann hochkant, was dem Player entgegenkommt. */ @media (max-width: 781px) { .lefx-pj-text .lefx-pj-tour { height: auto; aspect-ratio: 4 / 3; min-height: 320px; } /* Die Infografik mit dem Projektablauf hat fuenf Spalten mit Kleinsttext. Auf Smartphonebreite ist sie nicht mehr lesbar und waere nur ein grauer Block - deshalb entfaellt sie. Der Inhalt steht als Fliesstext ohnehin im Beitrag. */ .lefx-pj-text.lefx-pj-text .lefx-pj-infografik { display: none !important; } } /* ============================================================ LEFX Projektbeitrag - Farbflaeche mit Bild und Text ============================================================ Passt zu pj-tour-blocks.html. Struktur: .lefx-pt-tour group, volle Breite, weiss .lefx-pt-band group, Farbverlauf .lefx-pt-inner group, flex .lefx-pt-bild figure > img .lefx-pt-spalte group .lefx-pt-titel h2 .lefx-pt-text p (mehrere moeglich) Die Farbflaeche beginnt links auf der Linie des Inhaltsbereichs und laeuft nach rechts bis zum Fensterrand. Das Bild ragt oben und links darueber hinaus. Umgesetzt ueber ZWEI verschachtelte Gruppen: Die aeussere ist randlos und hat links einen Innenabstand in Hoehe des Inhaltsversatzes, die innere traegt den Verlauf und fuellt den Rest. So braucht es keine Rechnung mit vw-Einheiten, die wegen der Bildlaufleiste immer ein paar Pixel daneben liegt. ============================================================ */ :root { /* Abstand von der linken Fensterkante bis zur Linie des Inhaltsbereichs. max() faengt schmale Fenster ab: Dort ist der Inhaltsbereich breiter als das Fenster und die Rechnung wuerde negativ. */ --lefx-pt-versatz: calc( max(0px, (100% - var(--lefx-hero-width, clamp(1100px, 78vw, 1900px))) / 2) + 24px); /* Innenabstand der Farbflaeche */ --lefx-pt-innen: clamp(24px, 3vw, 56px); /* Ueberstand des Bildes nach LINKS ueber die Flaeche hinaus. Am Screenshot gemessen rund 34px bei 667px Breite. */ --lefx-pt-bild-links: clamp(16px, 5vw, 110px); /* Ueberstand des Bildes nach OBEN. Am Screenshot rund 29px bei 667px Breite. */ --lefx-pt-bild-oben: clamp(16px, 4.3vw, 96px); /* Freier Abstand ueber dem herausragenden Bild. Ohne ihn stiess es direkt an die Flaeche des Abschnitts darueber - bei den Videoabschnitten ist das eine farbige Flaeche, die Bild und Hintergrund ineinander laufen liess. */ --lefx-pt-luft-oben: clamp(24px, 3vw, 56px); } /* Astra begrenzt Bloecke auf die Inhaltsbreite - Begruendung siehe Header-CSS der Startseite. */ .lefx-pt-tour { max-width: none !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; } /* ============================================================ 1. AEUSSERE GRUPPE ============================================================ */ .lefx-pt-tour { background: #ffffff; /* Links bis zur Linie des Inhaltsbereichs, rechts bis zum Fensterrand - deshalb dort KEIN Abstand. */ padding-left: var(--lefx-pt-versatz) !important; padding-right: 0 !important; /* Oben Platz fuer den Ueberstand des Bildes, plus freier Abstand zum Abschnitt darueber. */ padding-top: calc(var(--lefx-pt-bild-oben) + var(--lefx-pt-luft-oben)) !important; padding-bottom: clamp(40px, 5vw, 96px) !important; /* verhindert, dass die negativen Abstaende des Bildes an den Abschnitt weiterwandern statt das Bild zu ziehen */ display: flow-root; } /* ============================================================ 2. FARBFLAECHE ============================================================ */ .lefx-pt-tour.lefx-pt-tour .lefx-pt-band { margin: 0 !important; background: linear-gradient(100deg, var(--lefx-petrol, #027775) 0%, #3aa79c 55%, var(--lefx-mint, #70c2b4) 100%); padding: var(--lefx-pt-innen); /* verhindert, dass der negative Abstand des Bildes die Flaeche mit nach oben zieht */ display: flow-root; } .lefx-pt-tour.lefx-pt-tour .lefx-pt-inner { margin: 0 !important; display: flex; align-items: flex-start; gap: clamp(20px, 3vw, 60px); /* Rechts endet der INHALT auf der Linie des Inhaltsbereichs, waehrend der Verlauf weiter bis zum Fensterrand laeuft. Ohne das war die Textspalte deutlich schmaler als der Fliesstext darueber und die Zeilen entsprechend kurz. Anders als links kommt der Wert hier aus vw und nicht aus %: Diese Gruppe ist nicht fensterbreit, ein Prozentwert wuerde sich auf die falsche Breite beziehen. Die Bildlaufleiste macht das um wenige Pixel ungenau - hier unkritisch, es geht nur um das Ende des Textes, nicht um eine Kante. */ padding-right: max(0px, calc( (100vw - var(--lefx-hero-width, clamp(1100px, 78vw, 1900px))) / 2 + 24px - var(--lefx-pt-innen))); } /* ============================================================ 3. BILD ============================================================ */ /* Ragt nach oben und nach links aus der Flaeche heraus. Der Innenabstand der Flaeche wird dabei mit herausgerechnet, sonst waere der Ueberstand um genau diesen Betrag kleiner. */ .lefx-pt-tour.lefx-pt-tour .lefx-pt-bild { flex: 0 0 clamp(200px, 30vw, 560px); margin: calc(-1 * (var(--lefx-pt-innen) + var(--lefx-pt-bild-oben))) 0 0 calc(-1 * (var(--lefx-pt-innen) + var(--lefx-pt-bild-links))) !important; } .lefx-pt-bild img { display: block; width: 100%; /* QUADRATISCH. Fuer diese Stelle werden eigene quadratische Bilder angelegt - empfohlenes Mass 1200x1200. cover statt contain: Bei einem Bild, das doch nicht quadratisch ist, wird mittig zugeschnitten statt Raender stehen zu lassen. Die Flaeche dahinter ist der Farbverlauf, ein Rand fiele dort sofort auf. */ aspect-ratio: 1 / 1; height: auto; object-fit: cover; } /* ============================================================ 4. TEXTSPALTE ============================================================ */ /* Fuellt die Breite bis zur rechten Linie des Inhaltsbereichs - die gibt der Innenabstand der Gruppe darueber vor. */ .lefx-pt-tour.lefx-pt-tour .lefx-pt-spalte { flex: 1 1 auto; min-width: 0; margin: 0 !important; } .lefx-pt-tour.lefx-pt-tour .lefx-pt-titel { margin: 0 0 clamp(12px, 1.2vw, 20px) !important; font-size: clamp(17px, 1.5vw, 23px); font-weight: 700; line-height: 1.35; color: #fff; } .lefx-pt-tour.lefx-pt-tour .lefx-pt-text { margin: 0 !important; font-size: clamp(13px, 1vw, 16px); line-height: 1.75; color: #fff; } .lefx-pt-tour.lefx-pt-tour .lefx-pt-text + .lefx-pt-text { margin-top: clamp(14px, 1.2vw, 22px) !important; } /* Zwei Textspalten INNERHALB der Farbflaeche - etwa fuer zwei Varianten, die nebeneinander stehen sollen. */ .lefx-pt-tour.lefx-pt-tour .lefx-pt-zwei { margin: clamp(18px, 1.8vw, 32px) 0 0 !important; gap: clamp(20px, 2.5vw, 48px); } .lefx-pt-tour.lefx-pt-tour .lefx-pt-zwei > .wp-block-column { margin: 0 !important; } .lefx-pt-tour.lefx-pt-tour .lefx-pt-untertitel { margin: 0 0 clamp(8px, 0.8vw, 14px) !important; font-size: clamp(14px, 1.1vw, 18px); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.35; color: #fff; } @media (max-width: 781px) { .lefx-pt-tour.lefx-pt-tour .lefx-pt-zwei { flex-direction: column; } .lefx-pt-tour.lefx-pt-tour .lefx-pt-zwei > .wp-block-column { flex-basis: 100% !important; } } /* ------------------------------------------------------------ Logo am Fuss der Farbflaeche ------------------------------------------------------------ Etwa der Foerderhinweis der EU. Es steht unter dem Text, endet rechts auf derselben Linie wie er und unten auf der Unterkante des quadratischen Bildes links. Die Regeln greifen nur, wenn ein solches Logo vorhanden ist - sonst wuerde die Textspalte in allen anderen Beitraegen auf die Hoehe des Bildes gedehnt. */ .lefx-pt-tour.lefx-pt-tour .lefx-pt-inner:has(.lefx-pt-logo) { /* Beide Spalten auf dieselbe Hoehe, sonst gibt es keine gemeinsame Unterkante, an der das Logo sitzen koennte. */ align-items: stretch; } .lefx-pt-tour.lefx-pt-tour .lefx-pt-spalte:has(.lefx-pt-logo) { display: flex; flex-direction: column; } /* Wird die Textspalte durch das Logo hoeher als das Bild, waechst die Zeile mit - das Bild bekaeme dann unten leeren Raum und die gemeinsame Unterkante waere weg. Deshalb fuellt das Bild in diesem Fall seinen Rahmen aus. Es ist dann nicht mehr streng quadratisch, sondern wird mittig beschnitten. */ .lefx-pt-tour.lefx-pt-tour .lefx-pt-inner:has(.lefx-pt-logo) .lefx-pt-bild { display: flex; } .lefx-pt-tour.lefx-pt-tour .lefx-pt-inner:has(.lefx-pt-logo) .lefx-pt-bild img { aspect-ratio: auto; height: 100%; min-height: 100%; object-fit: cover; } .lefx-pt-tour.lefx-pt-tour .lefx-pt-logo { /* margin-top: auto schiebt das Logo an den unteren Rand der Spalte, margin-left: auto an den rechten. */ margin: clamp(24px, 3vw, 56px) 0 0 auto !important; /* min(..., 100%) begrenzt auf die Breite der Textspalte - sonst liefe das Logo darueber hinaus und die rechte Bundigkeit waere dahin. Bei 1600px Fensterbreite ist die Spalte 745px breit, das Logo wird damit 745px statt der gerechneten 768px. */ width: min(clamp(400px, 48vw, 800px), 100%); } .lefx-pt-tour.lefx-pt-tour .lefx-pt-logo:not(:first-child) { margin-top: auto !important; padding-top: clamp(24px, 3vw, 56px); } .lefx-pt-tour.lefx-pt-tour .lefx-pt-logo img { display: block; width: 100%; height: auto; } @media (max-width: 781px) { /* Untereinander gibt es keine gemeinsame Unterkante mehr - das Logo steht dann einfach unter dem Text. */ .lefx-pt-tour.lefx-pt-tour .lefx-pt-logo:not(:first-child) { margin-top: clamp(20px, 5vw, 36px) !important; padding-top: 0; } } /* Links auf der Farbflaeche in Schwarz. Das Pink der uebrigen Seiten steht auf dem gruenen Verlauf zu dicht am Untergrund und ist schlecht zu lesen; Schwarz hebt sich klar ab. Fett sind sie ohnehin, sie bleiben also als Link erkennbar. */ .lefx-pt-tour.lefx-pt-tour a { color: var(--lefx-dark, #232323); text-decoration-color: var(--lefx-dark, #232323); } .lefx-pt-tour.lefx-pt-tour a:hover, .lefx-pt-tour.lefx-pt-tour a:focus-visible { color: #000; } /* Namenszeile unter einem Kundenzitat */ .lefx-pt-tour.lefx-pt-tour .lefx-pt-quelle { margin: clamp(14px, 1.2vw, 22px) 0 0 !important; font-size: clamp(12px, 0.9vw, 15px); font-weight: 700; line-height: 1.5; color: #fff; } /* ============================================================ MOBIL ============================================================ */ @media (max-width: 781px) { /* Der Versatz faellt weg - auf schmalen Geraeten gibt es links keinen Rand mehr, aus dem die Flaeche herauswachsen koennte. */ .lefx-pt-tour { padding-left: 24px !important; padding-right: 24px !important; } .lefx-pt-tour.lefx-pt-tour .lefx-pt-inner { flex-direction: column; padding-right: 0; } /* Nur noch nach oben ueberstehen. Ein Ueberstand nach links wuerde hier aus dem Fenster laufen. */ .lefx-pt-tour.lefx-pt-tour .lefx-pt-bild { flex: 0 0 auto; max-width: 460px; margin: calc(-1 * (var(--lefx-pt-innen) + var(--lefx-pt-bild-oben))) auto 0 !important; } .lefx-pt-tour.lefx-pt-tour .lefx-pt-spalte { margin-top: clamp(16px, 4vw, 32px) !important; } } /* ============================================================ PARTNER UND FOERDERER - zweispaltig unter der Farbflaeche ============================================================ Steht direkt hinter .lefx-pt-tour und traegt die Angaben, die vorher im letzten Absatz der Farbflaeche standen. .lefx-pp-partner group, volle Breite, weiss .lefx-pp-inner columns, 50/50 .lefx-pp-bild figure > img (links) .lefx-pp-text p (mehrfach) (rechts) Innenabstand statt Aussenabstand - sonst scheint der dunkle Seitenhintergrund von Astra durch (siehe Handbuch, Abschnitt 9). */ .lefx-pp-partner { max-width: none !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; background: #ffffff; padding-block: clamp(36px, 4.5vw, 90px) !important; } /* Klasse doppelt: erstes Kind der Gruppe, sonst setzt WordPress margin-block-start auf 0. */ .lefx-pp-partner.lefx-pp-partner .lefx-pp-inner { max-width: var(--lefx-hero-width, clamp(1100px, 78vw, 1900px)); margin-inline: auto !important; margin-top: 0 !important; padding-inline: 24px; gap: clamp(24px, 3vw, 64px); /* Grafik und Text mittig zueinander, nicht oben buendig - die Grafik ist in der Regel flacher als der Text. */ align-items: center; } .lefx-pp-partner .lefx-pp-bild { margin: 0 !important; } .lefx-pp-partner .lefx-pp-bild img { display: block; width: 100%; height: auto; } .lefx-pp-partner .lefx-pp-text { margin: 0 !important; /* Fliesstextgroesse der uebrigen Abschnitte */ font-size: clamp(13px, 1vw, 16px); line-height: 1.75; color: var(--lefx-dark, #232323); } .lefx-pp-partner .lefx-pp-text + .lefx-pp-text { margin-top: clamp(14px, 1.4vw, 24px) !important; } @media (max-width: 781px) { .lefx-pp-partner.lefx-pp-partner .lefx-pp-inner { flex-direction: column; } .lefx-pp-partner.lefx-pp-partner .lefx-pp-inner > .wp-block-column { flex-basis: 100% !important; } } /* ============================================================ FLACHE VARIANTE - Zusatzklasse "is-flach" ============================================================ Steht wenig Text in der Flaeche, gibt das Bild die Hoehe vor und die Flaeche wird unnoetig hoch: gemessen bei 1920px 533px Flaeche fuer 235px Text. Mit "is-flach" richtet sich die Hoehe allein nach dem Text. Dafuer wird das Bild aus dem Fluss genommen und absolut gesetzt - es behaelt seine Groesse und ragt dann eben auch unten heraus, so wie es oben und links ohnehin schon tut. Der untere Innenabstand des Abschnitts faengt diesen Ueberstand auf und laesst darunter freien Platz bis zur Abschlussgrafik. Er haengt deshalb an der BILDHOEHE und nicht an der Fensterbreite: Ab 1867px steht das Bild auf seinem Hoechstwert von 560px, ein reiner vw-Wert waere dort zu klein geworden - gemessen blieben bei 1920px nur noch 14px frei. Gemessener freier Platz zwischen Bildunterkante und der sichtbaren Kante der Mint-Grafik (Medieval Diorama): 900px 102 1024px 73 1435px 93 1920px 61 2559px 51 Bei laengerem Text in der Flaeche wird es mehr, weil das Bild dann weniger weit herausragt (VR Engine Training: 123 bis 178). UMGEKEHRT bei sehr kurzem Text: Dort ragt das Bild weiter heraus und der Platz schrumpft - bei AR BioTic auf 8 bis 51px. Die Texthoehe steht in CSS nicht zur Verfuegung, deshalb gibt es dafuer eine zweite Stufe: "is-flach-plus" am selben Block. */ .lefx-pt-tour.is-flach { padding-bottom: max(80px, calc(clamp(200px, 30vw, 560px) * .45 + 25px + var(--lefx-pt-flach-extra, 0px))) !important; } /* Zweite Stufe fuer Flaechen mit sehr wenig Text. Gemessen bei AR BioTic (Flaeche nur 120 bis 194px hoch) ergeben 55px Zuschlag einen freien Platz von 63 bis 106px - also so viel wie bei den uebrigen Beitraegen. */ .lefx-pt-tour.is-flach.is-flach-plus { --lefx-pt-flach-extra: 55px; } .lefx-pt-tour.is-flach .lefx-pt-inner { position: relative; } .lefx-pt-tour.is-flach.is-flach .lefx-pt-bild { position: absolute; top: calc(-1 * (var(--lefx-pt-innen) + var(--lefx-pt-bild-oben))); left: calc(-1 * (var(--lefx-pt-innen) + var(--lefx-pt-bild-links))); width: clamp(200px, 30vw, 560px); margin: 0 !important; } /* Platz fuer das Bild, das jetzt nicht mehr im Fluss steht: Bildbreite abzueglich dessen, was links aus der Flaeche herausragt, plus der bisherige Abstand zwischen beiden. */ .lefx-pt-tour.is-flach.is-flach .lefx-pt-spalte { margin-left: calc( clamp(200px, 30vw, 560px) - var(--lefx-pt-innen) - var(--lefx-pt-bild-links) + clamp(20px, 3vw, 60px)) !important; } @media (max-width: 781px) { /* Schmal stehen Bild und Text untereinander - dort gibt es nichts flach zu machen. */ .lefx-pt-tour.is-flach { padding-bottom: clamp(40px, 5vw, 96px) !important; } .lefx-pt-tour.is-flach.is-flach .lefx-pt-bild { position: static; width: auto; } .lefx-pt-tour.is-flach.is-flach .lefx-pt-spalte { margin-left: 0 !important; } } /* ============================================================ LEFX Projektbeitrag - Abschluss ============================================================ Passt zu pj-abschluss-blocks.html. Gleicher Aufbau wie der Abschluss der Showroom-Seite (lefx-sk-*), aber eigene Klassen: Dort ist die Grafik schwarz und die Box petrol, hier ist es umgekehrt. Mit gemeinsamen Klassen haette eine Farbaenderung immer beide Seiten getroffen. Struktur: .lefx-pa-abschluss group, volle Breite, weiss .lefx-pa-grafik figure > img, volle Breite .lefx-pa-inner group, Inhaltsbreite, Box rechts .lefx-pa-box group, dunkel .lefx-pa-vorzeile p .lefx-pa-boxtitle h2 .lefx-pa-buttons Button, ragt links heraus Ausgemessen an image-mint.overlay.png (2560x1044, also 40,8vw hoch bei voller Breite): - oben transparent, die Alpha-Kante liegt je nach Stelle zwischen 1,4 % und 39,2 % der Hoehe. Darueber scheint der weisse Abschnitt durch. - darunter durchgehend deckend in #70C2B4 - genau die Mint-Farbe der uebrigen Seiten. ============================================================ */ :root { /* Abstand der Box zur OBERKANTE der Grafik. Am Screenshot gemessen 22px bei 670px Breite, also rund 3,3vw. Sie wird ueberlagernd gesetzt und nicht mit einem negativen Abstand hochgezogen - dieselbe Begruendung wie auf der Showroom-Seite: Die Hoehe der Grafik haengt an der Fensterbreite, die der Box am Text. */ --lefx-pa-box-oben: 2.4vw; /* Abstand der Box zur rechten Linie des Inhaltsbereichs. Sie steht also NICHT rechts buendig, sondern ein Stueck weiter links auf der Diagonale - am Screenshot gemessen rund 465px bei 2000px Fensterbreite. */ --lefx-pa-box-rechts: 23vw; /* Wie weit der Button ueber die LINKE Kante der Box HINAUSragt. Der Rest seiner Breite liegt AUF der Box - je kleiner dieser Wert, desto groesser die Ueberlappung. Bei 120px lag der Knopf mit gemessenen 8px praktisch nur an der Kante an. */ --lefx-pa-btn-ueberstand: clamp(36px, 3.2vw, 70px); /* Akzentfarbe des Buttons. */ --lefx-pa-pink: #e8549a; --lefx-pa-pink-dunkel: #d63f87; /* Sichtbare Hoehe der Grafik. image-mint.overlay.png ist 2560x1044, bei voller Breite also 40,8vw hoch. Unterhalb von 16vw ist sie ueber die ganze Breite gleichmaessig mint - dort steht nur noch Flaeche ohne Form. 22vw laesst die Diagonale samt etwas Luft darunter stehen und schneidet den Rest ab. Am Screenshot gemessen endete die gewuenschte Kante 436px unter der Oberkante bei 2000px Fensterbreite. NICHT unter 17vw setzen, sonst wird die Diagonale angeschnitten. */ --lefx-pa-grafik-hoehe: 22vw; } /* Astra begrenzt Bloecke auf die Inhaltsbreite - Begruendung siehe Header-CSS der Startseite. */ .lefx-pa-abschluss, .lefx-pa-grafik { max-width: none !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; } /* ============================================================ 1. ABSCHNITT ============================================================ */ .lefx-pa-abschluss { background: #ffffff; padding: 0 !important; /* Die Grafik liegt INNERHALB dieser Gruppe. Gruppen bekommen von WordPress einen seitlichen Innenabstand, der sonst als heller Streifen neben der Grafik durchlaeuft - ein Kind kann ihn nicht ueberschreiben. */ padding-left: 0 !important; padding-right: 0 !important; /* Bezug fuer die ueberlagernde Box */ position: relative; display: flow-root; } /* Steht ein Videoabschnitt unmittelbar davor, braucht es Luft: Dessen Farbflaeche hat eine harte Unterkante, die Spitze der Grafik stiess sonst direkt darunter an. Der Abstand gehoert an DIESEN Abschnitt - er ist weiss. Als Aussenabstand dazwischen zeigte sich der dunkle Seiten- hintergrund von Astra als Streifen. Die Regel steht hier und nicht im Text-CSS, weil das padding: 0 !important oben sonst gewinnt: Sie hat zwei Klassen und steht spaeter in derselben Datei. Die Farbflaeche lefx-pt-tour braucht das nicht - sie bringt ihren eigenen weissen Innenabstand nach unten mit. */ .lefx-pj-trailer + .lefx-pa-abschluss, .lefx-pj-weitere + .lefx-pa-abschluss { padding-top: clamp(48px, 6vw, 120px) !important; } /* ============================================================ 2. GRAFIK ============================================================ */ /* Klasse doppelt: erstes Kind der Gruppe - sonst setzt WordPress margin-block-start auf 0. */ .lefx-pa-abschluss.lefx-pa-abschluss .lefx-pa-grafik { width: 100% !important; max-width: none !important; margin: 0 !important; position: relative; z-index: 1; pointer-events: none; } /* Unten gekuerzt: object-position: top haelt die Diagonale oben fest, abgeschnitten wird nur die gleichmaessige Mintflaeche darunter. Ueber dem Footer bleibt dadurch weniger Mint stehen. DREI Klassen noetig: WordPress setzt .wp-block-image.alignfull img { height: auto } also mit zwei Klassen. Eine einzelne Klasse verliert dagegen - die Kuerzung blieb dadurch zunaechst wirkungslos. */ .lefx-pa-abschluss .lefx-pa-grafik.lefx-pa-grafik img { display: block; width: 100%; height: var(--lefx-pa-grafik-hoehe); object-fit: cover; object-position: top; } /* ============================================================ 3. BOX ============================================================ */ .lefx-pa-abschluss.lefx-pa-abschluss .lefx-pa-inner { position: absolute; top: var(--lefx-pa-box-oben); left: 0; right: 0; z-index: 2; max-width: var(--lefx-hero-width, clamp(1100px, 78vw, 1900px)); margin: 0 auto !important; padding-inline: 24px; /* Box am RECHTEN Rand des Inhaltsbereichs */ display: flex; justify-content: flex-end; } .lefx-pa-abschluss .lefx-pa-box { flex: 0 0 clamp(280px, 22vw, 460px); margin: 0 var(--lefx-pa-box-rechts) 0 0; background: var(--lefx-dark, #232323); border-radius: 8px; /* Links doppelt so viel wie rechts. Der Button liegt mit rund 40px auf der Box; mit gleichem Abstand auf beiden Seiten (gemessen 44px) begann der Text fast genau dort, wo der Button endet. Die vorige Fassung mit 152px war zu viel, die symmetrische zu wenig. */ /* Unten Platz fuer den Button: Der Innenabstand links haelt nur den Ueberstand frei, der Button ragt aber mit seiner ganzen Breite in die Box und schnitt bei 900px die Ueberschrift an. 76px = Abstand von unten plus Buttonhoehe. */ padding: clamp(26px, 3vw, 52px) clamp(22px, 2.2vw, 44px) clamp(76px, 6vw, 110px) clamp(44px, 4.4vw, 88px); position: relative; } .lefx-pa-abschluss .lefx-pa-vorzeile { margin: 0 0 12px; font-size: clamp(13px, 1vw, 16px); line-height: 1.5; color: rgba(255,255,255,.92); } .lefx-pa-abschluss .lefx-pa-boxtitle { margin: 0; font-size: clamp(19px, 1.7vw, 26px); font-weight: 700; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; color: #fff; } /* -- Button, ueberlagert die LINKE Kante -- */ .lefx-pa-abschluss .lefx-pa-buttons { position: absolute; left: calc(var(--lefx-pa-btn-ueberstand) * -1); bottom: clamp(18px, 2.4vw, 40px); margin: 0; } .lefx-pa-abschluss .lefx-pa-btn .wp-block-button__link { background: var(--lefx-pa-pink); color: #fff; font-size: clamp(13px, 1vw, 16px); font-weight: 400; line-height: 1.4; letter-spacing: .02em; padding: clamp(11px, 1.1vw, 16px) clamp(16px, 1.6vw, 26px); border-radius: 6px; white-space: nowrap; text-decoration: none; transition: background .2s; } .lefx-pa-abschluss .lefx-pa-btn .wp-block-button__link:hover, .lefx-pa-abschluss .lefx-pa-btn .wp-block-button__link:focus-visible { background: var(--lefx-pa-pink-dunkel); } /* ============================================================ MOBIL ============================================================ Die Grafik ist auf schmalen Geraeten nur noch rund 160px hoch - die Box passt dort nicht mehr darauf und steht darunter auf voller Breite. */ @media (max-width: 781px) { /* Hier NICHT kuerzen: Die Grafik ist auf schmalen Geraeten nur noch rund 160px hoch, davon 22vw waeren 85px - die Diagonale bliebe kaum erkennbar. */ :root { --lefx-pa-grafik-hoehe: auto; } .lefx-pa-abschluss .lefx-pa-grafik.lefx-pa-grafik img { object-fit: fill; } .lefx-pa-abschluss { /* Unterhalb der Grafik geht es in Mint weiter, damit die Box nicht auf Weiss steht. */ background: var(--lefx-mint, #70c2b4); padding-bottom: clamp(32px, 8vw, 60px) !important; } .lefx-pa-abschluss.lefx-pa-abschluss .lefx-pa-inner { position: relative; top: auto; margin-top: calc(-1 * var(--lefx-pa-box-oben) * 3) !important; } .lefx-pa-abschluss .lefx-pa-box { flex-basis: 100%; /* Volle Breite - der Versatz nach links faellt weg. */ margin-right: 0; /* Der Button rueckt nach unten in die Box. */ padding-left: clamp(22px, 2.2vw, 44px); padding-bottom: clamp(76px, 18vw, 120px); } .lefx-pa-abschluss .lefx-pa-buttons { left: clamp(22px, 2.2vw, 44px); } } /* ============================================================ LEFX Kontaktseite ============================================================ Passt zu kt-seite-blocks.html. Die Seite ist aus vorhandenen Elementen zusammengesetzt: Header lefx-ph-* (wie Profession, Showroom, Team) Formular lefx-tf-* (wie Team-Seite) Abschluss lefx-pa-* (wie Projektbeitraege) Diese bringen ihr CSS bereits mit. Hier steht nur, was dazukommt: .lefx-kt-band Textblock des Headers, um Ueberschrift und Karte erweitert .lefx-kt-karte-titel h2, linksbuendig .lefx-kt-karte-rahmen div > iframe .lefx-kt-verlauf Farbverlauf hinter dem Formular Ueberschrift und Karte stehen IM Textblock des Headers. Dessen Inhalt wird um 39vw nach oben gezogen und liegt damit auf der schwarzen Abschlussgrafik - dieselbe Anordnung wie Titel und Galerie auf den Projektseiten. Die Karte ist hoeher als der verbleibende Platz und ragt deshalb unten aus der Grafik heraus, genau wie im Mockup. ============================================================ */ :root { /* Hoehe des Kartenausschnitts */ --lefx-kt-karte-hoehe: clamp(280px, 26vw, 480px); /* Startfarbe des Verlaufs. Sie steht an DREI Stellen, damit zwischen Grafik, Textblock und Verlauf keine helle Flaeche bleibt - siehe unten. */ --lefx-kt-verlauf-oben: var(--lefx-petrol, #027775); } /* ============================================================ 0. DURCHGEHENDE FLAECHE OHNE WEISSE STELLEN ============================================================ Die Abschlussgrafik des Headers und die Overlay-Grafik des Abschlusses sind oberhalb ihrer Diagonale transparent, darunter deckend. Die Elemente dahinter waren weiss - dadurch lag zwischen Grafik und Verlauf jeweils ein heller Streifen. Statt die Grafiken zu verschieben, bekommen die Flaechen dahinter die Farbe des Verlaufs an der jeweiligen Stelle: oben Gruen, unten Schwarz. Damit ueberdecken die Grafiken den Verlauf ohne Fuge, in jeder Fensterbreite und ohne Rechnung. Eigene Klassen, damit Profession-, Showroom-, Team-Seite und die Projektbeitraege unveraendert bleiben. */ /* Abschlussgrafik des Headers: unterhalb der Ueberlappung gruen statt weiss. Der obere Teil MUSS transparent bleiben, dort liegt sie ueber dem Farbverlauf des Hero. */ .lefx-kt-grafik.lefx-kt-grafik { background: linear-gradient(180deg, transparent 0, transparent var(--lefx-ph-hub), var(--lefx-kt-verlauf-oben) var(--lefx-ph-hub), var(--lefx-kt-verlauf-oben) 100%); } /* Overlay-Grafik des Abschlusses: darueber Schwarz statt Weiss - das Ende des Verlaufs. */ .lefx-kt-abschluss.lefx-kt-abschluss { background: var(--lefx-dark, #232323); } /* ============================================================ 0b. TEXTBOX DES ABSCHLUSSES ============================================================ Auf den Projektbeitraegen ist die Box dunkel auf der Mint-Grafik. Hier gruen - der Abschnitt selbst ist schwarz, eine dunkle Box waere darauf kaum zu erkennen. Klasse doppelt, weil die Regel der Projektbeitraege ebenfalls zwei Klassen nutzt und weiter oben in derselben Datei steht. */ .lefx-kt-abschluss.lefx-kt-abschluss .lefx-pa-box { background: var(--lefx-petrol, #027775); } /* ============================================================ 1. TEXTBLOCK DES HEADERS ============================================================ Die Regel der Profession-Seite begrenzt jedes Kind auf 620px, damit die Textspalte schmal bleibt. Ueberschrift und Karte sollen aber die ganze Inhaltsbreite nutzen - deshalb hier zurueckgesetzt. Klasse doppelt: Die Regel der Profession-Seite nutzt ebenfalls zwei Klassen und steht weiter oben in derselben Datei. */ .lefx-kt-band.lefx-kt-band .lefx-kt-karte-titel, .lefx-kt-band.lefx-kt-band .lefx-kt-karte-rahmen { max-width: none; } .lefx-kt-band.lefx-kt-band .lefx-kt-karte-titel { /* Abstand zum Einleitungstext darueber */ margin: clamp(28px, 3.5vw, 64px) 0 clamp(16px, 1.8vw, 28px) !important; font-size: clamp(19px, 1.8vw, 30px); font-weight: 700; line-height: 1.3; letter-spacing: .18em; text-transform: uppercase; /* rechtsbuendig, am rechten Rand des Inhaltsbereichs */ text-align: right; color: #fff; } /* Der Rahmen gibt die Hoehe vor, nicht das iframe: Google liefert keine eigene Groesse mit, ein iframe ohne Angabe waere 150px hoch. */ .lefx-kt-band .lefx-kt-karte-rahmen { height: var(--lefx-kt-karte-hoehe); border-radius: 6px; overflow: hidden; /* Platzhalter, solange die Karte nicht geladen ist - oder wenn der Besucher sie nicht freigibt. */ background: var(--lefx-dark, #232323); } .lefx-kt-band .lefx-kt-karte-rahmen iframe { display: block; width: 100%; height: 100%; border: 0; } /* Borlabs Cookie ersetzt das iframe bis zur Einwilligung durch einen eigenen Hinweis. Der bekommt hier dieselbe Hoehe, damit der Abschnitt nicht springt, sobald die Karte freigegeben wird. */ .lefx-kt-band .lefx-kt-karte-rahmen .BorlabsCookie, .lefx-kt-band .lefx-kt-karte-rahmen ._brlbs-content-blocker { height: 100%; } /* Der Textblock traegt die Startfarbe des Verlaufs, nicht Weiss: Die Karte ragt unten aus der Grafik heraus und stand sonst auf einer weissen Flaeche. Der Verlauf des Abschnitts darunter beginnt mit derselben Farbe, es entsteht also keine Kante. */ .lefx-kt-band.lefx-kt-band { background: var(--lefx-kt-verlauf-oben); padding-bottom: clamp(40px, 5vw, 96px); } /* ============================================================ 2. FARBVERLAUF HINTER DEM FORMULAR ============================================================ Der Abschnitt nutzt die Klassen der Team-Seite und damit deren gesamte Formulargestaltung. Ueberschrieben wird nur der Hintergrund: dort eine einfarbige dunkle Flaeche, hier ein Verlauf von Gruen nach Schwarz. Der Verlauf laeuft von OBEN nach UNTEN: oben Gruen wie der Textblock darueber, unten Schwarz wie der Abschluss darunter. Ein schraeger Verlauf haette an beiden Kanten zwei unterschiedliche Farben getroffen und damit sichtbare Uebergaenge erzeugt. Klasse doppelt, weil die Regel der Team-Seite ebenfalls zwei Klassen nutzt und spaeter in der Datei steht. */ .lefx-kt-verlauf.lefx-kt-verlauf { background: linear-gradient(180deg, var(--lefx-kt-verlauf-oben) 0%, #04413f 55%, var(--lefx-dark, #232323) 100%); } /* ============================================================ MOBIL ============================================================ */ @media (max-width: 781px) { /* Der Textblock bekommt auf schmalen Geraeten eine eigene dunkle Flaeche (Regel der Profession-Seite). Die Karte steht dann darauf und braucht keine Ueberlappung mehr. */ :root { --lefx-kt-karte-hoehe: clamp(240px, 60vw, 340px); } .lefx-kt-band.lefx-kt-band .lefx-kt-karte-titel { margin-top: clamp(24px, 6vw, 40px) !important; } /* Alle Ueberschriften zentriert. Auf schmalen Geraeten steht jede Ueberschrift ohnehin allein in ihrer Zeile - links- oder rechtsbuendig wirkt dort zufaellig. Bewusst auf diese Seite begrenzt (Klassen lefx-kt-*): Auf den uebrigen Seiten sitzen Ueberschriften teils neben Bildern oder Boxen, dort wuerde Zentrieren die Ausrichtung brechen. */ .lefx-kt-hero.lefx-kt-hero .lefx-ph-title, .lefx-kt-band.lefx-kt-band .lefx-ph-kicker, .lefx-kt-band.lefx-kt-band .lefx-kt-karte-titel, .lefx-kt-abschluss.lefx-kt-abschluss .lefx-pa-boxtitle, .lefx-kt-abschluss.lefx-kt-abschluss .lefx-pa-vorzeile { text-align: center; } /* Schmal wird die Textbox hoeher als die Grafik - gemessen bei 781px 204px, bei 800px noch 0px. Unter der Grafik stand deshalb der dunkle Seitenhintergrund von Astra bis zum Footer. Die Flaeche traegt hier Mint und geht damit in den Footer ueber. Die Grafik behaelt ihren eigenen dunklen Hintergrund: Sie ist oberhalb ihrer Diagonale durchsichtig, sonst verschwaende die Kante. */ .lefx-kt-abschluss.lefx-kt-abschluss { background: var(--lefx-mint, #70c2b4); } .lefx-kt-abschluss .lefx-pa-grafik { background: var(--lefx-dark, #232323); } } /* ============================================================ LEFX Blog-Seite ============================================================ Passt zu _lab/blog-seite/seite-blog-blocks.html. Der Kopf nutzt die Klassen der Profession-Seite (lefx-ph-*). Hier stehen nur die Abweichungen: .lefx-bl-grafik Abschlussgrafik des Kopfes .lefx-bl-band Band mit Kicker und Einleitung Bewusst NICHT die Showroom-Klassen lefx-sh-*: Die faerben Grafik und Band hell mint ein. Auf der Blog-Seite ist es das Hellgrau des Beitragsrasters. ============================================================ */ :root { /* Wie weit der Textblock auf die Grafik gezogen wird. Derselbe Wert wie --lefx-ph-band-hub auf den uebrigen Seiten, damit der Teaser ueberall an derselben Stelle sitzt. Die eigene Variable bleibt, weil hier das Beitragsraster darunter haengt und mitgerechnet werden muss. WIRD DER TEASER LAENGER, muss nachgemessen werden: Unter der dunklen Form folgt Hellgrau, weisser Text waere dort unlesbar. Mit dem jetzigen Text passt er bis hinunter zu 680px. */ --lefx-bl-band-hub: 34.4vw; /* Flaeche des Beitragsrasters. Sie steht in den Blockeinstellungen des Spectra-Rasters und wird hier wiederholt, damit Grafik und Band nahtlos anschliessen. */ --lefx-bl-flaeche: #eeeeee; /* Wie weit das Beitragsraster auf die Grafik gezogen wird. Ohne das stuende zwischen Einleitung und erster Kachel die ganze Resthoehe der Grafik. 32vw statt 36vw: Seit der gemeinsamen Geometrie steht der Teaser hoeher, die Kacheln lagen mit 36vw darueber - gemessen 17px bei 1960px. Mit 32vw bleiben 55 bis 76px Abstand (1300, 1440, 1960 und 2560px gemessen). */ --lefx-bl-raster-hub: 32vw; } /* Der Abstand zur Kopfleiste steht seit der Umstellung auf den transparenten Header zentral in lefx-header.css und gilt fuer alle Seiten. Hier deshalb keine eigene Regel mehr. */ /* ============================================================ 2. TEXTBLOCK AUF DER GRAFIK ============================================================ */ .page-id-5 .lefx-ph-band-inner { margin-top: calc(var(--lefx-bl-band-hub) * -1) !important; } /* ============================================================ 3. UEBERGANG ZUM BEITRAGSRASTER ============================================================ Die Abschlussgrafik ist oben UND unten diagonal beschnitten und dazwischen dunkel. Unterhalb der unteren Diagonale ist sie durchsichtig - dort schien der dunkle Seitenhintergrund von Astra durch, als schwarzer Block ueber dem Raster. Verworfene Versuche: das Raster unter die Grafik schieben (links blieb eine dunkle Kante stehen, die Kacheln verschwanden), und Grafik bzw. Raster eine eigene Flaeche geben, die auf halber Hoehe umschlaegt (die Umschlagkante schnitt je nach Fensterbreite die untere Diagonale ab). Die Flaeche liegt deshalb GANZ HINTEN, auf dem Inhaltsbereich der Seite. Grafik, Band und Raster bleiben durchsichtig. Damit kann keine Kante die Diagonale abschneiden - der Kopf malt seinen Farbverlauf davor, die Grafik ihre Diagonalen. */ .page-id-5 .entry-content { background: var(--lefx-bl-flaeche); } .page-id-5 .lefx-bl-grafik.lefx-bl-grafik, .page-id-5 .lefx-bl-band.lefx-bl-band { background: transparent; } /* ============================================================ 4. BEITRAGSRASTER HERAUFZIEHEN ============================================================ Ohne das steht zwischen Einleitung und erster Kachel die ganze Resthoehe der Grafik. Das Raster wird deshalb nach oben gezogen und liegt VOR der Grafik (z-index), nicht dahinter - dahinter verschwanden die Kacheln. Es bleibt durchsichtig; die helle Flaeche kommt vom Inhaltsbereich dahinter (Abschnitt 3). */ .page-id-5 .wp-block-uagb-container.uagb-is-root-container { position: relative; z-index: 4; margin-top: calc(var(--lefx-bl-raster-hub) * -1) !important; background: transparent !important; } /* ============================================================ 5. BREITE DES BEITRAGSRASTERS ============================================================ Spectra begrenzt den Inhalt seines Containers auf eine eigene Breite (max-width am inner-blocks-wrap). Damit stuenden die Kacheln deutlich schmaler als jeder andere Inhalt der Website. Hier gilt dieselbe Inhaltsbreite wie ueberall - so fluchten die Kacheln mit Kicker und Einleitungstext darueber. */ .page-id-5 .uagb-container-inner-blocks-wrap { max-width: var(--lefx-hero-width) !important; width: 100%; margin-inline: auto; } /* ============================================================ MOBIL ============================================================ */ @media (max-width: 781px) { :root { /* flachere Grafik */ --lefx-bl-band-hub: 22vw; /* Schmal steht die Einleitung dicht ueber der Grafikkante. Ein Hub wie am Bildschirm schoebe die erste Kachel in den Text. Das Raster folgt hier ohne Ueberlappung. */ --lefx-bl-raster-hub: 0px; } } /* ============================================================ BEITRAGSRASTER BIS 1250px ============================================================ Der Teaser steht seit der gemeinsamen Geometrie hoeher. Mit dem Zug von 36vw lag die erste Kachel dadurch UEBER dem Teaser - gemessen 139px bei 800px, 151px bei 834px, 221px bei 1024px. 105px statt 36vw: Der Fehlbetrag ist in diesem Bereich fast gleich gross, weil er aus der Texthoehe stammt. Damit beginnen die Kacheln rund 43px unter dem Teaser. Der Bereich 1250 bis 1400px ist noch nicht nachgemessen. */ @media (max-width: 1250px) { :root { --lefx-bl-raster-hub: 105px; } } /* Zweite Grafik (782-2559px): Die Beitragskacheln ueberlappen die tiefer liegende dunkle Form wieder. Gemessen bei 1024px: Textende 655px, Kacheln bisher 1126px; 48vw stellt sie auf rund 740px. */ @media (min-width: 782px) and (max-width: 2559px) { :root { --lefx-bl-raster-hub: min(48vw, 40vw + 160px); } } /* ============================================================ LEFX - Parallaxe ============================================================ Ohne JavaScript, ueber die scroll-gesteuerten Animationen von CSS (`animation-timeline`). NUR AUF DER TESTSEITE /test-startseite-neu (page-id-5302). Fuer den Einsatz auf allen Seiten wird `.page-id-5302` spaeter aus den Selektoren entfernt. ------------------------------------------------------------ Aufbau Bewegt werden GRUPPEN, nicht einzelne Kacheln - sonst wirken die Kacheln einer Reihe verrutscht statt in Bewegung. Zwei Zeitleisten: 1. view() fuer alles, was beim Laden noch nicht sichtbar ist. Die Bewegung laeuft ueber die gesamte Zeit, in der die Gruppe im Fenster steht (entry 0% bis exit 100%) - dadurch bewegt sie sich durchgehend und nicht erst kurz vor dem Verschwinden. 2. scroll(root) fuer den Header. Er ist beim Laden bereits sichtbar; eine view()-Zeitleiste stuende dort schon am Ende ihres Bereichs und es passierte nichts. Ueber die Dokument-Zeitleiste beginnt die Bewegung beim ersten gescrollten Pixel. Der Header startet ausserdem bei 0 statt bei +Weg - sonst saesse der Titel beim Laden sichtbar zu tief. Nicht bewegt werden: - die durchlaufenden Diagonalgrafiken (Kopfgrafik, Projektbild, Kundengrafik) und die Farbflaeche bei "Was uns ausmacht". Ihre Kanten stossen auf den Pixel genau an die Nachbarabschnitte; jede Verschiebung reisst dort eine Luecke auf. Sie sind die ruhende Ebene. - die Textbox im Netzwerk. Sie sitzt buendig auf der Kante zweier Flaechen; bewegt sie sich, wird darueber ein weisser Streifen sichtbar. ------------------------------------------------------------ Absicherungen 1. @supports - Browser ohne Unterstuetzung zeigen die Seite unveraendert, nur ohne Effekt. Firefox kann es ab 136. 2. prefers-reduced-motion - keine Animation, wenn im Betriebssystem "Bewegung reduzieren" gesetzt ist. 3. Animiert wird `translate`, NICHT `transform`. Die gedrehten Ueberschriften nutzen `transform: rotate(180deg)`; ueber `transform` zu animieren wuerde die Drehung ueberschreiben. ============================================================ */ /* Voraussetzung: Der body darf kein eigener Scroll-Container sein. `overflow-x: hidden` macht ihn dazu, dann findet die Scroll-Zeitleiste keinen Bezugspunkt. `clip` verhindert das waagerechte Scrollen genauso, ohne diesen Nebeneffekt. */ body { overflow-x: clip; } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { /* ---------- 1. Abschnitte unterhalb des Headers ---------- */ .page-id-5302 .lefx-profession-inner, .page-id-5302 .lefx-projekte-kachel, .page-id-5302 .lefx-ausmacht-inner, .page-id-5302 .lefx-netzwerk-bild, .page-id-5302 .lefx-kunden-inner { /* Einzeleigenschaften statt Kurzschreibweise: `animation: ...` setzt die Dauer auf 0s. Bei einer Scroll-Zeitleiste muss sie `auto` sein, sonst ist die Animation sofort beendet. */ animation-name: lefx-parallaxe; animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: view(); /* Die Bewegung beginnt, sobald die Gruppe unten ins Bild kommt, und ist fertig, sobald sie vollstaendig im Fenster steht. Kurze Strecke, fruehes Einsetzen - und die Gruppe steht ruhig, sobald man sie liest. */ animation-range: entry 0% entry 100%; } /* Der Weg endet bei 0, NICHT bei -Weg. Sonst stuende die Gruppe nach dem Ueberscrollen dauerhaft zu hoch: Die Hintergruende der Abschnitte bleiben ja stehen, und der Inhalt schoebe sich aus ihnen heraus - die Kundenlogos ragten in die Flaeche darueber, das Netzwerkbild verschwand hinter dem Farbverlauf. So laeuft die Gruppe von unten auf ihren gesetzten Platz zu und bleibt dort. */ @keyframes lefx-parallaxe { from { translate: 0 var(--lefx-weg); } to { translate: 0 0; } } /* ---------- 2. Header ---------- */ .page-id-5302 .lefx-hero-title, .page-id-5302 .lefx-hero-video, .page-id-5302 .lefx-band-inner { animation-name: lefx-parallaxe-oben; animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: scroll(root block); /* Deutlich kuerzer als die Fensterhoehe: Der Weg ist damit schon nach der halben Headerhoehe zurueckgelegt, die Bewegung ist gleich beim ersten Scrollen kraeftig. */ animation-range: 0 55vh; } @keyframes lefx-parallaxe-oben { from { translate: 0 0; } to { translate: 0 calc(var(--lefx-weg) * -1); } } /* Wege je Gruppe. Sie richten sich nach dem Platz, den die Gruppe in ihrem Abschnitt hat: "Was uns ausmacht" sitzt eng im Farbverlauf - dort wuerden grosse Wege die Kacheln oben aus der Flaeche schieben. */ .page-id-5302 .lefx-profession-inner { --lefx-weg: 300px; } .page-id-5302 .lefx-projekte-kachel { --lefx-weg: 300px; } .page-id-5302 .lefx-ausmacht-inner { --lefx-weg: 180px; } .page-id-5302 .lefx-netzwerk-bild { --lefx-weg: 300px; } .page-id-5302 .lefx-kunden-inner { --lefx-weg: 300px; } /* Im Header ist der Weg knapp bemessen: Das Video muss unten von der Abschlussgrafik verdeckt bleiben, der Teaser-Text darf oben nicht aus der dunklen Flaeche laufen. */ .page-id-5302 .lefx-hero-title { --lefx-weg: 340px; } .page-id-5302 .lefx-band-inner { --lefx-weg: 150px; } .page-id-5302 .lefx-hero-video { --lefx-weg: 100px; } /* ---------- Mobil ---------- Auf schmalen Geraeten laufen die Abschnitte kurz hintereinander durchs Bild; grosse Wege wirken hektisch. */ @media (max-width: 781px) { .page-id-5302 .lefx-profession-inner, .page-id-5302 .lefx-projekte-kachel, .page-id-5302 .lefx-ausmacht-inner, .page-id-5302 .lefx-netzwerk-bild, .page-id-5302 .lefx-kunden-inner { --lefx-weg: 110px; } .page-id-5302 .lefx-hero-title { --lefx-weg: 120px; } .page-id-5302 .lefx-band-inner { --lefx-weg: 60px; } .page-id-5302 .lefx-hero-video { --lefx-weg: 40px; } } } }