/* ───────────────────────────────────────────────────────────────── Reihe – Bausteine nebeneinander ───────────────────────────────────────────────────────────────── */ .lt-reihe{ padding:64px 0; scroll-margin-top:calc(var(--kopf-h, 64px) + 12px); } /* Ohne Fläche kein Innenabstand oben und unten. Eine Reihe ohne Hintergrund ist kein eigener Abschnitt, sondern nur eine Anordnung – ihre Kinder bringen ihre Abstände selbst mit. Mit 64 Pixeln obendrauf stünde zwischen zwei Textblöcken nebeneinander mehr Luft als zwischen zwei untereinander. Der Abstand zur Kopfleiste kommt nicht von hier, sondern vom main-Tag – siehe _basis.css. Das gilt fuer jeden ersten Baustein, nicht nur fuer die Reihe: Ein Textblock ganz oben hatte dasselbe Problem. */ .lt-reihe:not([class*="lt-flaeche--"]){ /* Oben nichts, unten der uebliche Bausteinabstand. Ganz auf Null stand hier vorher – mit der Begruendung, die Kinder braechten ihre Abstaende selbst mit. Das stimmt fuer ihren INNEREN Abstand, aber nicht nach aussen: Die Zelle setzt padding-block:0 an jedem Baustein darin (siehe unten), damit zwei Spalten nebeneinander nicht je 64 Pixel Luft ueber und unter sich haben. Damit hatte die Reihe nach unten gar keinen Abstand mehr – die Fusszeile klebte direkt an der letzten Zeile. Nur unten, nicht oben: Oben schliesst die Reihe an den Abstand des Bausteins davor an, und zwei addierte Abstaende sind eine Luecke. Unten ist sie die letzte, die etwas dazu sagen kann. */ padding:0 0 64px; } @media(max-width:900px){ .lt-reihe:not([class*="lt-flaeche--"]){padding-bottom:44px} } /* ── Eine Reihe, die NICHT die erste ist, braucht oben Abstand ── Der Abstand nach unten reicht normalerweise: Die Reihe darueber bringt ihn mit. Nicht aber, wenn sie ein flaechiges Bild enthaelt – dort ist der untere Abstand ausdruecklich null, damit das Bild an den naechsten Abschnitt stoesst. Die Reihe darunter klebt dann daran. Deshalb hier: Jede Reihe ausser der ersten bekommt oben ihren Abstand. Enthaelt sie selbst ein flaechiges Bild, entfaellt er – ein Banner beginnt an der Kante des Vorgaengers. */ .lt-reihe:not([class*="lt-flaeche--"]):not(:first-child){ padding-top:64px; } @supports selector(:has(*)){ .lt-reihe:not([class*="lt-flaeche--"]):not(:first-child):has(.lt-header--sprung){ padding-top:0; } } @media(max-width:900px){ .lt-reihe:not([class*="lt-flaeche--"]):not(:first-child){padding-top:44px} } /* ── Ausser die Reihe traegt ein flaechiges Bild ──────────────── Ein Sprungbanner fuellt den Schirm und endet an dessen Kante. Ein Abstand darunter waere ein Streifen Seitengrund zwischen Bild und naechstem Abschnitt – genau das, was der Banner nicht haben soll. Der Text in der Nachbarspalte ist meist kuerzer als der Banner; sein Abstand nach unten entsteht ohnehin aus der Bannerhoehe. */ @supports selector(:has(*)){ .lt-reihe:not([class*="lt-flaeche--"]):has(.lt-header--sprung){ padding-bottom:0; } } /* ── Die Breite der Reihe ─────────────────────────────────────── 1080 ist die Textbreite – dasselbe Mass wie .lt-wrap und damit wie jeder andere Baustein. Eine Reihe daneben beginnt auf derselben Flucht, und das ist der Normalfall. Die uebrigen Stufen fuer Faelle, in denen das nicht passt: Zwei Fahrzeugkarten nebeneinander brauchen mehr, ein Zitat neben einem Bild weniger. Der Innenabstand bleibt in allen Stufen gleich – nur "randlos" hat keinen: Dort soll eine Bildflaeche wirklich bis an die Kante gehen. Wer dort Text hineinstellt, klebt am Bildschirmrand; das ist der Preis dieser Wahl und der Grund, warum sie nicht die Vorgabe ist. */ .lt-reihe__innen{ max-width:1080px;margin:0 auto;padding:0 22px; } .lt-reihe[data-reihe-breite="schmal"] .lt-reihe__innen{max-width:780px} .lt-reihe[data-reihe-breite="weit"] .lt-reihe__innen{max-width:1360px} .lt-reihe[data-reihe-breite="voll"] .lt-reihe__innen{max-width:1560px} .lt-reihe[data-reihe-breite="rand"] .lt-reihe__innen{ max-width:none; padding:0; } /* ── Randlos: nur das BILD darf an die Kante ──────────────────── "Randlos" heisst, dass eine Bildflaeche bis zum Fensterrand geht. Fuer Text gilt das nicht: Er klebte rechts an der Bildschirmkante und unten am Uebergang zur Fusszeile. Deshalb bekommen die Zellen OHNE flaechiges Bild ihren Innenabstand zurueck. Die Zelle mit dem Banner behaelt ihre Randlosigkeit – und weil beide in derselben Rasterzeile stehen, sieht man den Unterschied nicht als Versatz. Warum der untere Abstand die Reihe nicht hoeher macht: align-items:start laesst jede Zelle nur so hoch werden, wie ihr Inhalt ist. Die Reihenhoehe bestimmt die HOECHSTE Zelle – also der Banner. Solange der Text kuerzer ist, verschwindet sein Abstand im freien Raum darunter; erst wenn er den Banner ueberragt, waechst die Reihe mit. Genau so soll es sein. */ @supports selector(:has(*)){ .lt-reihe[data-reihe-breite="rand"] .lt-reihe__zelle:not(:has(.lt-header--sprung)){ padding-inline:clamp(18px, 3vw, 44px); padding-bottom:clamp(24px, 4vw, 64px); } } /* Randlos MIT Kartenhintergrund: Dann brauchen die Karten wieder etwas Luft zur Kante – sonst schneidet der Bildschirmrand die Rundung ab. */ .lt-reihe[data-reihe-breite="rand"][data-reihe-karten="abgesetzt"] .lt-reihe__innen, .lt-reihe[data-reihe-breite="rand"][data-reihe-karten="kraeftig"] .lt-reihe__innen{ padding:0 12px; } /* Auf sehr breiten Schirmen mehr Rand – sonst klebt die erste Spalte an der Kante des Sichtfelds. Gilt nicht fuer "randlos": Dort ist genau das gewollt. */ @media(min-width:1600px){ .lt-reihe:not([data-reihe-breite="rand"]) .lt-reihe__innen{padding:0 40px} } /* ── Das Raster ───────────────────────────────────────────────── Die Spaltenaufteilung kommt als Variable aus dem Renderer – sie hängt an der gewählten Variante ("2-1" und so weiter) und lässt sich in CSS nicht ableiten. Der gap steht als eigene Variable, damit die drei Abstandsstufen ihn setzen können, ohne die ganze Regel zu wiederholen. */ .lt-reihe__raster{ display:grid; grid-template-columns:var(--reihe-spalten, minmax(0,1fr) minmax(0,1fr)); gap:var(--reihe-gap, 28px); align-items:start; } /* Keiner: Banner stoßen direkt aneinander – mit Breite "bis zum Rand" ergibt das eine durchgehende Bildfläche. */ .lt-reihe[data-reihe-abstand="keiner"] .lt-reihe__raster{--reihe-gap:0px} .lt-reihe[data-reihe-abstand="eng"] .lt-reihe__raster{--reihe-gap:16px} .lt-reihe[data-reihe-abstand="weit"] .lt-reihe__raster{--reihe-gap:44px} /* ── Ausrichtung ──────────────────────────────────────────────── "Gleich hoch" ist nicht die Vorgabe, obwohl es ordentlicher aussieht: Ein Textblock neben einem Bild wird dabei auf die Höhe des Bildes gezogen, und der Text steht dann oben mit einer großen Lücke darunter. Bei Karten ist es richtig, bei Text nicht – also eine Entscheidung, die der Baustein nicht treffen kann. */ .lt-reihe[data-reihe-aus="mitte"] .lt-reihe__raster{align-items:center} .lt-reihe[data-reihe-aus="gestreckt"] .lt-reihe__raster{align-items:stretch} /* Bei "gleich hoch" muss die Zelle die Höhe auch weiterreichen – sonst ist zwar die Zelle gestreckt, der Baustein darin aber so hoch wie sein Inhalt. */ .lt-reihe[data-reihe-aus="gestreckt"] .lt-reihe__zelle{ display:flex;flex-direction:column; } .lt-reihe[data-reihe-aus="gestreckt"] .lt-reihe__zelle > *{ flex:1 1 auto; } .lt-reihe__zelle{ min-width:0; /* ── Der Massstab ist die SPALTE, nicht das Fenster ─────────── Die Bausteine rechnen ihre Schriftgroessen in vw – der Titel eines Sprungbanners etwa mit clamp(2.2rem, 6vw, 5rem). Das stimmt, solange er die volle Seitenbreite hat. In einer halben Spalte ist vw immer noch die GANZE Fensterbreite: Auf einem 2500-Pixel-Schirm rechnet der Banner mit 150 Pixeln Schriftgroesse, obwohl ihm nur 1250 Pixel Platz zur Verfuegung stehen. Genau das war zu sehen – "Ihr Haendler fuer Renault und Dacia" ueber vier Zeilen. container-type:inline-size macht die Zelle zum Massstab. Danach bezieht sich cqw auf ihre Breite, nicht auf das Fenster, und die Groessen darunter stimmen wieder. Der Preis: Ein Container kann keine eigene Groesse aus seinem Inhalt ziehen. Das ist hier ohne Folgen, weil die Breite vom Raster kommt – aber es ist der Grund, warum das nicht ueberall geht. */ container-type:inline-size; /* Ein NAME, damit Abfragen eindeutig zuordnen. Ohne ihn nimmt @container den naechsten Vorfahren mit container-type – und in dieser Zelle steht womoeglich ein Baustein, der sich selbst ebenfalls misst (die Standortkarte etwa). Dessen Abfragen landeten dann auf der Zelle statt auf ihm. */ container-name:zelle; } /* ── Schriftgroessen in der Spalte ────────────────────────────── Dieselben Verhaeltnisse wie im Original, nur auf die Spalte bezogen: Wo dort 6vw stand, steht hier 6cqw. Die rem-Grenzen bleiben unveraendert – sie sind die Unter- und Obergrenze in absoluter Groesse, und ein Titel soll in einer schmalen Spalte nicht kleiner werden als auf dem Telefon. Nur die Bausteine, die wirklich gross setzen. Ein Textblock rechnet ohnehin in rem und braucht nichts davon. */ @supports (container-type: inline-size){ .lt-reihe__zelle .lt-header__titel{ font-size:clamp(1.6rem, 5.2cqw, 3rem); } .lt-reihe__zelle .lt-header--sprung .lt-header__titel{ font-size:clamp(1.8rem, 7cqw, 3.4rem); } .lt-reihe__zelle .lt-header__sub{ font-size:clamp(.95rem, 2.2cqw, 1.25rem); } .lt-reihe__zelle .lt-header__kicker{ font-size:clamp(.72rem, 1.4cqw, .88rem); } .lt-reihe__zelle .lt-fz__titel, .lt-reihe__zelle .lt-modelle__titel, .lt-reihe__zelle .lt-sts__titel{ font-size:clamp(1.3rem, 4cqw, 1.9rem); } } /* ── Ein Sprungbanner bleibt ein Sprungbanner ─────────────────── Hier stand eine Hoehenbegrenzung: In einer Spalte sollte er nicht den ganzen Schirm fuellen, sondern ungefaehr quadratisch stehen. Das war meine Annahme, nicht die Anforderung. Ein Sprungbanner heisst so, weil er den Schirm fuellt und beim Scrollen einrastet – das ist seine Form, und die aendert sich nicht dadurch, dass daneben etwas steht. Wer ihn in eine Reihe stellt, will genau diesen Banner, nur eben mit einer zweiten Spalte daneben. Deshalb hier gar nichts: Er behaelt 100lvh, das Einrasten und seinen Scrollhinweis. Die Zelle nimmt ihm oben den Abstand weg (siehe unten), damit er direkt unter der Leiste beginnt – wie ein Banner ueber die volle Breite auch. Nur die SCHRIFTGROESSEN bleiben angepasst: Die rechnen in vw und waeren in einer halben Spalte doppelt so gross wie gedacht. Das ist ein Rechenfehler, keine Formfrage. */ /* Ohne Container Queries – Safari vor 16, Firefox vor 110 – feste kleinere Werte. Sie stimmen nicht auf jeder Spaltenbreite, sind aber besser als ein Titel, der aus der Spalte laeuft. */ @supports not (container-type: inline-size){ .lt-reihe__zelle .lt-header__titel{font-size:clamp(1.6rem, 2.6vw, 2.6rem)} .lt-reihe__zelle .lt-header--sprung .lt-header__titel{ font-size:clamp(1.8rem, 3vw, 3rem); } .lt-reihe__zelle .lt-header__sub{font-size:clamp(.95rem, 1.1vw, 1.2rem)} } /* ── Die Bausteine in der Reihe ───────────────────────────────── Sie bringen ihre eigenen Außenabstände mit – gedacht für einen Abschnitt über die volle Seitenbreite. In einer Reihe wären das 64 Pixel über und unter jeder Spalte, obwohl sie nebeneinander stehen und der Abstand vom gap kommt. Auch die eigene Breitenbegrenzung fällt weg: Die Reihe ist der Rahmen, ein zweiter darin lässt den Inhalt in der Spalte schweben. */ .lt-reihe__zelle > section{ /* ── NICHT null, sondern knapp ───────────────────────────── Hier stand padding-block:0 – mit der Begruendung, zwei Spalten nebeneinander braeuchten nicht je 64 Pixel Luft ueber und unter sich. Der Gedanke stimmt fuer den Abstand ZWISCHEN Bausteinen: Der kommt vom gap und von der Reihe. Er stimmt nicht fuer den Abstand INNERHALB eines Bausteins – die Ueberschrift eines Kontaktformulars klebte am oberen Rand der Zelle und die Formularkarte am unteren. Der Unterschied ist der: Ein Baustein ueber die volle Breite grenzt sich mit seinem Innenabstand gegen die Nachbarn ab. In einer Spalte grenzt ihn die Spalte ab – aber sein Inhalt braucht trotzdem Luft zum eigenen Rand. 20 Pixel: genug, dass nichts klebt, wenig genug, dass zwei Spalten nicht auseinanderlaufen. Bei einer Zelle mit Kartenhintergrund kommt deren Innenabstand noch dazu; dort faellt der Wert nicht auf. */ padding-block:20px; scroll-margin-top:0; } /* Ein flaechiges Bild braucht ihn nicht: Es fuellt seine Zelle bis an die Kante, und ein Innenabstand waere ein Streifen Seitengrund darum. */ @supports selector(:has(*)){ .lt-reihe__zelle > .lt-header--sprung, .lt-reihe__zelle > section:has(> .lt-header__flaeche){ padding-block:0; } } .lt-reihe__zelle .lt-wrap, .lt-reihe__zelle .lt-fz__innen, .lt-reihe__zelle .lt-modelle__innen{ max-width:none; padding:0; } /* Sprungbanner in der Zelle: seitlich trotzdem Luft. Ohne sie klebte der Bannerfilter auf dem Handy an beiden Bildschirmkanten, und der Text lief bis an den Rand. Am Schreibtisch liegen die Zellen ohnehin nebeneinander und brauchen den Innenabstand ebenfalls. */ .lt-reihe__zelle .lt-header--sprung > .lt-wrap{padding-inline:clamp(16px, 3vw, 34px)} /* ── Der Hintergrund der Karten ───────────────────────────────── EINMAL an der Reihe gesetzt, gilt für alle Spalten. Drei Kacheln mit verschiedenen Flächen sind nie gewollt, und ein Feld ist besser als drei, die man einzeln nachziehen muss. Die Farbe mischt sich aus currentColor – also aus der Textfarbe der Fläche darunter. Auf einer dunklen Reihe ist sie hell, auf einer hellen dunkel. Damit hebt sich die Karte IMMER ab, egal welchen Hintergrund die Reihe trägt, und beim Wechsel der Reihenfarbe muss niemand die Karten anfassen. Ein fester Grauwert könnte das nicht: Er wäre auf einer dunklen Fläche unsichtbar und auf der Akzentfläche schmutzig. */ .lt-reihe[data-reihe-karten="abgesetzt"] .lt-reihe__zelle{ padding:24px; border-radius:var(--radius); background:color-mix(in srgb, currentColor 7%, transparent); border:1px solid var(--auf-flaeche-rand, color-mix(in srgb, currentColor 12%, transparent)); } .lt-reihe[data-reihe-karten="kraeftig"] .lt-reihe__zelle{ padding:24px; border-radius:var(--radius); background:color-mix(in srgb, currentColor 14%, transparent); border:1px solid var(--auf-flaeche-rand, color-mix(in srgb, currentColor 20%, transparent)); box-shadow:var(--schatten-klein); } /* Trägt die Reihe keine Fläche, mischt currentColor gegen den Seitengrund – dasselbe Verhalten, nur schwächer. Das ist richtig so: Eine Kartenreihe ohne Hintergrundfläche soll ruhiger wirken. */ /* ── Umbruch: nach PLATZ, nicht nach Fensterbreite ────────────── Ohne Einstellung. Hier standen erst vier feste Grenzen zur Auswahl, dann vier Stufen fuer die schmalste Spalte – beides Fragen, die der Bediener nicht beantworten sollte. Er sieht im Editor nicht, wie breit die Reihe spaeter auf welchem Geraet ist, und eine falsche Antwort merkt er erst auf der fertigen Seite. 22rem als fester Wert: Das ist die Breite, unter der ein Baustein nicht mehr sinnvoll steht – etwa 350 Pixel, also ungefaehr ein Telefon hochkant. Schmaler brechen Ueberschriften auf jedes Wort um und Formularfelder werden unbedienbar. Die gewaehlte Spaltenzahl gilt, bis der Platz wirklich nicht mehr reicht – siehe die Stufen darunter. */ /* ── Die gewaehlte Spaltenzahl gilt ───────────────────────────── Hier stand auto-fit mit minmax(min(100%, 22rem), 1fr) – der Browser sollte selbst entscheiden, wie viele Spalten passen. Das ging schief: Bei Textbreite (1080px) brauchen drei Spalten zu je 22rem plus zwei Abstaende 1112 Pixel. Es reichte nicht, und aus "Drei gleich breit" wurden zwei – der dritte Baustein rutschte in eine zweite Zeile. Im Editor stand drei, auf der Seite standen zwei, und nichts erklaerte den Unterschied. Eine Einstellung, die der Browser stillschweigend uebergeht, ist schlechter als eine, die man falsch setzen kann. Jetzt gilt die Wahl: Die Spalten kommen aus --reihe-spalten (der Renderer setzt sie aus der Aufteilung, siehe reiheSpalten) und werden erst umgebrochen, wenn es wirklich zu eng wird – ueber die Stufen darunter. Die Grundregel weiter oben setzt --reihe-spalten schon; hier ist nichts mehr zu tun. Der Block bleibt als Ort fuer den Kommentar, weil genau hier nachschaut, wer sich ueber die Spaltenzahl wundert. */ /* ── Umbruch je Spaltenzahl ───────────────────────────────────── Gemessen wird die REIHE, nicht das Fenster. Die Grenzen rechnen mit 17rem je Spalte statt 22 – das sind 272 Pixel, und darunter wird eine Spalte unbedienbar. Mit 22 waere die Textbreite schon fuer drei Spalten zu schmal gewesen, und genau daran ist die vorige Fassung gescheitert. 4 Spalten: 4 x 17 + 3 x 1.75 = 73rem 3 Spalten: 3 x 17 + 2 x 1.75 = 54rem 2 Spalten: 2 x 17 + 1 x 1.75 = 36rem Stufenweise: Vier werden zu zwei, drei gleich zu einer, zwei werden zu einer. Nicht vier auf einen Schlag zu eins – dann staenden auf einem Tablet vier Bausteine untereinander, wo zwei nebeneinander gepasst haetten. */ .lt-reihe__innen{container-type:inline-size;container-name:reihe} @container reihe (max-width: 73rem){ .lt-reihe[data-reihe-anzahl="4"] .lt-reihe__raster{ grid-template-columns:repeat(2, minmax(0,1fr)); } } /* Drei Spalten gehen direkt auf EINE, nicht auf zwei: 2 + 1 ließe die dritte Zelle allein und halb so breit darunter stehen – auf Telefon und kleinem Tablet sah das nach Fehler aus. */ @container reihe (max-width: 54rem){ .lt-reihe[data-reihe-anzahl="3"] .lt-reihe__raster{ grid-template-columns:minmax(0,1fr); } } @container reihe (max-width: 36rem){ .lt-reihe .lt-reihe__raster{ grid-template-columns:minmax(0,1fr); } } /* Ohne Container Queries – Safari vor 16, Firefox vor 110 – nach Fensterbreite. Grob, aber in den meisten Faellen richtig: Eine Reihe steht ueblicherweise ueber die volle Seitenbreite. */ @supports not (container-type: inline-size){ @media(max-width:820px){ .lt-reihe__raster{grid-template-columns:minmax(0,1fr)} } } /* Auf schmalen Schirmen weniger Innenabstand – das gilt unabhaengig vom Umbruch. */ @media(max-width:900px){ .lt-reihe{padding:44px 0} .lt-reihe__innen{padding:0 18px} } @media(max-width:600px){ .lt-reihe[data-reihe-karten="abgesetzt"] .lt-reihe__zelle, .lt-reihe[data-reihe-karten="kraeftig"] .lt-reihe__zelle{ padding:18px; } } /* ── Nur im Editor ────────────────────────────────────────────── Eine leere Reihe, damit man sieht, wohin man ziehen kann. */ .lt-reihe--leer{padding:32px 0} .lt-reihe--leer p{ margin:0;padding:28px 20px; border:1px dashed color-mix(in srgb, var(--akzent) 45%, transparent); border-radius:var(--radius); background:color-mix(in srgb, var(--akzent) 6%, transparent); font-size:.92rem;text-align:center; color:var(--auf-flaeche-schwach, var(--text)); } /* ── Die erste Reihe der Seite ────────────────────────────────── Steht sie ganz oben, liegt die Kopfleiste darueber. Ein Sprungbanner in einer Spalte soll das auch: Er ist ein Bild, und die Leiste schwebt darauf – genau wie bei einem Banner ueber die volle Seitenbreite. Alles andere in derselben Reihe darf das nicht. Text, Formulare und Karten verschwinden sonst hinter der Leiste, und im dunklen Schema sieht man nicht einmal, dass dort etwas fehlt. Deshalb der Abstand an der ZELLE, nicht an der Reihe: Jede Spalte entscheidet fuer sich, ob sie ihn braucht. :has() prueft, ob in der Zelle ein flaechiges Bild steckt. Fehlt die Unterstuetzung (Safari vor 15.4), bekommt jede Zelle den Abstand – dann rutscht das Banner ein Stueck nach unten, was der harmlosere Fehler ist. */ main > .lt-reihe:first-child .lt-reihe__zelle{ padding-top:var(--reihe-kopf-luft, calc(var(--kopf-h, 64px) + 10px)); } /* ── Ausser bei mittiger Ausrichtung ──────────────────────────── "Bausteine ausrichten: Mittig" zentriert die Zellen senkrecht in der Reihe – der Text steht damit auf halber Hoehe des Banners daneben. Ein padding-top an der Zelle macht diese Rechnung kaputt: Die Zelle waere um den Kopfabstand hoeher als ihr Inhalt, und die Mitte des Inhalts saesse entsprechend tiefer. Sichtbar als Text, der etwas zu weit unten steht. Gebraucht wird er dort auch nicht: Zentriert in einem Raster von Bildschirmhoehe kommt der Inhalt der Leiste ohnehin nicht nahe. Bei "gestreckt" bleibt der Abstand: Dort fuellt die Zelle die volle Hoehe, ihr Inhalt beginnt oben – also an der Leiste. */ main > .lt-reihe:first-child[data-reihe-aus="mitte"] .lt-reihe__zelle{ padding-top:0; } /* ── Und die Bannerzelle bleibt bei voller Hoehe ──────────────── Ein Sprungbanner soll den Schirm fuellen, auch wenn daneben zentriert wird. align-items:center macht ihn sonst so hoch wie sein Inhalt – bei einem Banner ist der Inhalt aber nur die Ueberschrift mit zwei Knoepfen, und das Bild schrumpfte auf deren Hoehe. align-self setzt die Ausrichtung fuer diese eine Zelle zurueck: Sie streckt sich, die anderen bleiben zentriert. Genau das ist gemeint mit "die anderen mittig AM Banner". */ @supports selector(:has(*)){ .lt-reihe[data-reihe-aus="mitte"] .lt-reihe__zelle:has(.lt-header--sprung){ align-self:stretch; } } /* ── Volle Fensterhoehe fuer den Banner in der ersten Reihe ───── Der Sprungbanner rechnet 100lvh MINUS Leistenhoehe – richtig, solange die Leiste ihren Platz im Fluss einnimmt und ihn nach unten schiebt. In der ersten Reihe stimmt das nicht mehr: Das main-Tag ruecken wir um genau diese Hoehe nach oben (siehe _basis.css), der Banner beginnt also an der Fensterkante. Mit dem Abzug fehlt ihm unten die Leistenhoehe – im Bild als Streifen zwischen Banner und Fusszeile zu sehen. Die Ausnahme im Header-Modul greift hier nicht: Sie gilt fuer "direktes Kind von main.lt-unter-kopf", und in einer Reihe ist der Banner ein Enkel. vh vor lvh: aeltere Browser kennen lvh nicht und nehmen die erste Zeile. */ main > .lt-reihe:first-child .lt-header--sprung{ height:100vh; height:100lvh; } /* KEIN Zuschlag bei der Pille. Hier stand "+ 2 × Pillenluft + 3px" – der Gedanke war, dass die Pille tiefer ins Bild reicht und der Banner entsprechend hoeher sein muss. Das war doppelt gerechnet: Die Pille nimmt im Fluss ihre Hoehe PLUS ihren Randabstand ein, und genau diesen Betrag zieht der negative Rand am main-Tag wieder ab. Der Banner beginnt danach an der Fensterkante – bei null. Ein Zuschlag machte ihn um denselben Betrag zu hoch, und unten schaute er aus dem Fenster heraus. 100lvh gilt fuer jede Leistenart. */ /* ── Die Reihe selbst nimmt oben keinen Platz ──────────────────── Steht sie ganz oben und enthaelt ein flaechiges Bild, muss dieses an der Fensterkante beginnen – wie ein Sprungbanner ueber die volle Breite. Der Innenabstand der Reihe (bei gewaehlter Flaeche 64 Pixel) und der seitliche des Innenkastens stuenden dem im Weg: Das Bild begaenne 64 Pixel tiefer und 22 Pixel vom Rand entfernt. Nur wenn wirklich ein solches Bild darin steckt – eine Reihe aus zwei Textblöcken behaelt ihre Abstaende. */ @supports selector(:has(*)){ main > .lt-reihe:first-child:has(.lt-header--sprung){ padding-top:0; } } /* Bis an den Bildschirmrand? Das entscheidet die Breite der Reihe. Ich hatte hier negative Raender gesetzt, damit die Bannerspalte ueber den Innenkasten hinausreicht. Das war ein Eingriff, den niemand verlangt hat – und er haette sich mit der Einstellung "Breite der Reihe" gebissen: Wer dort "Textbreite" waehlt, will den Rand. Wer den Banner bis an die Kante moechte, waehlt "Randlos". Das ist eine Einstellung, kein Sonderfall im Stylesheet. */ @supports selector(:has(*)){ main > .lt-reihe:first-child .lt-reihe__zelle:has(.lt-header--sprung){ padding-top:0; } } /* Bei der schwebenden Pille reicht die Leiste um ihren Randabstand tiefer ins Bild – oben und unten je einmal. */ .lt-kopf--pille ~ main > .lt-reihe:first-child .lt-reihe__zelle{ --reihe-kopf-luft:calc(var(--kopf-h, 64px) + 2 * var(--pille-luft, 18px) + 8px); } /* Traegt die Zelle einen Kartenhintergrund, bringt sie schon Innenabstand mit – der Zuschlag kommt oben drauf, statt ihn zu ersetzen. */ main > .lt-reihe:first-child[data-reihe-karten="abgesetzt"] .lt-reihe__zelle, main > .lt-reihe:first-child[data-reihe-karten="kraeftig"] .lt-reihe__zelle{ padding-top:calc(var(--reihe-kopf-luft, calc(var(--kopf-h, 64px) + 10px)) + 24px); } /* ── Umgebrochen: nur die erste Zelle braucht den Abstand ─────── Hier stand :not(:first-child){padding-top:0} ohne Bedingung. Das war falsch: NEBENEINANDER braucht gerade die zweite Spalte den Abstand – dort steht der Text, der sonst hinter der Leiste liegt. Die Regel haette genau den Fall kaputtgemacht, um den es geht. Untereinander ist es umgekehrt: Dann liegt nur die oberste Zelle an der Leiste, alle weiteren stehen ohnehin tiefer. Die Unterscheidung kann nur eine Container Query treffen – sie misst die Reihe und weiss damit, ob umgebrochen wurde. 46rem ist dieselbe Grenze wie beim Umbruch selbst. */ /* Dieselbe Grenze wie beim Umbruch auf eine Spalte (36rem): Ab dort stehen die Zellen untereinander, und nur die oberste liegt an der Leiste. */ @container reihe (max-width: 36rem){ main > .lt-reihe:first-child .lt-reihe__zelle:not(:first-child){ padding-top:0; } } /* ══ Bausteine in einer Spalte: die mobile Darstellung ════════════ Die Bausteine bringen ihre eigenen Media Queries mit – der Fahrzeugbestand stellt bei 900 Pixeln auf eine Spalte um, die Karte bei 600 auf Bild-ueber-Text. Media Queries messen aber das FENSTER. In einer Spalte hat der Baustein vielleicht 600 Pixel, waehrend das Fenster 2500 breit ist – die Regeln greifen nicht, und der Bestand quetscht seine Filterspalte, die Kacheln und die Datentabelle in einen Streifen. Genau das war zu sehen. Hier dieselben Umstellungen noch einmal, ausgeloest von der ZELLENBREITE statt von der Fensterbreite. Die Grenzen sind dieselben wie im jeweiligen Baustein – wer sie dort aendert, aendert sie hier mit. Nur die strukturellen Regeln, nicht jede Feinheit: Was ein Baustein an Abstaenden und Schriftgroessen mobil anders macht, faellt in einer Spalte kaum auf. Ein zweispaltiges Raster in 400 Pixeln Breite dagegen sofort. ═══════════════════════════════════════════════════════════════ */ @container zelle (max-width: 900px){ /* ── Fahrzeugbestand ───────────────────────────────────────── Filterleiste ueber die Karten statt daneben, und sie klebt nicht mehr: Ueber der Liste stehend wuerde sie beim Scrollen die Karten ueberdecken. */ .lt-reihe__zelle [class*="lt-fz--liste"] .lt-fz__raster{ grid-template-columns:minmax(0,1fr); } .lt-reihe__zelle .lt-fz__filter{ position:static;max-height:none;overflow:visible; } /* Der Aufklappknopf erscheint – am Schreibtisch ist er ausgeblendet, weil die Filter dort offen danebenstehen. */ .lt-reihe__zelle .lt-fz__klappknopf{display:flex} /* Modelle und Standorte: dieselbe Umstellung. */ .lt-reihe__zelle .lt-modelle__raster, .lt-reihe__zelle .lt-sts__raster{ grid-template-columns:repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); } } @container zelle (max-width: 820px){ /* ── Kontakt: Angaben und Formular untereinander ───────────── Dieselbe Grenze wie im Kontaktmodul (820px). Meine Regel stand erst bei 600 – in einer 700 Pixel breiten Spalte blieben Adresse und Formular damit nebeneinander, je 350 Pixel breit. Ein Eingabefeld mit Beschriftung braucht mehr. Die REIHENFOLGE regelt sich von selbst: Sie steht im Markup (siehe kontakt/render.php – bei "Angaben zuerst" werden die beiden Bloecke in dieser Folge ausgegeben). Untereinander erscheint damit oben, was auch links stand. !important, weil das Kontaktmodul es in seiner Media Query ebenfalls nutzt: Bei einem schmalen FENSTER und einer schmalen Spalte greifen beide, und ohne waere die spaetere Regel die staerkere – welche das ist, haengt an der Ladereihenfolge der Stylesheets. */ .lt-reihe__zelle .lt-kontakt__raster{ grid-template-columns:1fr !important; } } @container zelle (max-width: 600px){ /* ── Die grosse Fahrzeugkarte ──────────────────────────────── Bild ueber die Angaben statt daneben. Bei 600 Pixeln waere das Bild in der halben Breite kleiner als 280 – darauf erkennt man kein Fahrzeug mehr. */ .lt-reihe__zelle .lt-fzk{ flex-direction:column;gap:18px;padding:14px; } .lt-reihe__zelle .lt-fzk__bilder{flex:0 0 auto} /* Das Datenraster enger, damit "Schaltgetriebe" nicht ausgepunktet wird. */ .lt-reihe__zelle .lt-fzk__daten{ grid-template-columns:repeat(auto-fit, minmax(8.5rem,1fr)); gap:5px 12px;font-size:.82rem; } .lt-reihe__zelle .lt-fzk__z b{ white-space:normal;overflow:visible;text-overflow:clip; } /* Preisbereich untereinander – nebeneinander bleibt fuer die Zusatzzeile kein Platz. */ .lt-reihe__zelle .lt-fzk__fuss{ flex-direction:column;align-items:stretch; } /* Kontaktformular: Felder untereinander. Die Aufteilung von Angaben und Formular steht weiter oben – sie bricht frueher. */ .lt-reihe__zelle .lt-form__zeile{grid-template-columns:1fr} /* Textblock mit Bild: Bild oben. */ .lt-reihe__zelle .lt-block--bild-links .lt-wrap, .lt-reihe__zelle .lt-block--bild-rechts .lt-wrap{ grid-template-columns:1fr;gap:24px; } .lt-reihe__zelle .lt-block--bild-rechts .lt-block__bild{order:0} } /* ══ Kuerzere Bausteine laufen mit ════════════════════════════════ Steht links ein Fahrzeugbestand ueber drei Bildschirmhoehen und rechts ein Kontaktformular, scrollt man am Formular vorbei und sieht danach zwei Bildschirme leere Spalte. sticky haelt es fest, bis der lange Nachbar durch ist – dasselbe Verhalten wie die Filterleiste im Bestand. NUR AM SCHREIBTISCH: Untereinander gibt es kein "daneben", an dem etwas kleben koennte. Die Grenze ist dieselbe wie beim Umbruch. align-items:start ist Voraussetzung – eine gestreckte Zelle ist so hoch wie die Reihe und hat keinen Weg zum Kleben. Deshalb greift die Regel bei "Gleich hoch" nicht, und das ist richtig: Wer alle gleich hoch will, will kein Mitlaufen. */ @container reihe (min-width: 36rem){ /* ── STICKY AM KIND, NICHT AN DER ZELLE ────────────────────── Zuerst stand position:sticky an .lt-reihe__zelle – und es tat nichts. Der Grund ist container-type:inline-size, das die Zelle wegen der Schriftgroessen traegt. Es bringt "contain: layout style inline-size" mit, und contain:layout macht das Element zu einem eigenen Bezugsrahmen. Ein sticky-Element klebt am naechsten scrollenden Vorfahren – innerhalb eines solchen Rahmens gibt es keinen, also klebt es an nichts. Der Baustein IN der Zelle hat das Problem nicht: Sein Elternteil ist die Zelle, sein Scrollport das Fenster. Die Zelle braucht dafuer eine Hoehe, an der entlanggeklebt werden kann – die bekommt sie ueber align-self:stretch. Ohne das ist sie so hoch wie ihr Inhalt, und der Weg waere null. */ .lt-reihe[data-reihe-mitlauf="1"]:not([data-reihe-aus="gestreckt"]) .lt-reihe__zelle{ align-self:stretch; } .lt-reihe[data-reihe-mitlauf="1"]:not([data-reihe-aus="gestreckt"]) .lt-reihe__zelle > *{ position:sticky; top:calc(var(--kopf-h, 64px) + 16px); } /* Bei der Pille kommt ihr Randabstand dazu. */ .lt-kopf--pille ~ main .lt-reihe[data-reihe-mitlauf="1"]:not([data-reihe-aus="gestreckt"]) .lt-reihe__zelle > *{ top:calc(var(--kopf-h, 64px) + 2 * var(--pille-luft, 18px) + 16px); } /* Eine Zelle mit flaechigem Bild klebt nicht: Ein Sprungbanner fuellt den Schirm und ist damit nie der kuerzere Nachbar. */ @supports selector(:has(*)){ .lt-reihe[data-reihe-mitlauf="1"] .lt-reihe__zelle:has(.lt-header--sprung) > *{ position:static; } } } /* ── Die Standortkarte fuellt ihre Spalte ─────────────────────── Steht daneben ein langer Baustein – eine Fahrzeugliste, ein Formular –, endete die Karte nach ihren 1024:640 und darunter blieb leere Spalte. In einer Reihe soll sie so hoch sein wie ihr Nachbar. Dafuer dreierlei: 1. Die Zelle streckt sich (align-self:stretch) – sonst ist sie so hoch wie ihr Inhalt, und der ist die Karte. 2. Die Karte gibt ihr Seitenverhaeltnis auf und nimmt die volle Hoehe. aspect-ratio muss dafuer ausdruecklich zurueck: Ein height:100% allein setzt sich dagegen nicht durch. 3. Das Bild fuellt mit cover – es wird also beschnitten. Punkt 3 hat eine Folge, die man sehen wuerde: Die Nadeln sitzen in Prozent des RAHMENS, das Bild darin ist aber verschoben und beschnitten. Sie zeigten dann daneben. Das raeumt das Skript auf (siehe pubNadelSkript, Abschnitt "Nadeln aufs Bild"). */ /* ── Die Standortkarte in einer Reihe ─────────────────────────── Zwei Faelle, und sie schliessen einander aus: OHNE Mitlaufen streckt sich die Karte auf die Hoehe des Nachbarn. Das Bild fuellt dann mit cover; die Nadeln rechnet das Skript um (siehe pubNadelSkript). MIT Mitlaufen darf sie das gerade nicht: Ein gestrecktes Element ist so hoch wie die Reihe und hat keinen Weg, an dem es entlangkleben koennte. Genau deshalb griff der Schalter bei der Karte nicht – die Streckung von hier hat ihn ausgehebelt. Deshalb die Streckung nur, wenn nicht mitgelaufen wird. __karteflaeche, nicht __karte: Letzteres ist die Standortkachel in Slider und Raster. */ .lt-reihe:not([data-reihe-mitlauf="1"]) .lt-reihe__zelle:has(.lt-so--karte){ align-self:stretch; } .lt-reihe:not([data-reihe-mitlauf="1"]) .lt-reihe__zelle .lt-so--karte{ display:flex; flex-direction:column; height:100%; } .lt-reihe:not([data-reihe-mitlauf="1"]) .lt-reihe__zelle .lt-so--karte .lt-so__innen{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; } .lt-reihe:not([data-reihe-mitlauf="1"]) .lt-reihe__zelle .lt-so--karte .lt-so__karteflaeche{ aspect-ratio:auto; flex:1 1 auto; min-height:320px; } .lt-reihe:not([data-reihe-mitlauf="1"]) .lt-reihe__zelle .lt-so--karte .lt-so__kartenbild, .lt-reihe:not([data-reihe-mitlauf="1"]) .lt-reihe__zelle .lt-so--karte .lt-so__kartenbild img{ height:100%; } .lt-reihe:not([data-reihe-mitlauf="1"]) .lt-reihe__zelle .lt-so--karte .lt-so__kartenbild img{ object-fit:cover; } /* ── Mehrere Sprungbanner nebeneinander: gemeinsame Linien ──────── Mittig ausgerichtet steht jeder Inhalt in SEINER Zellenmitte – bei unterschiedlich langen Unterzeilen landen Kicker, Titel und Knöpfe dadurch auf verschiedenen Höhen. In der Reihe deshalb ein festes Raster statt "zentriert": · Kicker + Titel beginnen in jeder Zelle auf derselben Höhe · die Knöpfe stehen in jeder Zelle unten auf derselben Linie · der Zwischenraum nimmt auf, was die Unterzeile mehr braucht Nur bei Position "mitte" (Vorgabe) – oben/unten bleiben, wie gewählt. Ab Tablet-Breite; darunter stehen die Zellen ohnehin untereinander. */ @media (min-width: 900px){ .lt-reihe__zelle .lt-header--sprung.lt-header--pos-mitte{ align-items:stretch; } .lt-reihe__zelle .lt-header--sprung.lt-header--pos-mitte .lt-wrap{ display:flex;flex-direction:column; /* Oben so viel Luft, dass der Block (Text + Knöpfe, ~450 px) optisch in der Zellenmitte sitzt - über alle Zellen gleich, damit die Titel auf einer Linie beginnen. Vorher 30vh fest: Auf 1440 px Höhe stand der Block im oberen Drittel. */ padding-top:clamp(160px, calc(50vh - 240px), 520px); padding-bottom:40px; } .lt-reihe__zelle .lt-header--sprung.lt-header--pos-mitte .lt-header__inhalt{ flex:1 1 auto;display:flex;flex-direction:column; justify-content:flex-start; } /* Knöpfe NICHT mehr an die Unterkante (margin-top:auto): Auf hohen Schirmen lagen sie damit 600 px unter dem Text. Stattdessen der gemessene Vorlauf aus dem Reihen-Skript (--kopf-luecke, siehe header/render.php): Er bringt die ersten Knöpfe aller Zellen auf eine Linie, dicht unter dem längsten Text. Ohne Skript greift der Rückfall von 24 px. Dasselbe für den Filterblock. */ .lt-reihe__zelle .lt-header--sprung.lt-header--pos-mitte .lt-header__aktionen, .lt-reihe__zelle .lt-header--sprung.lt-header--pos-mitte .lt-fzb-block{ margin-top:var(--kopf-luecke,24px);padding-top:0; } /* Kicker einzeilig, damit die Titel auf einer Linie beginnen */ .lt-reihe__zelle .lt-header--sprung.lt-header--pos-mitte .lt-header__kicker{ white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } } /* ── Nur EIN Scrollhinweis, wenn Banner nebeneinander stehen ───── Drei Mäuse nebeneinander sagen dreimal dasselbe. Nebeneinander (gleiche Grenzen wie der Spaltenumbruch oben) zeigt nur die mittlere Zelle ihren Hinweis; bei gerader Anzahl sitzt er auf der Fuge zwischen den beiden mittleren Zellen. Untereinander (Telefon) behält jede Zelle ihren – dort führt er zum nächsten Banner. */ @container reihe (min-width: 54rem){ .lt-reihe[data-reihe-anzahl="3"] .lt-reihe__zelle:not(:nth-child(2)) .lt-header__weiter{display:none} } @container reihe (min-width: 36rem){ .lt-reihe[data-reihe-anzahl="2"] .lt-reihe__zelle:nth-child(2) .lt-header__weiter{display:none} .lt-reihe[data-reihe-anzahl="2"] .lt-reihe__zelle:nth-child(1) .lt-header__weiter{ left:calc(100% + var(--reihe-gap, 28px) / 2); } } @container reihe (min-width: 73rem){ .lt-reihe[data-reihe-anzahl="4"] .lt-reihe__zelle:not(:nth-child(2)) .lt-header__weiter{display:none} .lt-reihe[data-reihe-anzahl="4"] .lt-reihe__zelle:nth-child(2) .lt-header__weiter{ left:calc(100% + var(--reihe-gap, 28px) / 2); } } /* ── Knöpfe auf Bannern in der Reihe immer untereinander ───────── Nebeneinander passten sie mal in die Zelle, mal nicht – je nach Textlänge standen sie in einer Spalte in einer Zeile, daneben umgebrochen. Untereinander sieht jede Zelle gleich aus. Die waagerechte Lage folgt der Ausrichtung des Banners. */ .lt-reihe__zelle .lt-header--sprung .lt-header__aktionen{ flex-direction:column;align-items:center;flex-wrap:nowrap; } .lt-reihe__zelle .lt-header--aus-links.lt-header--sprung .lt-header__aktionen{align-items:flex-start} .lt-reihe__zelle .lt-header--aus-rechts.lt-header--sprung .lt-header__aktionen{align-items:flex-end} /* ── Bild oben in einer Karten-Zelle: randlos ──────────────────── Ein Textblock „Bild oben“ als erster Baustein einer abgesetzten oder kräftigen Karte: Das Bild füllt die Karte oben und seitlich bis an den Rand (Rundung der Karte oben) und wird weniger stark beschnitten (3:2 statt 21:9). */ .lt-reihe[data-reihe-karten="abgesetzt"] .lt-reihe__zelle, .lt-reihe[data-reihe-karten="kraeftig"] .lt-reihe__zelle{--zelle-pad:24px;overflow:hidden} .lt-reihe[data-reihe-karten="abgesetzt"] .lt-reihe__zelle > .lt-block--bild-oben:first-child .lt-block__bild, .lt-reihe[data-reihe-karten="kraeftig"] .lt-reihe__zelle > .lt-block--bild-oben:first-child .lt-block__bild{ margin:calc(-1 * (var(--zelle-pad) + 20px)) calc(-1 * var(--zelle-pad)) 26px; width:calc(100% + 2 * var(--zelle-pad));max-width:none; } .lt-reihe[data-reihe-karten="abgesetzt"] .lt-reihe__zelle > .lt-block--bild-oben:first-child .lt-block__bild img, .lt-reihe[data-reihe-karten="kraeftig"] .lt-reihe__zelle > .lt-block--bild-oben:first-child .lt-block__bild img{ aspect-ratio:3/2;border-radius:0;box-shadow:none; } @media(max-width:600px){ .lt-reihe[data-reihe-karten="abgesetzt"] .lt-reihe__zelle, .lt-reihe[data-reihe-karten="kraeftig"] .lt-reihe__zelle{--zelle-pad:18px} } /* ── Störer (Bild/Band) als Zelle: vollflächiges Banner ────────── Füllt die Zelle bis an die Kante (bei "Randlos" bis an den Fensterrand), der Text bekommt eigenen Innenabstand, und alle Banner einer Reihe sind gleich hoch. */ .lt-reihe__zelle > .lt-stoerer--bild, .lt-reihe__zelle > .lt-stoerer--band{ padding:clamp(40px,5vw,80px) clamp(24px,4vw,64px); box-sizing:border-box;display:flex;align-items:flex-start; background-size:cover;background-position:center; } .lt-reihe__zelle > .lt-stoerer--bild .lt-stoerer__innen, .lt-reihe__zelle > .lt-stoerer--band .lt-stoerer__innen{max-width:600px} .lt-reihe__zelle > .lt-stoerer--bild > .lt-wrap, .lt-reihe__zelle > .lt-stoerer--band > .lt-wrap{width:100%} @supports selector(:has(*)){ .lt-reihe .lt-reihe__zelle:has(> .lt-stoerer--bild, > .lt-stoerer--band){padding:0 !important;display:flex;flex-direction:column} .lt-reihe .lt-reihe__zelle:has(> .lt-stoerer--bild, > .lt-stoerer--band) > .lt-stoerer{flex:1 1 auto} } /* Reihe nur aus Bannern: schließt ohne Lücke oben und unten an die Nachbarn an – das Banner ist selbst die Fläche. */ @supports selector(:has(*)){ body .lt-reihe:has(> .lt-reihe__innen > .lt-reihe__raster > .lt-reihe__zelle > .lt-stoerer--bild, > .lt-reihe__innen > .lt-reihe__raster > .lt-reihe__zelle > .lt-stoerer--band):not(:has(.lt-reihe__zelle > :not(.lt-stoerer--bild):not(.lt-stoerer--band))){ padding-top:0 !important;padding-bottom:0 !important; } } /* ── Karten folgen der Breite der Reihe ────────────────────────── Außerhalb einer Reihe wachsen Karten höchstens auf 340 px - im Raster der Reihe würde das die Breite der Reihe aushebeln: Bei „Randlos“ oder „Sehr weit“ blieben die Karten gleich schmal und stünden mittig. In der Zelle teilen sie sich deshalb die volle Breite (1fr). */ .lt-reihe__zelle .lt-karten__raster[data-spalten="2"]{grid-template-columns:repeat(2,minmax(0,1fr))} .lt-reihe__zelle .lt-karten__raster[data-spalten="3"]{grid-template-columns:repeat(3,minmax(0,1fr))} .lt-reihe__zelle .lt-karten__raster[data-spalten="4"]{grid-template-columns:repeat(4,minmax(0,1fr))} @media(max-width:900px){ .lt-reihe__zelle .lt-karten__raster[data-spalten="3"], .lt-reihe__zelle .lt-karten__raster[data-spalten="4"]{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:560px){ .lt-reihe__zelle .lt-karten__raster{grid-template-columns:minmax(0,1fr) !important} }