/* --------------------------------------------------------------------- * Karussell "Dein nächster Termin" * * Eine Karte sichtbar, darunter Punkte. Die Karten liefert der * Query-Loop (includes/naechster-termin.php, drei Termine), die Spur * und die Punkte baut assets/js/modules/app/termin-karussell.js. * * ⚠️ DAS WISCHEN MACHT DER BROWSER, nicht wir. scroll-snap ist der * ganze Mechanismus: kein nachgebautes Ziehen, keine Touch-Ereignisse, * keine Trägheitsrechnung. Auf dem Handy ist das sofort richtig - * mit der Trägheit, die das Gerät ohnehin kennt, und mit der * Scrollleiste, die Vorlesesoftware und Tastatur schon bedienen * können. * * DOM-Vertrag: * * .sw-termin-karussell in Bricks zu setzen, senkrecht * .sw-termin-karussell__spur baut das Modul, scrollt waagerecht * .sw-termin-karte in Bricks zu setzen, je Termin eine * .sw-termin-karussell__punkte baut das Modul * * ⚠️ ZWEI ZUSTÄNDE, BEIDE GESTALTET: Bis das Modul gelaufen ist - * und dauerhaft, falls JavaScript ausfällt - liegen die Karten direkt * im Wrapper. Dann ist der Wrapper selbst die Spur. Die Klasse * is-geteilt sagt, welcher Fall gilt. Ohne diese Doppelung sprängen * die Karten beim Laden einmal untereinander und dann wieder * nebeneinander. * * 🔴 ZWEI SORTEN REGELN (15.09.2026): * * Struktur normale Klassen-Spezifität. Was ohne sie zusammenbricht: * flex, overflow, scroll-snap, Kartenbreite, die 24 px * Trefferfläche, der Button-Reset. * Aussehen in :where() - Spezifität 0. Abstände, Punktgröße, * Rand, Farbe. Jede Regel aus Bricks gewinnt. * * Das Aussehen hängt zusätzlich an Variablen. In Bricks am Wrapper * (oder weiter oben) setzen, die Punkte erben sie: * * --sw-termin-karussell-abstand Abstand zwischen den Karten * --sw-termin-karussell-punkte-abstand Abstand Karte -> Punkte * --sw-termin-karussell-punkt-groesse sichtbarer Punkt * --sw-termin-karussell-punkt-rand Konturstärke inaktiv * --sw-termin-karussell-punkt-farbe Kontur inaktiv, Fläche aktiv * * Warum überhaupt: Jede Anpassung, die nur im Code geht, kostet einen * Commit, einen Upload und einen Test. Bei der Weg-Karte waren das * sechs Runden über zwei Tage. * ------------------------------------------------------------------- */ /* Zustand ohne Modul: der Wrapper ist die Spur. */ .sw-termin-karussell { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-inline: contain; } /* Zustand mit Modul: der Wrapper ordnet nur noch senkrecht. */ .sw-termin-karussell.is-geteilt { display: block; overflow: visible; } .sw-termin-karussell__spur { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; /* Die eigene Scrollleiste bleibt aus: Es gibt die Punkte darunter, und auf dem Handy blendet das System seine ohnehin ein. */ scrollbar-width: none; /* Eine ausgeblendete Leiste darf das Scrollen nicht verhindern - overscroll-behavior-inline hält das Wischen im Karussell, statt die ganze Seite mitzunehmen. */ overscroll-behavior-inline: contain; } /* Aussehen: Die Karten stehen dicht an dicht; der Abstand gehört zwischen sie, nicht an den Rand der Spur. */ :where(.sw-termin-karussell, .sw-termin-karussell__spur) { gap: var(--sw-termin-karussell-abstand, var(--space-s, 16px)); } .sw-termin-karussell::-webkit-scrollbar, .sw-termin-karussell__spur::-webkit-scrollbar { display: none; } /* * Eine Karte füllt die Spur - IHRE Breite, nicht die ursprüngliche. * flex-basis: 100% bezieht sich auf den Flex-Container, also auf die * Spur. Setzt jemand den Wrapper auf 500 px, ist die Spur 500 px breit * und jede Karte ebenso; das Einrasten trifft damit automatisch. * * min-width: 0 gehört dazu: Ohne das wächst ein Flex-Kind bis zur * Breite seines Inhalts, sobald der breiter ist als die Spur - eine * lange Terminbezeichnung schöbe die Karte auf, und der Snap-Punkt * läge daneben. * * flex-shrink: 0, sonst quetschen sich drei Karten nebeneinander und * das Wischen hat nichts zu tun. */ .sw-termin-karussell > .sw-termin-karte, .sw-termin-karussell__spur > .sw-termin-karte { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; } /* --------------------------------------------------------------------- * Die Punkte * * Nach Svens Vorlage: aktiv gefüllt, inaktiv nur Kontur - dieselbe * Farbe, einmal als Fläche, einmal als Rand. Kein Grauton, kein * zweites Grün. * * ⚠️ SICHTBAR 14 px, ANFASSBAR 24 px - UND DAS IST KEIN VERSEHEN. * Der Button ist die Trefferfläche, der Punkt darin ist ein * Pseudoelement. Vierzehn Pixel trifft auf einem Handy niemand * zuverlässig; vierundzwanzig ist das Mindestmaß, unter dem * Zielflächen als zu klein gelten. Deshalb ist die Trefferfläche * Struktur und der Punkt Aussehen: Wird der Punkt über die Variable * grösser als 24 px, wächst die Fläche mit (max()), kleiner wird sie * nie. * ------------------------------------------------------------------- */ .sw-termin-karussell__punkte { display: flex; justify-content: center; /* * Sichtbarer Abstand 10 px. Die Buttons sind 24 px breit, der * Punkt darin 14 px - links und rechts stehen also je 5 px * durchsichtige Trefferfläche über. 10 - 5 - 5 = 0. * * Die Null steht ausdrücklich da und ist nicht vergessen: Die * Trefferflächen berühren sich damit genau, ohne sich zu * überlappen. Ändert sich die Punktgröße über die Variable, ändert * sich der sichtbare Abstand mit (24 px minus Punktgröße). */ column-gap: 0; } /* Aussehen: Abstand zur Karte darüber. */ :where(.sw-termin-karussell__punkte) { margin: var(--sw-termin-karussell-punkte-abstand, 16px) 0 0; } .sw-termin-karussell__punkt { display: flex; align-items: center; justify-content: center; /* * Größe plus Kontur auf beiden Seiten: Der Rand liegt ausserhalb der * Punktgröße. Rechnete die Fläche nur mit der Größe, wäre ein 30-px- * Punkt mit Rand 33 px breit in einer 30-px-Fläche - gemessen am * 15.09.2026, er schrumpfte auf 27 px. */ width: max(24px, calc(var(--sw-termin-karussell-punkt-groesse, 14px) + 2 * var(--sw-termin-karussell-punkt-rand, 1.5px))); height: max(24px, calc(var(--sw-termin-karussell-punkt-groesse, 14px) + 2 * var(--sw-termin-karussell-punkt-rand, 1.5px))); padding: 0; border: none; background: none; cursor: pointer; } .sw-termin-karussell__punkt::before { content: ''; /* Der Punkt ist ein Flex-Kind der Schaltfläche - schrumpfen darf er nie, sonst stimmt die gesetzte Größe nicht mehr. */ flex: none; /* * Inaktiv: nur die Kontur, keine Füllung. transparent und nicht * --light: So nimmt der Punkt an, worauf er liegt - heute die helle * Kartenfläche, auf einem farbigen Grund später von selbst das * Richtige. Eine gesetzte helle Füllung wäre dort ein Fleck. */ background-color: transparent; /* Der Farbwechsel darf sanft sein - siehe den Block ganz unten für den Fall, dass jemand keine Bewegung will. */ transition: background-color 200ms ease; } /* Aussehen des Punkts. */ :where(.sw-termin-karussell__punkt)::before { width: var(--sw-termin-karussell-punkt-groesse, 14px); height: var(--sw-termin-karussell-punkt-groesse, 14px); border-radius: 50%; border: var(--sw-termin-karussell-punkt-rand, 1.5px) solid var(--sw-termin-karussell-punkt-farbe, var(--brand-green-900)); } /* Aktiv: dieselbe Farbe, jetzt als Fläche. Ein Zustand - behält seine Spezifität, die Farbe kommt aus derselben Variable wie die Kontur. */ .sw-termin-karussell__punkt[aria-current='true']::before { background-color: var(--sw-termin-karussell-punkt-farbe, var(--brand-green-900)); } /* * KEIN EIGENER FOKUSRING (05.09.2026): Die Punkte sind echte *