/* ============================================================ KEROLINA – assets/css/reiseprofil.css ZWECK Die Auswahlkarten, die auf schmalen Bildschirmen an die Stelle der Auswahlfelder im Abschnitt „Stil Ihrer Reise“ treten. Ein Muster für alle sieben Fragen. EINBINDUNG Pflegeort für Pfad und Version: includes/reiseprofil-assets.php BESONDERHEITEN - Bewusst kurz. Beschriftung, Hilfetext und Fehlermeldung kommen weiterhin aus den Formularklassen der Seite (.field, .field-error, .help). Hier steht ausschließlich das, was es dort nicht schon gibt. - Alle Farben kommen aus den Variablen der Seite, jeweils mit einem Ersatzwert. Bindet eine künftige Seite den Baustein ohne diese Variablen ein, sieht er trotzdem richtig aus. - Gold erscheint nur als Fläche in sehr geringer Deckung, nie als Textfarbe auf hellem Grund (09-brand-guidelines.md). ZWEI BEDINGUNGEN, BEIDE NÖTIG .js-reiseprofil setzt reiseprofil.js erst, wenn mindestens eine Kartenliste fertig im Dokument steht. Ohne JavaScript und bei einem Abbruch während des Aufbaus bleiben die Auswahlfelder sichtbar und bedienbar. DER BREAKPOINT IST NICHT NEU 640px ist die Breite, bei der die Rundreisenseite .field-row ohnehin einspaltig umbricht, und dieselbe Kante, an der die Monatsansicht des Terminblocks übernimmt. Ein eigener Wert wäre ein dritter Pflegeort. ============================================================ */ /* Ohne die Klasse und oberhalb von 640px unsichtbar. */ .wahl-liste, .wahl-zuruecksetzen { display: none; } @media (max-width: 640px) { .js-reiseprofil .wahl-liste { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 2px; } /* Das Auswahlfeld bleibt im Formular stehen und sendet weiter seinen Wert. display:none nimmt es aus der Tabreihenfolge und aus dem Screenreader – sonst gäbe es jede Frage doppelt. Die Klasse setzt reiseprofil.js auf genau die Felder, für die eine Liste entstanden ist. Bewusst nicht über den Feldblock ([data-reiseprofil] select): Ein Feld, dessen Liste aus irgendeinem Grund nicht aufgebaut wurde, verschwände sonst ersatzlos. */ .js-reiseprofil select.wahl-ersetzt { display: none; } /* ------------------------------------------------------------ Die Karte ------------------------------------------------------------ Eine ruhige Zeile, kein Handlungsaufruf. Sieben Fragen mit zusammen über dreißig Antworten stehen hier untereinander; jede Karte als kräftige Schaltfläche zu gestalten ergäbe eine Wand aus Knöpfen statt einer Präferenzwahl. Deshalb heller Papiergrund, feine Kontur und Pflaume als einzige Textfarbe. */ .wahl-card { display: flex; align-items: flex-start; gap: 12px; inline-size: 100%; min-block-size: 52px; margin: 0; padding: 12px 14px; text-align: left; font: inherit; color: var(--ink, #1e1122); background: var(--paper, #fcfaf5); border: 1.5px solid var(--field-border, rgba(42, 28, 51, .50)); border-radius: var(--radius-sm, 8px); cursor: pointer; /* Nimmt iOS die Wartezeit auf einen möglichen Doppeltipp. */ touch-action: manipulation; -webkit-tap-highlight-color: transparent; } /* Die gewählte Antwort bleibt hell. Die dunkle Variante des Terminblocks passt dort, wo genau eine kleine Fläche gefüllt wird. Hier wären es sieben dunkle Blöcke untereinander – der Abschnitt würde schwer und unruhig. Erkennbar ist die Auswahl trotzdem dreifach: gefüllter Ring, kräftigere Kontur, getönte Fläche. Keines davon hängt an der Farbe allein. */ .wahl-card[aria-pressed="true"] { border-color: var(--plum, #2a1c33); /* Verstärkt die Kontur, ohne die Rahmenbreite zu ändern – sonst verspränge die Karte beim Auswählen um einen halben Pixel und die ganze Liste zuckte. */ box-shadow: inset 0 0 0 1px var(--plum, #2a1c33); background: var(--gold-12, rgba(210, 196, 133, .12)); } /* ------------------------------------------------------------ Der Auswahlring ------------------------------------------------------------ */ .wahl-card__marke { flex: 0 0 20px; inline-size: 20px; block-size: 20px; /* Ein Pixel tiefer als die Textkante: Der Ring sitzt damit optisch auf der Mittellinie der ersten Zeile. */ margin-block-start: 1px; position: relative; border: 2px solid var(--field-border, rgba(42, 28, 51, .50)); border-radius: 50%; } .wahl-card[aria-pressed="true"] .wahl-card__marke { border-color: var(--plum, #2a1c33); } .wahl-card[aria-pressed="true"] .wahl-card__marke::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--plum, #2a1c33); } /* ------------------------------------------------------------ Titel und Erläuterung ------------------------------------------------------------ Die Aufteilung macht das Skript, und nur in der Darstellung: Der abgesendete Wert bleibt der vollständige Antworttext. */ .wahl-card__text { display: block; min-inline-size: 0; } .wahl-card__titel { display: block; font-size: .96rem; font-weight: 600; line-height: 1.35; color: var(--plum, #2a1c33); } .wahl-card__hinweis { display: block; margin-block-start: 2px; font-size: .86rem; font-weight: 400; line-height: 1.4; color: var(--ink, #1e1122); opacity: .78; } /* ------------------------------------------------------------ Rückweg auf „keine Angabe" ------------------------------------------------------------ Nur bei freiwilligen Angaben, und nur wenn schon etwas gewählt ist. Bewusst kein Kasten und keine Fläche: Der Rückweg ist eine Nebenhandlung und darf neben den Antwortkarten nicht mitreden. Das Polster macht ihn trotzdem sicher treffbar – sichtbar ist nur die Schrift. */ .js-reiseprofil .wahl-zuruecksetzen { display: inline-flex; align-items: center; min-block-size: 44px; margin: 2px 0 0; padding: 0 2px; font: inherit; font-size: .86rem; color: var(--plum, #2a1c33); background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } /* Muss die Regel darüber schlagen, sonst bliebe die Schaltfläche auch ohne Auswahl stehen. */ .js-reiseprofil .wahl-zuruecksetzen[hidden] { display: none; } @media (hover: hover) { .wahl-zuruecksetzen:hover { text-decoration-thickness: 2px; } } /* ------------------------------------------------------------ Fokus ------------------------------------------------------------ Der Versatz legt den Ring neben die Karte statt auf ihre Kontur, wo er mit der Auswahlmarkierung verschmelzen würde. */ .wahl-card:focus-visible, .wahl-zuruecksetzen:focus-visible { outline: 3px solid var(--plum, #2a1c33); outline-offset: 2px; } /* Nach einem Absendeversuch führt das Skript den Fokus auf die erste fehlende Angabe. Wer den Absendeknopf mit Finger oder Maus gedrückt hat, gilt dem Browser dabei nicht als Tastaturnutzer – :focus-visible griffe nicht, und der Fokus säße unsichtbar in der Liste. */ .field.is-invalid .wahl-card:focus { outline: 3px solid var(--plum, #2a1c33); outline-offset: 2px; } /* ------------------------------------------------------------ Zeigegeräte mit echtem Überfahren ------------------------------------------------------------ Nur für Maus und Stift. Auf einem Touchscreen bliebe der Überfahren-Zustand nach dem Antippen kleben und sähe aus wie eine zweite Auswahl. */ @media (hover: hover) { .wahl-card:hover:not([aria-pressed="true"]) { border-color: var(--plum, #2a1c33); } } /* ------------------------------------------------------------ Sehr schmale Geräte ------------------------------------------------------------ */ @media (max-width: 374px) { .wahl-card { gap: 10px; padding: 11px 12px; } .wahl-card__titel { font-size: .92rem; } .wahl-card__hinweis { font-size: .82rem; } } /* ------------------------------------------------------------ Erzwungene Farben ------------------------------------------------------------ Im Kontrastmodus von Windows werden Hintergrund und Schattierung verworfen. Ohne diese Regel wäre die gewählte Karte nicht mehr von den übrigen zu unterscheiden – der gefüllte Ring bleibt, die Kontur bekommt hier ihr Gewicht. */ @media (forced-colors: active) { .wahl-card[aria-pressed="true"] { border-width: 3px; } } }