/* ============================================================ Fassungen der mobilen Menueschublade ============================================================ Was hier steht, waehlt die Agentur in den Site-Einstellungen: cd.mobilmenue (bis 600 px), cd.tabletmenue (601-1100 px), cd.menue.abschnitte und cd.menue.unterpunkte (quer zu beiden). Die Werte stehen als Attribute am . VIER REGELN FUER DIESE DATEI — sie sind je einmal teuer bezahlt: 1. WERTE SETZEN, KEINE REGELN WIEDERHOLEN. Die Schnittstelle --cd-mm-* steht in layout.css, zusammen mit den Regeln, die sie liest. Eine Fassung setzt Eigenschaften. Wer hier eine Regel schreibt, die layout.css schon hat, holt die Matrix zurueck, die diese Datei gerade abgeschafft hat. 2. MALEN GILT FUER BEIDE SCHUBLADEN, UMBAUEN NUR FUERS MENUE. Es gibt ZWEI Elemente mit der Klasse .cd-mobilmenue — das Menue und die Kontoschublade (Kontoschublade.fluid.html). Grund, Schrift und Lage sollen beide tragen, sonst stuende ein weisses Konto vor einem dunklen Menue. Aber die Kontoschublade hat keinen Startblock, keine zwei Gruppen und keinen Fuss: Regeln, die daran ruehren, tragen :not(.cd-mobilmenue--konto). 3. KEIN display AUF .cd-mobilmenue. Der Zustand haengt an [hidden] (Mobil.fluid.html). Ein display an der Huelle nimmt dem Skript den Schalter aus der Hand. 4. DER RUHE-BLOCK STEHT GANZ UNTEN UND BLEIBT DORT. Er nimmt --cd-mm-zu zurueck. Stuende er weiter oben, gewaenne jede spaeter notierte Fassung — und fuer Nutzer mit abbestellter Bewegung bliebe die Schublade ausserhalb des Bildes. Kein haessliches Menue, sondern gar keins. Diese Datei laedt per @import aus bahnen.css und steht damit hinter layout.css UND hinter komponenten.css. Letzteres ist noetig: der Anruf-Knopf im Fuss ist ein .cd-knopf und wird dort gestaltet. ACHTUNG: Der Cache-Brecher ?v= in bahnen.css wird von Hand gepflegt — nach jeder Aenderung `node Y:/tmp/stempel-nachziehen.js`. ============================================================ */ /* ============================================================ Die Abschnittsnamen — quer zu jeder Fassung ============================================================ „LEISTUNGEN" und „UNTERNEHMEN" sind echte

(Mobil.fluid.html). Sie werden UNSICHTBAR GESTELLT und nicht weggeschaltet: ein display:none naehme sie auch der Vorlesehilfe, und die Schublade verlaere ihre Gliederung. Das ist der Hausweg .cd-nurlesen. ============================================================ / body[data-abschnitte="ohne-titel"] .cd-mobilmenueblockTitel, body[data-abschnitte="flach"] .cd-mobilmenueblockTitel { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } / Ohne Namen bleiben die Gruppen Gruppen — eine Haarlinie haelt sie auseinander. Der Startblock ist ausgenommen: er hat seine eigene Linie schon, sonst staenden dort zwei. / body[data-abschnitte="ohne-titel"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenueblock:not(.cd-mobilmenueblock--start) + .cd-mobilmenueblock { border-block-start: 1px solid var(--cd-mm-linie); margin-block-start: var(--cd-a3); padding-block-start: var(--cd-a5); } / Flach: auch die Trennung faellt. Sieben gleichrangige Zeilen. / body[data-abschnitte="flach"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenueblock--start { border-block-end: 0; padding-block-end: 0; } body[data-abschnitte="flach"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenueblock + .cd-mobilmenueblock { padding-block-start: 0; } / ============================================================ Unterpunkte als Ebene statt als Akkordeon ============================================================ Das Markup bleibt das Akkordeon — es ist das, was OHNE Skript funktioniert. Die Ebene baut huelle.js zur Laufzeit: nur das Skript kennt Fassung und Fensterbreite zugleich. ============================================================ / body[data-unterpunkte="ebenen"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenueunter:not([hidden]) { position: absolute; inset: 0; z-index: 2; margin: 0; padding: var(--cd-a4) var(--cd-a5) var(--cd-a6); border-inline-start: 0; background: var(--cd-mm-grund); overflow-y: auto; overscroll-behavior: contain; animation: cdEbeneEin .24s var(--cd-kurve); } @keyframes cdEbeneEin { from { transform: translateX(18%); opacity: 0; } to { transform: none; opacity: 1; } } / Der Rueckweg. Er traegt den Namen der Ebene, aus der er herausfuehrt — „Zurueck" allein sagt nicht, wohin. / .cd-mobilmenuezurueck { display: flex; align-items: center; gap: var(--cd-a2); inline-size: 100%; min-block-size: var(--cd-zielgroesse, 24px); margin-block-end: var(--cd-a3); padding: var(--cd-a2) 0; background: none; border: 0; border-block-end: 1px solid var(--cd-mm-linie); color: var(--cd-mm-leise); font-family: var(--cd-schrift-mono); font-size: var(--cd-gr-mikro); letter-spacing: .12em; text-transform: uppercase; text-align: start; cursor: pointer; } .cd-mobilmenuezurueckPfeil { flex: 0 0 auto; inline-size: 0; block-size: 0; border-block: 5px solid transparent; border-inline-end: 6px solid currentColor; } @media (prefers-reduced-motion: reduce) { body[data-unterpunkte="ebenen"] .cd-mobilmenue .cd-mobilmenueunter:not([hidden]) { animation: none; } } / ============================================================ HANDY — bis 600 px ============================================================ / @media (max-width: 600px) { / --- Ruhe und Reduktion --------------------------------- Eine einzige Eigenschaft nimmt saemtliche Haarlinien weg: Kopf, Startblock, Fuss und der Rahmen der Aufklapper lesen alle dieselben zwei Marken. / body[data-mobilmenue="ruhe"] .cd-mobilmenue { --cd-mm-linie: transparent; --cd-mm-rahmen: transparent; } body[data-mobilmenue="ruhe"] .cd-mobilmenuetitel { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } body[data-mobilmenue="ruhe"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenuefeld { padding-inline: var(--cd-a3); } body[data-mobilmenue="ruhe"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenueblock { padding-block: var(--cd-a6) 0; } body[data-mobilmenue="ruhe"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenueblockTitel { font-size: 10px; letter-spacing: .18em; margin-block-end: var(--cd-a4); } body[data-mobilmenue="ruhe"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenuelink { font-family: var(--cd-schrift-display); font-size: 28px; font-weight: 500; letter-spacing: -.01em; padding-block: 10px; } body[data-mobilmenue="ruhe"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenuelink--start { font-size: 20px; color: var(--cd-mm-leise); } body[data-mobilmenue="ruhe"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenueauf { inline-size: 44px; color: var(--cd-mm-leise); } / Der Knopf wird zum Umriss. Bewusst: diese Fassung nimmt die Signalwirkung zurueck — das ist ihr Preis und keine Panne. / body[data-mobilmenue="ruhe"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenuecta { background: none; color: var(--cd-mm-text); border: 1px solid var(--cd-mm-leise); } body[data-mobilmenue="ruhe"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenuefuss { padding-block-end: var(--cd-a6); } / --- Dunkles Vollfeld ------------------------------------ Reine Werte. Der Fokusring wird weiss mitgesetzt: der Hausring ist Rot und traegt auf diesem Grund rund 2,9:1. / body[data-mobilmenue="vollfeld"] .cd-mobilmenue { --cd-mm-breite: 100%; --cd-mm-grund: var(--cd-dunkel); --cd-mm-text: #fff; --cd-mm-text-2: var(--cd-text-auf-dunkel); --cd-mm-leise: var(--cd-text-auf-dunkel); --cd-mm-linie: var(--cd-linie-auf-dunkel); --cd-mm-rahmen: var(--cd-linie-auf-dunkel); --cd-mm-ring: #fff; --cd-mm-schleier: transparent; } body[data-mobilmenue="vollfeld"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenuelink { font-family: var(--cd-schrift-display); font-size: 26px; font-weight: 500; } body[data-mobilmenue="vollfeld"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenuelink--start { font-size: 18px; color: var(--cd-mm-leise); } / Die rote Flaeche traegt gegen diesen Grund nur rund 2,5:1. Die weisse Schrift darauf ist unbedenklich, aber der UMRISS des Knopfes ist es nicht (1.4.11 will 3:1). Ein heller Saum stellt ihn her, ohne die Hausfarbe aufzugeben. / body[data-mobilmenue="vollfeld"] .cd-mobilmenue .cd-mobilmenuecta { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .45); } / --- Gegliederte Flaechen -------------------------------- Jeder Abschnitt eine Karte. Die Linien der Grundfassung entfallen — die Kanten der Karten leisten dasselbe. / body[data-mobilmenue="flaechen"] .cd-mobilmenue { --cd-mm-grund: var(--cd-flaeche-2); --cd-mm-linie: transparent; } body[data-mobilmenue="flaechen"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenuefeld { padding-inline: var(--cd-a4); gap: var(--cd-a3); } body[data-mobilmenue="flaechen"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenuekopf { padding-inline: 0; } body[data-mobilmenue="flaechen"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenueblock { background: var(--cd-weiss); border: 1px solid var(--cd-linie); border-radius: var(--cd-r-karte); padding: var(--cd-a4) var(--cd-a5); box-shadow: var(--cd-schatten-karte); } body[data-mobilmenue="flaechen"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenueblock--start { padding-block: var(--cd-a2); } body[data-mobilmenue="flaechen"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenueblockTitel { color: var(--cd-rot); margin-block-end: var(--cd-a2); } body[data-mobilmenue="flaechen"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenuefuss { padding-inline: 0; padding-block-end: var(--cd-a5); } / --- Choreografie ---------------------------------------- DIE PUNKTE WERDEN NICHT VERSTECKT UND WIEDER GEZEIGT, sondern nur beim Oeffnen bewegt. Der Unterschied ist der Grund, aus dem diese Fassung einmal ein LEERES Menue ergab: Erst hiess es „im Ruhezustand opacity: 0, mit .--auf wieder 1". Die Versteck-Regel trug .cd-mobilmenue:not(.--konto) .cd-mobilmenueblock und damit (0,4,1); die Zeig-Regel nur .cd-mobilmenue--auf .cd-mobilmenueblock, also (0,3,1). Die schwerere gewann — auch bei offener Schublade. Sieben von sieben Punkten standen auf Deckkraft 0. Mit einer Animation gibt es diesen Fall nicht mehr: Sie existiert nur, WAEHREND .--auf gesetzt ist, und ihr Anfang lebt in den Keyframes statt in einer Regel. Der Ruhezustand ist damit immer der sichtbare. Wenn hier je etwas schiefgeht, fehlt die Bewegung — nicht der Inhalt. Das Schlusswort „both“ haelt den Anfangszustand waehrend der Verzoegerung; das ist es, was die Staffelung ueberhaupt sichtbar macht. nth-child zaehlt je Liste neu — bei Gruppen von vier und zwei Punkten reicht eine Leiter bis vier. / body[data-mobilmenue="choreografie"] .cd-mobilmenue--auf:not(.cd-mobilmenue--konto) .cd-mobilmenueblock, body[data-mobilmenue="choreografie"] .cd-mobilmenue--auf:not(.cd-mobilmenue--konto) .cd-mobilmenuepunkt, body[data-mobilmenue="choreografie"] .cd-mobilmenue--auf:not(.cd-mobilmenue--konto) .cd-mobilmenuefuss { animation: cdKachelEin .3s var(--cd-kurve) both; } body[data-mobilmenue="choreografie"] .cd-mobilmenue--auf .cd-mobilmenueblock--start { animation-delay: .04s; } body[data-mobilmenue="choreografie"] .cd-mobilmenue--auf .cd-mobilmenuepunkt:nth-child(1) { animation-delay: .10s; } body[data-mobilmenue="choreografie"] .cd-mobilmenue--auf .cd-mobilmenuepunkt:nth-child(2) { animation-delay: .15s; } body[data-mobilmenue="choreografie"] .cd-mobilmenue--auf .cd-mobilmenuepunkt:nth-child(3) { animation-delay: .20s; } body[data-mobilmenue="choreografie"] .cd-mobilmenue--auf .cd-mobilmenuepunkt:nth-child(4) { animation-delay: .25s; } body[data-mobilmenue="choreografie"] .cd-mobilmenue--auf .cd-mobilmenuefuss { animation-delay: .30s; } body[data-mobilmenue="choreografie"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenuelink { font-family: var(--cd-schrift-display); font-size: 24px; font-weight: 500; } / --- Blatt von unten ------------------------------------- DIE FASSUNG BESITZT IHRE RICHTUNG. cd.bewegung.menue schoebe sonst von rechts herein, und ein Blatt, das seitlich kommt, ist keins. Die beiden Bewegungswerte ohne eigene Richtung („blende", „ohne") behalten ihre — sie passen zu jeder Lage. --cd-mm-unten setzt das Blatt UEBER die feste untere Leiste: sonst deckt es „Anrufen / Schreiben / Angebot" zu, und der eigene Telefon-Knopf im Fuss laege genau ueber dem der Leiste. / body[data-mobilmenue="blatt"] .cd-mobilmenue { --cd-mm-oben: auto; --cd-mm-unten: var(--cd-mobilleiste-hoehe, 0px); --cd-mm-start: 0; --cd-mm-ende: 0; --cd-mm-breite: 100%; --cd-mm-hoehe: 78svh; --cd-mm-max-hoehe: calc(100% - var(--cd-mobilleiste-hoehe, 0px)); --cd-mm-radius: 18px 18px 0 0; --cd-mm-schatten: 0 -24px 48px -28px rgb(13 26 33 / .5); --cd-mm-zu: translateY(100%); } body[data-mobilmenue="blatt"][data-menuebewegung="blende"] .cd-mobilmenue, body[data-mobilmenue="blatt"][data-menuebewegung="ohne"] .cd-mobilmenue { --cd-mm-zu: none; } / Die Griffleiste ist reine Zier: kein Name, keine Bedienung. / body[data-mobilmenue="blatt"] .cd-mobilmenuekopf { position: relative; padding-block-start: var(--cd-a6); } body[data-mobilmenue="blatt"] .cd-mobilmenuekopf::before { content: ""; position: absolute; inset-block-start: 10px; inset-inline-start: 50%; translate: -50% 0; inline-size: 44px; block-size: 4px; border-radius: 2px; background: var(--cd-mm-rahmen); } body[data-mobilmenue="blatt"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenuelink { font-size: var(--cd-gr-h4); } } / ============================================================ TABLET — 601 bis 1100 px ============================================================ Geschlossenes Band: was hier steht, muss nicht zuruecknehmen, was der Handy-Block hinterlaesst — der gilt nur bis 600 px. ============================================================ / @media (min-width: 601px) and (max-width: 1100px) { / --- Breite Schublade, zwei Spalten ---------------------- Das Feld ist so hoch wie sein Inhalt und nicht mehr so hoch wie der Schirm: eine 420-px-Saeule neben 400 px abgedunkelter Flaeche ist die Handy-Loesung und kein Tablet-Entwurf. / body[data-tabletmenue="zweispaltig"] .cd-mobilmenue:not(.cd-mobilmenue--konto) { --cd-mm-oben: var(--cd-a4); --cd-mm-unten: auto; --cd-mm-ende: var(--cd-a4); --cd-mm-breite: min(760px, 92%); --cd-mm-max-hoehe: calc(100% - 2 var(--cd-a4)); --cd-mm-radius: var(--cd-r-gross); --cd-mm-schatten: var(--cd-schatten-mega); } body[data-tabletmenue="zweispaltig"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenuefeld { display: grid; grid-template-columns: 1fr 1fr; align-content: start; column-gap: var(--cd-a6); padding-block-end: var(--cd-a2); } body[data-tabletmenue="zweispaltig"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenuekopf, body[data-tabletmenue="zweispaltig"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenueblock--start, body[data-tabletmenue="zweispaltig"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenueblock--konto, body[data-tabletmenue="zweispaltig"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenuefuss { grid-column: 1 / -1; } /* margin-block-start: auto ist ein Flex-Kniff und wirkt im Raster nicht — im Raster braucht der Fuss keinen, er ist die letzte Reihe. / body[data-tabletmenue="zweispaltig"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenuefuss { margin-block-start: var(--cd-a4); display: flex; align-items: center; gap: var(--cd-a5); } body[data-tabletmenue="zweispaltig"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenuecta { inline-size: auto; flex: 0 0 auto; } body[data-tabletmenue="zweispaltig"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenuezeiten { margin-block-start: 0; text-align: start; } body[data-tabletmenue="zweispaltig"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenuelink { font-size: var(--cd-gr-h4); } / --- Aufklapp-Band unter dem Kopf ------------------------ KEIN Overlay mehr. Die Seite bleibt sichtbar und bedienbar; Rolle, Fokusfalle und Blaettersperre schaltet huelle.js dafuer ab (Fassungsliste im Skript). Ohne das waere die Seite sichtbar und trotzdem unerreichbar. Der Schleier beginnt unter dem Kopf, damit Logo, Angebots-Knopf und Login oben ansprechbar bleiben. / body[data-tabletmenue="band"] .cd-mobilmenue:not(.cd-mobilmenue--konto) { --cd-mm-oben: var(--cd-kopf-gesamt); --cd-mm-unten: auto; --cd-mm-start: 0; --cd-mm-ende: 0; --cd-mm-breite: 100%; --cd-mm-schatten: var(--cd-schatten-mega); --cd-mm-schleier: rgb(13 26 33 / .28); --cd-mm-zu: translateY(-100%); } body[data-tabletmenue="band"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenueschleier { inset-block-start: var(--cd-kopf-gesamt); } body[data-tabletmenue="band"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenuefeld { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--cd-a6); align-items: start; padding: var(--cd-a5) var(--cd-rinne) var(--cd-a6); border-block-end: 3px solid var(--cd-rot); } / Der eigene Kopf entfaellt: der Menueknopf oben ist bei dieser Fassung sichtbar UND hat sich zum X gewandelt. Zwei Schliesskreuze nebeneinander sind eines zu viel. Das Band schliesst ueber diesen Knopf, ueber Escape und ueber den Schleier — die Vorlesehilfe verliert nichts, das Feld traegt bei dieser Fassung keine Dialogrolle mehr. / body[data-tabletmenue="band"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenuekopf { display: none; } body[data-tabletmenue="band"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenueblock--start { grid-column: 1 / -1; padding-inline: 0; } body[data-tabletmenue="band"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenueblock { padding-inline: 0; } / Fuss und Konto gehoeren in die dritte Spalte zum Anruf, nicht unter „Leistungen". Ohne feste Platzierung fuellt das Raster sie in die naechste freie Zelle — gemessen landete der Login unter der ersten Spalte. / body[data-tabletmenue="band"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenuefuss { grid-column: 3; grid-row: 3; margin-block-start: 0; border-block-start: 0; padding: 0; } body[data-tabletmenue="band"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenueblock--konto { grid-column: 3; grid-row: 2; padding-inline: 0; } body[data-tabletmenue="band"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenuelink { font-size: var(--cd-gr-gross); } / --- Dunkles Vollfeld ------------------------------------ / body[data-tabletmenue="vollfeld"] .cd-mobilmenue { --cd-mm-breite: 100%; --cd-mm-grund: var(--cd-dunkel); --cd-mm-text: #fff; --cd-mm-text-2: var(--cd-text-auf-dunkel); --cd-mm-leise: var(--cd-text-auf-dunkel); --cd-mm-linie: var(--cd-linie-auf-dunkel); --cd-mm-rahmen: var(--cd-linie-auf-dunkel); --cd-mm-ring: #fff; --cd-mm-schleier: transparent; } / Eine Spalte in der Mitte — ueber die ganze Tabletbreite waeren die Zeilen zu lang und die Wege zwischen Wort und Aufklapper unnoetig weit. / body[data-tabletmenue="vollfeld"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenuefeld { align-items: center; } body[data-tabletmenue="vollfeld"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenuekopf, body[data-tabletmenue="vollfeld"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenueblock, body[data-tabletmenue="vollfeld"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenuefuss { inline-size: min(520px, 100%); } body[data-tabletmenue="vollfeld"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenuekopf { padding-block: var(--cd-a6) var(--cd-a5); } body[data-tabletmenue="vollfeld"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenuelink { font-family: var(--cd-schrift-display); font-size: 32px; font-weight: 500; } body[data-tabletmenue="vollfeld"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenuelink--start { font-size: 20px; color: var(--cd-mm-leise); } body[data-tabletmenue="vollfeld"] .cd-mobilmenue .cd-mobilmenuecta { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .45); } } / ============================================================ Der Angebots-Knopf in der Schublade ============================================================ Er steht IMMER im Markup, sobald eine der beiden Geraeteklassen ihn im Menue will — welche, entscheidet hier das Stylesheet. DIE GRUNDREGEL MUSS IN DIESER DATEI STEHEN und nicht in layout.css: komponenten.css laedt spaeter und gibt .cd-knopf ein display: inline-flex mit derselben Spezifitaet. Ein display: none in layout.css waere wirkungslos — dieselbe Falle, die den Angebots-Knopf im Kopf jahrelang unbemerkt betroffen hat. ============================================================ / .cd-mobilmenuecta--angebot { display: none; margin-block-end: var(--cd-a3); } @media (max-width: 600px) { body[data-angebot-mobil="menue"] .cd-mobilmenuecta--angebot, body[data-angebot-mobil="beides"] .cd-mobilmenuecta--angebot { display: inline-flex; } / Zwei rote Flaechen untereinander waeren zwei Hauptsachen. Der Angebots-Knopf bringt Arbeit ein, der Anruf ist der zweite Weg — also wird dieser zum Umriss. Im Haus gehoert Rot der einen Handlung. / body[data-angebot-mobil="menue"] .cd-mobilmenuecta--telefon, body[data-angebot-mobil="beides"] .cd-mobilmenuecta--telefon { background: none; color: var(--cd-mm-text); border: 1px solid var(--cd-mm-leise); } } @media (min-width: 601px) and (max-width: 1100px) { body[data-angebot-tablet="menue"] .cd-mobilmenuecta--angebot, body[data-angebot-tablet="beides"] .cd-mobilmenuecta--angebot { display: inline-flex; } body[data-angebot-tablet="menue"] .cd-mobilmenuecta--telefon, body[data-angebot-tablet="beides"] .cd-mobilmenuecta--telefon { background: none; color: var(--cd-mm-text); border: 1px solid var(--cd-mm-leise); } } / ============================================================ Abbestellte Bewegung — DIESER BLOCK BLEIBT DER LETZTE ============================================================ Er nimmt die Lage im geschlossenen Zustand zurueck. Die Fassungen oben tragen (0,3,0) und stuenden sonst ueber ihm; hier traegt der Selektor dieselbe Spezifitaet und gewinnt allein durch die Stelle. Wer unterhalb dieses Blocks eine Fassung ergaenzt, macht die Schublade fuer Nutzer mit abbestellter Bewegung unsichtbar. ============================================================ */ @keyframes cdKachelEin { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { body[data-mobilmenue="choreografie"] .cd-mobilmenue .cd-mobilmenueblock, body[data-mobilmenue="choreografie"] .cd-mobilmenue .cd-mobilmenuepunkt, body[data-mobilmenue="choreografie"] .cd-mobilmenue .cd-mobilmenuefuss { animation: none; } body[data-mobilmenue] .cd-mobilmenue, body[data-tabletmenue] .cd-mobilmenue { --cd-mm-zu: none; --cd-mm-feld-deck: 1; --cd-mm-schleier-deck: 1; } }