@@Barksalot > lässt sich so etwas mit Flexbox umsetzten? Das ist mir ohne zusätzliche Elemente im Markup nicht geglückt. Was nicht heißt, dass zusätzliche Elemente notwendig wären, sondern dass Flexbox nicht das Mittel der Wahl ist – das wäre Grid. > Der Aufbau denke ich sollte so richtig sein? Nein. „Der Greenscreen“ ist keine Unterüberschrift. Beat sprach es bereits an: die Outline (alle Überschriften auf der Seite). Was soll ein Nutzer, der sich die Outline ausgeben lässt (wozu auch Screenreader-Nutzer gehören, die von Überschrift zu Überschrift navigieren), als Überschrift präsentiert bekommen? # Variante 1: beides ~~~HTML <h2> <span>Der Greenscreen</span> <span class="separator visually-hidden">–</span> <span class="description">Faszinieren Sie Ihre Gäste mit Fotomontagen der besonderen Art</span> </h2> ~~~ Das Trennzeichen [visuell verstecken](https://a11yproject.com/posts/how-to-hide-content/). # Variante 2: „Faszinieren Sie Ihre Gäste mit Fotomontagen der besonderen Art“ ~~~HTML <header> <h2>Faszinieren Sie Ihre Gäste mit Fotomontagen der besonderen Art</h2> <p>Der Greenscreen</p> </header> ~~~ Scheint mir nicht besonders sinnvoll zu sein. # Variante 3: „Der Greenscreen“ ~~~HTML <header> <h2>Der Greenscreen</h2> <p>Faszinieren Sie Ihre Gäste mit Fotomontagen der besonderen Art</p> </header> ~~~ Die Auszeichnung als `h2` und `p` hat nichts damit zu tun, was davon in größerer Schrift dargestellt wird. Nun wird der Bereich von `.info` (bei genügent breitem Viewport und Browserunterstützung von `grid`) in 2 Spalten geteilt, ich nenne sie man `info-header` und `info-body`: ~~~CSS @supports (display: grid) { @media (min-width: 40em) { .info { display: grid; grid-template-columns: [info-header-start] 1fr [info-header-end info-body-start] 1fr [info-body-end]; grid-template-rows: 1fr 1fr; } } } ~~~ `header` kommt in die Spalte `info-header`; der Rest in `info-body`: ~~~CSS .info header { grid-column: info-header; grid-row: 1 / -1; } .info > * { grid-column: info-body; } ~~~ (`grid-template-rows`/`grid-row` ist nötig, damit `header` die ganze Höhe füllen kann und nicht die Höhe der ersten Zelle in der Nachbarspalte bestimmt.) Noch etwas `gap` zwischen die Spalten, noch etwas hübsch machen (dabei ist zu beachten, dass die Außenabstände von Grid-Zellen nicht zusammenfallen), und [schon sieht’s so aus](https://codepen.io/gunnarbittersmann/pen/pOZYVW). LLAP 🖖 -- *„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“* —Kurt Weidemann