/* ========================================================================== BOGEN-HERO – Motiv, Textbahn, goldener Bogen am Fuß ZUSAMMENGEZOGEN in Runde 69 aus fünf Kopien: .hekopf pages/herstellung.css .unkopf pages/unternehmen.css (drei Seiten des Zweigs) .hikopf pages/historie.css .kakopf pages/karriere.css .blkopf pages/blog.css DIESER ZUSAMMENZUG IST NICHT VERLUSTFREI, anders als die sechs davor. Gemessen vor dem Umbau trugen die fünf Köpfe UNTERSCHIEDLICHE Werte, und zwar an Stellen, an denen keine Absicht erkennbar ist: Rolle hekopf/unkopf hikopf/kakopf blkopf (aus Runde 67) Label 13px / 600 13px / 400 15px / 600 Label-Abst. 16px 12px 0 Laufweite 1.56px 1.56px 0.9px Vorspann 18px / dunkel 18px / grau 16px / dunkel Titel 48px 48px 48px Die Überschrift ist überall gleich, alles darum herum driftet. Das sind keine Entscheidungen, sondern Reste aus fünf Bauzeitpunkten. Der Bauteil setzt deshalb EINEN Satz Werte - den der zuerst gebauten und am häufigsten verwendeten Variante (hekopf/unkopf, zusammen fünf Seiten). WAS SICH DAMIT SICHTBAR ÄNDERT, gemessen und im Stand protokolliert: /unternehmen/historie/ und /karriere/ Eyebrow wird halbfett statt normal, bekommt 4 px mehr Abstand; der Vorspann wird dunkler. /blog/ Eyebrow und Vorspann eine Stufe größer, Laufweite weiter. WAS JE SEITE BLEIBT, weil es echte Entscheidungen sind: --hero-hoehe die Mindesthöhe (608 px auf /herstellung/, 544 im Unternehmenszweig, 72vh auf Historie und Karriere) --hero-fokus der Bildmittelpunkt (60%/62% auf Historie) --hero-polster der Innenabstand (der Blog steht enger) --schwung-grund die Bogenfarbe, per Modifier am Kopf Der Bogen selbst liegt weiter in components/schwung.css. ========================================================================== */ .bogenhero { position: relative; overflow: hidden; background: var(--bg-page); /* Eigener Stapelkontext: das Motiv liegt darunter, der Bogen darüber. */ z-index: 0; } .bogenhero__media { position: absolute; inset: 0; overflow: hidden; } .bogenhero__media img { width: 100%; height: 100%; object-fit: cover; /* Fest, auf allen Breiten - vom Breitbild bis zum Hochformat wird um diesen Punkt beschnitten. Siehe bildbriefing-karriere.md. */ object-position: var(--hero-fokus, 64% 42%); display: block; background: var(--bg-platzhalter); } /* EIN VIDEO STATT DES BILDS (Startbild-Slides, 30.09.2026): dieselben Maße und derselbe Fokus wie das Bild, damit ein Slide mit Film nicht anders sitzt als eines mit Foto. */ .bogenhero__media video { width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-fokus, 64% 42%); display: block; background: var(--bg-platzhalter); } /* DER WEISSVERLAUF über der Textbahn. Ohne ihn steht dunkler Text auf wechselndem Motiv - gemessen unter 2:1 auf hellen Bildern. */ .bogenhero__media::after { content: ""; position: absolute; inset: 0; /* Seit dem 29.09.2026 ein Verlauf fuer alle Koepfe, siehe tokens.css. Vorher deckte dieser bis zum rechten Rand noch zu 30 %. */ background: var(--motiv-schleier); } .bogenhero__inner { position: relative; display: grid; align-content: center; min-height: var(--hero-hoehe, 34rem); padding-block: var(--hero-polster, var(--sp-9)) var(--hero-polster-fuss, calc(var(--sp-9) + 2rem)); } /* 34rem: dieselbe Lesebreite wie überall im Projekt. Die restliche Fläche gehört dem Motiv. */ .bogenhero__body { max-width: 34rem; } .bogenhero__label { margin: 0 0 var(--sp-4); font-size: var(--fs-100); font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-muted); } /* Die Überschrift selbst kommt aus components/sektionstitel.css - dort stehen Schriftgrad, Gewicht und die Schwungzeile. */ .bogenhero__title { margin: 0; } .bogenhero__lead { margin: var(--sp-5) 0 0; max-width: 30rem; font-size: var(--fs-400); line-height: var(--lh-body); color: var(--text-body); } /* --- Am Telefon steht das Motiv oben, der Text darunter -------------------- ZURUF VOM 21.09.2026, uebernommen aus dem Startbild-Karussell. Bis dahin fuellte das Motiv den ganzen Kopf und der Text lag darauf - lesbar nur ueber einen seitlichen Weissschleier, der dem Foto die Kraft nimmt. Auf einem 390 px breiten Schirm bleibt von einem Querformat ohnehin wenig uebrig, wenn Text darauf stehen soll. Jetzt: Motiv oben in fester Hoehe, weicher Abschluss nach unten, darunter Eyebrow, Ueberschrift, Vorspann. AM RECHNER BLEIBT ALLES, wie es abgenommen ist. */ @media (max-width: 59.999rem) { .bogenhero__media { /* relative, nicht static: das ::after darin braucht seinen Bezugsrahmen, sonst spannt der Verlauf ueber den ganzen Kopf. */ position: relative; /* Das kleinere Mass: im Startbild-Karussell setzt hero.css es wieder hoch, dort ist der Kopf die Hauptsache. */ height: var(--motiv-hoehe-unter); min-height: var(--motiv-hoehe-unter-min); inset: auto; } /* Der seitliche Schleier trug den Text, der jetzt nicht mehr im Bild steht. An seine Stelle tritt der Abschluss nach unten. */ .bogenhero__media::after { background: var(--motiv-verlauf); } /* ALIGN-CONTENT: START, sonst verteilt sich ueberschuessige Hoehe oben und unten und jeder Kopf beginnt woanders - je nach Laenge seines Textes. Gemessen im Karussell: 24 bis 128 px Unterschied. */ /* --- Zeilenlaenge im Tablet-Band ------------------------------------- Am Rechner steht das Motiv neben dem Text, deshalb ist der Textblock auf 34rem gedeckelt und der Vorspann auf 30rem. Am Telefon fuellt er die Bahn ohnehin. Dazwischen stand er gemessen mit 480 px in einer 704 px breiten Bahn - rechts blieb ein Streifen Weiss, der wie ein Fehler aussieht. 40rem bringen den Vorspann auf rund 64 Zeichen je Zeile und bleiben damit in der empfohlenen Spanne von 65 bis 75. */ .bogenhero__body { max-width: none; } .bogenhero__lead { max-width: 40rem; } .bogenhero__inner { align-content: start; align-items: start; padding-top: var(--sp-7); /* DER KOPF FOLGT DEM INHALT, Zuruf vom 21.09.2026. Die Mindesthoehe stammt aus der Zeit, als der Text IM Motiv stand und beides dieselbe Flaeche teilte. Jetzt stehen sie untereinander, und die Mindesthoehe kam obendrauf: GEMESSEN bei 390 px lagen zwischen letzter Textzeile und Bogen 41 px auf /blog/, aber 262 auf /herstellung/ - je nachdem, wie kurz der Text war. Ohne sie ist der Abstand ueberall derselbe. */ min-height: 0; /* DAS POLSTER TRAEGT DEN BOGEN. Er ist min(6.25vw, 6rem) hoch und waechst damit mit der Breite: 24 px bei 390, 48 bei 768, 56 bei 900. Ein festes Polster von 48 px reichte nur am Telefon - GEMESSEN am 22.09.2026 blieb bei 768 px genau 1 px Luft, bei 834 lag der Bogen 3 px auf dem Text und bei 900 px 7 px. Mit der Bogenhoehe im Polster stehen ueberall dieselben 24 px darueber. */ /* DIE LUFT WAECHST MIT. Erst stand hier ein fester Wert von 24 px ueber dem Bogen - am Telefon richtig, auf dem Tablet zu knapp. Auf einem breiteren Schirm braucht derselbe Abstand mehr Pixel, um gleich viel Luft zu sein: 6vw sind 23 px bei 390 und 46 bei 768. Gedeckelt, damit er am oberen Rand des Bandes nicht ausufert. */ padding-bottom: calc(min(6.25vw, 6rem) + clamp(var(--sp-5), 6vw, var(--sp-8))); } } /* --- Motiv erst aus dem Backend ------------------------------------------ NACHGETRAGEN AM 29.09.2026. Ein Kopf ohne Motiv im Entwurf (/karriere/ bewerbung/) bekommt die Bildflaeche, sobald im Editor ein Motiv gewaehlt ist (inc/seitenkopf.php, Klasse bogenhero--motiv). Dann gelten die Werte eines Kopfs mit Motiv - auch gegen die Seite, die fuer den Kopf ohne Bild Hoehe 0 und volle Textbreite gesetzt hat (.bwkopf). Doppelte Klasse, damit die Reihenfolge der Stilblaetter nicht entscheidet. Am Telefon gilt die Regel oben: Motiv oben, Text darunter. */ .bogenhero.bogenhero--motiv { --hero-hoehe: 34rem; } @media (min-width: 60rem) { .bogenhero.bogenhero--motiv .bogenhero__body { max-width: 34rem; } }