/* TOJA · Korrekturen aus dem Übergabeprotokoll vom 23.09.2026 (Fassung 3) ====================================================================== Jede Regel trägt die Punktnummer aus dem Protokoll. Was hier nicht steht, steht in js/korrekturen.js oder in der Restliste. ====================================================================== */ /* ====================================================================== */ /* Sprungregel · feste Kopfleiste berücksichtigen */ /* „Alle Sprungziele erhalten scroll-margin-top von mindestens 80 Pixeln */ /* am Handy und 96 Pixeln am Desktop.“ */ /* ====================================================================== */ .pg [id], #pg-start [id], .tjps-expose [id] { scroll-margin-top: 96px; } @media (max-width: 980px) { .pg [id], #pg-start [id], .tjps-expose [id] { scroll-margin-top: 80px; } } /* ====================================================================== */ /* 04 · Aktiven Menüpunkt dauerhaft markieren */ /* */ /* Die Kennzeichnung setzt js/abnahme.js als Klasse toja-aktiv. Die */ /* Vorlage gestaltet aber nur .is-active::after - für toja-aktiv gab es */ /* bisher nur eine Textunterstreichung. Hier bekommt sie denselben */ /* Balken; die Textunterstreichung wird zurückgenommen, sonst stünden */ /* zwei Linien untereinander. */ /* ====================================================================== */ html body #toja-header .nav__link.toja-aktiv, html body .nav__item-sub > .nav__link.toja-aktiv { text-decoration: none !important; } #toja-header .nav__link.toja-aktiv::after { content: ''; position: absolute; bottom: -5px; left: 0; right: 0; height: 2px; width: 100%; background: var(--color-accent, #C2611A); } /* Im mobilen Menü hebt sich der Eintrag der geöffneten Seite ab. */ #mobileDrawer a.toja-aktiv, .mobile-drawer a.toja-aktiv { color: var(--color-accent, #C2611A) !important; font-weight: 700 !important; } /* ====================================================================== */ /* 06 · Cookie-Einstellungen ohne Überlagerung */ /* Die schwebende Schaltfläche verschwindet; js/korrekturen.js setzt */ /* dafür einen Textlink in die Fußzeile. */ /* ====================================================================== */ button.tcc-launcher, .tcc-launcher { display: none !important; } /* ====================================================================== */ /* 07 · Abstände in den blauen Leistungskacheln (Handy) */ /* Sicherung: Im einspaltigen Raster darf kein Titel künstlich auf zwei */ /* Zeilen gestreckt werden. */ /* ====================================================================== */ @media (max-width: 640px) { #pg-start .hero__cards-grid .service-card__title, #pg-start .hero__cards-grid .service-card__desc, #pg-start .hero__cards-grid .service-card__cta, #pg-start .hero__cards-grid .service-card { min-height: 0 !important; } } /* ====================================================================== */ /* 08 · Schaltfläche „Video pausieren“ entfernen */ /* ====================================================================== */ #pg-start .toja-video-toggle, .toja-video-toggle { display: none !important; } /* ====================================================================== */ /* 09 · Porträt-Bildrahmen am Handy */ /* Das Foto behielt bis 640 px seine eigene Bildproportion und ließ */ /* rechts 110 Pixel frei; in diese Lücke ragte der Zierrahmen. */ /* ====================================================================== */ /* Nachtrag 23.09.2026: Das Foto war danach zwar formatfüllend, der Rahmen aber weiterhin auf 300 Pixel Höhe gedeckelt - aus einem Hochformat 640 × 800 wurde so ein flacher Streifen 350 × 300, bei dem oben und unten je ein gutes Stück wegfiel. Der Rahmen bekommt jetzt das Seitenverhältnis des Originals (4:5) und damit dieselbe Form wie am Desktop: bei 390 Pixeln 350 × 438 statt 350 × 300 - rund die Hälfte mehr Fläche und gar kein Beschnitt mehr. Die Deckelung auf 300 Pixel muss dafür ausdrücklich aufgehoben werden, sonst rechnet der Browser aus ihr die Breite zurück und die Kachel schrumpft auf 240 Pixel. */ @media (max-width: 640px) { #pg-start .about__media { width: 100% !important; height: auto !important; max-height: none !important; aspect-ratio: 4 / 5 !important; overflow: hidden; } #pg-start .about__media .about__photo, #pg-start .about__photo { width: 100% !important; height: 100% !important; max-height: none !important; object-fit: cover !important; object-position: 50% 50% !important; } #pg-start .about__media::after { display: none !important; } } /* ====================================================================== */ /* 11 · Diplomansicht · Höhe am iPhone */ /* 100vh schneidet auf dem iPhone unten ab. Das Zurücksetzen der */ /* Scrollposition übernimmt js/korrekturen.js. */ /* ====================================================================== */ .cert-lightbox__pages, #certLightboxPages { max-height: calc(100dvh - 130px) !important; overflow-anchor: none; } /* ====================================================================== */ /* 12 · Kontaktkacheln unterhalb des Textes (Handy) */ /* Die Kacheln waren mit margin-top: -60px in den Kopfbereich gezogen */ /* und überdeckten die Signatur um 18 Pixel. */ /* ====================================================================== */ @media (max-width: 640px) { #pg-kontakt .quick-contact, .pg .quick-contact { margin-top: 0 !important; } } /* ====================================================================== */ /* 13 · „oder direkt:“ und Telefonnummer untereinander (Handy) */ /* ====================================================================== */ @media (max-width: 640px) { .cta__contact { display: flex; flex-direction: column; align-items: center; gap: 6px; } } /* ====================================================================== */ /* 18 und 24 · Icon, Titel und Text auf eine Mittelachse */ /* Betrifft „Was TOJA auszeichnet.“ und die Vorteilskacheln auf */ /* Verkaufs- und Vermietungsseite - dort standen Icon und Titel je nach */ /* Fensterbreite unterschiedlich ausgerichtet. */ /* ====================================================================== */ .pg .vorteil--kurz, .pg .staerke { text-align: center; } /* Die Kachel ist eine Flex-Spalte; das Icon holt seine Lage aus einer Regel mit Seitenkennung (#pg-…) und ist damit staerker als eine Regel ohne. Deshalb hier ausnahmsweise mit Nachdruck. */ .pg .vorteil--kurz .vorteil__icon, .pg .staerke__icon { margin-inline: auto !important; align-self: center !important; } /* Nachgetragen am 23.09.2026: Der Titel holt sich aus einer Regel mit Seitenkennung align-self: start und text-align: left. In der Flex- Spalte der Kachel schrumpft seine Box dadurch auf die Textbreite und sitzt links - gemessen bis zu 91 Pixel neben der Kachelmitte, obwohl Icon und Text schon mittig standen. Deshalb auch hier mit Nachdruck. */ html body .pg .vorteil--kurz .vorteil__title, html body .pg .vorteil--kurz .vorteil__text, html body .pg .staerke__title, html body .pg .staerke__text { align-self: center !important; width: 100% !important; text-align: center !important; } /* Nachtrag 24.09.2026: Die Regeln gelten jetzt nur noch den schmalen Kacheln (.vorteil--kurz) - also "Was TOJA auszeichnet." und den Vorteilskacheln der Vermietungsseite, um die es in Punkt 18 und 24 ging. Seit die Verkaufsseite die Klappkarten aus 60.451 trägt, gibt es dort .vorteil--klapp mit einer Kopfzeile, in der Nummer, Icon, Titel und Schalter nebeneinander stehen; die hätte die Zentrierung genauso auseinandergezogen wie zuvor die breite Kachel. Die breite Kachel 07 aus Änderung 60.451 ist bewusst eine Zeile - Icon, Titel, Text und Liste nebeneinander, nicht untereinander. Sie bleibt deshalb von der Zentrierung ausgenommen; mit ihr wurden Titel und Text sonst auf je 426 statt 144 und 658 Pixel gequetscht. */ .pg .vorteil--wide, .pg .vorteil--wide .vorteil__title, .pg .vorteil--wide .vorteil__text, .pg .vorteil--wide .vorteil__list { text-align: left; } .pg .vorteil__num { text-align: center; } /* ====================================================================== */ /* 25 · Schwarze Netzwerk-Icons auf der Vermietungsseite */ /* */ /* Ursache gefunden: Der Style-Block des Partner-Abschnitts wurde beim */ /* Einbau eins zu eins von der Verkaufsseite übernommen - einschließlich */ /* der Kennung #pg-verkaufen. Auf der Vermietungsseite heißt der */ /* Container aber #pg-vermietung, deshalb griff dort keine einzige */ /* Regel: keine Kachelfläche, keine Rundung, schwarze Flächen statt */ /* blauer Linien und Aufzählungspunkte in der Liste. */ /* */ /* Hier stehen dieselben Regeln noch einmal für #pg-vermietung. Werte */ /* unverändert aus dem Seiten-CSS der Verkaufsseite übernommen. */ /* ====================================================================== */ #pg-vermietung .gewerke { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; } #pg-vermietung .gewerk { flex: 0 0 calc((100% - 6 * 16px) / 7); min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 26px 10px 24px; text-align: center; background: var(--color-paper); border: 1px solid var(--color-line); border-radius: var(--radius); } #pg-vermietung .gewerk__icon { width: 68px; height: 68px; flex: 0 0 auto; border-radius: 16px; background: var(--color-blue-mist); display: flex; align-items: center; justify-content: center; } #pg-vermietung .gewerk__icon svg { width: 36px; height: 36px; stroke: var(--color-blue-deep); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } #pg-vermietung .gewerk__name { font-size: clamp(15px, 1.15vw, 17px); font-weight: 700; line-height: 1.3; color: var(--color-blue-deep); hyphens: manual; -webkit-hyphens: manual; text-wrap: balance; } @media (max-width: 1240px) { #pg-vermietung .gewerk { flex-basis: calc((100% - 3 * 16px) / 4); } } @media (max-width: 640px) { #pg-vermietung .gewerke { gap: 10px; } #pg-vermietung .gewerk { flex-basis: calc((100% - 10px) / 2); gap: 12px; padding: 18px 8px 16px; } #pg-vermietung .gewerk__icon { width: 56px; height: 56px; border-radius: 14px; } #pg-vermietung .gewerk__icon svg { width: 30px; height: 30px; } #pg-vermietung .gewerk__name { font-size: 15px; } } /* ====================================================================== */ /* 03 · Referenzbereich vorerst ausblenden */ /* Ausblenden, nicht löschen - der Abschnitt kommt zurück, sobald */ /* freigegebene Stimmen vorliegen. */ /* ====================================================================== */ #pg-ueber-toja #referenzen, .pg #referenzen, section#referenzen { display: none !important; } /* ====================================================================== */ /* 37 · Vier Übersichtskacheln der Netzwerkseite mobil ausblenden */ /* ====================================================================== */ @media (max-width: 640px) { #pg-netzwerk .hero__stats { display: none !important; } } /* ====================================================================== */ /* 41 · Marktdaten-Infoboxen am Handy */ /* Vorher: Kennzahl 17 px, Beschriftung 12 px, Quellen-Hochzahl 14 px - */ /* die Hochzahl war größer als die Beschriftung. Jetzt eine klare */ /* Rangfolge und einheitliche Innenabstände. */ /* ====================================================================== */ /* Hinweis in eigener Sache: Die 17 Pixel, über die das Protokoll hier stolpert, stammen aus css/mobil.css des Plugins TOJA Darstellung - also aus einer früheren Korrektur von uns. Dort ist der Wert mit Fassung 3.10 ebenfalls berichtigt; die Regel hier trägt denselben Vorsatz, damit sie auch mit einem älteren Stand greift. */ @media (max-width: 640px) { html body .pg .region__stats .stat-card { padding: 16px !important; } html body .pg .region__stats .stat-card__big { font-size: 26px !important; line-height: 1.15 !important; } html body .pg .region__stats .stat-card__label { font-size: 12px !important; } /* Die Quellenverweise standen mit 14 px größer da als die Beschriftung mit 12 px - jetzt deutlich kleiner. */ html body .pg .stat-card .toja-source-ref, html body .pg .stat-card sup { font-size: 10px !important; line-height: 1 !important; vertical-align: super; } } /* ====================================================================== */ /* 42 · Luft zwischen aneinanderstoßenden Schaltflächen */ /* Zwei Button-Paare standen bei 390 px auf 0 Pixel Abstand. */ /* ====================================================================== */ /* Ursache gemessen: Die beiden Paare stehen nicht in einer Gruppe mit eigenem Namen, sondern unmittelbar in einem Absatz. Der ist ein Blockelement ohne Lückenregel - die Schaltflächen stoßen deshalb auf 0 Pixel aneinander, während alle übrigen Gruppen 10 Pixel haben. Ein Absatz, der Schaltflächen enthält, wird hier zur Gruppe. */ .pg p:has(> .btn) { display: flex; flex-wrap: wrap; gap: 10px; } @media (min-width: 981px) { .pg p:has(> .btn) { gap: 14px; } } /* ====================================================================== */ /* 43 · Quellenlisten in die Inhaltsbreite einrücken */ /* 2,2 em lassen auch zweistelligen Ziffern Platz; die Ziffern bleiben */ /* außen, damit Folgezeilen unter dem Text beginnen. */ /* ====================================================================== */ .pg ol.gem-quellen__list, .pg .gem-quellen ol, .pg .rg-quellen ol, .pg .quellen ol, .pg .sources ol { padding-left: 2.2em !important; list-style-position: outside; } /* ====================================================================== */ /* 01 und 28 · Zurück-Link der Inserate unter der Kopfleiste */ /* */ /* Die feste Kopfleiste ist durchsichtig, aber 64 bzw. 96 Pixel hoch und */ /* lag über dem Link - kein Tipp erreichte ihn, und am Handy stand das */ /* Logo sichtbar darüber. Die Objektvorlage beginnt jetzt unterhalb der */ /* Kopfleiste. */ /* ====================================================================== */ body.single-toja_immobilie .tjps-expose { padding-top: 132px; } @media (max-width: 980px) { body.single-toja_immobilie .tjps-expose { padding-top: 104px; } } /* Und damit der Link auch dann bedienbar ist, wenn die Kopfleiste weiterhin über ihn reicht: Er liegt jetzt darüber. */ body.single-toja_immobilie .tjps-back { position: relative; z-index: 120; } /* Auf Inseratsseiten liegt kein dunkles Titelbild hinter der Kopfleiste. Damit Logo und Menü dort lesbar bleiben, bekommt sie einen Grund. */ body.single-toja_immobilie #toja-header { background: #fff; box-shadow: 0 1px 0 rgba(15, 30, 60, .08); } /* ====================================================================== */ /* 01 und 28 · Kopfleiste der Objektseiten */ /* Die feste Kopfleiste der Inserate heißt header#header, nicht */ /* #toja-header - die Regel darüber traf dort nicht. Ohne Titelbild */ /* standen Schriftzug, Menüpunkte und Menüschalter weiß auf weiß. */ /* ====================================================================== */ body.single-toja_immobilie header#header { background: #fff !important; box-shadow: 0 1px 0 rgba(15, 30, 60, .08) !important; } body.single-toja_immobilie header#header .logo__text, body.single-toja_immobilie header#header .logo__text span, body.single-toja_immobilie header#header .nav__link, body.single-toja_immobilie header#header .nav__link svg { color: #1F4685 !important; } body.single-toja_immobilie header#header .nav__toggle span { background: #1F4685 !important; } /* ====================================================================== */ /* Z11 · Kopfleiste zwischen 1280 und 1599 Pixeln */ /* Die Schaltfläche „Kostenfreie Immobilienbewertung“ war dort um bis */ /* zu 133 Pixel abgeschnitten. Die Leiste wird verdichtet - kein Text, */ /* kein Aufbau ändert sich. */ /* ====================================================================== */ @media (min-width: 1280px) and (max-width: 1599px) { .header .logo__text { font-size: 23px !important; } .header .logo__mark { width: 40px !important; height: 40px !important; } .header .nav__list { gap: 10px !important; } .header .nav { gap: 14px !important; } .header .nav__link { font-size: 12.5px !important; letter-spacing: .03em !important; } .header .nav__cta { font-size: 12px !important; padding: 10px 13px !important; } } @media (min-width: 1280px) and (max-width: 1365px) { .header .logo__text { font-size: 22px !important; } .header .logo__mark { width: 38.5px !important; height: 38.5px !important; } .header .nav__list { gap: 8px !important; } .header .nav__link { letter-spacing: .025em !important; } .header .nav__cta { padding: 10px 12px !important; } } /* ====================================================================== */ /* 11 · Diplomansicht beginnt oben */ /* Der Seitenbereich zentrierte das zweiseitige Diplom senkrecht; die */ /* oberen 151 Pixel der ersten Seite blieben unerreichbar. */ /* ====================================================================== */ .cert-lightbox__pages--multi { justify-content: flex-start !important; } /* ====================================================================== */ /* 43 · Quellenlisten mit eigener Klasse */ /* Trägt die Liste selbst die Klasse rg-quellen, griff die Regel oben */ /* nicht - dort ist rg-quellen der umgebende Rahmen. */ /* ====================================================================== */ .pg ol.rg-quellen, .pg ul.rg-quellen, .pg ol.quellen { padding-left: 2.2em !important; list-style-position: outside; } /* ====================================================================== */ /* Z9 · Logo in der Fußzeile auf weißem Grund */ /* Vorgabe von Tobias Jabs. Der Schriftzug im Logo ist selbst blau und */ /* hob sich vom blauen Grund kaum ab (Kontrast rund 1,2 : 1). Das Logo */ /* steht jetzt auf einer weißen Fläche und wird dabei nicht kleiner. */ /* ====================================================================== */ html body .footer__brand .logo--voll, html body #toja-footer .footer__brand .logo--voll { display: inline-flex !important; align-items: center; justify-content: center; width: 174px !important; height: 174px !important; padding: 0 !important; background: #fff !important; border-radius: 14px !important; } html body .footer__brand .logo--voll img, html body #toja-footer .footer__brand .logo--voll img { width: auto !important; height: 132px !important; max-width: 92% !important; max-height: 76% !important; object-fit: contain !important; } @media (max-width: 640px) { html body .footer__brand .logo--voll, html body #toja-footer .footer__brand .logo--voll { width: 116px !important; height: 116px !important; border-radius: 12px !important; } html body .footer__brand .logo--voll img, html body #toja-footer .footer__brand .logo--voll img { height: 88px !important; } } /* ====================================================================== */ /* A8 · Kopfleiste der Fehlerseite */ /* Dieselbe Ursache wie bei den Inseraten: Hinter der Kopfleiste liegt */ /* kein dunkles Titelbild, sie ist aber durchsichtig und ihre Schrift */ /* weiß. Auf dem cremefarbenen Grund der Fehlerseite war der Schriftzug */ /* nicht zu lesen. */ /* ====================================================================== */ body.error404 header#header, body.error404 #toja-header .header { background: #fff !important; box-shadow: 0 1px 0 rgba(15, 30, 60, .08) !important; } body.error404 header#header .logo__text, body.error404 header#header .logo__text span, body.error404 header#header .nav__link, body.error404 header#header .nav__link svg, body.error404 #toja-header .header .logo__text, body.error404 #toja-header .header .logo__text span, body.error404 #toja-header .header .nav__link { color: #1F4685 !important; } body.error404 header#header .nav__toggle span, body.error404 #toja-header .header .nav__toggle span { background: #1F4685 !important; } /* ====================================================================== 60.498 (Wunsch 25.09.2026) · Teamkarten beim Ueberfahren ---------------------------------------------------------------------- Heute heben sich die Karten nur um 4 Pixel - ohne Vergroesserung. Soll: um 8 % wachsen (scale 1.08), 4 Pixel steigen, mit kraeftigerem Schatten ueber den Nachbarkarten liegen. Nur mit Maus und erst ab 641 Pixel: Am Handy gibt es kein Ueberfahren, dort wuerde die Karte beim Antippen springen. Wer in den Systemeinstellungen "Bewegung reduzieren" gewaehlt hat, bekommt das Ergebnis ohne Uebergang. ====================================================================== */ @media (hover: hover) and (min-width: 641px) { .teamkarte, .team-card, .expert-card, .partner-card { transition: transform 260ms cubic-bezier(.22,.61,.36,1), box-shadow 260ms cubic-bezier(.22,.61,.36,1); will-change: transform; } .teamkarte:hover, .teamkarte:focus-within, .team-card:hover, .team-card:focus-within, .expert-card:hover, .expert-card:focus-within, .partner-card:hover, .partner-card:focus-within { transform: translateY(-4px) scale(1.08); box-shadow: 0 18px 40px rgba(15, 30, 60, .18); /* Ueber den Nachbarkarten, sonst schneidet die naechste Karte die vergroesserte an. */ position: relative; z-index: 5; } } @media (prefers-reduced-motion: reduce) { .teamkarte, .team-card, .expert-card, .partner-card { transition: none; } } /* ====================================================================== Nr. 9 (Z22, Protokoll 02.10.2026) · Zierrahmen am Portraet ---------------------------------------------------------------------- Gemessen auf /ueber-toja/:
relative, 4/5, overflow:hidden
absolut, 2px weisser Rahmen, 24 Pixel nach rechts unten versetzt, z-index: -1 bereits 100 % / 100 % / cover Der Rahmen sollte hinter dem Foto hervorschauen. Er tut es nicht: Das Elternelement hat overflow:hidden, also wird der ueberstehende Teil abgeschnitten; der Rest liegt wegen z-index:-1 hinter dem Foto. Uebrig bleibt unsichtbares Markup, das nur noch Rechenzeit kostet. Auf der Startseite und den drei Gutachtenseiten ist er bereits auf display:none gesetzt - hier wird dasselbe fuer die Ueber-mich-Seite nachgezogen, damit es ueberall gleich ist. Das Foto selbst bleibt unangetastet: width:100%, height:100% und object-fit:cover stehen dort schon, gemessen am 05.10.2026 (480x600 Pixel Rahmen, 880x1100 Pixel Bild, objectFit "cover"). ====================================================================== */ #pg-ueber-mich .hero__portrait-frame, .pg .hero__portrait-frame { display: none !important; } #pg-ueber-mich .hero__portrait .hero__portrait-photo, .pg .hero__portrait .hero__portrait-photo { width: 100%; height: 100%; object-fit: cover; } /* ====================================================================== Nr. 7 (Punkt 27, Protokoll 02.10.2026) · Reihenfolge im Expose ---------------------------------------------------------------------- Soll laut Protokoll: Key Facts > Energieangaben > Objektbeschreibung > Ausstattung > Lage > Sonstiges > Kontakt Gemessen am 05.10.2026 auf zwei Inseraten (6146497 und 6175596), beide gleich aufgebaut: div.tjps-expose__grid Raster, 1fr / 360 Pixel div.tjps-expose__main Objektbeschreibung, Lage, Energieangaben aside.tjps-expose__aside Key Facts, Kontakt Es fehlen also zwei Abschnitte aus dem Soll: "Ausstattung" und "Sonstiges". Die liefert Propstack fuer diese Objekte nicht - das Modul baut nur, was ankommt. Erfunden wird nichts. Erreichbar sind damit: Key Facts > Energieangaben > Objektbeschreibung > Lage > Kontakt Geloest ueber die Anordnung, nicht ueber einen Umbau des Quelltextes. Das Propstack-Modul bleibt Zeile fuer Zeile unberuehrt; faellt diese Datei weg, steht sofort wieder der alte Zustand da. ====================================================================== */ /* --- 1. Energieangaben nach vorn --------------------------------------- Die Spalte wird zur Flexbox, damit sich die Reihenfolge setzen laesst. Die Abstaende bleiben gleich: Die Abschnitte arbeiten ausschliesslich mit margin-bottom (clamp(24px,3vw,36px)), ohne oberen Abstand - da faellt beim Wechsel auf Flex nichts zusammen. */ .tjps-expose__main { display: flex; flex-direction: column; } /* Am Handy schiebt ein Skript des Propstack-Moduls die Key-Facts-Kachel selbst in diese Spalte hinein - gemessen bei 807 Pixel Fensterbreite, bei 1280 Pixel bleibt sie im Seitenbalken. Darum hier der Platz ganz vorn, sonst ueberholen die Energieangaben sie. */ .tjps-expose__main > .tjps-factbox { order: -2; } .tjps-expose__main > .tjps-energy { order: -1; } /* --- 2. Key Facts nach oben, Kontakt nach unten ------------------------ Nur am Handy. Ab 901 Pixel stehen die beiden ohnehin nebeneinander in der rechten Spalte - Key Facts oben, Kontakt darunter -, das ist schon die Soll-Reihenfolge. Unter 901 Pixel faellt das Raster auf eine Spalte zusammen, und dann rutscht der ganze Seitenbalken samt Key Facts ans Ende. display:contents loest den Seitenbalken als Kasten auf, seine beiden Kinder werden damit selbst zu Rasterfeldern und lassen sich einzeln anordnen. Der Seitenbalken traegt keine eigene Gestaltung - kein Hintergrund, kein Rahmen, kein Abstand -, es geht also nichts verloren. Die Vorlesereihenfolge folgt der sichtbaren, weil das Raster hier wirklich umsortiert und nicht nur verschoben wird. */ @media (max-width: 900px) { .tjps-expose__grid > .tjps-expose__aside { display: contents; } .tjps-expose__grid > .tjps-expose__aside > .tjps-factbox { order: 1; } .tjps-expose__grid > .tjps-expose__main { order: 2; } .tjps-expose__grid > .tjps-expose__aside > .tjps-contact { order: 3; } }