/* ============================================================ Kartenraster als Schiebespur am Handy ============================================================ Auf 390 px Breite steht ein sechsteiliges Kartenraster als sechs volle Bildschirme untereinander. Gemessen an der Startseite: Leistungen 2.103 px, Referenzen 4.027 px, Blog-Teaser 2.022 px — zusammen knapp die Haelfte der ganzen Seite. Als Spur bleibt davon je rund ein Bildschirm. Von selbst erfasst sind die Kartenbahn und der Blog-Teaser. DIE REFERENZBAHN SCHIEBT SEIT 10.09.2026 NUR AUF WUNSCH. Ohne Angabe stehen ihre Projekte am Handy als Liste (cd_referenzen.css, Abschnitt 9). Ihre vier Raster (Filterraster, Karten, Galerie, Weitere Projekte) stehen deshalb unten nur noch unter [data-mobilspur="immer"] — also wenn am Element „als Schieber" gewaehlt ist — und nicht mehr in den Regeln mit :has(> :nth-child(3)). Bewusst KEIN Skript und KEIN eigenes Markup: dasselbe Raster wechselt nur die Darstellung. Die Spur ist ein echter Bildlaufbereich mit Rastpunkten und laeuft mit Finger, Rollrad und Tastatur — gleiches Muster wie .cd-referenzen__spur und .cd-stimmen__spur, damit es im Haus eine Bedienung bleibt und nicht drei. Tastatur: die Spur braucht kein tabindex. Jede Karte traegt einen Link, und der Browser schiebt beim Weiterspringen von selbst mit. Ein zusaetzliches tabindex haette eine Station ohne eigenen Zweck erzeugt. Wann geschoben wird: ab drei Karten von selbst :has(> :nth-child(3)) [data-mobilspur="immer"] auch bei zweien [data-mobilspur="nie"] nie, Raster bleibt Das Attribut kommt aus dem Feld cd_mobil_spur ueber cd:bahnstil. Leer heisst "von selbst" — wie beim Auftritt. Warum 699 px und nicht die Bedienart: hier geht es um Platz, nicht um Zeigergeraete. Ab 700 px stehen zwei Karten nebeneinander, und dann ist Stapeln die bessere Antwort. ============================================================ */ @media (max-width: 699px) { /* --- Die Spur ------------------------------------------- */ .cd-karten__raster:has(> :nth-child(3)), .cd-blog__raster:has(> :nth-child(3)) { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; /* Ohne diese zwei Zeilen scrollt die Spur nicht, sondern waechst: Als Kind eines Rasters oder einer Flexbox hat sie min-inline-size:auto und schrumpft deshalb nicht unter ihren Inhalt. Gemessen auf der Startseite waren es 1.684 px bei 390 px Fenster — die ganze Seite liess sich waagerecht schieben (WCAG 1.4.10). Erst danach greift overflow-x. */ min-inline-size: 0; max-inline-size: 100%; /* Eigener Bezugsrahmen — sonst schiebt die Spur die ganze Seite auf. In jeder Karte steckt ein span.cd-nurlesen mit position:absolute und ohne left-Angabe; es bleibt also an seiner statischen Stelle. Bezugsrahmen ist dann der naechste transformierte Vorfahre, und das ist die Bahn selbst: das Auftritts-System legt ihr ein transform an (bahnen.css:182). Damit liegen die Sprechtexte AUSSERHALB der Spur — bei 1.684 px gemessen — und overflow-x kann sie nicht mehr einfangen. position:relative holt den Bezugsrahmen in die Spur zurueck. */ position: relative; /* Die Systemleiste stand quer im Bild und sagt nichts, was der Anschnitt der naechsten Karte nicht schon zeigt. */ scrollbar-width: none; /* Luft fuer den Fokusring der Karten, der sonst oben und unten abgeschnitten wuerde. */ padding-block: 3px; } .cd-karten__raster:has(> :nth-child(3))::-webkit-scrollbar, .cd-blog__raster:has(> :nth-child(3))::-webkit-scrollbar, /* Die Referenzraster schieben nur noch auf Wunsch — ihre Systemleiste muss dann trotzdem weg. Vorher erledigte das die :has-Regel mit, die sie jetzt nicht mehr trifft. */ [data-mobilspur="immer"] .cd-referenzen__raster::-webkit-scrollbar, [data-mobilspur="immer"] .cd-referenzen__karten::-webkit-scrollbar, [data-mobilspur="immer"] .cd-referenzen__weitere::-webkit-scrollbar, [data-mobilspur="immer"] .cd-referenzen__galerie::-webkit-scrollbar { display: none; } /* --- Die Karten in der Spur ----------------------------- */ .cd-karten__raster:has(> :nth-child(3)) > .cd-karten__feld, .cd-blog__raster:has(> :nth-child(3)) > .cd-blog__karte { /* 84 Prozent statt 100: der Rest der naechsten Karte lugt hervor und sagt ohne Worte, dass es weitergeht. */ flex: 0 0 var(--cd-spur-karte, min(396px, 84%)); scroll-snap-align: start; } /* --- Darstellungsvarianten ------------------------------- Gewaehlt am Element (Feld cd_mobil_spur_layout). Alles haengt an EINER Groesse: der Kartenbreite. Sie steht als Variable an der Bahn, die Kartenregel weiter oben liest sie. So braucht jede Variante genau eine Zeile statt einer eigenen Regel je Bahnart. Ohne Angabe gilt "eine Karte mit Anschnitt": 84 Prozent, der Rest der naechsten Karte lugt hervor und sagt ohne Worte, dass es weitergeht. */ .cd-bahn[data-mobilspur-layout="voll"] { --cd-spur-karte: 100%; } .cd-bahn[data-mobilspur-layout="anderthalb"] { --cd-spur-karte: 66%; } .cd-bahn[data-mobilspur-layout="zwei"] { --cd-spur-karte: 48%; } .cd-bahn[data-mobilspur-layout="mitte"] { --cd-spur-karte: 78%; } /* "mittig" heisst: links UND rechts lugt etwas hervor. Dafuer rastet die Karte nicht am Anfang, sondern in der Mitte — und die Spur bekommt innen Luft, damit die erste und die letzte Karte diese Mitte ueberhaupt erreichen koennen. */ .cd-bahn[data-mobilspur-layout="mitte"] .cd-karten__raster, .cd-bahn[data-mobilspur-layout="mitte"] .cd-referenzen__raster, .cd-bahn[data-mobilspur-layout="mitte"] .cd-referenzen__karten, .cd-bahn[data-mobilspur-layout="mitte"] .cd-referenzen__weitere, .cd-bahn[data-mobilspur-layout="mitte"] .cd-referenzen__galerie, .cd-bahn[data-mobilspur-layout="mitte"] .cd-blog__raster { scroll-padding-inline: 11%; padding-inline: 11%; /* Der Innenabstand darf die Spur nicht breiter machen als die Bahn — sonst schoebe sie die Seite auf. */ box-sizing: border-box; } .cd-bahn[data-mobilspur-layout="mitte"] .cd-karten__raster > .cd-karten__feld, .cd-bahn[data-mobilspur-layout="mitte"] .cd-referenzen__raster > .cd-referenzen__kachel, .cd-bahn[data-mobilspur-layout="mitte"] .cd-referenzen__karten > .cd-referenzen__karte, .cd-bahn[data-mobilspur-layout="mitte"] .cd-referenzen__weitere > .cd-referenzen__kurz, .cd-bahn[data-mobilspur-layout="mitte"] .cd-referenzen__galerie > .cd-referenzen__stein, .cd-bahn[data-mobilspur-layout="mitte"] .cd-blog__raster > .cd-blog__karte { scroll-snap-align: center; } /* --- Das Kartenraster braucht eine Sonderbehandlung ----- Seine Trennlinien entstehen nicht durch Raender, sondern durch einen 2-px-Spalt, durch den der Hintergrund des Rasters scheint (cd_karten.css:76-88). In einer Spur mit Abstand dazwischen ergaebe das einen durchgehenden Balken hinter den Karten. Also: Hintergrund und Rahmen wandern vom Raster an das einzelne Feld. */ .cd-karten__raster:has(> :nth-child(3)) { gap: var(--cd-a5); background: none; border: 0; } .cd-karten__raster:has(> :nth-child(3)) > .cd-karten__feld { border: 1px solid var(--cd-linie-2); } .cd-auf-dunkel .cd-karten__raster:has(> :nth-child(3)) > .cd-karten__feld { border-color: var(--cd-dunkel-3); } /* AUSNAHME KENNZAHLEN. Die Bauform nimmt der Karte unterhalb von 900 px den seitlichen Einzug — dort steht sie als randlose Liste mit waagerechten Trennlinien, und ein Einzug wuerde die Werte von der Spalte wegruecken. Im Schieber bekommt dieselbe Karte aber einen RAHMEN, und dann klebt der Text daran: gemessen am 26.08.2026 bei 390 px waren es 1 px zwischen Linie und Versalie. Die Regel steht hier und nicht in cd_karten.css, weil sie den Rahmen ausgleicht, der zwei Zeilen darueber vergeben wird — und weil sie die Staerke der Rahmenregel uebertreffen muss (:has zaehlt wie sein Argument, macht dort (0,3,0)). */ .cd-karten--kennzahlen .cd-karten__raster:has(> :nth-child(3)) > .cd-karten__feld, [data-mobilspur="immer"].cd-karten--kennzahlen .cd-karten__raster > .cd-karten__feld { /* Der Anschlag liest denselben Wert und sitzt damit ueber der Bezeichnung statt in der Ecke. */ --cd-kz-einzug: var(--cd-a5); padding: var(--cd-a5); } /* --- Ausnahmen aus dem Backend -------------------------- */ /* "immer": auch zwei Karten werden geschoben. */ [data-mobilspur="immer"] .cd-karten__raster, [data-mobilspur="immer"] .cd-referenzen__raster, [data-mobilspur="immer"] .cd-referenzen__karten, [data-mobilspur="immer"] .cd-referenzen__weitere, [data-mobilspur="immer"] .cd-referenzen__galerie, [data-mobilspur="immer"] .cd-blog__raster { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding-block: 3px; min-inline-size: 0; max-inline-size: 100%; position: relative; } [data-mobilspur="immer"] .cd-karten__raster { gap: var(--cd-a5); background: none; border: 0; } [data-mobilspur="immer"] .cd-karten__raster > .cd-karten__feld { border: 1px solid var(--cd-linie-2); } [data-mobilspur="immer"] .cd-karten__raster > .cd-karten__feld, [data-mobilspur="immer"] .cd-referenzen__raster > .cd-referenzen__kachel, [data-mobilspur="immer"] .cd-referenzen__karten > .cd-referenzen__karte, [data-mobilspur="immer"] .cd-referenzen__weitere > .cd-referenzen__kurz, [data-mobilspur="immer"] .cd-referenzen__galerie > .cd-referenzen__stein, [data-mobilspur="immer"] .cd-blog__raster > .cd-blog__karte { flex: 0 0 var(--cd-spur-karte, min(396px, 84%)); scroll-snap-align: start; } /* "nie": das Raster bleibt ein Raster. Die Rueckstellung muss jede Eigenschaft nennen, die oben gesetzt wurde — sonst bliebe zum Beispiel scroll-snap-type stehen. */ [data-mobilspur="nie"] .cd-karten__raster, [data-mobilspur="nie"] .cd-referenzen__raster, [data-mobilspur="nie"] .cd-referenzen__karten, [data-mobilspur="nie"] .cd-referenzen__weitere, [data-mobilspur="nie"] .cd-referenzen__galerie, [data-mobilspur="nie"] .cd-blog__raster, /* Wer blaettert, schiebt nicht. Beides zugleich waere zwei Bedienungen fuer dieselbe Liste — man zoege die Karten seitwaerts und fraege sich, wozu darunter Seitenzahlen stehen. Die Blaetterfunktion gewinnt, weil sie die ausdrueckliche Einstellung ist. */ [data-blaettern] .cd-blog__raster { display: grid; overflow-x: visible; scroll-snap-type: none; } [data-mobilspur="nie"] .cd-karten__raster { gap: 2px; background: var(--cd-linie-2); border: 1px solid var(--cd-linie-2); } [data-mobilspur="nie"] .cd-auf-dunkel .cd-karten__raster, .cd-auf-dunkel [data-mobilspur="nie"] .cd-karten__raster { background: var(--cd-dunkel-3); border-color: var(--cd-dunkel-3); } [data-mobilspur="nie"] .cd-karten__raster > .cd-karten__feld, [data-mobilspur="nie"] .cd-referenzen__raster > .cd-referenzen__kachel, [data-mobilspur="nie"] .cd-referenzen__karten > .cd-referenzen__karte, [data-mobilspur="nie"] .cd-referenzen__weitere > .cd-referenzen__kurz, [data-mobilspur="nie"] .cd-referenzen__galerie > .cd-referenzen__stein, [data-mobilspur="nie"] .cd-blog__raster > .cd-blog__karte { flex: initial; border: 0; scroll-snap-align: none; } /* --- Ausnahme: die Verweisreihe ------------------------- Die Spur schaltet sich ab drei Eintraegen VON SELBST ein — sie ist der Normalfall und nicht die Wahl der Redaktion. Fuer die Bauform „Verweisreihe" ist sie aber immer falsch: Deren Eintraege sind keine Karten sondern volle Zeilen eines Registers. Gemessen bei 390 px lagen drei Zeilen zu 301 px nebeneinander in einer Spur, zwei davon ausserhalb des Bildes. Ein Register mit verstecktem zweiten und drittem Eintrag verfehlt seinen Zweck: Es soll ZEIGEN was es sonst noch gibt. Dieselben Ruecknahmen wie bei [data-mobilspur="nie"] — nur ohne das Liniengitter, denn die Zeilen ziehen ihre Trennlinien selbst. Wer ausdruecklich „immer" waehlt, bekommt weiter eine Spur; das ist dann eine Entscheidung und kein Zufall. */ .cd-karten--verweisreihe .cd-karten__raster:has(> :nth-child(3)) { display: grid; overflow-x: visible; scroll-snap-type: none; gap: 0; padding-block: 0; background: none; /* border: 0 UND die obere Linie wieder setzen, in dieser Reihenfolge. Ein blosses border:0 nimmt der Reihe genau das Mittel, aus dem sie besteht. Genau das war am Handy zu sehen: drei Zeilen ohne jede Trennung. */ border: 0; border-block-start: 1px solid var(--cd-linie-2); } .cd-karten--verweisreihe .cd-karten__raster:has(> :nth-child(3)) > .cd-karten__feld { flex: initial; scroll-snap-align: none; border: 0; border-block-end: 1px solid var(--cd-linie-2); } /* --- Fokus (WCAG 2.4.7) --------------------------------- Fokussierbar wird die Spur in Chrome und Firefox von selbst, sobald sie scrollt. Dann braucht sie auch eine Anzeige. */ .cd-karten__raster:focus-visible, .cd-referenzen__raster:focus-visible, .cd-referenzen__karten:focus-visible, .cd-referenzen__weitere:focus-visible, .cd-referenzen__galerie:focus-visible, .cd-blog__raster:focus-visible { outline: 2px solid var(--cd-rot); outline-offset: 4px; } } /* Abbestellte Bewegung: gerastet wird weiter, aber ohne den weichen Lauf. Die Spur selbst bleibt — sie ist Platzersparnis und keine Animation. */ @media (max-width: 699px) and (prefers-reduced-motion: reduce) { .cd-karten__raster, .cd-referenzen__raster, .cd-referenzen__karten, .cd-referenzen__weitere, .cd-referenzen__galerie, .cd-blog__raster { scroll-behavior: auto; } } /* ============================================================ Bedienung der Spur: Punktreihe und Pfeile ============================================================ Erzeugt huelle.js (mobilspur()), bedient schieber() — derselbe Baustein wie beim Zitate- und Projekte-Schieber. Sichtbar nur, solange auch geschoben wird. Oberhalb der Schwelle steht das Raster wieder, dort waeren Punkte eine Bedienung ohne Gegenstand. display:none nimmt sie zugleich aus der Tabreihenfolge — ausgeblendet und trotzdem anspringbar waere schlimmer als sichtbar. ============================================================ */ .cd-spurbedienung { display: none; } /* [hidden] WIRD HIER AUSDRUECKLICH DURCHGESETZT. Das Skript blendet die Bedienung aus, sobald alle Karten gleichzeitig im Bild stehen — es gibt dann nichts zu schieben, und eine Leiste, die nichts bedient, ist schlechter als keine. Es setzt dafuer das Attribut hidden. Das allein reicht nicht: In der Media-Query darunter steht .cd-spurbedienung mit display:flex, und eine Klassenregel schlaegt das [hidden] { display: none } des Browsers. Gemessen bei 390 px: hidden=true UND display=flex — die Leiste stand da. Die Regel steht AUSSERHALB der Media-Query mit Absicht: Ihre Spezifitaet (Klasse plus Attribut) schlaegt die Klassenregel drinnen, unabhaengig von der Reihenfolge. */ .cd-spurbedienung[hidden], .cd-spurbedienung__punkte[hidden] { display: none; } @media (max-width: 699px) { .cd-spurbedienung { display: flex; align-items: center; /* Umbrechen ist ausdruecklich erlaubt: sechs Punkte, zwei Pfeile, Anhalter und Zaehler ergeben rund 364 px und passen damit nicht in die 358 px des Rasters. Ohne Umbruch lief der Zaehler rechts aus dem Bild. */ flex-wrap: wrap; column-gap: var(--cd-a4); row-gap: var(--cd-a3); margin-block-start: var(--cd-a5); } /* Schiebt die rechte Gruppe an den Rand, solange sie in der Zeile bleibt — und laesst sie geschlossen fallen, wenn nicht. */ .cd-spurbedienung__rechts { display: flex; align-items: center; gap: var(--cd-a4); margin-inline-start: auto; } /* --- Punktreihe ----------------------------------------- */ /* NICHT UMBRECHEN, SONDERN SCHRUMPFEN. Zehn Punkte zu je 44 px sind 440 px und passen nicht in die 358 px eines 390-px-Handys — gemessen auf /referenzen brach die Reihe in zwei Zeilen um und die Bedienung war 88 px hoch. Umbrechen sieht nach einem Fehler aus; schrumpfen nicht. Die Fingerflaeche darf dabei bis auf 24 px zurueck: WCAG 2.5.8 verlangt 24 x 24 CSS-Pixel als Mindestmass. Erst darunter waere es ein Verstoss — deshalb min-inline-size und nicht einfach flex-shrink. */ .cd-spurbedienung__punkte { display: flex; align-items: center; flex-wrap: nowrap; min-inline-size: 0; /* Kein gap: der Abstand steckt im Polster der Knoepfe, damit die Beruehrflaechen aneinanderstossen statt Luecken zu lassen, in die der Finger faellt. */ } /* Jenseits von zwoelf Eintraegen taugt eine Punktreihe nicht mehr: Zwoelf mal 24 px sind bereits 288 px, und ein Punkt, der einen von zwanzig Staenden meint, sagt nichts mehr. Dann traegt der Zaehler die Ortsangabe und die Pfeile die Bedienung. */ .cd-spurbedienung__punkte:has(> :nth-child(13)) { display: none; } /* Der Punkt ist klein, die Flaeche darum ist es nicht. WCAG 2.5.8 verlangt 24 x 24 px — sichtbar sind 8 px, das Polster macht den Rest. NACHGEMESSEN AM 02.09.2026: Das galt nur fuer die Hoehe. In der Breite kam der Punkt auf 24 px, waehrend die Hoehe die vollen 44 nahm — `flex: 0 1 …` liess ihn schrumpfen, auch wenn Platz genug da war. Bei sechs Eintraegen (6 x 44 = 264 px von 358) ist das unnoetig. Jetzt gilt: NICHT schrumpfen, solange der Platz reicht. Erst ab neun Punkten greift die Ausnahme weiter unten und laesst wieder bis 24 px zu — die Ueberlegung des Absatzes darueber bleibt also gueltig, sie kommt nur nicht mehr zu frueh zum Zug. */ .cd-spurpunkt { appearance: none; border: 0; background: none; cursor: pointer; padding: 8px; flex: 0 0 var(--cd-zielgroesse, 24px); min-inline-size: var(--cd-zielgroesse, 24px); block-size: var(--cd-zielgroesse, 24px); display: inline-flex; align-items: center; justify-content: center; } /* Ab neun Punkten wird es eng: neun mal 44 px sind 396 und damit mehr, als bei 390 px Geraetebreite zur Verfuegung steht. Dann duerfen sie wieder bis auf das Mindestmass zurueck, statt die Zeile aufzuschieben. */ .cd-spurbedienung__punkte:has(> :nth-child(9)) .cd-spurpunkt { flex: 0 1 var(--cd-zielgroesse, 24px); min-inline-size: 24px; } /* WARUM --cd-text-3 UND NICHT EINE LINIENFARBE: Hier stand --cd-linie-1 — dieses Token gibt es nicht (die Linien heissen --cd-linie, --cd-linie-2, --cd-linie-3). Eine unbekannte Variable ohne Rueckfallwert ist nicht "ungueltig", sondern der leere Wert: background wurde damit durchsichtig und JEDE Spur im Haus zeigte genau EINEN Punkt — den roten aktuellen. Gemessen auf /referenzen: zehn Knoepfe im Baum, einer sichtbar. Und auch mit dem richtigen Namen waere es falsch: --cd-linie-3 traegt gegen Weiss 1,2:1. Ein Punkt, den man sucht, ist keine Bedienung. --cd-text-3 traegt 5,1:1 und liegt damit ueber den 3:1 aus WCAG 1.4.11. Der aktuelle Punkt unterscheidet sich in Farbe UND Groesse — Farbe allein waere 1.4.1. */ .cd-spurpunkt::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--cd-text-3); transition: background var(--cd-zeit) var(--cd-kurve), transform var(--cd-zeit) var(--cd-kurve); } .cd-spurpunkt[aria-current]::before { background: var(--cd-rot); transform: scale(1.25); } .cd-auf-dunkel .cd-spurpunkt::before { background: var(--cd-dunkel-3); } .cd-auf-dunkel .cd-spurpunkt[aria-current]::before { background: var(--cd-rot-auf-dunkel); } /* --- Pfeile ---------------------------------------------- */ .cd-spurbedienung__pfeile { display: flex; gap: var(--cd-a2); } .cd-spurpfeil { appearance: none; cursor: pointer; inline-size: 44px; block-size: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--cd-linie-2); border-radius: var(--cd-r-knopf); background: var(--cd-weiss); color: var(--cd-tinte); transition: background var(--cd-zeit) var(--cd-kurve), border-color var(--cd-zeit) var(--cd-kurve), color var(--cd-zeit) var(--cd-kurve); } .cd-spurpfeil:hover, .cd-spurpfeil:focus-visible { border-color: var(--cd-rot); color: var(--cd-rot); } /* Am Rand wird der Pfeil abgeschaltet, nicht abgeblendet — schieber() setzt disabled. Der abgeschaltete Knopf muss erkennbar sein, ohne dass Farbe allein es traegt. */ .cd-spurpfeil[disabled] { cursor: default; opacity: .35; border-color: var(--cd-linie-2); color: var(--cd-tinte); } .cd-auf-dunkel .cd-spurpfeil { background: none; border-color: var(--cd-dunkel-3); color: var(--cd-text-auf-dunkel-1, #fff); } .cd-auf-dunkel .cd-spurpfeil:hover, .cd-auf-dunkel .cd-spurpfeil:focus-visible { border-color: var(--cd-rot-auf-dunkel); color: var(--cd-rot-auf-dunkel); } /* --- Zaehler -------------------------------------------- Sagt die Stelle UND die Gesamtzahl: "01 / 06". Damit weiss man vor dem ersten Wischen, wie viel kommt. */ .cd-spurzaehler { margin: 0; font-family: var(--cd-schrift-mono); font-size: var(--cd-gr-mikro); letter-spacing: .1em; color: var(--cd-text-3); white-space: nowrap; } .cd-auf-dunkel .cd-spurzaehler { color: var(--cd-text-auf-dunkel-2); } /* --- Anhalten und Fortsetzen ----------------------------- Erscheint nur, wenn am Element ein Selbstlauf eingestellt ist — sonst gaebe es nichts anzuhalten. Der Knopf ist zugleich die Uhr: er fuellt sich rot bis zum naechsten Wechsel (.cd-takt--laeuft aus komponenten.css:610-666). */ .cd-spurhalt { appearance: none; cursor: pointer; position: relative; overflow: hidden; inline-size: 44px; block-size: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--cd-linie-2); border-radius: var(--cd-r-knopf); background: var(--cd-weiss); color: var(--cd-tinte); transition: border-color var(--cd-zeit) var(--cd-kurve), color var(--cd-zeit) var(--cd-kurve); } .cd-spurhalt:hover, .cd-spurhalt:focus-visible { border-color: var(--cd-rot); color: var(--cd-rot); } .cd-auf-dunkel .cd-spurhalt { background: none; border-color: var(--cd-dunkel-3); color: var(--cd-text-auf-dunkel-1, #fff); } /* Ein Zeichen ist zu sehen, nie beide. Welches, sagt aria-pressed: gedrueckt heisst angehalten, dann muss der Knopf das Fortsetzen anbieten. */ .cd-spurhalt__weiter { display: none; } .cd-spurhalt[aria-pressed="true"] .cd-spurhalt__pause { display: none; } .cd-spurhalt[aria-pressed="true"] .cd-spurhalt__weiter { display: block; } /* Die Zeichen liegen ueber der Fuellung, sonst faerbte sie sie mit ein. */ .cd-spurhalt .cd-symbol { position: relative; z-index: 1; } /* Ohne Punktreihe steht die rechte Gruppe allein — dann darf sie die Zeile ausfuellen statt rechts zu kleben. */ .cd-spurbedienung:not(:has(.cd-spurbedienung__punkte)) .cd-spurbedienung__rechts { margin-inline-start: 0; inline-size: 100%; justify-content: space-between; } } @media (max-width: 699px) and (prefers-reduced-motion: reduce) { .cd-spurpunkt::before { transition: none; } } /* ============================================================ Nachtrag: "mittig" war rechnerisch nie mittig ============================================================ Steht am Dateiende, weil hier zwei Regeln aus DIESER Datei und eine aus cd_karten.css zurueckgenommen werden. Bei gleicher Spezifitaet gewinnt die spaetere Regel — weiter oben eingefuegt waere der Block still wirkungslos. ============================================================ */ @media (max-width: 699px) { /* ------------------------------------------------------------ 1. Die erste Folie ruhte links, nicht in der Mitte ------------------------------------------------------------ Vorher: Karte 78 %, Innenabstand der Spur 11 %. Beide Werte messen sich am SELBEN Kasten — der Innenabstand verkleinert den Innenraum, an dem die 78 % haengen. Rechnet man nach, ist die Ruhelage der ersten Karte nur dann mittig, wenn der Innenabstand 50 % betraegt; dann bliebe kein Innenraum uebrig. Die Gleichung hat also keine brauchbare Loesung. Gemessen bei 390 px: Spur 358 breit, Karte 218, Ruhelage links bei 55 statt bei 70 — die erste Folie stand sichtbar zu weit links, und erst beim Weiterschieben rastete es mittig. Der Ausweg ist, die Karte NICHT mehr in Prozent des Innenraums zu messen: Sie fuellt ihn ganz aus, und die Breite entsteht allein aus dem Innenabstand. Damit gilt Ruhelage = Innenabstand auf beiden Seiten, und zwar bei jeder Fensterbreite. 14 % ergeben bei 390 px eine Karte von 258 px (66 % des Fensters) und 50 px Anschnitt links wie rechts. Zum Vergleich die Fassung, an der wir uns orientiert haben: dort 254 px. ------------------------------------------------------------ */ .cd-bahn[data-mobilspur-layout="mitte"] { --cd-spur-karte: 100%; } .cd-bahn[data-mobilspur-layout="mitte"] .cd-karten__raster, .cd-bahn[data-mobilspur-layout="mitte"] .cd-referenzen__raster, .cd-bahn[data-mobilspur-layout="mitte"] .cd-referenzen__karten, .cd-bahn[data-mobilspur-layout="mitte"] .cd-referenzen__weitere, .cd-bahn[data-mobilspur-layout="mitte"] .cd-referenzen__galerie, .cd-bahn[data-mobilspur-layout="mitte"] .cd-blog__raster { padding-inline: 14%; scroll-padding-inline: 14%; } /* WER BLAETTERT, BEKOMMT DEN EINZUG NICHT. Der Innenabstand ist dafuer da, dass die erste und die letzte Karte einer SCHIEBESPUR mittig einrasten koennen. Ohne Spur ist er nur ein Rand: Das Raster stuende bei 390 Pixeln rund 50 Pixel schmaler da als Kopfzeile und Blaetterleiste daneben, und niemand saehe den Grund. DIE STELLE IST WICHTIG. Es gibt zwei mitte-Regeln fuer dasselbe Raster (11 % weiter oben, 14 % hier). Eine Ruecknahme zwischen beiden waere von der zweiten wieder ueberschrieben worden — sie muss hinter die letzte. */ .cd-bahn[data-mobilspur-layout="mitte"][data-blaettern] .cd-blog__raster { padding-inline: 0; scroll-padding-inline: 0; } /* ------------------------------------------------------------ 2. Das dunkle Band hatte unten keine Luft ------------------------------------------------------------ `cd_karten.css` setzt `.cd-bahn.cd-karten--band { padding-block: 0 }`. Am Rechner ist das richtig: Dort fuellen die Felder mit ihrem eigenen Polster die Bahn von Kante zu Kante. Am Handy kommt darunter aber die Bedienung der Spur dazu, und die brachte nur einen Abstand nach OBEN mit. Gemessen bei 390 px: Bahn 1173 bis 1404, Bedienung 1360 bis 1404 — die Punkte sassen mit NULL Abstand auf der Unterkante des Bandes. Zwei Klassen im Selektor, damit die Regel die aus cd_karten.css ueberhaupt erreicht. */ .cd-bahn.cd-karten--band { padding-block: var(--cd-a6); } /* ------------------------------------------------------------ 3. Die Felder standen im Schmalen zu eng gepolstert ------------------------------------------------------------ 34/30 stammt aus dem Band am Rechner, wo ein Feld ueber 300 px breit ist. In der Spur blieben von 218 px nach Abzug des Polsters 158 px, davon gingen 48 fuer Zeichen und Fuge ab — 110 px fuer den Titel. "Ueber 20 Jahre Erfahrung" brach deshalb auf drei Zeilen, und die Kleinzeile gleich mit. Mit der breiteren Karte aus Punkt 1 und 22 px Polster bleiben 214 px, fuer den Text also 166 statt 110. ------------------------------------------------------------ */ .cd-karten--band .cd-karten__raster:has(> :nth-child(3)) > .cd-karten__feld, [data-mobilspur="immer"] .cd-karten--band .cd-karten__raster > .cd-karten__feld { padding: 26px 22px; } /* ------------------------------------------------------------ 4. Die Bandtitel nehmen den Ausgleich zurueck ------------------------------------------------------------ `basis.css` gibt JEDER Ueberschrift `text-wrap: balance`. Fuer Schlagzeilen ist das richtig. Fuer diese Titel in einer 164 px schmalen Spalte ist es das Gegenteil. Einzeilig braeuchten die vier Titel 216, 218, 261 und 106 px - zwei Zeilen sind also unvermeidlich, und es geht nur noch darum, WO gebrochen wird. Am ersten Titel gemessen, beide Fassungen im selben Browser: balance : 65 / 136 -> "Ueber 20" / "Jahre Erfahrung" wrap : 117 / 84 -> "Ueber 20 Jahre" / "Erfahrung" Der gewoehnliche Umbruch fuellt die erste Zeile, solange es passt - "Ueber 20 Jahre" sind 118 px und passen in 164. Der Ausgleich zieht das Wort trotzdem herunter, und ein Umbruch nach "Ueber 20" liest sich wie ein Fehler. Nur hier zuruecknehmen, nicht global: Bei den Schlagzeilen der Bahnen leistet `balance` genau das, wofuer es gemacht ist. ------------------------------------------------------------ */ .cd-karten--band .cd-karten__titel { text-wrap: wrap; } } /* ------------------------------------------------------------ Wer blättert, braucht keine Spurbedienung ------------------------------------------------------------ Die Spur selbst wird bei gesetzter Blätterfunktion oben zurückgenommen — ihre Bedienleiste blieb aber stehen. Auf der Blogseite standen dadurch ZWEI Leisten untereinander: Punkte, Pfeile und „01 / 06" der Spur, darunter die Seitenzahlen. display:none ist hier richtig und nicht bloß Verstecken: Die Knöpfe dürfen auch aus der Tabreihenfolge verschwinden. Sie bedienen eine Spur, die es an dieser Stelle nicht mehr gibt. ------------------------------------------------------------ */ [data-blaettern] .cd-spurbedienung { display: none; }