ClaudeandClaude Opus 5.5
1f56b86791
kleinunternehmer ist ab jetzt null (nicht gewaehlt), lieferzeit leer. istVollstaendig verlangt eine bewusste Wahl (true oder false), der Shop kann sonst nicht geoeffnet werden. Im Reiter Einstellungen gibt es zwei Pflicht-Radiobuttons ohne Vorauswahl; Preise, Artikel und Muster rechnen bei null wie bei Regelbesteuerung. Tests und Fixtures angepasst. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
181 lines
13 KiB
CSS
181 lines
13 KiB
CSS
/* Webshop im Kundenbereich (shop.js): Farben und Abstaende aus den Tokens von kundenbereich.css (.kb-page); nur Klassen mit sh-.
|
|
Aufbau wie termine.css: Hinweise und Meldungen, Reiter (5, auf dem Handy waagerecht scrollbar), Karten, Formulare. Die Bestellseite und
|
|
die Statuskarte (funktion-bestellen.js) tragen weiter ihre tm-Klassen aus termine.css, die dashboard.html immer mitlaedt. */
|
|
|
|
#view-webshop .kb-panel { max-width: none; }
|
|
#view-webshop .fn-project { margin-bottom: 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 18px; }
|
|
#view-webshop button:focus-visible, #view-webshop input:focus-visible, #view-webshop select:focus-visible, #view-webshop textarea:focus-visible,
|
|
#view-webshop summary:focus-visible, #view-webshop a:focus-visible { outline: 3px solid #d4b4ff; outline-offset: 2px; }
|
|
.sh-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 --- */
|
|
.sh-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; }
|
|
.sh-box-warn { background: rgba(251, 191, 36, 0.12); border: 1px solid rgba(251, 191, 36, 0.45); }
|
|
.sh-box-info { background: var(--kb-purple-soft); border: 1px solid var(--kb-purple-line); }
|
|
.sh-hinweise:empty { display: none; }
|
|
.sh-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 */
|
|
.sh-meldung:empty { margin: 0; padding: 0; border: 0; }
|
|
.sh-meldung:focus { outline: none; }
|
|
.sh-meldung-ok { background: rgba(74, 222, 128, 0.1); border: 1px solid rgba(74, 222, 128, 0.4); }
|
|
.sh-meldung-fehler { background: rgba(248, 113, 113, 0.1); border: 1px solid rgba(248, 113, 113, 0.5); color: #fecaca; }
|
|
.sh-info p { margin: 0 0 12px; line-height: 1.55; color: var(--kb-muted); }
|
|
.sh-info p:last-child { margin-bottom: 0; }
|
|
|
|
/* ----------------------------------------------------------------- Reiter --- */
|
|
/* fuenf Reiter in einer Zeile; wenn der Platz nicht reicht (Handy), scrollt die Leiste waagerecht statt umzubrechen */
|
|
.sh-reiterleiste { display: flex; flex-wrap: nowrap; gap: 6px; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--kb-border); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
|
|
.sh-reiter {
|
|
flex: none; 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;
|
|
}
|
|
.sh-reiter:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
|
|
.sh-reiter[aria-selected='true'] { color: #fff; background: var(--kb-purple-soft); border-color: var(--kb-purple-line); }
|
|
.sh-panel:focus { outline: none; }
|
|
|
|
/* ------------------------------------------------------------ Karten, Pillen --- */
|
|
.sh-abschnitt { margin-bottom: 16px; }
|
|
.sh-abschnitt h3 { margin-bottom: 4px; }
|
|
.sh-abschnitt h4 { margin: 18px 0 4px; font-size: 14.5px; }
|
|
.sh-abschnitt-text { margin: 0 0 14px; line-height: 1.55; }
|
|
.sh-pille { display: inline-block; margin-bottom: 8px; padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
|
|
.sh-pille-ok { color: #86efac; background: rgba(74, 222, 128, 0.1); border: 1px solid rgba(74, 222, 128, 0.4); }
|
|
.sh-pille-wait { color: #fcd34d; background: rgba(251, 191, 36, 0.1); border: 1px solid rgba(251, 191, 36, 0.4); }
|
|
.sh-pille-off { color: var(--kb-muted); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--kb-border-strong); }
|
|
.sh-pille-bad { color: #fca5a5; background: rgba(248, 113, 113, 0.1); border: 1px solid rgba(248, 113, 113, 0.45); }
|
|
.sh-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
|
|
.sh-fakten { display: grid; gap: 8px; margin: 12px 0 0; }
|
|
.sh-fakten > div { display: grid; grid-template-columns: minmax(120px, 190px) minmax(0, 1fr); gap: 4px 14px; }
|
|
.sh-fakten dt { font-size: 13px; font-weight: 600; color: var(--kb-muted); }
|
|
.sh-fakten dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
|
|
.sh-begruendung { margin: 0 0 12px; padding: 10px 14px; border-left: 3px solid var(--kb-purple-line); background: rgba(255, 255, 255, 0.04); border-radius: 0 10px 10px 0; line-height: 1.55; overflow-wrap: anywhere; white-space: pre-wrap; }
|
|
.sh-zusammenfassung { margin-top: 16px; }
|
|
.sh-zusammenfassung h4 { margin: 0 0 4px; font-size: 14.5px; }
|
|
|
|
/* ------------------------------------------------------------------ Anfrage --- */
|
|
.sh-anfrage h3 { margin-bottom: 6px; }
|
|
.sh-erklaerung p { margin: 0 0 10px; line-height: 1.55; color: var(--kb-muted); }
|
|
.sh-erklaerung ul { margin: 0 0 12px; padding-left: 20px; line-height: 1.6; }
|
|
.sh-erklaerung li { margin-bottom: 4px; }
|
|
.sh-form { margin-top: 18px; padding-top: 6px; border-top: 1px solid var(--kb-border); }
|
|
|
|
/* ------------------------------------------------------------------ Formulare --- */
|
|
.sh-feld { display: grid; gap: 6px; margin: 12px 0 0; min-width: 0; }
|
|
.sh-feld > label, .sh-label { font-size: 13px; font-weight: 600; }
|
|
.sh-feld input:not([type=checkbox]):not([type=radio]), .sh-feld select, .sh-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;
|
|
}
|
|
.sh-feld select option { color: #111; }
|
|
.sh-feld [aria-invalid='true'] { border-color: #f87171; }
|
|
.sh-feld input:focus, .sh-feld select:focus, .sh-feld textarea:focus { border-color: var(--kb-purple-line); box-shadow: 0 0 0 3px var(--kb-purple-soft); }
|
|
.sh-hinweis { margin: 0; font-size: 12.5px; color: var(--kb-muted); }
|
|
.sh-fehler { margin: 0; font-size: 13px; color: #fca5a5; }
|
|
.sh-fehler:empty { display: none; }
|
|
.sh-gruppe { margin: 14px 0 0; padding: 0; border: 0; min-width: 0; }
|
|
.sh-gruppe legend { padding: 0; font-size: 13px; font-weight: 600; }
|
|
.sh-haken { display: flex; align-items: flex-start; gap: 10px; margin: 8px 0 4px; font-size: 14px; line-height: 1.5; cursor: pointer; }
|
|
.sh-haken input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--kb-purple); }
|
|
.sh-haken > span { font-weight: 600; }
|
|
.sh-haken small { display: block; margin-top: 2px; font-weight: 400; }
|
|
.sh-feld-haken { margin-top: 4px; }
|
|
.sh-radiogruppe { border: 0; padding: 0; margin: 0 0 8px; min-width: 0; }
|
|
.sh-radiogruppe legend { padding: 0; font-weight: 600; font-size: 14px; }
|
|
.sh-frage-box { display: grid; gap: 10px; margin: 12px 0; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--kb-purple-line); background: var(--kb-purple-soft); }
|
|
.sh-frage-box:focus { outline: none; }
|
|
|
|
/* ----------------------------------------------------------------- Handy --- */
|
|
@media (max-width: 880px), (pointer: coarse) {
|
|
#view-webshop button, #view-webshop .kb-btn-outline, #view-webshop .kb-btn-primary { min-height: 44px; }
|
|
.sh-haken { align-items: center; min-height: 44px; margin-top: 0; margin-bottom: 0; }
|
|
.sh-haken input { margin-top: 0; }
|
|
}
|
|
@media (max-width: 600px) {
|
|
.sh-fakten > div { grid-template-columns: minmax(0, 1fr); }
|
|
.sh-aktionen > * { flex: 1 1 auto; }
|
|
}
|
|
|
|
/* Reiter Übersicht (shop-tab-uebersicht.js) */
|
|
.sh-checkliste, .sh-stripe-status, .sh-erklaerung-liste { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 6px; }
|
|
.sh-checkliste li, .sh-stripe-status li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; }
|
|
.sh-checkliste .sh-haken-zeichen { flex: none; width: 20px; text-align: center; font-weight: 700; }
|
|
.sh-checkliste .sh-ok .sh-haken-zeichen { color: #86efac; }
|
|
.sh-checkliste .sh-offen .sh-haken-zeichen { color: var(--kb-muted); }
|
|
.sh-stripe-status .sh-ok { color: #86efac; }
|
|
.sh-stripe-status .sh-offen { color: #fcd34d; }
|
|
.sh-erklaerung-liste { list-style: disc; padding-left: 20px; display: block; line-height: 1.6; color: var(--kb-muted); }
|
|
.sh-erklaerung-liste li { margin-bottom: 4px; }
|
|
.sh-zustand { margin: 12px 0 0; font-weight: 600; }
|
|
.sh-zustand-offen { color: #86efac; }
|
|
.sh-zustand-zu { color: var(--kb-muted); }
|
|
.sh-code { margin: 0 0 8px; padding: 12px 14px; overflow-x: auto; border-radius: 10px; border: 1px solid var(--kb-border-strong); background: rgba(0, 0, 0, 0.25); font-size: 13px; line-height: 1.5; white-space: pre; }
|
|
.sh-code code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
|
|
a.kb-btn-outline { display: inline-flex; align-items: center; text-decoration: none; }
|
|
|
|
/* Reiter Rechtliches (shop-tab-rechtliches.js) */
|
|
.sh-gewaehrleistung-bild { display: block; max-width: 100%; height: auto; margin: 0 0 12px; border-radius: 8px; background: #fff; }
|
|
.sh-rechtliches textarea { font-family: inherit; line-height: 1.5; }
|
|
|
|
/* Reiter Bestellungen */
|
|
.sh-umschalter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
|
|
.sh-umschalter [aria-pressed='true'] { background: var(--kb-purple-soft); border-color: var(--kb-purple-line); color: #fff; }
|
|
.sh-werkzeug { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
|
|
.sh-werkzeug .sh-feld { margin: 0; flex: 1 1 200px; }
|
|
.sh-liste { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
|
|
.sh-zeile {
|
|
display: grid; grid-template-columns: minmax(80px, 110px) minmax(110px, 150px) minmax(0, 1fr) minmax(70px, 90px) minmax(80px, 100px) auto; align-items: center; gap: 6px 12px;
|
|
width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--kb-border-strong); background: rgba(255, 255, 255, 0.04);
|
|
color: inherit; font: inherit; font-size: 14px; text-align: left; cursor: pointer;
|
|
}
|
|
.sh-zeile:hover { background: rgba(255, 255, 255, 0.08); }
|
|
.sh-zeile .sh-pille { margin: 0; justify-self: start; }
|
|
.sh-zeile-name, .sh-zeile-art { overflow-wrap: anywhere; }
|
|
.sh-zeile-summe { font-weight: 700; }
|
|
.sh-zeile-warnung { grid-column: 1 / -1; font-size: 12.5px; color: #fcd34d; }
|
|
.sh-seiten { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
|
|
.sh-zurueck { margin-bottom: 14px; }
|
|
.sh-positionen, .sh-verlauf { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 6px; }
|
|
.sh-positionen li { display: flex; justify-content: space-between; gap: 12px; line-height: 1.5; }
|
|
.sh-positionen li > span:first-child { overflow-wrap: anywhere; }
|
|
.sh-verlauf li { display: grid; grid-template-columns: minmax(130px, 170px) minmax(0, 1fr); gap: 4px 12px; line-height: 1.5; }
|
|
.sh-verlauf-zeit { color: var(--kb-muted); font-size: 13px; }
|
|
.sh-aktionen-bereich:empty, .sh-erstatten-frage:empty { display: none; }
|
|
.sh-widerruf { padding: 14px 16px; border-radius: 12px; border: 1px solid var(--kb-border-strong); background: rgba(255, 255, 255, 0.04); }
|
|
.sh-widerruf .sh-fakten { margin-top: 0; }
|
|
@media (max-width: 700px) {
|
|
.sh-zeile { grid-template-columns: minmax(0, 1fr) auto; }
|
|
.sh-verlauf li { grid-template-columns: minmax(0, 1fr); }
|
|
}
|
|
|
|
/* ----------------------------------------------------- Artikel (shop-tab-artikel.js) --- */
|
|
.sh-artikelliste { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
|
|
.sh-artikel { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; padding: 12px; border-radius: 12px; border: 1px solid var(--kb-border); background: rgba(255, 255, 255, 0.03); }
|
|
.sh-artikel-bild { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: rgba(255, 255, 255, 0.06); display: block; }
|
|
.sh-artikel-info { display: grid; gap: 2px; min-width: 0; }
|
|
.sh-artikel-name { overflow-wrap: anywhere; }
|
|
.sh-artikel-preis { font-variant-numeric: tabular-nums; }
|
|
.sh-artikel-bestand { font-size: 13px; color: var(--kb-muted); }
|
|
.sh-artikel-aus { color: #fca5a5; }
|
|
.sh-artikel-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: flex-end; }
|
|
.sh-schalter { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
|
|
.sh-schalter input { width: 18px; height: 18px; accent-color: var(--kb-purple); }
|
|
.sh-artikel .sh-frage-box { grid-column: 1 / -1; margin: 4px 0 0; }
|
|
.sh-artikel-editor .sh-abschnitt { margin-bottom: 16px; }
|
|
.sh-einklappbar > summary { cursor: pointer; padding: 2px 0; }
|
|
.sh-einklappbar > summary strong { font-size: 17px; }
|
|
.sh-einklappbar[open] > summary { margin-bottom: 6px; }
|
|
.sh-untergruppe[hidden], .sh-feld[hidden], .sh-abschnitt[hidden] { display: none; }
|
|
.sh-grundpreis { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 0 14px; }
|
|
.sh-wertzeile { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 0 12px; align-items: end; margin-bottom: 4px; }
|
|
.sh-wertzeile > button { margin-bottom: 2px; }
|
|
.sh-bilder { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
|
|
.sh-bild { display: grid; gap: 6px; justify-items: start; padding: 10px; border-radius: 12px; border: 1px solid var(--kb-border); }
|
|
.sh-bild img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; }
|
|
.sh-bild .sh-pille { margin-bottom: 0; }
|
|
.sh-bild .sh-aktionen { margin-top: 0; }
|
|
@media (max-width: 600px) {
|
|
.sh-artikel { grid-template-columns: 56px minmax(0, 1fr); }
|
|
.sh-artikel-aktionen { grid-column: 1 / -1; justify-content: flex-start; }
|
|
.sh-grundpreis, .sh-wertzeile { grid-template-columns: minmax(0, 1fr); }
|
|
}
|