ClaudeandClaude Sonnet 5.5
794a63c0d7
- R53: Das Widget wartet vor jedem Absenden, bis das Formular-Token formMinSekunden plus 0,5 s alt
ist ("Einen Moment …", Knopf gesperrt); gilt nach dem Neuladen der Konfiguration und beim Wiederholen
nach "neu_laden". Kein stilles Erfolgs-201 ohne Buchung mehr.
- R54: "Vertrag widerrufen" im Fuß ist ein zweiter Knopf (44 px). Im Knopfmodus lädt das Widget die
Konfiguration beim Laden der Seite (ein Abruf) und zeigt bei Widerrufsrecht dauerhaft einen zweiten
Knopf "Vertrag widerrufen" neben dem Buchungsknopf, der den Dialog beim Widerrufsformular öffnet.
- Telefonlink im Widget und auf der Gästeseite: Text mit Buchstaben oder Mehrfachangaben wird nie zum
tel:-Link, "(0)" hinter der Landesvorwahl entfällt.
- Portal, Einstellungen: Kasten "Einbau auf deiner Website" mit Einbau-Code und Kopierknopf; Hinweistexte
zum Widerruf passen zu R55 (auch Anfragen).
- G02: Widerrufssatz nennt, dass der Knopf bis zum Beginn des Termins gilt und danach das Formular auf der
Website oder die E-Mail an den Betrieb.
- Einbau-Anleitung angepasst (siteKey und Code im Portal, Knopfmodus, Checkliste); Tests und Playwright.
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
223 lines
16 KiB
CSS
223 lines
16 KiB
CSS
/* Terminplaner im Kundenbereich (termine.js): Projektauswahl, Vorlagen, Reiter, Terminliste, Rueckfragen und Formulare.
|
|
Farben und Abstaende aus den Tokens von kundenbereich.css (.kb-page); nur Klassen mit tm-. Handy: bis 880px wie die App-Ansicht. */
|
|
|
|
#view-termine .kb-panel { max-width: none; }
|
|
#view-termine .fn-project { margin-bottom: 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 18px; }
|
|
#view-termine button:focus-visible, #view-termine input:focus-visible, #view-termine select:focus-visible, #view-termine textarea:focus-visible,
|
|
#view-termine summary:focus-visible, #view-termine a:focus-visible { outline: 3px solid #d4b4ff; outline-offset: 2px; }
|
|
.tm-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
|
|
|
|
/* -------------------------------------------------- Hinweise und Meldungen --- */
|
|
.tm-box { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 16px; padding: 12px 16px; border-radius: 12px; font-size: 14px; line-height: 1.5; }
|
|
.tm-box[hidden] { display: none; }
|
|
.tm-box-warn { background: rgba(251, 191, 36, 0.12); border: 1px solid rgba(251, 191, 36, 0.45); }
|
|
.tm-box-info { background: var(--kb-purple-soft); border: 1px solid var(--kb-purple-line); }
|
|
.tm-meldung { margin: 0 0 16px; padding: 12px 16px; border-radius: 12px; font-size: 14px; line-height: 1.5; scroll-margin-top: calc(var(--kb-appbar-h, 76px) + 12px); }
|
|
/* leer bleibt die Live-Region im Dokument (sonst liest ein Screenreader die naechste Meldung nicht vor), nimmt aber keinen Platz */
|
|
.tm-meldung:empty { margin: 0; padding: 0; border: 0; }
|
|
.tm-meldung:focus { outline: none; }
|
|
.tm-meldung-ok { background: rgba(74, 222, 128, 0.1); border: 1px solid rgba(74, 222, 128, 0.4); }
|
|
.tm-meldung-fehler { background: rgba(248, 113, 113, 0.1); border: 1px solid rgba(248, 113, 113, 0.5); color: #fecaca; }
|
|
.tm-info p { margin: 0 0 12px; line-height: 1.55; color: var(--kb-muted); }
|
|
.tm-info p:last-child { margin-bottom: 0; }
|
|
|
|
/* ----------------------------------------------------------------- Reiter --- */
|
|
.tm-reiterleiste { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 6px; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--kb-border); }
|
|
.tm-reiter {
|
|
padding: 10px 16px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--kb-muted);
|
|
font: inherit; font-size: 14px; font-weight: 700; white-space: nowrap; cursor: pointer;
|
|
}
|
|
.tm-reiter:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
|
|
.tm-reiter[aria-selected='true'] { color: #fff; background: var(--kb-purple-soft); border-color: var(--kb-purple-line); }
|
|
.tm-panel:focus { outline: none; }
|
|
|
|
/* ------------------------------------------------------------- Werkzeugleiste --- */
|
|
.tm-leiste { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
|
|
.tm-leiste [hidden], .tm-filter[hidden] { display: none; }
|
|
.tm-segment { display: inline-flex; border: 1px solid var(--kb-border-strong); border-radius: 999px; overflow: hidden; }
|
|
.tm-seg { padding: 9px 18px; border: none; background: transparent; color: inherit; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
|
|
.tm-seg + .tm-seg { border-left: 1px solid var(--kb-border-strong); }
|
|
.tm-seg[aria-pressed='true'] { background: var(--kb-purple); color: #fff; }
|
|
.tm-nav { display: inline-flex; align-items: center; gap: 6px; }
|
|
.tm-pfeil {
|
|
display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid var(--kb-border-strong);
|
|
background: transparent; color: #fff; font: inherit; font-size: 22px; line-height: 1; cursor: pointer;
|
|
}
|
|
.tm-pfeil:hover { background: rgba(255, 255, 255, 0.07); }
|
|
.tm-sprung { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--kb-muted); }
|
|
#view-termine input, #view-termine select, #view-termine textarea { color-scheme: dark; } /* Kalender und Auswahllisten der Datumsfelder dunkel */
|
|
.tm-sprung input { padding: 8px 10px; border-radius: 12px; border: 1px solid var(--kb-border-strong); background: rgba(255, 255, 255, 0.05); color: inherit; font: inherit; font-size: 14px; }
|
|
.tm-zeitraum { margin: 18px 0 10px; font-size: 19px; }
|
|
.tm-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
|
|
.tm-chip {
|
|
padding: 8px 15px; border-radius: 999px; border: 1px solid var(--kb-border-strong); background: transparent; color: inherit;
|
|
font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
|
|
}
|
|
.tm-chip:hover { background: rgba(255, 255, 255, 0.07); }
|
|
.tm-chip[aria-pressed='true'] { background: var(--kb-purple-soft); border-color: var(--kb-purple-line); color: #fff; }
|
|
.tm-werkzeug-zeile { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
|
|
.tm-werkzeuge { display: contents; }
|
|
.tm-werkzeuge button[aria-expanded='true'] { box-shadow: 0 0 0 3px var(--kb-purple-soft); }
|
|
#view-termine .kb-btn-outline, #view-termine .kb-btn-primary { min-height: 40px; }
|
|
|
|
/* ------------------------------------------------------------------- Liste --- */
|
|
.tm-tag-kopf { margin: 22px 0 8px; font-size: 14px; font-weight: 700; color: var(--kb-muted); }
|
|
.tm-tag:first-child .tm-tag-kopf { margin-top: 6px; }
|
|
.tm-liste[aria-busy='true'] { opacity: 0.55; }
|
|
.tm-leer { margin: 0 0 8px; padding: 14px 4px; font-size: 14px; color: var(--kb-faint); }
|
|
.tm-eintraege { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
|
|
.tm-eintrag { padding: 14px 16px; border-radius: 14px; background: var(--kb-surface); border: 1px solid var(--kb-border); }
|
|
.tm-eintrag.tm-offen { border-color: var(--kb-purple-line); }
|
|
.tm-sperre {
|
|
border-style: dashed; border-color: var(--kb-border-strong);
|
|
background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 10px, transparent 10px 20px), var(--kb-surface);
|
|
}
|
|
.tm-zeile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 14px; align-items: start; }
|
|
.tm-zeit { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; padding-top: 1px; }
|
|
.tm-haupt { min-width: 0; }
|
|
.tm-name, .tm-meta { display: block; overflow-wrap: anywhere; }
|
|
.tm-meta { margin-top: 2px; font-size: 13.5px; color: var(--kb-muted); }
|
|
.tm-pille { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
|
|
.tm-pille-ok { color: #86efac; background: rgba(74, 222, 128, 0.1); border: 1px solid rgba(74, 222, 128, 0.4); }
|
|
.tm-pille-wait { color: #fcd34d; background: rgba(251, 191, 36, 0.1); border: 1px solid rgba(251, 191, 36, 0.4); }
|
|
.tm-pille-off { color: var(--kb-muted); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--kb-border-strong); }
|
|
.tm-pille-bad { color: #fca5a5; background: rgba(248, 113, 113, 0.1); border: 1px solid rgba(248, 113, 113, 0.45); }
|
|
.tm-hinweis-zeile { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--kb-muted); overflow-wrap: anywhere; }
|
|
.tm-hinweis-zeile.tm-warn { color: #fcd34d; }
|
|
.tm-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
|
|
.tm-frage:empty { display: none; }
|
|
.tm-frage-box {
|
|
display: grid; gap: 10px; margin-top: 12px; padding: 14px; border-radius: 12px; background: var(--kb-purple-soft); border: 1px solid var(--kb-purple-line);
|
|
}
|
|
.tm-frage-box:focus { outline: none; }
|
|
.tm-frage-box p { margin: 0; font-size: 14px; line-height: 1.5; }
|
|
.tm-frage-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
|
|
.tm-details { margin-top: 10px; font-size: 14px; }
|
|
.tm-details summary { display: inline-block; padding: 4px 0; color: var(--kb-lilac); font-size: 13.5px; cursor: pointer; }
|
|
.tm-fakten { display: grid; gap: 8px; margin: 8px 0 0; }
|
|
.tm-fakten > div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 2px 12px; }
|
|
.tm-fakten dt { color: var(--kb-muted); font-size: 13px; }
|
|
.tm-fakten dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
|
|
.tm-link-knopf { margin-top: 10px; padding: 4px 0; border: none; background: none; color: #fca5a5; font: inherit; font-size: 13.5px; text-decoration: underline; cursor: pointer; }
|
|
|
|
/* ------------------------------------------------------------------ Formulare --- */
|
|
.tm-formular { margin-bottom: 16px; }
|
|
.tm-formular h3 { margin-bottom: 6px; }
|
|
.tm-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 14px; align-items: start; }
|
|
.tm-feld { display: grid; gap: 6px; margin: 12px 0 0; min-width: 0; }
|
|
.tm-feld > label, .tm-label { font-size: 13px; font-weight: 600; }
|
|
.tm-feld input:not([type=checkbox]):not([type=radio]), .tm-feld select, .tm-feld textarea {
|
|
width: 100%; box-sizing: border-box; padding: 11px 12px; border-radius: 12px; font: inherit; font-size: 16px; resize: vertical;
|
|
border: 1px solid var(--kb-border-strong); background: rgba(255, 255, 255, 0.05); color: inherit;
|
|
}
|
|
.tm-feld select option { color: #111; }
|
|
.tm-feld [aria-invalid='true'] { border-color: #f87171; }
|
|
.tm-feld input:focus, .tm-feld select:focus, .tm-feld textarea:focus { border-color: var(--kb-purple-line); box-shadow: 0 0 0 3px var(--kb-purple-soft); }
|
|
.tm-hinweis { margin: 0; font-size: 12.5px; color: var(--kb-muted); }
|
|
.tm-fehler { margin: 0; font-size: 13px; color: #fca5a5; }
|
|
.tm-fehler:empty { display: none; }
|
|
.tm-zeiten { display: flex; flex-wrap: wrap; gap: 8px; }
|
|
.tm-haken { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 6px; font-size: 14px; line-height: 1.5; cursor: pointer; }
|
|
.tm-haken input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--kb-purple); }
|
|
.tm-formular .tm-frage-knoepfe { margin-top: 16px; }
|
|
|
|
/* ------------------------------------------------------------- Vorlagenauswahl --- */
|
|
.tm-vorlagen > p { margin: 0 0 14px; line-height: 1.55; color: var(--kb-muted); }
|
|
.tm-vorlagen-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin: 0 0 16px; padding: 0; border: 0; min-width: 0; }
|
|
.tm-vorlage { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: 14px; border: 2px solid var(--kb-border-strong); cursor: pointer; }
|
|
.tm-vorlage:hover { background: rgba(255, 255, 255, 0.04); }
|
|
.tm-vorlage:has(input:checked) { border-color: var(--kb-purple); background: var(--kb-purple-soft); }
|
|
.tm-vorlage input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--kb-purple); }
|
|
.tm-vorlage strong, .tm-vorlage small { display: block; }
|
|
.tm-vorlage small { margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--kb-muted); }
|
|
|
|
/* ----------------------------------- Leistungen, Team & Plaetze, Einstellungen --- */
|
|
.tm-tab > * + * { margin-top: 16px; }
|
|
.tm-tab > .tm-box { margin-bottom: 0; }
|
|
.tm-hinweise:empty { display: none; }
|
|
.tm-feld[hidden] { display: none; }
|
|
.tm-reihenfolge .tm-frage-knoepfe { margin: 0; }
|
|
.tm-gruppe-felder { display: grid; gap: 0; min-width: 0; margin: 0; padding: 0; border: 0; }
|
|
.tm-gruppe-felder > legend { padding: 0; }
|
|
.tm-feld.tm-gruppe-felder { margin-top: 14px; }
|
|
.tm-abschnitt h3 { margin-bottom: 4px; }
|
|
.tm-abschnitt h4 { margin: 18px 0 4px; font-size: 14.5px; }
|
|
.tm-abschnitt-text { margin: 0 0 14px; line-height: 1.55; }
|
|
.tm-abschnitt .tm-box { margin: 0 0 14px; }
|
|
.tm-abschnitt .tm-werkzeug-zeile { align-items: center; margin-bottom: 12px; }
|
|
.tm-abschnitt .tm-eintraege { margin-top: 4px; }
|
|
.tm-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px 14px; }
|
|
.tm-kopf .tm-pille { flex: none; }
|
|
.tm-eintrag .tm-meta + .tm-meta { margin-top: 0; }
|
|
.tm-editor-box:empty, .tm-frage:empty { display: none; }
|
|
.tm-editor { margin-top: 12px; }
|
|
.tm-eintrag .tm-formular { margin-bottom: 0; padding: 14px 0 0; border: 0; border-top: 1px solid var(--kb-border); border-radius: 0; background: transparent; }
|
|
.tm-eintrag .tm-formular h3 { display: none; }
|
|
.tm-feld-haken { margin-top: 4px; }
|
|
.tm-feld-haken .tm-haken { margin: 6px 0 0; }
|
|
.tm-haken > span { font-weight: 600; }
|
|
.tm-haken small { display: block; margin-top: 2px; font-weight: 400; }
|
|
.tm-abschnitt form > .tm-frage-knoepfe, .tm-tab > form > .tm-frage-knoepfe { margin-top: 16px; }
|
|
.tm-feld input[type=color] { height: 46px; padding: 4px; cursor: pointer; }
|
|
.tm-gefahr { color: #fca5a5; border-color: rgba(248, 113, 113, 0.45); }
|
|
.tm-gefahr:hover { background: rgba(248, 113, 113, 0.1); }
|
|
.tm-wochenplan .tm-raster { gap: 0 14px; }
|
|
.tm-feed { margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--kb-border); }
|
|
.tm-feed h4 { margin: 0 0 6px; font-size: 14.5px; }
|
|
.tm-feed .tm-hinweis { margin: 0 0 8px; line-height: 1.5; }
|
|
.tm-feed .tm-frage-knoepfe { margin: 10px 0 0; }
|
|
.tm-link-feld {
|
|
width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--kb-border-strong);
|
|
background: rgba(255, 255, 255, 0.05); color: inherit; font: inherit; font-size: 13px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis;
|
|
}
|
|
.tm-code-feld {
|
|
display: block; width: 100%; box-sizing: border-box; margin: 4px 0 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--kb-border-strong);
|
|
background: rgba(255, 255, 255, 0.05); color: inherit; font: inherit; font-size: 13px; line-height: 1.5; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
white-space: pre; overflow: auto; resize: vertical;
|
|
}
|
|
.tm-muster { margin-top: 14px; padding: 14px 16px; border-radius: 12px; border: 1px dashed var(--kb-border-strong); }
|
|
.tm-muster > p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.55; color: var(--kb-muted); }
|
|
.tm-muster-text { margin: 0 0 12px; padding: 0 0 0 12px; border-left: 3px solid var(--kb-border-strong); font-size: 13.5px; line-height: 1.6; color: var(--kb-muted); font-style: italic; }
|
|
.tm-zusatz { display: grid; gap: 12px; margin: 10px 0; }
|
|
.tm-zusatz:empty { display: none; }
|
|
.tm-zusatz-zeile { padding: 12px 14px 14px; border-radius: 12px; border: 1px solid var(--kb-border); }
|
|
.tm-zusatz-zeile .tm-gefahr { margin-top: 10px; }
|
|
.tm-optionen { display: grid; gap: 4px; margin: 4px 0 8px; }
|
|
.tm-optionen .tm-haken { margin: 6px 0; }
|
|
.tm-aus { opacity: 0.6; cursor: not-allowed; }
|
|
.tm-status { margin: 0; }
|
|
.tm-abschnitt details.tm-details { margin-top: 12px; }
|
|
|
|
/* ----------------------------------------------------------------- Handy --- */
|
|
@media (max-width: 880px), (pointer: coarse) {
|
|
#view-termine button:not(.tm-link-knopf), #view-termine .kb-btn-outline, #view-termine .kb-btn-primary { min-height: 44px; }
|
|
.tm-pfeil { width: 44px; height: 44px; }
|
|
.tm-link-knopf { padding: 11px 0; }
|
|
.tm-details summary { display: flex; align-items: center; min-height: 44px; padding: 0; }
|
|
.tm-haken { align-items: center; min-height: 44px; margin-top: 0; margin-bottom: 0; }
|
|
.tm-haken input { margin-top: 0; }
|
|
.tm-link-feld, .tm-code-feld { min-height: 44px; font-size: 16px; } /* 16 px: iOS zoomt beim Antippen kleinerer Felder */
|
|
}
|
|
@media (max-width: 600px) {
|
|
.tm-reiterleiste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
.tm-reiter { text-align: center; }
|
|
.tm-leiste { gap: 10px; }
|
|
.tm-segment { width: 100%; }
|
|
.tm-seg { flex: 1; padding-left: 8px; padding-right: 8px; }
|
|
.tm-nav { width: 100%; }
|
|
.tm-nav .tm-heute { flex: 1; }
|
|
.tm-sprung { width: 100%; }
|
|
.tm-sprung input { flex: 1; min-width: 0; }
|
|
.tm-zeile { grid-template-columns: minmax(0, 1fr) auto; }
|
|
.tm-haupt { grid-column: 1 / -1; grid-row: 2; }
|
|
.tm-fakten > div { grid-template-columns: minmax(0, 1fr); }
|
|
.tm-werkzeug-zeile > *, .tm-werkzeuge > * { flex: 1 1 calc(50% - 5px); }
|
|
.tm-werkzeuge > .kb-btn-primary { flex-basis: 100%; }
|
|
.tm-aktionen > * { flex: 1 1 auto; }
|
|
.tm-aktionen > .tm-pfeil { flex: 0 0 44px; }
|
|
.tm-kopf { flex-wrap: wrap; }
|
|
.tm-feed { padding: 12px; }
|
|
.tm-frage-knoepfe > * { flex: 1 1 auto; }
|
|
}
|
|
@media (prefers-reduced-motion: reduce) { #view-termine * { transition: none !important; animation: none !important; } }
|