/* ============================================================
KEROLINA – kalender/assets/kalender.css
ZWECK
Das zentrale Aussehen des Terminbereichs. Gilt für JEDE
Rundreise, die kalender/includes/termin-block.php einbindet.
EINBINDUNG
BESONDERHEITEN
- Bewusst kurz. Die Eingabefelder, Auswahlfelder und Radios
übernehmen die Formularklassen der jeweiligen Rundreisenseite
(.field, .field-row, .radio-row, .check-label). 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 Block ohne
diese Variablen ein, sieht er trotzdem richtig aus.
- Gold erscheint nur als Linie, nie als Textfarbe auf hellem
Grund (09-brand-guidelines.md).
============================================================ */
/* ------------------------------------------------------------
1. Einleitung über dem Schalter
------------------------------------------------------------ */
.termin-block__intro {
margin: 0 0 18px;
font-size: .96rem;
line-height: 1.65;
color: var(--ink, #2b2b30);
}
/* ------------------------------------------------------------
2. Der Schalter
------------------------------------------------------------
Etwas kräftiger als eine gewöhnliche Zeile mit Häkchen: Er
entscheidet, ob ein ganzer Abschnitt gebraucht wird, und soll
beim Überfliegen des Formulars auffallen. */
.termin-block__schalter {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 16px;
border: 1.5px solid var(--field-border, #cfc9c0);
border-radius: var(--radius-sm, 6px);
background: var(--gold-12, rgba(210, 196, 133, .12));
font-weight: 600;
cursor: pointer;
min-height: 48px;
}
.termin-block__schalter input {
inline-size: 20px;
block-size: 20px;
flex: 0 0 auto;
margin: 0;
cursor: pointer;
}
/* ------------------------------------------------------------
3. Der aufklappbare Teil
------------------------------------------------------------
Ohne JavaScript ist dieser Bereich immer sichtbar – deshalb steht
die Zuklapp-Regel hinter .js-termin. Diese Klasse setzt das Skript
selbst auf . Wer kein JavaScript hat, bekommt den ganzen
Abschnitt zu sehen und kann ihn ausfüllen. */
.termin-block__details {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--gold-45, rgba(210, 196, 133, .45));
}
.js-termin .termin-block__details[hidden] {
display: none;
}
/* Die Aussage, dass der Zeitpunkt noch nicht verbindlich ist.
Sie steht in Lesegröße, nicht im Kleingedruckten: Wer sie überliest,
hält einen unbezahlten Termin für zugesagt. Deshalb bekommt sie auch
keinen Farbakzent — sie soll ruhig wirken und trotzdem gelesen werden,
und im Formular gibt es bereits genug Betontes. */
.termin-block__vorbehalt {
margin: 6px 0 0;
font-size: .94rem;
line-height: 1.65;
color: var(--ink, #2b2b30);
}
.termin-block__vorbehalt strong {
color: var(--plum, #2a1c33);
}
.termin-block__fuss {
margin: 10px 0 0;
font-size: .84rem;
line-height: 1.6;
color: var(--plum, #2a1c33);
opacity: .8;
}
/* ------------------------------------------------------------
4. Rückmeldung nach dem Absenden
------------------------------------------------------------
Wird von send-tour-inquiry-2026.php auf der Bestätigungsseite
und von der Absageseite verwendet. */
.termin-meldung {
margin: 0 0 20px;
padding: 16px 18px;
border-radius: var(--radius-sm, 6px);
border-left: 4px solid var(--gold-deep, #bca572);
background: var(--gold-12, rgba(210, 196, 133, .12));
font-size: .96rem;
line-height: 1.6;
color: var(--ink, #2b2b30);
}
.termin-meldung--fehler {
border-left-color: #a32020;
background: #fbeaea;
}
.termin-meldung strong {
color: var(--plum, #2a1c33);
}
/* ------------------------------------------------------------
5. Die Terminwahl – gemeinsame Bausteine
------------------------------------------------------------
Uhrzeiten, Terminübersicht und Fehlerhinweis gelten auf JEDER
Breite. Sie standen bis zum 15.08.2026 im Breakpoint darunter und
damit nur auf Telefonen; seither bedient auch der Desktop die
Uhrzeit über dieselben Schaltflächen.
Was sich zwischen den Breiten unterscheidet, ist ausschließlich
die Wahl des TAGES:
bis 640px – Monatsansicht (Abschnitt 6)
ab 641px – das bestehende Auswahlfeld (Abschnitt 7)
Deshalb steht hier kein einziger Wert doppelt. Wer die Optik der
Zeitschaltflächen ändert, ändert sie für beide Darstellungen.
ZWEI BEDINGUNGEN, BEIDE NÖTIG:
.js-termin-picker setzt kalender.js erst, wenn die Ansicht 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. Genau dort,
wo Tag und Uhrzeit aufhören nebeneinander zu stehen, übernimmt die
Monatsansicht. Ein eigener Wert wäre ein zweiter Pflegeort. */
/* Ohne JavaScript unsichtbar – dann tragen die Auswahlfelder alles. */
.termin-picker {
display: none;
}
.js-termin-picker .termin-picker {
display: block;
}
.termin-picker [hidden] {
display: none;
}
/* touch-action nimmt iOS die Wartezeit auf den zweiten Tipp: Ohne
diese Zeile prüft der Browser nach jedem Antippen erst 300ms lang,
ob ein Doppeltipp zum Zoomen folgt. Die ganze Auswahl fühlt sich
dadurch träge an.
tabular-nums hält die Ziffern gleich breit. Ohne sie stehen 1 und 4
in einer Rasterspalte sichtbar versetzt. */
.termin-picker button {
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
font-variant-numeric: tabular-nums;
}
/* ----- Uhrzeiten ----- */
.termin-picker__zeitlabel {
margin: 0 0 12px;
font-size: .9rem;
font-weight: 600;
line-height: 1.4;
color: var(--plum, #2a1c33);
}
/* Spalten- und Zeilenabstand getrennt: Die Spaltenbreite bestimmt,
wie viele Zeiten nebeneinander passen – daran wird nur je Breite
gerührt. Der Zeilenabstand darf großzügiger sein, damit die Zeiten
als Reihen lesbar bleiben und nicht als Block. */
.termin-picker__zeitraster {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
column-gap: 8px;
row-gap: 10px;
}
.termin-zeit {
min-block-size: 48px;
padding: 0 6px;
/* Die Zeit darf nie umbrechen: Eine höhere Schaltfläche würde
die ganze Zeile verspringen lassen. */
white-space: nowrap;
font: inherit;
font-size: 1rem;
font-weight: 600;
color: var(--plum, #2a1c33);
background: var(--paper, #fcfaf5);
border: 1.5px solid var(--field-border, rgba(42, 28, 51, .50));
border-radius: var(--radius-sm, 8px);
cursor: pointer;
}
.termin-zeit[aria-pressed="true"] {
color: var(--cream, #fdf1d1);
background: var(--plum, #2a1c33);
border-color: var(--plum, #2a1c33);
}
/* Zweites, farbunabhängiges Zeichen für die gewählte Zeit. Rein
schmückend – die Auswahl steht bereits in aria-pressed. */
.termin-zeit[aria-pressed="true"]::before {
content: "\2713\00a0";
}
/* ----- Übersicht des Gewählten ----- */
/* Dieselbe Bildsprache wie .termin-meldung weiter oben: goldene
Linie an der Seite, sehr helle Goldfläche. Gold bleibt Linie,
Text steht in Pflaume (09-brand-guidelines.md). */
.termin-picker__uebersicht {
margin-top: 20px;
padding: 15px 16px 16px;
border-left: 4px solid var(--gold-deep, #bca572);
border-radius: 0 var(--radius-sm, 8px) var(--radius-sm, 8px) 0;
background: var(--gold-12, rgba(210, 196, 133, .12));
}
.termin-picker__uebersichttitel {
margin: 0 0 7px;
font-size: .8rem;
font-weight: 700;
letter-spacing: .04em;
line-height: 1.3;
text-transform: uppercase;
color: var(--plum, #2a1c33);
opacity: .75;
}
.termin-picker__uebersichtdatum {
margin: 0;
font-size: 1.02rem;
font-weight: 700;
line-height: 1.35;
color: var(--plum, #2a1c33);
}
.termin-picker__uebersichtzeit {
margin: 3px 0 0;
font-size: .96rem;
line-height: 1.45;
color: var(--ink, #2b2b30);
}
/* Die Zeitspanne darf nie in sich umbrechen: "10:00 –" über der
Zeile und "11:00 Uhr" darunter wäre für einen Moment eine ganz
andere Aussage. */
.termin-picker__uebersichtspanne {
white-space: nowrap;
}
/* Der Trenner steht im CSS, damit er zusammen mit dem Umbruch
verschwinden kann (siehe schmale Geräte weiter unten). */
.termin-picker__uebersichtart::before {
content: " · ";
}
/* Die Zeitzone ist eine Fußnote zur Uhrzeit, keine vierte Angabe:
kleiner, ruhiger, aber gewöhnlicher Text – lesbar, auswählbar,
für Screenreader vorhanden. Kein ::before und kein title, sonst
stünde die entscheidende Auskunft für jemanden im Ausland
ausgerechnet dort, wo man sie nicht bekommt. */
.termin-picker__uebersichtzone {
margin: 7px 0 0;
font-size: .84rem;
line-height: 1.4;
color: var(--plum, #2a1c33);
opacity: .8;
}
.termin-picker__zonenkennung {
white-space: nowrap;
}
/* ----- Fehlerhinweis ----- */
/* Bewusst dieselbe Form wie .field-error der Rundreisenseite,
aber mit eigenen Werten: Der Terminbaustein soll auch auf einer
Seite richtig aussehen, die diese Klasse nicht kennt. */
.termin-picker__fehler {
margin: 12px 0 0;
padding: 8px 12px;
font-size: .88rem;
font-weight: 600;
color: var(--plum, #2a1c33);
background: var(--gold-12, rgba(210, 196, 133, .12));
border-left: 3px solid var(--gold-deep, #bca572);
border-radius: 0 var(--radius-sm, 8px) var(--radius-sm, 8px) 0;
}
/* ----- Fokus ----- */
/* Der Versatz legt den Ring auf die Fläche neben der Schaltfläche.
Ohne ihn verschwände er auf einem gewählten Tag, der bereits
pflaumenfarben ist.
Die zweite Regel ist kein Schmuck: Nach einem Absendeversuch ohne
Termin führt das Skript den Fokus auf die fehlende Auswahl. Wer
den Absendeknopf mit dem Finger oder der Maus gedrückt hat, gilt
dem Browser dabei nicht als Tastaturnutzer – :focus-visible
griffe nicht, und der Fokus säße unsichtbar irgendwo im Raster. */
.termin-picker button:focus-visible,
.termin-picker--fehler button:focus {
outline: 3px solid var(--plum, #2a1c33);
outline-offset: 2px;
}
/* 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) {
.termin-zeit:hover:not([aria-pressed="true"]) {
border-color: var(--plum, #2a1c33);
background: var(--gold-12, rgba(210, 196, 133, .12));
}
}
/* Im Kontrastmodus von Windows werden Hintergrundfarben verworfen.
Ohne diese Regel wäre die gewählte Zeit nicht mehr vom Rest zu
unterscheiden. */
@media (forced-colors: active) {
.termin-zeit[aria-pressed="true"] {
border-width: 3px;
}
}
/* ------------------------------------------------------------
6. Nur schmale Bildschirme: die Monatsansicht
------------------------------------------------------------
Sie tritt an die Stelle der beiden Auswahlfelder Tag und Uhrzeit.
Grund: Ein