/* =========================================================================== hero-ausrichtung.css — Benker WP-Theme HANDGESCHRIEBEN. Wird NACH components.css geladen und ueberschreibt dort gezielt die Hero-Ausrichtung. EINE OBERKANTE FUER ALLE UNTERSEITEN-HEROS (Vorgabe Atilla, 23.07.2026): Beim Seitenwechsel sprang die Headline vertikal, weil die Heros sie unterschiedlich positionierten: - .khero (Kompetenz, Karriere, Branchen), .esdhero (Produktseiten) und .dhero--has-image (Blog-, Teile-Index- und Stellendetail) ZENTRIERTEN die Textspalte am Bild (align-items:center). Die Starthoehe der Headline hing damit an Bildhoehe (598x327 vs. 598x524 beim esdhero) und Textmenge — auf jeder Seite anders. - .phero (Kontakt, Aktuelles, Ansprechpartner, Nachhaltigkeit) und .uhero (Ueber Uns) starteten fest bei 40px Oberkante. Jetzt gilt ueberall dasselbe Mass: Textspalte beginnt OBEN (flex-start) bei 40px — dem Wert, den .phero/.uhero aus Figma mitbringen (bewusst 40px statt des naechstgelegenen Tokens space-7/48px, damit die bereits stimmigen Seiten unveraendert bleiben). Die Bilder haengen dadurch ebenfalls an der Oberkante statt mittig — der Preis fuer eine ruhige Headline-Linie, und gewollt. MOBIL (<1024px) stehen alle Heros einspaltig mit gleichem padding-top (space-6) — dort ist nichts zu tun. AUSSEN VOR bleibt der Startseiten-Hero (.hero): Dort liegt die Headline IM Bild (Scrim-Overlay), eine gemeinsame Oberkante mit den Unterseiten existiert nicht. Der alte .bhero ist seit dem Kompetenz-Stil-Umbau der Branchen-Heros ohne Verwendung. =========================================================================== */ /* --------------------------------------------------------------------------- STARTSEITEN-HERO x FINDER, Tablet-Bereich (Audit 23.07.2026): Die "Schnell zum Ziel"-Karte zieht sich per negativem margin in den Hero hinein (--finder-overlap, components.css: 180px ab 768, 299px ab 1024). Auf dem Desktop ist das Hero-Bild hoch genug (aspect-ratio 1280/690), auf dem Handy ist die Ueberlappung klein (32px). Dazwischen — 768 bis 1023px — ragte die Karte aber genau in den "Angebot anfragen"-Button hinein. Deshalb reserviert der Hero-Inhalt dort unten die Ueberlappung plus Luft. SYNC: Die 180px MUESSEN zum --finder-overlap dieses Bereichs in components.css passen. --------------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1023.98px) { .hero__content { padding-bottom: calc(180px + var(--space-6)); } } /* --------------------------------------------------------------------------- HEADLINE AUF DIE LOGO-KANTE (10.08.2026, Korrekturen KW 32) Benker: "Verschiedene Grundformate? Einheitlich vom Seitenrand moeglich?" Im ersten Bildschirm gab es vier linke Kanten: die weisse Karte, 20px weiter innen Logo und Hero-Bild (der Kartenrahmen), nochmal 60px weiter innen die Headline, und die Kante der Abschnitte darunter. ERSTER VERSUCH (verworfen): padding-left auf 0, damit die Headline auf der Kante von Logo und Bildrand steht. Sie klebte dadurch am linken Bildrand und stand 100px weiter aussen als die Finder-Karte direkt darunter. JETZT: Die Headline steht auf der Kante des Seiteninhalts — derselben Linie wie die Finder-Karte darunter und wie alle Abschnitte der Seite. Das ist die Linie, an der das Auge beim Weiterscrollen ohnehin haengt. Gerechnet statt fest eingetragen: Der Hero ist auf breiten Schirmen breiter als der Seiteninhalt (siehe --homehero-card-max in global.css). Die halbe Differenz ist genau der Abstand, der die Headline auf die Inhaltskante holt — egal wie breit das Fenster gerade ist. max() sorgt dafuer, dass auf schmalen Schirmen, wo der Hero NICHT breiter ist, der normale Textabstand greift. Nur ab 1024px: Mobil steht der Text ohnehin einspaltig. --------------------------------------------------------------------------- */ @media (min-width: 1024px) { .hero__content { padding-left: max( var(--hero-text-inset, var(--space-5)), calc((100% - var(--content-max)) / 2) ); } } /* --------------------------------------------------------------------------- HOEHE DES STARTSEITEN-HEROS (10.08.2026, Korrekturen KW 32) Der Startseiten-Hero waechst auf breiten Schirmen mit (bis 1680px Karte, siehe global.css). Seine Hoehe kam bisher allein aus dem Seitenverhaeltnis 1280:690 — bei 1592px Bildbreite waren das 858px. Zusammen mit dem blauen Band darueber ergab das rund 1050px: Auf einem Laptop war nach dem Header Schluss, die Finder-Karte lag unter der Falz. Deshalb ein Deckel auf der Hoehe. Das Bild liegt als object-fit:cover im Rahmen, mehr Breite bei gedeckelter Hoehe ist also ein Ausschnitt, keine Verzerrung — anders als bei den Produktbildern auf den Unterseiten, wo das Motiv selbst die Information traegt. Hier ist es ein Stimmungsbild. 680px sind die Untergrenze mit Reserve: Der Hero-Text ist bis 387px hoch, die Finder-Karte zieht sich per negativem Rand 299px in den Hero hinein und beginnt damit 239px ueber der Bildunterkante. Bei 680px bleiben zwischen Button und Finder-Karte rund 54px Luft. Wer weiter runtergeht, schiebt die Karte in den Button — das war schon einmal ein Fehler im Tablet-Bereich (siehe Block oben). 10.08.2026: 680 -> 740px (Vorgabe Atilla). Gewuenscht war mehr Luft zwischen Button und Finder-Karte. Diese Luft haengt NICHT am Innenabstand des Hero-Textes: Der Text sitzt oben im Rahmen, die Finder-Karte haengt per negativem Rand an der UNTERKANTE des Heros. Wer den Innenabstand erhoeht, verschiebt nur den Text nach unten und macht den Abstand kleiner. Der richtige Hebel ist die Hoehe des Rahmens: Jeder Pixel mehr schiebt die Unterkante — und damit die Karte — um denselben Betrag nach unten. Aus 54px Luft werden so rund 114px. Bewusst nur +60px: Der Hero war schon einmal zu hoch (auf einem Laptop war nach dem Header Schluss). Mit 740px plus blauem Band bleibt die Finder-Karte auf einem 900px hohen Fenster im Bild. --------------------------------------------------------------------------- */ @media (min-width: 1024px) { .hero__media { /* width:100% ist Pflicht, nicht Kosmetik: Sobald die Hoehe gedeckelt wird, zieht sich der Rahmen ueber sein aspect-ratio auf die passende Breite zusammen (740 x 1280/690 = 1373px) und laesst rechts einen weissen Streifen stehen. Mit width:100% fuellt er die Karte, und der Deckel wirkt als Ausschnitt — was hier richtig ist, weil das Bild als object-fit:cover darin liegt. */ width: 100%; max-height: 740px; } } /* --------------------------------------------------------------------------- UNTERSEITEN-HEROS: BEWUSST UNVERAENDERT (10.08.2026, Korrekturen KW 32) Das Hero-Band waechst auf breiten Schirmen bis 1680px, damit die blaue Flaeche schmaler wird — aber NUR auf der Startseite (siehe global.css). Hier stand zwischenzeitlich ein Umbau, der die Verbreiterung auch auf den Unterseiten auffangen sollte. Er ist entfernt. Als Warnung fuer den naechsten Anlauf, warum das nicht traegt: Die Unterseiten-Heros sind zweispaltig, die Bildspalte ist gedeckelt (esdhero: clamp(440px, 44%, 598px), khero: min(598px, 48%)). Zusaetzliche Breite geht deshalb vollstaendig in die Textspalte — auf Produktseiten von 657 auf 866px. Ergebnis: eine Headline-Zeile von rund 90 Zeichen, und weil die Headline dadurch weniger Zeilen braucht, gleichzeitig ein groesseres Loch unter dem Text (163 -> 213px). Zwei Gegenmassnahmen wurden gebaut und beide verworfen: - Bild fuellt die Spalte, Hoehe gedeckelt: Seitenverhaeltnis kippt von 1,14 auf 1,92, das Motiv wird sichtbar breitgezogen. - Bild behaelt sein Verhaeltnis und wird kleiner: zwischen Text und Bild entsteht eine Leerflaeche von 392px. Die zusaetzliche Breite hat in diesem Layout keinen guten Platz. Wer sie trotzdem unterbringen will, muss das Zweispalten-Raster in Figma neu austarieren — nicht per CSS-Override nachschieben. --------------------------------------------------------------------------- */ @media (min-width: 1024px) { .khero__inner, .esdhero__inner, .dhero__inner { padding-top: 40px; } .khero__grid, .esdhero__grid, .dhero--has-image .dhero__grid { align-items: flex-start; } /* Ueber Uns (.uhero): global.css nimmt dem Innencontainer bewusst das padding-inline, damit das BREITE BILD unten buendig zur Kartenkante laeuft (.homehero-bottom__card .uhero__inner). Dadurch rutschte aber auch die Headline an die Kante — alle anderen Heros starten ihren Text bei var(--space-6) Innenabstand. Deshalb bekommt NUR die Textzeile den Abstand zurueck; das Bild (.uhero__media) bleibt kartenbuendig. */ .uhero__text { padding-inline: var(--space-6); } /* TABLET QUER (Audit 23.07.2026): Ab exakt 1024px greift das Zwei-Spalten-Layout, aber die Bildspalte bestand auf ihren vollen 598px (flex-basis; kein Overflow -> kein Shrink). Der Headline blieben auf einem iPad quer nur ~260px — sie brach in Ein-Wort-Zeilen. Deshalb ist die Bildspalte jetzt anteilig gedeckelt: hoechstens 48% der Zeile, wie gehabt maximal 598px. Auf breiten Desktops aendert sich nichts (48% von 1392er-Band > 598px-Deckel); nur im schmalen Desktop-Bereich 1024-1300px teilt sich die Zeile wieder fair. Der esdhero hat denselben Schutz schon immer (clamp(440px, 44%, 598px), components.css). */ .khero__right { flex-basis: min(598px, 48%); } .dhero--has-image .dhero__right { flex-basis: min(598px, 48%); } }