/* ════════════════════════════════════════════════════════════════════ Tischreservierung Pro (S3a) — tabs, Tagesplan/Liste/Woche, popover. All selectors rsv-prefixed; colors from the design tokens plus a local status palette (mapping per design export: Angefragt amber, Bestätigt blue, Angekommen teal, Am Tisch green, Fertig gray, Storniert red-outline, No-Show dark red). ════════════════════════════════════════════════════════════════════ */ /* popover mounts on , outside #section-raumplan — scope tokens there too */ #section-raumplan, .rsv-popover-overlay { --rsv-st-pending: #b45309; --rsv-st-confirmed: #2563eb; --rsv-st-arrived: #0d9488; --rsv-st-seated: #15875a; --rsv-st-completed: #6b7280; --rsv-st-cancelled: #d8362a; --rsv-st-noShow: #7f1d1d; } /* dark: brighter status hues so tinted-block text stays legible */ .theme-dark #section-raumplan, .theme-dark .rsv-popover-overlay { --rsv-st-pending: #f59e0b; --rsv-st-confirmed: #60a5fa; --rsv-st-arrived: #2dd4bf; --rsv-st-seated: #34d399; --rsv-st-completed: #9ca3af; --rsv-st-cancelled: #f87171; --rsv-st-noShow: #dc2626; } /* ── shared --st mapping: any element carrying rsv-st- exposes its status color as --st; component rules below consume var(--st, neutral), so unmapped statuses (e.g. legacy "served") degrade to grey instead of rendering unstyled. Per-status exceptions live next to their component. */ .rsv-st-pending { --st: var(--rsv-st-pending); } .rsv-st-confirmed { --st: var(--rsv-st-confirmed); } .rsv-st-arrived { --st: var(--rsv-st-arrived); } .rsv-st-seated { --st: var(--rsv-st-seated); } .rsv-st-completed { --st: var(--rsv-st-completed); } .rsv-st-cancelled { --st: var(--rsv-st-cancelled); } .rsv-st-noShow { --st: var(--rsv-st-noShow); } /* ── tab bar (flat underline, design export 02/03) ── */ .rsv-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line, #e5e5e5); margin: 2px 0 18px; overflow-x: auto; /* four tabs overflow ~480px screens; no wrap fallback */ } .rsv-tab { position: relative; display: flex; align-items: center; gap: 8px; padding: 12px 16px 14px; background: none; border: none; font: inherit; font-size: var(--fs-body, 14px); font-weight: 600; letter-spacing: -0.01em; color: var(--ink-2, #555); cursor: pointer; } .rsv-tab:hover { color: var(--ink, #111); } .rsv-tab.active { color: var(--ink, #111); } /* inset, rounded rule (design .trtab.active::after) — not a full-width border */ .rsv-tab.active::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--solid, #111); } .rsv-tab .rsv-tab-badge { display: inline-block; background: color-mix(in srgb, var(--rsv-st-pending) 15%, transparent); color: var(--rsv-st-pending); border-radius: 999px; font-size: 11px; font-weight: 700; padding: 1px 7px; min-width: 18px; text-align: center; } /* ── Pro-Leiste (Entwurf `.upsell`, 20_tr-merchant.jsx:109) ── Getoente Karte mit Rahmen statt einer schlichten `.lp-card`. Das `--accent` des Entwurfs ist in diesem Dashboard `--solid` — Kachel und Tönung bleiben damit schwarz-auf-weiss und drehen sich mit dem Thema. § 5: eingeklappt OHNE Funktionsliste. Die Liste steht nicht auf `display:none`, sie wird erst beim Aufklappen gebaut. */ .rsv-up { padding: 26px; border: 1px solid color-mix(in srgb, var(--solid) 30%, var(--line)); border-radius: var(--r-card); background: linear-gradient( 180deg, color-mix(in srgb, var(--solid) 6%, var(--card)), var(--card) ); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 18px; } .rsv-up-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; } .rsv-up-head h3 { margin: 0; font-size: var(--fs-h1, 21px); font-weight: 800; letter-spacing: -0.025em; } .rsv-up-ic { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 14px; display: grid; place-items: center; background: var(--solid); color: var(--solid-ink, #fff); } /* Nimmt den Platz zwischen Kachel und Knoepfen — sonst kleben Titel und Preiszeile an der Kachel und die Knoepfe stehen mittig statt rechts. */ .rsv-up-t { flex: 1; min-width: 220px; } .rsv-up-price { margin-top: 4px; font-size: var(--fs-sm, 13px); font-weight: 600; color: var(--ink-2, #555); } .rsv-up-act { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* Der Pfeil dreht sich, sobald die Liste offen ist — dieselbe Geste wie im Entwurf (`transform: rotate(180deg)`). */ .rsv-up.is-open .rsv-up-more svg:last-child { transform: rotate(180deg); } .rsv-up-more svg:last-child { transition: transform 0.15s ease; } /* ── aufgeklappt: Funktionen nach Gruppen (Entwurf `.upsell-groups`) ── */ .rsv-up-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px 26px; } .rsv-ug { min-width: 0; } .rsv-ug-h { display: flex; align-items: center; gap: 8px; padding-bottom: 9px; margin-bottom: 9px; border-bottom: 1px solid var(--line); font-size: var(--fs-sm, 13px); font-weight: 800; letter-spacing: -0.01em; } .rsv-ug-ic { width: 24px; height: 24px; flex: none; border-radius: 7px; display: grid; place-items: center; background: color-mix(in srgb, var(--solid) 12%, transparent); color: var(--solid); } .rsv-ug-n { margin-left: auto; font-size: var(--fs-xs, 11px); font-weight: 700; color: var(--ink-3, #888); } .rsv-ug-l { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; } .rsv-ug-l li { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-sm, 13px); font-weight: 550; line-height: 1.45; color: var(--ink-2, #555); text-wrap: pretty; } .rsv-ug-l svg { flex: none; margin-top: 2px; } .rsv-up-note { padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--r-ctl, 8px); background: var(--hover, #f5f5f5); font-size: var(--fs-sm, 13px); font-weight: 500; line-height: 1.5; color: var(--ink-2, #555); display: flex; align-items: flex-start; gap: 11px; } .rsv-up-note svg { flex: none; margin-top: 1px; } @media (max-width: 640px) { .rsv-up-groups { grid-template-columns: 1fr; } } /* ── Pro-Karte in den EINSTELLUNGEN (reservations-settings.js:509) ── NICHT die Leiste im Tischplan — die ist `.rsv-up*` weiter oben. Diese Klassen sahen nach dem Umbau der Leiste wie tote Reste aus; sie sind es nicht, die Einstellungen zeichnen damit ihre 49,99-€-Pro-Karte. Tinted, bordered card rather than a plain .lp-card. The design's --accent is this dashboard's monochrome --solid, so the tile/tint stay black-on-white in light and invert with the theme. */ .rsv-upsell-card { padding: 26px; margin-bottom: 14px; border: 1px solid color-mix(in srgb, var(--solid) 30%, var(--line)); background: linear-gradient( 180deg, color-mix(in srgb, var(--solid) 6%, var(--card)), var(--card) ); } .rsv-upsell-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; } .rsv-upsell-head h3 { margin: 0; font-size: var(--fs-h1, 21px); font-weight: 800; letter-spacing: -0.025em; } .rsv-upsell-ic { width: 52px; height: 52px; border-radius: var(--r-ctl, 10px); background: var(--solid, #111); color: var(--solid-ink, #fff); display: flex; align-items: center; justify-content: center; flex: none; } .rsv-upsell-head > div:nth-child(2) { flex: 1; min-width: 220px; } .rsv-upsell-price { margin-top: 4px; font-size: var(--fs-sm, 13px); font-weight: 600; color: var(--ink-2, #555); } .rsv-upsell-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 22px; margin-top: 18px; } .rsv-upsell-feat { display: flex; align-items: flex-start; gap: 10px; } .rsv-upsell-check { flex: 0 0 20px; margin-top: 1px; color: var(--ink, #111); display: inline-flex; } .rsv-upsell-feat-t { font-size: var(--fs-sm, 13px); font-weight: 600; color: var(--ink, #111); } .rsv-upsell-feat-s { margin-top: 1px; font-size: var(--fs-xs, 11px); font-weight: 500; color: var(--ink-2, #555); } .rsv-upsell-note { margin-top: 18px; padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--r-ctl, 8px); background: var(--hover, #f5f5f5); font-size: var(--fs-sm, 13px); font-weight: 500; line-height: 1.5; color: var(--ink-2, #555); display: flex; align-items: flex-start; gap: 11px; } .rsv-upsell-note svg { flex: none; margin-top: 1px; } @media (max-width: 640px) { .rsv-upsell-grid { grid-template-columns: 1fr; } } /* ── header (row 1: date nav + view segment + counts) ── */ .rsv-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* row 2, left-packed per export: lock + period filter + walk-in + new */ .rsv-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; margin-bottom: 12px; } /* service-period select, styled like a ghost .lp-btn */ .rsv-period-select { appearance: none; -webkit-appearance: none; height: 36px; padding: 0 30px 0 14px; border-radius: var(--r-ctl, 10px); border: 1px solid var(--line-2, var(--line, #ddd)); background: var(--card, #fff); color: var(--ink, #111); font-size: var(--fs-sm, 13px); font-weight: 600; letter-spacing: -0.01em; font-family: inherit; cursor: pointer; /* chevron drawn with currentColor so it follows light/dark ink */ background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; } .rsv-period-select:hover { background-color: var(--hover, #f5f5f5); } .rsv-period-select:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; } .rsv-count { font-size: 13px; color: var(--ink-2, #555); } .rsv-badge-anfragen { padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--rsv-st-pending) 16%, transparent); color: var(--rsv-st-pending); font-size: 12px; font-weight: 700; } .rsv-lock-stub { opacity: 0.65; } /* ── Tagesplan timeline (design export 03) ── --tl-q is set inline by _renderTagesplan(): the 15-min step as % of lane width. The gridline gradients below derive from it so CSS lines land exactly where the JS px↔time math (_tlPct) puts blocks. */ .rsv-tl-card { padding: 0 0 4px; /* the card is the scrollport in BOTH axes: internal vertical scroll is what makes the sticky axis header actually stick (with document-level scrolling it would just scroll away). Axis and lanes share this one scroller, so horizontal scroll stays in sync on narrow viewports. */ overflow: auto; max-height: calc(100vh - 280px); min-height: 320px; } .rsv-tl-head, .rsv-tl-row { display: grid; grid-template-columns: 150px 1fr; min-width: 640px; } .rsv-tl-head { height: 36px; border-bottom: 1px solid var(--line, #e5e5e5); position: sticky; top: 0; z-index: 5; background: var(--card, #fff); border-radius: inherit; } .rsv-tl-cap { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3, #888); } .rsv-tl-axis { position: relative; } .rsv-tl-axis-h { position: absolute; top: 50%; transform: translateY(-50%); margin-left: 7px; font-size: 11px; color: var(--ink-3, #888); white-space: nowrap; } .rsv-tl-area { background: var(--hover, #f5f5f5); padding: 6px 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3, #888); border-bottom: 1px solid var(--line, #eee); } .rsv-tl-row { height: 52px; border-bottom: 1px solid var(--line, #eee); } .rsv-tl-row:last-child { border-bottom: none; } .rsv-tl-tname { display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 0 8px 0 12px; } .rsv-tl-tname b { font-size: 14px; font-weight: 600; } .rsv-tl-tname span { font-size: 11px; color: var(--ink-3, #888); } .rsv-tl-lane { position: relative; /* hour lines solid, 15-min steps at ~50% opacity — no labeled cells */ background-image: repeating-linear-gradient( 90deg, var(--line, #e5e5e5) 0 1px, transparent 1px calc(var(--tl-q, 6.25%) * 4) ), repeating-linear-gradient( 90deg, color-mix(in srgb, var(--line, #e5e5e5) 50%, transparent) 0 1px, transparent 1px var(--tl-q, 6.25%) ); } .rsv-now { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--danger, #d8362a); z-index: 3; pointer-events: none; } /* dot where the line crosses each row separator (one per row = every boundary); tracks the same left% as the line itself */ .rsv-now::before { content: ""; position: absolute; top: -2.5px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: var(--danger, #d8362a); } .rsv-block { position: absolute; top: 7px; bottom: 7px; border-radius: 8px; padding: 5px 10px; overflow: hidden; cursor: pointer; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: 0; /* tinted card: status-colored text on a light status tint (via --st) */ background: color-mix(in srgb, var(--st, var(--ink-3, #888)) 12%, var(--card, #fff)); border: 1px solid color-mix(in srgb, var(--st, var(--ink-3, #888)) 35%, transparent); color: var(--st, var(--ink-2, #555)); } .rsv-block b { font-size: 12.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rsv-block .rsv-b2 { font-size: 11px; opacity: 0.75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* per-status exceptions: completed lighter, cancelled outline-only */ .rsv-block.rsv-st-completed { background: color-mix(in srgb, var(--st) 8%, var(--card, #fff)); border-color: color-mix(in srgb, var(--st) 30%, transparent); } .rsv-block.rsv-st-cancelled { background: transparent; border-color: var(--st); } .rsv-block.conflict { outline: 2px solid var(--danger, #d8362a); outline-offset: 1px; } .rsv-conflict-tag { position: absolute; top: -1px; right: -1px; background: var(--danger, #d8362a); color: #fff; font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 0 8px 0 8px; } /* legend */ .rsv-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: var(--ink-2, #555); } .rsv-legend-i { display: inline-flex; align-items: center; gap: 6px; } .rsv-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--st, var(--ink-3, #888)); } .rsv-dot.rsv-st-cancelled { background: transparent; border: 1.5px solid var(--st); } /* ── Liste (design 04: separated row cards) ── */ .rsv-li-card { display: grid; grid-template-columns: 52px 64px 1fr 64px 150px 110px 120px 24px; gap: 12px; align-items: center; padding: 14px 16px; background: var(--card, #fff); border: 1px solid var(--line, #eee); border-radius: 10px; margin-bottom: 8px; cursor: pointer; transition: background 0.12s, box-shadow 0.12s; } .rsv-li-card:hover { background: var(--hover, #f7f7f7); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } .rsv-li-card:last-child { margin-bottom: 0; } .rsv-li-time { display: flex; flex-direction: column; line-height: 1.25; } .rsv-li-time b { font-size: 15px; } .rsv-li-time span { font-size: 12px; color: var(--ink-3, #888); } .rsv-li-guest { min-width: 0; } .rsv-li-name { font-weight: 600; font-size: 14.5px; display: flex; align-items: center; gap: 5px; } .rsv-li-meta { margin-top: 3px; font-size: 12.5px; color: var(--ink-2, #555); display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; min-width: 0; } .rsv-li-anlass { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; } .rsv-li-sep { color: var(--ink-3, #888); flex-shrink: 0; } .rsv-li-note { overflow: hidden; text-overflow: ellipsis; min-width: 0; } .rsv-li-table { font-weight: 700; font-size: 14px; } .rsv-li-phone { font-size: 13px; color: var(--ink-2, #555); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rsv-li-cell { display: flex; align-items: center; gap: 6px; } .rsv-li-src { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line, #eee); border-radius: 999px; font-size: 12px; color: var(--ink-2, #555); white-space: nowrap; } .rsv-li-st { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; background: color-mix(in srgb, var(--st, var(--ink-3, #888)) 12%, var(--card, #fff)); color: var(--st, var(--ink-2, #555)); } .rsv-li-st i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .rsv-li-chev { display: inline-flex; color: var(--ink-3, #888); justify-self: end; } /* popover chip dot inherits --st from the rsv-st-* class on .rsv-chip */ .rsv-chip .lp-dot { background: var(--st, var(--ink-3, #888)); } @media (max-width: 760px) { .rsv-li-card { grid-template-columns: 52px 64px 1fr 120px 24px; } .rsv-li-table, .rsv-li-phone, .rsv-li-srccell { display: none; } } /* ── Woche ── */ .rsv-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; } .rsv-week-head { font-size: 12px; font-weight: 700; margin-bottom: 6px; } .rsv-week-cell { border-radius: 8px; padding: 8px; margin-bottom: 6px; background: color-mix( in srgb, var(--rsv-st-confirmed) calc(var(--heat, 0) * 55%), var(--hover, #f5f5f5) ); display: flex; flex-direction: column; gap: 2px; } .rsv-week-cell b { font-size: 14px; } .rsv-week-period { font-size: 10.5px; color: var(--ink-2, #555); } .rsv-week-closed { font-size: 11.5px; color: var(--ink-3, #999); padding: 8px 0; } @media (max-width: 760px) { .rsv-week { grid-template-columns: repeat(2, 1fr); } } /* ── popover ── */ .rsv-popover-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); z-index: 300; display: flex; align-items: center; justify-content: center; padding: 16px; } .rsv-popover { width: 100%; max-width: 420px; padding: 16px; } .rsv-pop-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .rsv-pop-head b { font-size: 15px; display: block; margin-bottom: 6px; } .rsv-pop-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line, #f0f0f0); font-size: 13px; } .rsv-pop-row span { color: var(--ink-3, #888); flex: none; } .rsv-pop-row b { font-weight: 600; text-align: right; overflow-wrap: anywhere; } .rsv-pop-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; } .rsv-btn-danger { color: var(--danger, #d8362a); border-color: color-mix(in srgb, var(--danger, #d8362a) 45%, transparent); } /* ── placeholders / empty states ── */ .rsv-placeholder, .rsv-empty { text-align: center; padding: 34px 18px; } .rsv-placeholder-ic { width: 52px; height: 52px; margin: 0 auto 10px; border-radius: 14px; background: var(--hover, #f5f5f5); display: flex; align-items: center; justify-content: center; color: var(--ink-2, #555); } .rsv-placeholder h3, .rsv-empty h3 { margin: 0 0 6px; } .rsv-placeholder p, .rsv-empty p { color: var(--ink-2, #555); font-size: 13px; max-width: 420px; margin: 0 auto 14px; } /* ── S3b: modal / stepper / pills (design export 09) ── */ .rsv-modal { width: 100%; max-width: 580px; max-height: 90vh; overflow-y: auto; padding: 0; } .rsv-modal-sm { max-width: 440px; } /* header: eyebrow over 20px title, square ghost × */ .rsv-modal .rsv-pop-head { padding: 20px 24px 12px; margin-bottom: 0; } .rsv-m-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3, #888); } .rsv-m-title { font-size: 20px; font-weight: 700; letter-spacing: -0.015em; margin-top: 3px; color: var(--ink, #111); } .rsv-m-x { width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; flex: none; } .rsv-modal-body { display: flex; flex-direction: column; gap: 14px; padding: 4px 24px 20px; } .rsv-field { display: flex; flex-direction: column; gap: 4px; position: relative; } .rsv-field > span { font-size: 11.5px; font-weight: 700; color: var(--ink-3, #888); text-transform: uppercase; letter-spacing: 0.03em; } .rsv-field input, .rsv-field select, .rsv-field textarea { padding: 8px 10px; border: 1px solid var(--line, #ddd); border-radius: 8px; font: inherit; background: var(--card, #fff); color: inherit; } /* modal-scoped field tuning (settings/guests tabs keep the base look) */ .rsv-modal .rsv-field { gap: 6px; } .rsv-modal .rsv-field > span { font-size: 10.5px; letter-spacing: 0.07em; } .rsv-modal .rsv-field input, .rsv-modal .rsv-field select, .rsv-modal .rsv-field textarea { padding: 10px 12px; font-size: 14px; } .rsv-modal .rsv-field input:focus-visible, .rsv-modal .rsv-field select:focus-visible, .rsv-modal .rsv-field textarea:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; } .rsv-modal .rsv-field textarea { resize: vertical; min-height: 70px; } .rsv-field-row { display: flex; gap: 10px; } .rsv-field-row .rsv-field { flex: 1; min-width: 0; } .rsv-field-row .rsv-narrow { flex: 0 0 90px; } .rsv-modal .rsv-field-row .rsv-narrow { flex: 0 0 110px; } /* Kürzel (export 09) */ .rsv-grow { flex: 1; } /* Gast input with leading search icon */ .rsv-m-inwrap { position: relative; display: flex; } .rsv-m-inwrap > svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-3, #888); pointer-events: none; } /* modal-scoped so the icon inset outranks `.rsv-modal .rsv-field input` structurally (specificity), not by source order */ .rsv-modal .rsv-field .rsv-m-inwrap input { flex: 1; min-width: 0; padding-left: 36px; } .rsv-stepper { display: inline-flex; align-items: center; gap: 12px; border: 1px solid var(--line, #ddd); border-radius: 8px; padding: 4px 8px; } /* shared stepper-button base (modal .rsv-stepper + settings .rsv-set-stepper); size/radius differ per variant below */ .rsv-stepper button, .rsv-set-stepper button { border: none; background: var(--hover, #f2f2f2); font-size: 17px; line-height: 1; color: inherit; cursor: pointer; } .rsv-stepper button { width: 30px; height: 30px; border-radius: 7px; } .rsv-stepper b { min-width: 22px; text-align: center; } /* modal stepper spreads − · n · + across the grid cell (export 09) */ .rsv-modal .rsv-stepper { display: flex; justify-content: space-between; padding: 4px 6px; } .rsv-modal .rsv-stepper button { background: transparent; color: var(--ink-2, #555); border-radius: 6px; } .rsv-modal .rsv-stepper button:hover { background: var(--hover, #f2f2f2); } .rsv-modal .rsv-stepper button:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 1px; } .rsv-modal .rsv-stepper b { font-size: 15px; } .rsv-pills { display: flex; gap: 8px; flex-wrap: wrap; } .rsv-pill { padding: 9px 16px; border-radius: 9px; border: 1px solid var(--line, #ddd); background: var(--card, #fff); font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink-2, #555); cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s; } .rsv-pill:hover { background: var(--hover, #f5f5f5); } .rsv-pill.active { background: var(--accent, #111); border-color: var(--accent, #111); color: var(--accent-ink, #fff); } .rsv-pill:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; } /* full slot ("20:00 · voll") — soft-block: red but still selectable, the CTA flips to "Trotzdem buchen" (pre-existing overbooking flow) */ .rsv-slot.blocked { border-color: var(--rsv-st-cancelled, #d8362a); color: var(--rsv-st-cancelled, #d8362a); background: var(--card, #fff); } .rsv-slot.blocked:hover { background: color-mix(in srgb, var(--rsv-st-cancelled, #d8362a) 9%, transparent); } .rsv-slot.blocked.active { background: var(--rsv-st-cancelled, #d8362a); border-color: var(--rsv-st-cancelled, #d8362a); color: #fff; } .rsv-slot-hint { font-size: 12px; color: var(--ink-3, #888); } .rsv-warn-hint { font-size: 12.5px; color: var(--danger, #d8362a); font-weight: 600; } .rsv-btn-warn { background: var(--danger, #d8362a) !important; border-color: var(--danger, #d8362a) !important; color: #fff !important; } /* guest suggestions + matched card (avatar · name · POS meta · chip) */ .rsv-guest-hits { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; background: var(--card, #fff); border: 1px solid var(--line, #ddd); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); overflow: hidden; } .rsv-guest-hit { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: none; background: none; font: inherit; text-align: left; cursor: pointer; } .rsv-guest-hit:hover { background: var(--hover, #f5f5f5); } .rsv-guest-hit + .rsv-guest-hit { border-top: 1px solid var(--line, #f0f0f0); } .rsv-m-guest { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line, #eee); border-radius: 10px; background: var(--hover, #f7f7f7); } .rsv-m-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--accent, #111); color: var(--accent-ink, #fff); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; flex: none; } .rsv-m-ginfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .rsv-m-ginfo b { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rsv-m-gmeta { font-size: 12.5px; color: var(--ink-2, #555); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rsv-m-gsrc { flex: none; font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 7px; background: color-mix(in srgb, var(--ink, #111) 8%, transparent); color: var(--ink-2, #555); } .rsv-guest-ctx { font-size: 12px; color: var(--ink-2, #555); } .rsv-guest-ctx:empty { display: none; } .rsv-blocked-chip { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--danger, #d8362a) 14%, transparent); color: var(--danger, #d8362a); } /* footer: right-aligned Abbrechen ghost + primary, divider above */ .rsv-m-foot { justify-content: flex-end; align-items: center; gap: 10px; margin-top: 0; padding: 14px 24px 18px; border-top: 1px solid var(--line, #eee); } .rsv-m-foot .rsv-warn-hint { margin-right: auto; } /* ── drag ── */ .rsv-block .rsv-resize { position: absolute; top: 0; right: 0; bottom: 0; width: 10px; cursor: ew-resize; } .rsv-block.rsv-dragging { opacity: 0.75; z-index: 6; outline: 2px dashed var(--accent, #111); touch-action: none; } .rsv-tl-row.rsv-drop-target { background: color-mix(in srgb, var(--accent, #111) 5%, transparent); } .rsv-block { touch-action: pan-y; } /* ── lock menu ── */ .rsv-lock-wrap { position: relative; } .lp-btn.rsv-lock-active { color: var(--warn, #b45309); border-color: var(--warn, #b45309); } .rsv-lock-menu { position: absolute; top: 100%; right: 0; z-index: 30; margin-top: 4px; background: var(--card, #fff); border: 1px solid var(--line, #ddd); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); display: flex; flex-direction: column; min-width: 170px; overflow: hidden; } .rsv-lock-menu button { padding: 9px 13px; border: none; background: none; font: inherit; font-size: 13px; text-align: left; cursor: pointer; } .rsv-lock-menu button:hover { background: var(--hover, #f5f5f5); } /* ── settings (design: SetCard = .card .card-pad + .card-h/.card-title) ── */ .rsv-settings { display: flex; flex-direction: column; gap: var(--gap, 18px); } .rsv-settings .rsv-set-card { padding: var(--pad-card, 20px); } /* sub-tab bar — same underline language as the section tabs, one level down. Getragen von ReservationsSettings.SET_TABS; Schichten/Kanäle/Extras liegen dort vorbereitet und erscheinen mit ihrem R3-Modul. */ .rsv-subtabs { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); margin: 2px 0 4px; flex-wrap: wrap; } /* PRO-Badge (design .pbadge.pro). HINWEIS: rein visuell. Es gibt bei uns keine Pro-Stufe im Addon-Modell — das Badge erscheint, sobald `tableReservations` aktiv ist, und setzt nichts durch. Wird die Stufe je eingeführt, ist HIER die Bedingung. */ .rsv-pbadge { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--r-pill, 999px); font-size: 10px; font-weight: 800; letter-spacing: 0.08em; background: var(--solid, #111); color: var(--solid-ink, #fff); margin-left: 2px; flex: none; } .page-title .rsv-pbadge { vertical-align: middle; margin-left: 8px; } /* segmented control (design .seg/.seg-i) — Rückmeldungen | Routing */ .rsv-seg { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--line); border-radius: var(--r-pill, 999px); background: var(--card, #fff); } .rsv-seg-i { appearance: none; border: 0; background: transparent; cursor: pointer; font: inherit; font-size: var(--fs-sm, 13px); font-weight: 600; color: var(--ink-2, #555); padding: 0 16px; height: 32px; border-radius: var(--r-pill, 999px); display: inline-flex; align-items: center; gap: 7px; } .rsv-seg-i:hover { color: var(--ink, #111); } /* Der Design-Token sagt --accent (violett), die gerenderten Vorlagen zeigen aber durchgehend #111 — gemessen an 01/03/18: Unterstreichungen (17,17,17) und Segment-Füllung (18,18,18). Maßgeblich ist das Gerenderte. */ .rsv-seg-i.active { background: var(--solid, #111); color: var(--solid-ink, #fff); } .rsv-fb-seg { align-self: flex-start; margin: 4px 0 2px; } .rsv-subtabs-spacer { flex: 1; } .rsv-subtab { position: relative; appearance: none; border: 0; background: none; cursor: pointer; font: inherit; font-size: var(--fs-body, 14px); font-weight: 600; letter-spacing: -0.01em; color: var(--ink-2); padding: 10px 14px 12px; display: inline-flex; align-items: center; gap: 7px; } .rsv-subtab:hover { color: var(--ink); } .rsv-subtab.active { color: var(--ink); } .rsv-subtab.active::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--solid, #111); } .rsv-subtabs .lp-btn { align-self: center; } /* card header: title left, muted meta right */ .rsv-set-h { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 4px; } .rsv-set-card h3 { margin: 0; font-size: var(--fs-h2, 15.5px); font-weight: 700; letter-spacing: -0.015em; } .rsv-set-meta { font-size: var(--fs-sm, 13px); color: var(--ink-3); font-weight: 500; white-space: nowrap; flex-shrink: 0; } .rsv-set-sub { font-size: var(--fs-sm, 13px); color: var(--ink-2, #555); margin: 0 0 14px; line-height: 1.5; } .rsv-set-sub-tight { margin: 3px 0 0; color: var(--ink-3); } /* "+ …" buttons sit under their list, never full width */ .rsv-set-add { margin-top: 12px; } .rsv-set-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 5px 0; font-size: 13.5px; } .rsv-in-sm { width: 70px; height: 40px; padding: 0 8px; border: 1px solid var(--line, #ddd); border-radius: 8px; font: inherit; background: var(--card, #fff); color: inherit; } .rsv-set-row select, .rsv-set-row input[type="text"], .rsv-set-row input[type="time"], .rsv-set-row input[type="date"] { height: 40px; padding: 0 10px; border: 1px solid var(--line, #ddd); border-radius: 8px; font: inherit; background: var(--card, #fff); color: inherit; } .rsv-period { border: 1px solid var(--line, #eee); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; } .rsv-period-ctl .rsv-field input, .rsv-period-ctl .rsv-field select { height: 40px; padding: 0 10px; } .rsv-period-del { align-self: flex-end; flex: none; height: 40px; padding: 0 13px; } .rsv-row-del { padding: 2px 9px; color: var(--danger, #d8362a); } /* weekday / area toggle chips: visually hidden checkbox + pill span; the checkbox keeps its data-wd/data-ns-wd/data-area hooks for _collect */ .rsv-chip-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 12px 0; } .rsv-chip-day { position: relative; display: inline-flex; } .rsv-chip-day input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; } .rsv-chip-day span { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 32px; padding: 0 11px; border: 1px solid var(--line, #ddd); border-radius: 999px; font-size: 12.5px; font-weight: 600; background: var(--card, #fff); color: var(--ink-2, #555); cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s; } .rsv-chip-day:hover span { background: var(--hover, #f5f5f5); } .rsv-chip-day input:checked + span { background: var(--accent, #111); border-color: var(--accent, #111); color: var(--accent-ink, #fff); } .rsv-chip-day input:focus-visible + span { outline: 2px solid color-mix(in srgb, var(--accent, #111) 55%, transparent); outline-offset: 2px; } /* Online-Buchungen: two side-by-side cards */ .rsv-set-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; } /* stepper wrapping the existing number input (borderless middle element) */ .rsv-set-stepper { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line, #ddd); border-radius: 10px; padding: 4px; } .rsv-set-stepper button { width: 36px; height: 32px; border-radius: 8px; } /* base ↑ shared with .rsv-stepper */ .rsv-set-stepper button:hover { background: var(--line, #e5e5e5); } .rsv-set-stepper button:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent, #111) 55%, transparent); outline-offset: 1px; } .rsv-set-stepper input { width: 54px; height: 32px; border: none; background: none; text-align: center; font: inherit; font-size: 15px; font-weight: 600; color: inherit; -moz-appearance: textfield; appearance: textfield; } .rsv-set-stepper input::-webkit-outer-spin-button, .rsv-set-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* ── Servicezeiten: one row per weekday, times as pills ── */ .rsv-days { display: flex; flex-direction: column; } .rsv-day { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--line); } .rsv-day:first-child { border-top: 0; } .rsv-day-l { flex: 0 0 34px; font-size: var(--fs-sm, 13px); font-weight: 700; } .rsv-day-times { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .rsv-day-spacer { flex: 1; } .rsv-timepill { appearance: none; border: 1px solid transparent; cursor: pointer; font: inherit; font-size: var(--fs-sm, 13px); font-weight: 600; color: var(--ink); background: var(--hover); padding: 8px 12px; border-radius: var(--r-ctl, 8px); transition: background 0.12s, border-color 0.12s; } .rsv-timepill:hover { background: var(--hover-2); border-color: var(--line-2); } .rsv-day-empty { font-size: var(--fs-sm, 13px); color: var(--ink-3); font-weight: 500; } .rsv-icon-btn { appearance: none; border: 0; background: none; cursor: pointer; width: 30px; height: 30px; flex: 0 0 30px; border-radius: var(--r-ctl, 8px); display: grid; place-items: center; color: var(--ink-2); transition: background 0.12s, color 0.12s; } .rsv-icon-btn:hover { background: var(--hover); color: var(--ink); } /* card-level selects (design: Slot-Intervall / Letzte Reservierung) */ .rsv-set-selects { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; } @media (max-width: 900px) { .rsv-set-selects { grid-template-columns: 1fr; } } .rsv-lblfield { display: flex; flex-direction: column; gap: 7px; min-width: 0; } .rsv-lbl { font-size: var(--fs-sm, 13px); color: var(--ink-2); font-weight: 600; } .rsv-input { width: 100%; height: 46px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: var(--r-ctl, 9px); background: var(--field); color: var(--ink); font: inherit; font-size: var(--fs-body, 14px); outline: 0; } .rsv-input:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); } /* read-only display rows (Anlässe, Wochentag-Sheet) */ .rsv-disp-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--line); } .rsv-disp-row:first-child { border-top: 0; } .rsv-disp-meta { font-size: var(--fs-sm, 13px); color: var(--ink-3); font-weight: 600; } .rsv-disp-v { font-size: var(--fs-sm, 13px); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .rsv-daylist { display: flex; flex-direction: column; } /* badge pill — display token for Anlässe and Sondertage */ .rsv-badge { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border: 0; border-radius: var(--r-pill, 999px); font: inherit; font-size: var(--fs-xs, 11px); font-weight: 700; white-space: nowrap; background: var(--hover); color: var(--ink-2); } button.rsv-badge { cursor: pointer; transition: background 0.12s, color 0.12s; } button.rsv-badge:hover { background: var(--hover-2); color: var(--ink); } .rsv-badge-accent { background: color-mix(in srgb, var(--solid) 12%, transparent); color: var(--ink); } .rsv-badge-amber { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); } .rsv-pillrow { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .rsv-note { margin-top: 10px; font-size: var(--fs-xs, 11px); color: var(--ink-3); font-weight: 500; line-height: 1.5; } .rsv-m-del { margin-right: auto; } /* stepper + trailing unit label (design: Stepper + "Gäste pro 15 Min online") */ .rsv-stepper-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .rsv-stepper-unit { font-size: var(--fs-sm, 13px); font-weight: 600; color: var(--ink); } /* Verweildauer — one compact card per rule (design: 3-up centred cards) */ .rsv-dur-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } @media (max-width: 900px) { .rsv-dur-grid { grid-template-columns: 1fr; } } .rsv-dur-card { appearance: none; cursor: pointer; font: inherit; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: var(--r-chip, 8px); padding: 16px; text-align: center; background: var(--card); color: var(--ink); transition: background 0.12s, border-color 0.12s; } .rsv-dur-card:hover { background: var(--hover); border-color: var(--line-2); } .rsv-dur-v { font-size: var(--fs-body, 14px); font-weight: 700; font-variant-numeric: tabular-nums; } .rsv-dur-k { font-size: var(--fs-sm, 13px); color: var(--ink-3); font-weight: 500; } /* No-Show rule builder — a sentence with inline editable tokens */ .rsv-rule { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--fs-body, 14px); font-weight: 600; line-height: 2.1; margin-top: 4px; } .rsv-tok { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: var(--r-ctl, 8px); border: 1px solid var(--solid, #111); background: color-mix(in srgb, var(--solid, #111) 8%, transparent); color: var(--ink); font-weight: 700; } .rsv-tok input { border: 0; background: none; font: inherit; font-weight: 700; color: inherit; padding: 0; width: 46px; text-align: right; outline: 0; -moz-appearance: textfield; appearance: textfield; } /* Chrome renders a clock affordance inside time inputs — needs the extra room */ .rsv-tok input[type="time"] { width: auto; min-width: 84px; text-align: center; } .rsv-tok input::-webkit-outer-spin-button, .rsv-tok input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .rsv-tok input:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; } /* info callout (design .callout) */ .rsv-callout { display: flex; align-items: flex-start; gap: 11px; margin-top: 14px; padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--r-ctl, 8px); background: var(--hover); font-size: var(--fs-sm, 13px); font-weight: 500; line-height: 1.5; color: var(--ink-2); } .rsv-callout svg { flex: none; margin-top: 1px; color: var(--ink-3); } /* switch rows (Auto-Bestätigung, Regel aktiv) */ .rsv-set-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; } .rsv-set-tlabel { font-size: var(--fs-body, 14px); font-weight: 700; } .rsv-set-actions { position: sticky; bottom: 12px; display: flex; justify-content: flex-end; } @media (max-width: 900px) { .rsv-set-grid2 { grid-template-columns: 1fr; } } /* ── Gäste master–detail (design export 05) ── */ .rsv-g-wrap { display: grid; grid-template-columns: 1fr 380px; gap: 16px; align-items: start; } .rsv-g-wrap.rsv-g-noselect { grid-template-columns: 1fr; } .rsv-g-searchwrap { position: relative; margin-bottom: 14px; } .rsv-g-searchwrap > svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--ink-3, #888); pointer-events: none; } .rsv-g-search { width: 100%; padding: 11px 14px 11px 38px; border: 1px solid var(--line, #ddd); border-radius: 10px; font: inherit; background: var(--card, #fff); color: inherit; } .rsv-g-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line, #ddd); border-radius: 10px; margin-bottom: 8px; background: var(--card, #fff); cursor: pointer; } .rsv-g-row:hover { background: var(--hover, #f7f7f7); } .rsv-g-row.selected { border: 1.5px solid var(--accent, #111); padding: 11.5px 13.5px; } .rsv-g-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--accent, #111); color: var(--accent-ink, #fff); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; flex: none; } .rsv-g-avatar.lg { width: 52px; height: 52px; font-size: 19px; } .rsv-g-info { flex: 1; min-width: 0; } .rsv-g-name { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 15px; font-weight: 600; } .rsv-g-tag { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--hover, #f0f0f0); color: var(--ink-2, #555); text-transform: capitalize; } .rsv-g-tag.vip { background: var(--accent, #111); color: var(--accent-ink, #fff); text-transform: uppercase; } .rsv-g-meta { margin-top: 3px; font-size: 12.5px; color: var(--ink-2, #555); } .rsv-g-total { font-size: 15px; font-weight: 700; white-space: nowrap; } .rsv-g-detail { border: 1px solid var(--line, #ddd); border-radius: 12px; background: var(--card, #fff); padding: 16px; position: sticky; top: 16px; } .rsv-g-dhead { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .rsv-g-dwho { flex: 1; min-width: 0; } .rsv-g-dname { font-size: 17px; font-weight: 700; } .rsv-g-dtags { display: flex; gap: 6px; margin-top: 5px; flex-wrap: wrap; } .rsv-g-close { padding: 7px 9px; flex: none; align-self: flex-start; } .rsv-g-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; } .rsv-g-stat { border: 1px solid var(--line, #eee); border-radius: 10px; padding: 12px 14px; } .rsv-g-stat span { display: block; font-size: 10.5px; font-weight: 700; color: var(--ink-3, #888); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; } .rsv-g-stat b { font-size: 22px; font-weight: 700; } .rsv-g-kvs { margin-bottom: 14px; } .rsv-g-kv { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line, #f0f0f0); font-size: 13px; } .rsv-g-kv:last-child { border-bottom: none; } .rsv-g-kv span { color: var(--ink-3, #888); flex: none; } .rsv-g-kv b { font-weight: 600; text-align: right; overflow-wrap: anywhere; } .rsv-g-field { margin-bottom: 12px; } .rsv-g-block { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 14px; } .rsv-g-blabel { font-size: 14px; font-weight: 600; } .rsv-g-bsub { font-size: 12px; color: var(--ink-2, #555); margin-top: 1px; } .rsv-g-action { display: flex; width: 100%; justify-content: center; margin-bottom: 8px; } .rsv-g-action:last-child { margin-bottom: 0; } .rsv-btn-danger.rsv-g-action { background: var(--card, #fff); border-color: color-mix(in srgb, var(--danger, #d8362a) 45%, transparent); } /* switch: visually hidden checkbox (id rsvg-blocked) + styled track/knob */ /* .rsv-switch lebt jetzt in redesign.css (gemeinsam mit .lp-switch) — beide Seiten, die diese Datei laden, laden auch redesign.css. */ .rsv-g-backdrop { display: none; } @media (max-width: 900px) { .rsv-g-wrap { grid-template-columns: 1fr; } /* detail becomes a right-side overlay sheet; markup stays inside .lp-app so the design tokens apply (overlay convention, commit 44a6acb6) */ .rsv-g-backdrop { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); z-index: 300; } .rsv-g-detail { position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 92vw); z-index: 301; border-radius: 0; border-width: 0 0 0 1px; overflow-y: auto; box-shadow: -14px 0 34px rgba(0, 0, 0, 0.2); } } /* addon card flash (upsell anchor) */ .rsv-addon-flash { outline: 2px solid var(--accent, #111); outline-offset: 2px; border-radius: 10px; transition: outline-color 0.3s; } /* ── S6 no-show fee badge ───────────────────────────────────────────── */ .rsv-fee-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; margin-left: 6px; border-radius: 9px; background: #15875a; color: #fff; font-size: 11px; font-weight: 700; } /* Pacing card — one stepper per service period (the backend caps covers per slot window per period, so the UI mirrors that rather than a single value). */ .rsv-pacing-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap; padding:10px 0;border-top:1px solid var(--line)} .rsv-pacing-row:first-of-type{border-top:0} .rsv-pacing-label{font-weight:700;font-size:var(--fs-sm);color:var(--ink); min-width:104px} .rsv-pacing-unit{font-size:var(--fs-sm);color:var(--ink-2);font-weight:600} /* ══════════════════════════════════════════════════════════════════════ R1 — Service-Erweiterungen (Design Artifact 1) Tokens only: --accent --line --line-2 --card --hover --ink/-2/-3 --fs-* --r-card --r-chip --r-pill --success. No new colours. ══════════════════════════════════════════════════════════════════════ */ /* ── Positionsnummer + manuelle Reihenfolge (Liste) ── */ .rsv-li-order { display: flex; align-items: center; gap: 6px; } .rsv-posno { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-xs, 11px); font-weight: 800; background: var(--hover, #eee); color: var(--ink-2, #555); } .rsv-li-card.pinned .rsv-posno { background: var(--accent, #111); color: var(--accent-ink, #fff); } .rsv-li-move { display: flex; flex-direction: column; gap: 2px; } .rsv-move-btn { appearance: none; border: 1px solid transparent; background: none; cursor: pointer; color: var(--ink-3, #999); padding: 2px 3px; line-height: 0; border-radius: 5px; } .rsv-move-btn:hover:not([disabled]) { background: var(--hover, #eee); color: var(--ink, #111); } .rsv-move-btn[disabled] { opacity: 0.3; cursor: default; } /* the registry has only a chevron-down — the "up" control is it, flipped */ .rsv-move-btn[data-rsv-dir="-1"] svg { transform: rotate(180deg); } /* ── 5-Minuten-Pin ── */ .rsv-li-card.pinned { background: color-mix(in srgb, var(--accent, #111) 8%, transparent); border-color: color-mix(in srgb, var(--accent, #111) 26%, transparent); } .rsv-pintag { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; font-size: var(--fs-xs, 11px); font-weight: 700; color: var(--accent, #111); } .rsv-partial-tag { display: inline-flex; align-items: center; margin-left: 8px; height: 20px; padding: 0 8px; border-radius: var(--r-pill, 999px); font-size: var(--fs-xs, 11px); font-weight: 700; background: color-mix(in srgb, var(--rsv-st-seated) 16%, transparent); color: var(--rsv-st-seated); } /* ── Detail-Slide-over ── */ .rsv-drawer { position: fixed; inset: 0; z-index: 400; display: flex; justify-content: flex-end; } .rsv-drawer-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35); } .rsv-det { position: relative; width: min(440px, 100vw); height: 100%; background: var(--card, #fff); border-left: 1px solid var(--line); box-shadow: var(--shadow-lg, -14px 0 34px rgba(0, 0, 0, 0.2)); display: flex; flex-direction: column; overflow: hidden; } .rsv-det-h { padding: 18px 20px 0; border-bottom: 1px solid var(--line); flex: 0 0 auto; } .rsv-det-top { display: flex; align-items: flex-start; gap: 12px; } .rsv-det-idn { flex: 1; min-width: 0; } .rsv-det-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; } .rsv-det-name { font-size: 18px; font-weight: 800; letter-spacing: -0.025em; color: var(--ink, #111); } .rsv-det-sub { font-size: var(--fs-sm, 13px); font-weight: 600; color: var(--ink-2, #555); margin-top: 3px; } .rsv-det-close { width: 40px; height: 40px; padding: 0; flex: 0 0 40px; display: grid; place-items: center; } .rsv-det-tabs { display: flex; gap: 2px; margin-top: 14px; } .rsv-det-tab { appearance: none; border: 0; background: transparent; cursor: pointer; font: inherit; padding: 12px 14px 14px; font-size: var(--fs-body, 14px); font-weight: 600; color: var(--ink-2, #555); position: relative; } .rsv-det-tab:hover { color: var(--ink, #111); } .rsv-det-tab.active { color: var(--accent, #111); } .rsv-det-tab.active::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent, #111); } .rsv-det-b { padding: 18px 20px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; flex: 1; min-height: 0; } .rsv-det-actions { display: flex; gap: 8px; flex-wrap: wrap; } .rsv-det-actions .lp-btn { min-height: 40px; } .rsv-kv2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .rsv-kv-k { font-size: var(--fs-xs, 11px); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3, #999); margin-bottom: 3px; } .rsv-kv-v { font-size: var(--fs-sm, 13px); font-weight: 700; color: var(--ink, #111); overflow-wrap: anywhere; } .rsv-slabel { font-size: var(--fs-xs, 11px); font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3, #999); margin-bottom: 9px; } .rsv-pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: var(--r-pill, 999px); font-size: var(--fs-xs, 11px); font-weight: 700; background: var(--hover, #eee); color: var(--ink-2, #555); } .rsv-pill-accent { background: color-mix(in srgb, var(--accent, #111) 14%, transparent); color: var(--accent, #111); } .rsv-src-badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: var(--fs-xs, 11px); font-weight: 700; border: 1px solid var(--line); color: var(--ink-2, #555); } /* ── Split-Button „+15 Min" ── */ .rsv-splitb { display: inline-flex; position: relative; } .rsv-splitb > .lp-btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } .rsv-splitb-more { border-top-left-radius: 0; border-bottom-left-radius: 0; padding: 0 10px; margin-left: -1px; } .rsv-splitmenu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 5; min-width: 150px; background: var(--card, #fff); border: 1px solid var(--line); border-radius: var(--r-chip, 10px); box-shadow: var(--shadow-lg, 0 12px 32px rgba(0,0,0,.16)); padding: 5px; display: flex; flex-direction: column; } .rsv-splitmenu button { appearance: none; border: 0; background: none; cursor: pointer; font: inherit; text-align: left; padding: 10px 12px; min-height: 40px; border-radius: 7px; font-size: var(--fs-sm, 13px); font-weight: 600; color: var(--ink, #111); } .rsv-splitmenu button:hover { background: var(--hover, #eee); } /* ── Kommentarebenen (S2) ── */ .rsv-cmt { border: 1px solid var(--line); border-radius: var(--r-chip, 10px); background: var(--card, #fff); padding: 12px 14px; } .rsv-cmt.ro { background: var(--hover, #f6f6f6); } .rsv-cmt-h { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs, 11px); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3, #999); margin-bottom: 7px; } .rsv-cmt-h .rsv-cmt-spacer { flex: 1; } .rsv-cmt-t { font-size: var(--fs-body, 14px); line-height: 1.5; color: var(--ink, #111); white-space: pre-wrap; overflow-wrap: anywhere; } .rsv-cmt-t.ph { color: var(--ink-3, #999); font-style: italic; } .rsv-cmt-hint { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: var(--fs-xs, 11px); font-weight: 600; color: var(--accent, #111); } .rsv-cmt textarea { width: 100%; min-height: 74px; resize: vertical; font: inherit; font-size: var(--fs-body, 14px); color: var(--ink, #111); background: var(--field, #fff); border: 1px solid var(--line-2); border-radius: var(--r-chip, 10px); padding: 9px 11px; } .rsv-cmt-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 9px; } /* ── Historie-Timeline (S4) ── */ .rsv-evt { position: relative; padding-left: 26px; } .rsv-evt::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--line); } .rsv-evt-i { position: relative; padding-bottom: 18px; } .rsv-evt-i:last-child { padding-bottom: 0; } .rsv-evt-dot { position: absolute; left: -24px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent, #111); border: 2px solid var(--accent, #111); } .rsv-evt-t { font-size: var(--fs-sm, 13px); font-weight: 700; color: var(--ink, #111); } .rsv-evt-m { font-size: var(--fs-xs, 11px); font-weight: 600; color: var(--ink-3, #999); margin-top: 2px; display: flex; gap: 8px; flex-wrap: wrap; } .rsv-callout { display: flex; align-items: flex-start; gap: 9px; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-chip, 10px); background: var(--hover, #f6f6f6); font-size: var(--fs-xs, 11px); font-weight: 600; color: var(--ink-2, #555); line-height: 1.5; } .rsv-callout svg { flex: 0 0 auto; margin-top: 1px; } /* ── Leerzustand (Historie, Anfragen-Queue) ── */ .rsv-empty-block { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 48px 24px; border: 1px dashed var(--line-2); border-radius: var(--r-card, 14px); background: var(--card, #fff); color: var(--ink-2, #555); } .rsv-empty-ic { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--hover, #eee); color: var(--ink-3, #999); margin-bottom: 6px; } .rsv-empty-block h4 { margin: 0; font-size: var(--fs-body, 14px); font-weight: 700; color: var(--ink, #111); } .rsv-empty-block p { margin: 0; font-size: var(--fs-sm, 13px); font-weight: 500; max-width: 340px; line-height: 1.5; } /* ── Mini-Dialog (Stepper: Teilweise platzieren) ── */ .rsv-mini-overlay { position: fixed; inset: 0; z-index: 420; display: grid; place-items: center; background: rgba(0, 0, 0, 0.35); padding: 20px; } .rsv-mini { width: min(340px, 100%); padding: 20px; } .rsv-mini-h { font-size: var(--fs-h2, 15.5px); font-weight: 800; color: var(--ink, #111); } .rsv-mini-hint { margin: 7px 0 16px; font-size: var(--fs-sm, 13px); font-weight: 500; color: var(--ink-2, #555); line-height: 1.5; } .rsv-stepper { display: flex; align-items: center; justify-content: center; gap: 14px; } .rsv-stepper .lp-btn { width: 44px; min-height: 44px; padding: 0; font-size: 19px; font-weight: 700; } .rsv-stepper-v { min-width: 56px; text-align: center; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink, #111); } .rsv-mini-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; } .rsv-mini-actions .lp-btn { min-height: 40px; } /* Touch devices: every action in the R1 surfaces clears 48 px. */ @media (pointer: coarse) { .rsv-det-actions .lp-btn, .rsv-mini-actions .lp-btn, .rsv-splitmenu button, .rsv-det-tab { min-height: 48px; } .rsv-det-close { width: 48px; height: 48px; flex-basis: 48px; } .rsv-move-btn { padding: 7px 9px; } .rsv-stepper .lp-btn { width: 48px; min-height: 48px; } } @media (max-width: 560px) { .rsv-det { width: 100vw; border-left: 0; } .rsv-kv2 { grid-template-columns: 1fr; gap: 11px; } } /* ── R1/S3: Anfragen-Queue ── Die frühere zweite .rsv-subtab(s)-Definition stand hier und überschrieb den Block weiter oben (Zeile ~822) mit abweichendem Abstand UND einer violetten --accent-Unterstreichung. Die gerenderten Design-Vorlagen zeigen an beiden Unter-Tab-Ebenen #111; die Regeln leben jetzt nur noch oben, damit es keine zwei widersprechenden Wahrheiten mehr gibt. */ .rsv-subtabs { overflow-x: auto; } /* Die Reservierungen-Leiste steht frei über der Liste und behält ihren grösseren Abstand; die Einstellungen-Leiste trägt darunter noch die Buchungsseiten-Schaltfläche und bleibt eng. */ .rsv-subtabs-res { margin: 0 0 16px; } .rsv-subtab { white-space: nowrap; } .rsv-subtab .rsv-pill { height: 19px; padding: 0 7px; } .rsv-pill-warn { background: color-mix(in srgb, var(--rsv-st-pending) 16%, transparent); color: var(--rsv-st-pending); } .rsv-rq-table { overflow: hidden; padding: 0; } .rsv-rq-head, .rsv-rq-row { display: grid; grid-template-columns: 112px 1.4fr 48px 1.1fr 96px 1.1fr 1.5fr 210px; gap: 14px; align-items: center; padding: 13px 16px; } .rsv-rq-head { font-size: var(--fs-xs, 11px); font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3, #999); } .rsv-rq-row { border-top: 1px solid var(--line); } .rsv-rq-row:hover { background: var(--hover, #f7f7f7); } .rsv-rq-code { font-weight: 800; color: var(--accent, #111); font-size: var(--fs-xs, 11px); } .rsv-rq-name { font-weight: 700; font-size: var(--fs-sm, 13px); } .rsv-rq-pax { font-weight: 800; } .rsv-rq-wish { font-weight: 700; font-size: var(--fs-sm, 13px); } .rsv-rq-muted { color: var(--ink-2, #555); font-size: var(--fs-xs, 11px); font-weight: 600; } .rsv-rq-contact, .rsv-rq-msg { overflow: hidden; text-overflow: ellipsis; } .rsv-rq-msg { font-weight: 500; line-height: 1.45; } .rsv-rq-right { text-align: right; } .rsv-rq-actions { display: flex; gap: 8px; justify-content: flex-end; } .rsv-rq-actions .lp-btn { min-height: 38px; white-space: nowrap; } .rsv-mini-wide { width: min(520px, 100%); } .rsv-rq-form { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; } .rsv-field { display: flex; flex-direction: column; gap: 5px; font-size: var(--fs-xs, 11px); font-weight: 700; color: var(--ink-2, #555); } .rsv-field input, .rsv-field textarea { font: inherit; font-size: var(--fs-body, 14px); font-weight: 500; color: var(--ink, #111); background: var(--field, #fff); border: 1px solid var(--line-2); border-radius: var(--r-chip, 10px); padding: 10px 11px; min-height: 42px; box-sizing: border-box; } .rsv-rq-tables { display: flex; flex-wrap: wrap; gap: 8px; max-height: 200px; overflow-y: auto; } .rsv-rq-table { display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; min-height: 42px; border: 1px solid var(--line); border-radius: var(--r-pill, 999px); font-size: var(--fs-sm, 13px); font-weight: 600; cursor: pointer; } .rsv-rq-table:hover { background: var(--hover, #f7f7f7); } .rsv-rq-table:has(input:checked) { border-color: var(--accent, #111); background: color-mix(in srgb, var(--accent, #111) 10%, transparent); color: var(--accent, #111); } @media (pointer: coarse) { .rsv-subtab { min-height: 48px; } .rsv-rq-actions .lp-btn { min-height: 48px; } .rsv-rq-table, .rsv-field input, .rsv-field textarea { min-height: 48px; } } @media (max-width: 1100px) { .rsv-rq-head { display: none; } .rsv-rq-row { grid-template-columns: 1fr 1fr; row-gap: 8px; } .rsv-rq-msg, .rsv-rq-actions { grid-column: 1 / -1; } .rsv-rq-actions { justify-content: flex-start; } .rsv-rq-form { grid-template-columns: 1fr; } } /* ── R1/S3: Einstellungskarte „Gruppen & Anfragen" ── */ .rsv-set-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-chip, 10px); } .rsv-set-toggle-row b { display: block; font-size: var(--fs-sm, 13px); font-weight: 700; color: var(--ink, #111); } .rsv-set-toggle-row span { display: block; margin-top: 2px; font-size: var(--fs-xs, 11px); font-weight: 600; color: var(--ink-2, #555); } .rsv-set-notice { margin-top: 16px; } .rsv-set-notice-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 7px; font-size: var(--fs-xs, 11px); font-weight: 700; color: var(--ink-2, #555); } .rsv-set-notice textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: var(--fs-body, 14px); color: var(--ink, #111); resize: vertical; background: var(--field, #fff); border: 1px solid var(--line-2); border-radius: var(--r-chip, 10px); padding: 10px 12px; } .rsv-lang-seg .lp-seg-i { min-width: 40px; } .rsv-set-hint { margin: 7px 0 0; font-size: var(--fs-xs, 11px); font-weight: 600; color: var(--ink-3, #999); } /* ── R1/S4: „Letzte Reservierungen"-Feed ── */ .rsv-feed { margin-top: 18px; border: 1px solid var(--line); border-radius: var(--r-card, 14px); background: var(--card, #fff); overflow: hidden; } .rsv-feed-h { display: flex; align-items: center; gap: 10px; width: 100%; appearance: none; border: 0; background: none; cursor: pointer; font: inherit; padding: 14px 16px; min-height: 48px; text-align: left; font-size: var(--fs-sm, 13px); font-weight: 700; color: var(--ink, #111); } .rsv-feed-h:hover { background: var(--hover, #f7f7f7); } .rsv-feed-h svg { transition: transform 0.15s; flex: 0 0 auto; } .rsv-feed.open .rsv-feed-h svg { transform: rotate(180deg); } .rsv-feed-sub { margin-left: auto; font-size: var(--fs-xs, 11px); font-weight: 600; color: var(--ink-3, #999); } .rsv-feed-note { padding: 16px; font-size: var(--fs-sm, 13px); color: var(--ink-3, #999); border-top: 1px solid var(--line); } .rsv-feed-list { border-top: 1px solid var(--line); } .rsv-feed-row { display: grid; grid-template-columns: 92px 1.4fr 150px 118px 96px 130px; gap: 12px; align-items: center; padding: 11px 16px; cursor: pointer; border-top: 1px solid var(--line); } .rsv-feed-row:first-child { border-top: 0; } .rsv-feed-row:hover { background: var(--hover, #f7f7f7); } .rsv-feed-code { font-size: var(--fs-xs, 11px); font-weight: 800; color: var(--ink-2, #555); } .rsv-feed-name { font-size: var(--fs-sm, 13px); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rsv-feed-when { font-size: var(--fs-xs, 11px); font-weight: 700; color: var(--ink-2, #555); } .rsv-feed-created { font-size: var(--fs-xs, 11px); font-weight: 600; color: var(--ink-3, #999); } @media (max-width: 900px) { .rsv-feed-row { grid-template-columns: 1fr 1fr; row-gap: 6px; } .rsv-feed-created { grid-column: 1 / -1; } } /* ── R1/S5: 6-Tage-Vorschau mit Wetter ── */ .rsv-daystrip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 16px; } .rsv-daystrip-loading { min-height: 78px; } .rsv-dcard { appearance: none; font: inherit; text-align: left; cursor: pointer; border: 1px solid var(--line); border-radius: var(--r-chip, 10px); background: var(--card, #fff); padding: 10px 12px; min-height: 78px; display: flex; flex-direction: column; gap: 6px; justify-content: center; } .rsv-dcard:hover { background: var(--hover, #f7f7f7); } .rsv-dcard.on { border-color: var(--accent, #111); background: color-mix(in srgb, var(--accent, #111) 8%, transparent); } .rsv-dcard-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .rsv-dd { font-size: var(--fs-sm, 13px); font-weight: 800; letter-spacing: -0.02em; color: var(--ink, #111); } .rsv-wx { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs, 11px); font-weight: 700; color: var(--ink-2, #555); } .rsv-dn { font-size: var(--fs-xs, 11px); font-weight: 600; color: var(--ink-3, #999); } .rsv-dn.closed { color: var(--rsv-st-cancelled); } /* ── R1/S5: Einrichtungs-Check ── */ .rsv-check-top { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; row-gap: 14px; } .rsv-check-main { flex: 1; min-width: 240px; } .rsv-ring { width: 74px; height: 74px; flex: 0 0 74px; border-radius: 50%; display: grid; place-items: center; position: relative; } .rsv-ring::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--card, #fff); } .rsv-ring b { position: relative; z-index: 1; font-size: 16px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink, #111); } .rsv-check-list { margin-top: 12px; } .rsv-chkrow { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-top: 1px solid var(--line); flex-wrap: wrap; } .rsv-chkrow:first-child { border-top: 0; } .rsv-chkrow .lp-btn { min-height: 38px; } .rsv-ci { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%; display: grid; place-items: center; } .rsv-ci.done { background: color-mix(in srgb, var(--success, #15875a) 16%, transparent); color: var(--success, #15875a); } .rsv-ci.open { border: 1.5px dashed var(--line-2); } .rsv-ci.skipped { border: 1.5px solid var(--line-2); } .rsv-chk-main { flex: 1; min-width: 180px; } .rsv-chk-t { font-weight: 700; font-size: var(--fs-sm, 13px); color: var(--ink, #111); } .rsv-chk-t.off { color: var(--ink-3, #999); text-decoration: line-through; } .rsv-chk-s { font-size: var(--fs-xs, 11px); font-weight: 600; color: var(--ink-3, #999); margin-top: 2px; } .rsv-weather-row { margin-top: 14px; } .rsv-geo-hits { margin-top: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .rsv-geo-hit { min-height: 40px; } @media (pointer: coarse) { .rsv-chkrow .lp-btn, .rsv-geo-hit { min-height: 48px; } } @media (max-width: 900px) { .rsv-daystrip { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 560px) { .rsv-daystrip { grid-template-columns: repeat(2, 1fr); } } /* ── R2/S1: Warteliste + interne Benachrichtigungen ── */ .rsv-notify-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; } .rsv-notify-grid select { width: 100%; min-height: 42px; font: inherit; font-size: var(--fs-sm, 13px); color: var(--ink, #111); background: var(--field, #fff); border: 1px solid var(--line-2); border-radius: var(--r-chip, 10px); padding: 0 10px; } .rsv-lbl-sm { display: block; margin-bottom: 5px; font-size: var(--fs-xs, 11px); font-weight: 700; color: var(--ink-2, #555); } .rsv-wl-chip { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; margin-left: 8px; border-radius: var(--r-pill, 999px); font-size: var(--fs-xs, 11px); font-weight: 700; background: color-mix(in srgb, var(--rsv-st-pending) 16%, transparent); color: var(--rsv-st-pending); } @media (pointer: coarse) { .rsv-notify-grid select { min-height: 48px; } } @media (max-width: 700px) { .rsv-notify-grid { grid-template-columns: 1fr; } } /* ══════════════════════════════════════════════════════════════════════ R2/S2 — Statistik. Die Balken-Primitiven (.rpt-hours/.rpt-hbar/ .rpt-bars/.rpt-bar-*) kommen aus redesign.css und werden bewusst wiederverwendet — das ist die Ästhetik des Berichte-Tabs. Neu sind nur Kopfzeile, KPI-Reihe, Statusbalken und Heatmap. ══════════════════════════════════════════════════════════════════════ */ .rsv-stat-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; row-gap: 12px; margin-bottom: 18px; } .rsv-stat-spacer { flex: 1; } .rsv-stat-head select { min-height: 38px; padding: 0 10px; font: inherit; font-size: var(--fs-sm, 13px); color: var(--ink, #111); background: var(--field, #fff); border: 1px solid var(--line-2); border-radius: var(--r-chip, 10px); } .rsv-stat-date { flex-direction: row; align-items: center; gap: 8px; } .rsv-stat-date input { min-height: 38px; } .rsv-stat-card { margin-bottom: 18px; } .rsv-stat-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .rsv-stat-grid2 > .rsv-stat-card { margin-bottom: 18px; } .rsv-stat-note { text-align: center; color: var(--ink-2, #555); font-size: var(--fs-sm, 13px); font-weight: 600; } .rsv-stat-note.bad { color: var(--danger, #d8362a); } .rsv-kpirow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; } .rsv-kpic { padding: 16px 18px; } .rsv-kpi-l { font-size: var(--fs-xs, 11px); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3, #999); } .rsv-kpi-v { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink, #111); margin: 6px 0 4px; } .rsv-kpi-d { font-size: var(--fs-xs, 11px); font-weight: 600; color: var(--ink-2, #555); } .rsv-sbar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--hover, #eee); } .rsv-sbar i { height: 100%; } .rsv-legend-row { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; } .rsv-lg { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-sm, 13px); font-weight: 600; color: var(--ink-2, #555); } .rsv-lg i { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 10px; } .rsv-lg b { color: var(--ink, #111); } .rsv-lg-p { color: var(--ink-3, #999); font-weight: 600; } .rsv-bar-p { font-size: var(--fs-xs, 11px); color: var(--ink-3, #999); font-weight: 600; margin-left: 6px; } /* gestapelte Säule im Ankunftszeit-Diagramm */ .rsv-hstack { display: flex; flex-direction: column; justify-content: flex-end; width: 100%; border-radius: 5px 5px 0 0; overflow: hidden; } .rsv-hstack i { display: block; width: 100%; } .rsv-heat { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .rsv-heat-head { margin-bottom: 6px; } .rsv-heat-head div { font-size: var(--fs-xs, 11px); font-weight: 700; color: var(--ink-3, #999); text-align: center; } .rsv-hcell { border: 1px solid var(--line); border-radius: var(--r-chip, 10px); padding: 7px 8px; min-height: 62px; display: flex; flex-direction: column; gap: 4px; background: var(--card, #fff); } .rsv-hcell.empty { border: 0; background: none; min-height: 0; } .rsv-hcell.off { background: var(--hover, #f6f6f6); } .rsv-hn { font-size: var(--fs-xs, 11px); font-weight: 700; color: var(--ink-3, #999); } .rsv-hg { font-size: var(--fs-sm, 13px); font-weight: 800; color: var(--ink, #111); } .rsv-hg small { font-size: 10px; font-weight: 700; color: var(--ink-3, #999); } .rsv-hg.muted { font-size: var(--fs-xs, 11px); font-weight: 700; color: var(--ink-3, #999); } .rsv-harc { display: flex; height: 4px; border-radius: 2px; overflow: hidden; background: var(--hover, #eee); margin-top: auto; } .rsv-harc i { height: 100%; } @media (pointer: coarse) { .rsv-stat-head select, .rsv-stat-date input { min-height: 48px; } } @media (max-width: 1000px) { .rsv-kpirow { grid-template-columns: repeat(2, 1fr); } .rsv-stat-grid2 { grid-template-columns: 1fr; } } @media (max-width: 560px) { .rsv-kpirow { grid-template-columns: 1fr; } .rsv-heat { gap: 4px; } .rsv-hcell { min-height: 54px; padding: 5px 6px; } } /* ══════════════════════════════════════════════════════════════════════ R2/S3 — Gästebuch: Segmente, Dubletten, Datenfehler, Import ══════════════════════════════════════════════════════════════════════ */ .rsv-g-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } .rsv-segnav { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; } .rsv-segbtn { appearance: none; font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-pill, 999px); background: var(--card, #fff); color: var(--ink-2, #555); font-size: var(--fs-sm, 13px); font-weight: 600; } .rsv-segbtn:hover { background: var(--hover, #f7f7f7); color: var(--ink, #111); } .rsv-segbtn.on { border-color: var(--accent, #111); color: var(--accent, #111); background: color-mix(in srgb, var(--accent, #111) 10%, transparent); } .rsv-segcnt { font-size: var(--fs-xs, 11px); font-weight: 800; color: var(--ink-3, #999); } .rsv-segbtn.on .rsv-segcnt { color: var(--accent, #111); } .rsv-dupe-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .rsv-mergerow { margin-bottom: 14px; } .rsv-mergepair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 12px; margin-top: 12px; } .rsv-mvs { display: grid; place-items: center; font-weight: 800; color: var(--ink-3, #999); } .rsv-mcard { display: block; cursor: pointer; border: 1px solid var(--line); border-radius: var(--r-chip, 10px); padding: 13px 14px; background: var(--card, #fff); } .rsv-mcard:hover { background: var(--hover, #f7f7f7); } .rsv-mcard.sel { border-color: var(--accent, #111); background: color-mix(in srgb, var(--accent, #111) 7%, transparent); } .rsv-mcard input { margin-right: 8px; } .rsv-mcard-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; } .rsv-mcard-tag { display: none; } .rsv-mcard.sel .rsv-mcard-tag { display: inline-flex; background: color-mix(in srgb, var(--accent, #111) 14%, transparent); color: var(--accent, #111); } .rsv-mfield { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: var(--fs-xs, 11px); color: var(--ink-3, #999); font-weight: 600; } .rsv-mfield b { color: var(--ink, #111); font-size: var(--fs-sm, 13px); overflow-wrap: anywhere; } .rsv-mergeactions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; } .rsv-mergeactions .lp-btn { min-height: 40px; } .rsv-errtable { overflow: hidden; } .rsv-errhead, .rsv-errrow { display: grid; grid-template-columns: 1.3fr 170px 1.5fr 1fr 110px; gap: 14px; align-items: center; padding: 12px 16px; } .rsv-errhead { font-size: var(--fs-xs, 11px); font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3, #999); border-bottom: 1px solid var(--line); } .rsv-errrow { border-top: 1px solid var(--line); } .rsv-errrow:first-of-type { border-top: 0; } .rsv-errsub { display: block; font-size: var(--fs-xs, 11px); font-weight: 600; color: var(--ink-3, #999); margin-top: 2px; } .rsv-errrow input { width: 100%; min-height: 40px; box-sizing: border-box; font: inherit; font-size: var(--fs-sm, 13px); color: var(--ink, #111); background: var(--field, #fff); border: 1px solid var(--line-2); border-radius: var(--r-chip, 10px); padding: 0 10px; } .rsv-errrow .lp-btn { min-height: 38px; } .rsv-errchip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: var(--r-pill, 999px); font-size: var(--fs-xs, 11px); font-weight: 700; background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); } .rsv-errchip.warn { background: color-mix(in srgb, var(--rsv-st-pending) 16%, transparent); color: var(--rsv-st-pending); } /* Import-Assistent */ .rsv-imp { width: min(720px, 100%); max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; } .rsv-imp-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 20px 22px; border-bottom: 1px solid var(--line); } .rsv-imp-h h3 { margin: 6px 0 0; font-size: 19px; font-weight: 800; letter-spacing: -0.025em; } .rsv-imp-eyebrow { color: var(--accent, #111); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .rsv-imp-steps { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 22px; border-bottom: 1px solid var(--line); } .rsv-wstep { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-sm, 13px); font-weight: 600; color: var(--ink-3, #999); } .rsv-wstep .n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--hover, #eee); font-size: var(--fs-xs, 11px); font-weight: 800; } .rsv-wstep.on { color: var(--ink, #111); } .rsv-wstep.on .n { background: var(--accent, #111); color: var(--accent-ink, #fff); } .rsv-wstep.done .n { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); } .rsv-imp-b { padding: 20px 22px; overflow-y: auto; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; } .rsv-imp-f { display: flex; justify-content: space-between; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--line); } .rsv-imp-fr { display: flex; gap: 8px; } .rsv-imp-f .lp-btn { min-height: 40px; } .rsv-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 32px 20px; border: 1px dashed var(--line-2); border-radius: var(--r-card, 14px); cursor: pointer; text-align: center; } .rsv-drop:hover { background: var(--hover, #f7f7f7); } .rsv-drop-ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--hover, #eee); color: var(--accent, #111); } .rsv-drop span { font-size: var(--fs-sm, 13px); color: var(--ink-2, #555); } .rsv-imp-file { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-chip, 10px); } .rsv-imp-file div { flex: 1; } .rsv-imp-file b { display: block; font-size: var(--fs-sm, 13px); } .rsv-imp-file span { font-size: var(--fs-xs, 11px); color: var(--ink-3, #999); } .rsv-maprow { display: grid; grid-template-columns: 60px 1fr 1.2fr; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); } .rsv-maprow:first-of-type { border-top: 0; } .rsv-ttok { font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3, #999); } .rsv-maprow select { min-height: 40px; font: inherit; font-size: var(--fs-sm, 13px); background: var(--field, #fff); border: 1px solid var(--line-2); border-radius: var(--r-chip, 10px); padding: 0 10px; color: var(--ink, #111); } .rsv-kpirow-3 { grid-template-columns: repeat(3, 1fr); } .rsv-imp-notes { overflow: hidden; } .rsv-imp-note { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--line); } .rsv-imp-note:first-child { border-top: 0; } .rsv-imp-note b { display: block; font-size: var(--fs-sm, 13px); } .rsv-imp-note span:last-child { font-size: var(--fs-xs, 11px); color: var(--ink-3, #999); } .rsv-highlights { margin-bottom: 16px; } .rsv-hl-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); cursor: pointer; } .rsv-hl-row:first-of-type { border-top: 0; } .rsv-hl-row:hover { background: var(--hover, #f7f7f7); } @media (pointer: coarse) { .rsv-segbtn, .rsv-errrow input, .rsv-errrow .lp-btn, .rsv-maprow select, .rsv-imp-f .lp-btn, .rsv-mergeactions .lp-btn { min-height: 48px; } } @media (max-width: 900px) { .rsv-mergepair { grid-template-columns: 1fr; } .rsv-mvs { display: none; } .rsv-errhead { display: none; } .rsv-errrow { grid-template-columns: 1fr 1fr; row-gap: 8px; } .rsv-kpirow-3 { grid-template-columns: 1fr; } } /* ── R2b: Bewertungs-Einstellungen ── */ .rsv-fb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 16px; } .rsv-fb-grid textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: var(--fs-body, 14px); color: var(--ink, #111); resize: vertical; background: var(--field, #fff); border: 1px solid var(--line-2); border-radius: var(--r-chip, 10px); padding: 10px 12px; } .rsv-ktile { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-chip, 10px); margin-bottom: 8px; cursor: pointer; min-height: 52px; } .rsv-ktile:hover { background: var(--hover, #f7f7f7); } .rsv-ktile:has(input:checked) { border-color: var(--accent, #111); background: color-mix(in srgb, var(--accent, #111) 8%, transparent); } .rsv-ktile input { width: 18px; height: 18px; } .rsv-ktile b { display: block; font-size: var(--fs-sm, 13px); } .rsv-ktile span { display: block; font-size: var(--fs-xs, 11px); color: var(--ink-3, #999); } .rsv-qlist { display: flex; flex-direction: column; gap: 8px; } .rsv-qitem { display: flex; gap: 8px; } .rsv-qitem input { flex: 1; min-height: 42px; box-sizing: border-box; font: inherit; font-size: var(--fs-sm, 13px); background: var(--field, #fff); border: 1px solid var(--line-2); border-radius: var(--r-chip, 10px); padding: 0 10px; color: var(--ink, #111); } .rsv-qactions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .rsv-qactions .lp-btn { min-height: 38px; } @media (pointer: coarse) { .rsv-qitem input, .rsv-qactions .lp-btn { min-height: 48px; } } @media (max-width: 900px) { .rsv-fb-grid { grid-template-columns: 1fr; } } /* ── R2b: Feedback-Triage ── */ .rsv-fb-layout { display: grid; grid-template-columns: 280px 1fr; gap: 18px; align-items: start; margin-top: 18px; } .rsv-fb-filters { position: sticky; top: 8px; } .rsv-fb-stars { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; } .rsv-chip { appearance: none; font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 11px; border: 1px solid var(--line); border-radius: var(--r-pill, 999px); background: var(--card, #fff); color: var(--ink-2, #555); font-size: var(--fs-sm, 13px); font-weight: 700; } .rsv-chip.active { border-color: var(--accent, #111); color: var(--accent, #111); background: color-mix(in srgb, var(--accent, #111) 10%, transparent); } .rsv-trirow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: var(--fs-sm, 13px); font-weight: 600; color: var(--ink-2, #555); } .rsv-tri { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-pill, 999px); overflow: hidden; } .rsv-tri button { appearance: none; border: 0; background: none; cursor: pointer; font: inherit; font-size: var(--fs-xs, 11px); font-weight: 700; padding: 0 10px; min-height: 32px; color: var(--ink-3, #999); } .rsv-tri button.on { background: var(--accent, #111); color: var(--accent-ink, #fff); } .rsv-fb-main { min-width: 0; display: flex; flex-direction: column; gap: 10px; } .rsv-fb-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .rsv-fb-toolbar select { min-height: 38px; padding: 0 10px; font: inherit; font-size: var(--fs-sm, 13px); background: var(--field, #fff); border: 1px solid var(--line-2); border-radius: var(--r-chip, 10px); color: var(--ink, #111); } .rsv-fbrow { border: 1px solid var(--line); border-radius: var(--r-card, 14px); background: var(--card, #fff); overflow: hidden; } .rsv-fbrow.open { border-color: var(--line-2); } .rsv-fbhead { display: grid; grid-template-columns: 120px 1fr auto; gap: 14px; align-items: center; padding: 13px 16px; cursor: pointer; } .rsv-fbhead:hover { background: var(--hover, #f7f7f7); } .rsv-stars { display: inline-flex; gap: 1px; } .rsv-fbwhen { display: block; font-size: 10px; font-weight: 700; color: var(--ink-3, #999); margin-top: 3px; } .rsv-fbmain { min-width: 0; } .rsv-fbmain b { display: block; font-size: var(--fs-sm, 13px); } .rsv-fbtext { display: block; font-size: var(--fs-sm, 13px); color: var(--ink-2, #555); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rsv-fbtext.full { white-space: normal; } .rsv-fbtags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .rsv-pill-ok { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); } .rsv-fbbody { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 14px; border-top: 1px solid var(--line); padding-top: 14px; } .rsv-fbbody blockquote { margin: 0; font-size: var(--fs-body, 14px); line-height: 1.55; color: var(--ink, #111); } .rsv-fbbody textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: var(--fs-body, 14px); background: var(--field, #fff); border: 1px solid var(--line-2); border-radius: var(--r-chip, 10px); padding: 10px 12px; color: var(--ink, #111); resize: vertical; } .rsv-fbactions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .rsv-fbactions .lp-btn { min-height: 40px; } @media (pointer: coarse) { .rsv-chip, .rsv-tri button, .rsv-fbactions .lp-btn, .rsv-fb-toolbar select { min-height: 48px; } } @media (max-width: 1000px) { .rsv-fb-layout { grid-template-columns: 1fr; } .rsv-fb-filters { position: static; } .rsv-fbhead { grid-template-columns: 1fr; row-gap: 8px; } } /* ══ R3/S2: Schicht-Kalender (Design Artifact 5.1) ══════════════════ */ .rsv-subsubtabs { display: inline-flex; padding: 3px; gap: 2px; margin: 4px 0 2px; border: 1px solid var(--line); border-radius: var(--r-pill, 999px); background: var(--card, #fff); align-self: flex-start; } .rsv-wk-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 12px; } .rsv-wk-label { font-size: var(--fs-sm, 13px); font-weight: 700; min-width: 168px; } .rsv-wk { border: 1px solid var(--line); border-radius: var(--r-card, 14px); background: var(--card, #fff); overflow: hidden; } .rsv-wk-h { display: grid; grid-template-columns: 54px repeat(7, 1fr); border-bottom: 1px solid var(--line); background: var(--bg, #fff); } .rsv-wk-h > div { padding: 9px 8px; font-size: var(--fs-xs, 11px); font-weight: 800; color: var(--ink-2); text-align: center; border-left: 1px solid var(--line); } .rsv-wk-h > div:first-child { border-left: 0; } .rsv-wk-h > div span { display: block; font-size: 10px; font-weight: 600; color: var(--ink-3); margin-top: 2px; } .rsv-wk-b { display: grid; grid-template-columns: 54px repeat(7, 1fr); position: relative; } .rsv-wk-ax { border-right: 1px solid var(--line); } .rsv-wk-ax .rsv-hr { height: 52px; font-size: 10px; font-weight: 700; color: var(--ink-3); padding: 3px 7px; text-align: right; } .rsv-wk-col { border-left: 1px solid var(--line); position: relative; } .rsv-wk-col .rsv-hr { height: 52px; border-top: 1px solid var(--grid-line, #f0f0f0); } .rsv-wk-col .rsv-hr:first-child { border-top: 0; } /* Jetzt-Linie — nur in der Spalte des heutigen Tages */ .rsv-wk-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--danger, #d8362a); z-index: 2; pointer-events: none; } .rsv-wk-now::before { content: ""; position: absolute; left: -3px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger, #d8362a); } .rsv-shb { position: absolute; left: 4px; right: 4px; border-radius: 8px; border: 1px solid; padding: 6px 8px; cursor: pointer; overflow: hidden; display: flex; flex-direction: column; gap: 2px; text-align: left; font: inherit; appearance: none; } .rsv-shb b { font-size: var(--fs-xs, 11px); font-weight: 800; line-height: 1.2; } .rsv-shb span { font-size: 10px; font-weight: 600; opacity: 0.85; } .rsv-shb.sel { outline: 2px solid var(--solid, #111); outline-offset: 1px; } .rsv-shb-closed { opacity: 0.55; text-decoration: line-through; } /* Farbtoene ausschliesslich aus der Token-Palette */ .rsv-sh-accent { background: color-mix(in srgb, var(--accent) 15%, var(--card)); border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent); } .rsv-sh-light { background: color-mix(in srgb, var(--accent) 7%, var(--card)); border-color: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--ink-2); } .rsv-sh-blue { background: color-mix(in srgb, var(--rsv-st-confirmed) 13%, var(--card)); border-color: color-mix(in srgb, var(--rsv-st-confirmed) 38%, transparent); color: var(--rsv-st-confirmed); } .rsv-sh-ok { background: color-mix(in srgb, var(--success) 13%, var(--card)); border-color: color-mix(in srgb, var(--success) 38%, transparent); color: var(--success); } .rsv-sh-warn { background: color-mix(in srgb, var(--rsv-st-pending) 15%, var(--card)); border-color: color-mix(in srgb, var(--rsv-st-pending) 40%, transparent); color: var(--rsv-st-pending); } /* Detail-Panel */ .rsv-sh-panel { padding: var(--pad-card, 22px); margin-top: 14px; display: flex; flex-direction: column; gap: 12px; } .rsv-sh-panel-act { display: flex; gap: 6px; flex-wrap: wrap; } .rsv-sh-scope { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .rsv-sh-scope > span { font-size: var(--fs-xs, 11px); font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); min-width: 74px; } .rsv-sh-scope > div { display: flex; gap: 6px; flex-wrap: wrap; } .rsv-sh-note span { font-size: var(--fs-xs, 11px); font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); } .rsv-sh-note p { margin: 4px 0 0; white-space: pre-wrap; } .rsv-sh-hint { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--ink-2); font-size: var(--fs-sm, 13px); } /* Limits-Fortschritt (Design .lim) */ .lim { display: flex; flex-direction: column; gap: 6px; } .lim .lt { display: flex; justify-content: space-between; font-size: var(--fs-sm, 13px); font-weight: 700; } .lim .lb { height: 8px; border-radius: var(--r-pill, 999px); background: var(--hover); overflow: hidden; } .lim .lb i { display: block; height: 100%; background: var(--accent); border-radius: var(--r-pill, 999px); } /* Editor-Felder */ .rsv-wd-row { display: flex; gap: 6px; flex-wrap: wrap; } .rsv-wd { display: inline-flex; align-items: center; gap: 5px; min-height: 48px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-ctl, 9px); cursor: pointer; } .rsv-tone-row { display: flex; gap: 8px; } .rsv-tone { width: 48px; height: 48px; border-radius: var(--r-ctl, 9px); border: 2px solid; cursor: pointer; display: inline-flex; } .rsv-tone input { opacity: 0; width: 100%; cursor: pointer; } .rsv-tone:has(input:checked) { outline: 2px solid var(--solid, #111); outline-offset: 2px; } @media (max-width: 900px) { .rsv-wk-b, .rsv-wk-h { grid-template-columns: 44px repeat(7, minmax(72px, 1fr)); } .rsv-wk { overflow-x: auto; } } /* ══ R3/S3: Stammtische ═════════════════════════════════════════════ */ .rsv-ser-list { display: flex; flex-direction: column; gap: 8px; } .rsv-ser-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; min-height: 48px; } .rsv-ser-row > div:first-child { flex: 1; min-width: 200px; } .rsv-ser-row b { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-body, 14px); } .rsv-ser-row span { display: block; font-size: var(--fs-sm, 13px); color: var(--ink-2); margin-top: 2px; } .rsv-ser-row b .rsv-pill { margin-left: 2px; } .rsv-ser-next { font-size: var(--fs-sm, 13px); color: var(--ink-2); white-space: nowrap; } .rsv-ser-act { display: flex; gap: 6px; flex-wrap: wrap; } .rsv-ser-paused { opacity: 0.62; } /* ══ R3c/S1: Vorlagen-Editor ════════════════════════════════════════ */ .rsv-tpl-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .rsv-tpl-card { padding: var(--pad-card, 22px); display: flex; flex-direction: column; gap: 8px; } .rsv-tpl-warn { border-color: color-mix(in srgb, var(--rsv-st-pending) 55%, transparent); } .rsv-tpl-preview { margin: 0; font-size: var(--fs-sm, 13px); color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .rsv-tpl-hint { margin: 0; font-size: var(--fs-sm, 13px); color: var(--rsv-st-pending); } .rsv-tpl-act { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; } .rsv-tpl-chips { display: flex; flex-direction: column; gap: 6px; } .rsv-tpl-chips > span { font-size: var(--fs-xs, 11px); font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); } .rsv-tpl-chips > div { display: flex; gap: 6px; flex-wrap: wrap; } .rsv-chip { appearance: none; font: inherit; cursor: pointer; min-height: 48px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-ctl, 9px); background: var(--hover); color: var(--ink-2); font-size: var(--fs-sm, 13px); font-weight: 600; } .rsv-chip:hover { color: var(--ink); border-color: var(--ink-3); } .rsv-tpl-live { white-space: pre-wrap; padding: 12px 14px; border-radius: var(--r-ctl, 9px); background: var(--hover); color: var(--ink); font-size: var(--fs-sm, 13px); min-height: 72px; } .rsv-tpl-live-bad { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); } /* ══ R3c/S2: Einbettung + Marketing-Links ══════════════════════════ */ .rsv-emb-prev { padding: 16px; border-radius: var(--r-ctl, 9px); background: var(--hover); display: flex; justify-content: center; } .rsv-emb-btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border-radius: var(--r-ctl, 9px); color: #fff; font-weight: 700; font-size: var(--fs-sm, 13px); } .rsv-emb-code { margin: 0; padding: 12px 14px; border-radius: var(--r-ctl, 9px); background: var(--hover); color: var(--ink); font-size: 12px; line-height: 1.5; white-space: pre-wrap; word-break: break-all; overflow-x: auto; } .rsv-link-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--line); min-height: 48px; } .rsv-link-row:first-child { border-top: 0; } .rsv-link-row > div:first-child { flex: 1; min-width: 220px; } .rsv-link-row b { display: inline-flex; align-items: center; gap: 8px; } .rsv-link-row span { display: block; font-size: var(--fs-sm, 13px); color: var(--ink-2); margin-top: 2px; word-break: break-all; } .rsv-f-row { flex-direction: row !important; align-items: center; gap: 10px; min-height: 48px; } /* ══ R3c/S3: Tischkombinationen (Einstellungen → Allgemein) ════════ */ /* Bis 2026-07-31 eine Leiste ueber dem Plan-Tab (#rsv-plan-actions); der Traeger heisst jetzt #rsv-kombi-host und sitzt in einer Karte, also ohne eigenen Aussenabstand nach unten. */ #rsv-kombi-host { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } #rsv-kombi-host:empty { display: none; } #rsv-kombi-host .lp-btn { min-height: 48px; gap: 8px; } .rsv-kombi-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--accent); color: var(--accent-ink, #fff); font-size: 12px; font-weight: 700; } .rsv-kombi-hint { font-size: var(--fs-sm, 13px); color: var(--ink-2); flex: 1; min-width: 240px; } .rsv-kombi-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--line); min-height: 48px; } .rsv-kombi-row:first-child { border-top: 0; } .rsv-kombi-row > div:first-child { flex: 1; min-width: 220px; } .rsv-kombi-row b { display: inline-flex; align-items: center; gap: 8px; } .rsv-kombi-row span { display: block; font-size: var(--fs-sm, 13px); color: var(--ink-2); margin-top: 2px; } .rsv-kombi-off { display: inline-flex !important; align-items: center; margin: 0 0 0 8px; padding: 1px 8px; border-radius: 999px; background: var(--hover); color: var(--ink-2); font-size: 11.5px; font-weight: 700; } .rsv-kombi-warn { color: var(--danger) !important; } .rsv-kombi-note { color: var(--warn, #b45309) !important; } .rsv-kombi-leer { padding: 16px 0; font-size: var(--fs-sm, 13px); color: var(--ink-2); } .rsv-kombi-add { min-height: 48px; width: 100%; gap: 8px; margin-top: 14px; } .rsv-kombi-grp { margin-top: 12px; } .rsv-kombi-grp > span { font-size: var(--fs-sm, 13px); font-weight: 700; color: var(--ink-2); } .rsv-kombi-grp .rsv-chip-row { margin: 6px 0 0; } .rsv-kombi-grp .rsv-chip-day span { min-height: 48px; } .rsv-kombi-felder { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; } .rsv-kombi-felder .rsv-field { flex: 1; min-width: 140px; } .rsv-kombi-felder .rsv-field small { font-size: var(--fs-xs, 11px); color: var(--ink-3); } .rsv-kombi-live { margin-top: 14px; padding: 12px 14px; border-radius: var(--r-ctl, 9px); background: var(--hover); color: var(--ink); font-size: var(--fs-sm, 13px); min-height: 48px; } .rsv-kombi-live-bad { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); } /* ══ R3c/S4: Schicht-Notizen — Rich-Text + Anhänge ═════════════════ */ .rsv-rte { border: 1px solid var(--line); border-radius: var(--r-ctl, 9px); background: var(--card); overflow: hidden; } .rsv-rte-bar { display: flex; gap: 2px; padding: 4px; border-bottom: 1px solid var(--line); background: var(--hover); flex-wrap: wrap; } .rsv-rte-b { appearance: none; font: inherit; cursor: pointer; min-width: 48px; min-height: 48px; padding: 0 10px; border: 0; border-radius: var(--r-ctl, 9px); background: transparent; color: var(--ink-2); font-size: var(--fs-sm, 13px); font-weight: 700; } .rsv-rte-b:hover { background: var(--card); color: var(--ink); } .rsv-rte-b:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: -2px; } .rsv-rte-body { min-height: 96px; padding: 10px 12px; color: var(--ink); font-size: 14px; line-height: 1.5; overflow-y: auto; max-height: 260px; } .rsv-rte-body:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: -2px; } .rsv-rte-body p { margin: 0 0 6px; } .rsv-rte-body ul, .rsv-rte-body ol { margin: 6px 0; padding-left: 22px; } .rsv-attach { display: flex; flex-direction: column; } .rsv-attach-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 4px 0; border-top: 1px solid var(--line); } .rsv-attach-row:first-child { border-top: 0; } .rsv-attach-row span { font-size: var(--fs-sm, 13px); color: var(--ink); word-break: break-all; } .rsv-attach-row i { font-style: normal; color: var(--ink-3); } .rsv-attach-leer { padding: 8px 0; font-size: var(--fs-sm, 13px); color: var(--ink-3); } .rsv-attach-add { min-height: 48px; margin-top: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } /* ══ R4a/S1: Extras-Konfigurator ═══════════════════════════════════ */ .rsv-ex-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 18px; } .rsv-ex-head-t { flex: 1; min-width: 240px; } .rsv-ex-head-t b { display: block; font-size: var(--fs-body, 14px); } .rsv-ex-head-t span { display: block; margin-top: 3px; font-size: var(--fs-sm, 13px); color: var(--ink-2); } .rsv-ex-head .lp-btn { min-height: 48px; gap: 8px; } .rsv-ex-gallery { padding: 18px; margin-top: 12px; } .rsv-ex-gallery > b { display: block; font-size: var(--fs-body, 14px); } .rsv-ex-gallery > span { display: block; margin: 3px 0 14px; font-size: var(--fs-sm, 13px); color: var(--ink-2); } .rsv-ex-tpl-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } .rsv-ex-tpl { appearance: none; font: inherit; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 6px; min-height: 48px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-ctl, 9px); background: var(--card); color: var(--ink); } .rsv-ex-tpl:hover { border-color: var(--ink-3); background: var(--hover); } .rsv-ex-tpl b { font-size: var(--fs-sm, 13px); } .rsv-ex-tpl span { font-size: var(--fs-xs, 11px); color: var(--ink-3); } .rsv-ex-grp { margin-top: 18px; } .rsv-ex-grp > span { display: block; margin-bottom: 10px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); } .rsv-ex-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .rsv-ex-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-card, 12px); background: var(--card); overflow: hidden; } .rsv-ex-off { opacity: 0.6; } .rsv-ex-img { position: relative; height: 96px; display: grid; place-items: center; background: var(--hover) center/cover no-repeat; color: var(--ink-3); } .rsv-ex-price { position: absolute; right: 8px; bottom: 8px; padding: 3px 9px; border-radius: 999px; background: var(--accent); color: var(--accent-ink, #fff); font-size: 12px; font-weight: 700; } /* R4b/S5: Auswahlhilfe zum Steuersatz — die Vorbelegungen des Beraters. Bewusst als Liste und nicht als Tooltip: der Wirt soll sie beim Anlegen lesen, nicht danach suchen. */ .rsv-ex-tax-help { margin: 10px 0 0; padding: 12px 14px; border-radius: var(--r-ctl, 9px); background: var(--hover); } .rsv-ex-tax-help > b { display: block; margin-bottom: 6px; font-size: var(--fs-xs, 11px); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); } .rsv-ex-tax-help ul { margin: 0; padding-left: 16px; } .rsv-ex-tax-help li { margin: 3px 0; font-size: var(--fs-sm, 13px); color: var(--ink-2); line-height: 1.45; } .rsv-ex-tax-help li i { font-style: normal; font-weight: 700; color: var(--ink); } /* R4b/S2: Vorschau des hochgeladenen Extra-Bildes im Dialog. Feste Hoehe, damit ein hochkantes Foto den Dialog nicht auseinanderzieht. */ .rsv-ex-bild-vor { display: block; width: 72px; height: 48px; object-fit: cover; border-radius: var(--r-ctl, 9px); border: 1px solid var(--line); } .rsv-ex-body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 10px; flex: 1; } .rsv-ex-body h4 { margin: 0; font-size: var(--fs-sm, 13px); font-weight: 700; } .rsv-ex-rule { font-size: var(--fs-xs, 11px); color: var(--ink-2); } .rsv-ex-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; min-height: 48px; } .rsv-ex-foot .lp-btn { margin-left: auto; } .rsv-ex-state { font-size: var(--fs-xs, 11px); font-weight: 700; color: var(--ink-3); } .rsv-ex-on { color: var(--ok, #15875a); } .rsv-ex-live { margin-top: 14px; padding: 12px 14px; border-radius: var(--r-ctl, 9px); background: var(--hover); color: var(--ink); font-size: var(--fs-sm, 13px); min-height: 48px; } .rsv-ex-live-bad { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); } .rsv-det-ex { margin-bottom: 16px; } .rsv-det-ex-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 4px 0; border-top: 1px solid var(--line); font-size: var(--fs-sm, 13px); } .rsv-det-ex-row:first-of-type { border-top: 0; } .rsv-det-ex-row i { font-style: normal; color: var(--ink-3); } .rsv-det-ex-sum { border-top: 1px solid var(--ink-3); font-weight: 700; } /* ══ MV2/S3: Gutscheinbuch Mindestverzehr ══════════════════════════════ */ .rsv-gb-sums { display: grid; gap: 10px; margin: 4px 0 14px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } .rsv-gb-sum { border: 1px solid var(--line); border-radius: var(--r-chip, 10px); padding: 10px 12px; background: var(--card, #fff); } /* Der offene Bestand ist die Zahl, die zum Bilanzstichtag zaehlt — er wird hervorgehoben, damit ihn niemand zwischen den Bewegungssummen sucht. */ .rsv-gb-sum-open { border-color: var(--accent, #b03052); } .rsv-gb-sum-k { font-size: var(--fs-xs, 11px); font-weight: 700; color: var(--ink-3, #999); text-transform: uppercase; letter-spacing: .03em; } .rsv-gb-sum-v { font-size: 18px; font-weight: 800; margin-top: 3px; font-variant-numeric: tabular-nums; } .rsv-gb-sum-open .rsv-gb-sum-v { color: var(--accent, #b03052); } .rsv-gb-sum-n { font-size: var(--fs-xs, 11px); color: var(--ink-3, #999); margin-top: 1px; } .rsv-gb-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; font-size: var(--fs-xs, 11px); font-weight: 600; color: var(--ink-2, #555); } .rsv-gb-filter label { display: inline-flex; align-items: center; gap: 5px; } /* Eine breite Buchungstabelle scrollt in SICH, nicht die Seite. */ .rsv-gb-tablewrap { overflow-x: auto; } .rsv-gb-table { width: 100%; border-collapse: collapse; font-size: var(--fs-xs, 11px); } .rsv-gb-table th { text-align: left; font-weight: 700; color: var(--ink-3, #999); text-transform: uppercase; letter-spacing: .03em; padding: 6px 10px 6px 0; border-bottom: 1px solid var(--line); white-space: nowrap; } .rsv-gb-table td { padding: 7px 10px 7px 0; border-bottom: 1px solid var(--line-2, #f0f0f0); white-space: nowrap; } .rsv-gb-amt { font-variant-numeric: tabular-nums; font-weight: 700; } .rsv-gb-bw { display: inline-block; padding: 1px 7px; border-radius: 999px; font-weight: 700; border: 1px solid var(--line); } .rsv-gb-bw-ausgegeben { border-color: #b9d4f2; background: #eef5fd; color: #1c4f86; } .rsv-gb-bw-eingeloest { border-color: #b7dfc4; background: #eefaf1; color: #1f6b3a; } .rsv-gb-bw-erstattet { border-color: #f4e3b2; background: #fef9ec; color: #7a5a10; } .rsv-gb-bw-verfallen { border-color: var(--line); background: var(--hover, #f6f6f6); color: var(--ink-3, #999); } /* Ein Bestand, der nicht aufgeht, ist ein Befund — er sieht auch so aus. */ .rsv-callout-warn { border-color: #e8b4b4; background: #fdf0f0; color: #8a2020; } /* ── Buchungsmodus (Einstellungen → Allgemein → Buchungsseite) ──────── Was Gäste auf der Buchungsseite buchen. Den Schalter gab es bisher nur in der iOS-App; im Dashboard war die Gästeseite der Tischreservierung damit unerreichbar. Eine Entscheidung, die eine ÖFFENTLICHE Seite austauscht — darum groß, mit sichtbarem Warnsatz. */ /* ── Seiten-Umschalter (zwei Buchungsseiten) ───────────────────────── */ .rsv-seiten { margin: 2px 0 18px; } .rsv-seiten-row { display: flex; flex-wrap: wrap; gap: 8px; } .rsv-seite-pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink-2); font-size: 13.5px; font-weight: 550; cursor: pointer; } .rsv-seite-pill.aktiv { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--card)); color: var(--ink); } .rsv-seite-pill.neu { border-style: dashed; color: var(--ink-3); } .rsv-seite-pill svg { flex: none; } /* Adresse + Veröffentlichung der zweiten Seite — abgesetzt, weil es der einzige Block der Karte ist, der SOFORT schreibt statt über die Speichern-Leiste. */ .rsv-seite-adr { margin: 0 0 16px; padding: 13px; border: 1px solid var(--line); border-radius: var(--r-ctl, 8px); background: var(--bg-2, var(--card)); } .rsv-seite-adr .rsv-set-sub { margin: 4px 0 10px; } .rsv-modus { margin: 2px 0 16px; } .rsv-modus-h { font-size: 14px; margin-bottom: 9px; } .rsv-modus-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 9px; } .rsv-modus-opt { display: flex; align-items: flex-start; gap: 9px; padding: 11px 13px; border: 1.5px solid var(--line); border-radius: var(--r-ctl, 8px); cursor: pointer; background: var(--card); } .rsv-modus-opt:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--card)); } .rsv-modus-opt.off { opacity: 0.5; cursor: not-allowed; } .rsv-modus-opt input { margin-top: 2px; flex: none; } .rsv-modus-opt span { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .rsv-modus-opt b { font-size: 14px; font-weight: 600; } .rsv-modus-opt small { font-size: 12.5px; color: var(--ink-3); line-height: 1.35; } .rsv-modus-warn { display: flex; align-items: flex-start; gap: 7px; margin: 10px 0 0; font-size: 12.5px; color: var(--ink-2); } .rsv-modus-warn svg { flex: none; margin-top: 2px; color: var(--ink-3); } /* ── Einstellungs-Hub: Suche und Trefferliste (§ 6.5) ───────────────── Auf denselben Massen wie die Gäste-Suche (.rsv-g-*) — es ist dasselbe Muster, und zwei knapp verschiedene Suchfelder in einem Bereich lesen sich wie ein Fehler. */ .rsv-hub-suche { position: relative; margin-bottom: 14px; } .rsv-hub-suche > svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--ink-3, #888); pointer-events: none; } .rsv-hub-suche > input { width: 100%; padding: 11px 14px 11px 38px; border: 1px solid var(--line, #ddd); border-radius: var(--r-ctl, 5px); font: inherit; background: var(--card, #fff); color: inherit; } .rsv-hub-suche > input:focus { outline: 2px solid var(--accent, #111); outline-offset: -1px; } .rsv-hub-gruppe { margin-bottom: 18px; } .rsv-hub-gruppe > h4 { margin: 0 0 8px; font-size: var(--fs-xs, 11px); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3, #888); } .rsv-hub-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; margin-bottom: 8px; border: 1px solid var(--line, #ddd); border-radius: var(--r-card, 5px); background: var(--card, #fff); font: inherit; color: inherit; cursor: pointer; } .rsv-hub-row:hover { background: var(--hover, #f7f7f7); } .rsv-hub-ic { display: flex; color: var(--ink-2, #555); flex: none; } .rsv-hub-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .rsv-hub-tx > b { font-size: 14px; font-weight: 650; } .rsv-hub-tx > span { font-size: 12.5px; color: var(--ink-2, #555); } /* „Extern" ist eine Warnung, keine Auszeichnung: der Klick verlaesst die Einstellungen (neuer Tab oder anderer Bereich). */ .rsv-hub-ext { flex: none; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: var(--r-chip, 4px); background: var(--hover, #f0f0f0); color: var(--ink-2, #555); } /* Kurzes Hervorheben der angesprungenen Karte — ohne das landet man mitten in einer langen Seite und sieht nicht, welche gemeint war. */ .rsv-set-card-ziel { outline: 2px solid var(--accent, #111); outline-offset: 2px; transition: outline-color .4s; }