/* four corners – Ressourcenbuchung Keine externen Schriften oder Requests (DSGVO-freundlich). */ /* Die Variablen liegen auf :root, damit auch das Buchungsfenster sie kennt. Es hängt technisch außerhalb von .fcb-app, direkt am . Eigene Farben gehören in den Customizer, nicht in diese Datei – sonst sind sie beim nächsten Update weg: :root { --paper: #eee; --signal: #123456; } */ :root { --ink: #0d1211; --ink-60: #3c4744; --ink-30: #566360; --line: #b9c2bf; --paper: #eceeec; --card: #ffffff; --signal: #14573d; --signal-soft: #dce9e3; --warn: #97381f; --warn-soft: #f8e3dd; --cat-fahrzeug: #14573d; --cat-laptop: #2f4761; --cat-geraet: #855814; --cat-raum: #5c2f55; --radius: 10px; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } .fcb-app { font-family: var(--sans); color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 0; line-height: 1.45; font-size: 15px; max-width: 1180px; margin: 0 auto; overflow: hidden; } .fcb-app *, .fcb-app *::before, .fcb-app *::after, .fcb-modal *, .fcb-modal *::before, .fcb-modal *::after { box-sizing: border-box; } .fcb-app :focus-visible, .fcb-modal :focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; } .fcb-boot { padding: 48px 24px; text-align: center; color: var(--ink-60); } /* ---------------------------------------------------------- Grundlagen */ .fcb-app h2, .fcb-modal h2 { font-size: 19px; letter-spacing: -0.01em; margin: 0 0 4px; font-weight: 650; } .fcb-app h3, .fcb-modal h3 { font-size: 15px; margin: 0 0 10px; font-weight: 650; } .fcb-app p, .fcb-modal p { margin: 0 0 12px; } .fcb-muted { color: var(--ink-60); font-size: 13.5px; } .fcb-btn { appearance: none; border: 1px solid var(--ink); background: var(--ink); color: #fff; font: inherit; font-weight: 600; padding: 9px 16px; border-radius: 8px; cursor: pointer; transition: transform .12s ease, opacity .12s ease; } .fcb-btn:hover { opacity: .88; } .fcb-btn:active { transform: translateY(1px); } .fcb-btn[disabled] { opacity: .5; cursor: not-allowed; } .fcb-btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); } .fcb-btn--ghost:hover { border-color: var(--ink-30); opacity: 1; } .fcb-btn--danger { background: transparent; color: var(--warn); border-color: #e6c6bc; } .fcb-btn--small { padding: 6px 11px; font-size: 13px; } .fcb-field { margin-bottom: 14px; } .fcb-field label { display: block; font-size: 12.5px; font-weight: 650; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-60); margin-bottom: 5px; } .fcb-app input[type="text"], .fcb-app input[type="email"], .fcb-app input[type="password"], .fcb-app input[type="date"], .fcb-app input[type="time"], .fcb-app input[type="number"], .fcb-app select, .fcb-app textarea, .fcb-modal input[type="text"], .fcb-modal input[type="email"], .fcb-modal input[type="password"], .fcb-modal input[type="date"], .fcb-modal input[type="time"], .fcb-modal input[type="number"], .fcb-modal select, .fcb-modal textarea { width: 100%; font: inherit; font-family: var(--sans); color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; } .fcb-app input:focus, .fcb-app select:focus, .fcb-app textarea:focus, .fcb-modal input:focus, .fcb-modal select:focus, .fcb-modal textarea:focus { border-color: var(--signal); outline: none; } .fcb-app textarea, .fcb-modal textarea { min-height: 68px; resize: vertical; } .fcb-row { display: flex; gap: 10px; flex-wrap: wrap; } .fcb-row > * { flex: 1 1 140px; min-width: 0; } .fcb-note { border-radius: 8px; padding: 10px 12px; font-size: 13.5px; margin-bottom: 14px; } .fcb-note--ok { background: var(--signal-soft); color: #12513a; } .fcb-note--bad { background: var(--warn-soft); color: #8a3421; } /* --------------------------------------------------------------- Login */ .fcb-login { max-width: 380px; margin: 0 auto; padding: 44px 24px 52px; } .fcb-login__eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--signal); font-weight: 700; margin-bottom: 6px; } .fcb-login h2 { font-size: 24px; margin-bottom: 18px; } .fcb-login .fcb-btn { width: 100%; } .fcb-login__links { margin-top: 14px; text-align: center; font-size: 13.5px; } .fcb-login__links button { background: none; border: 0; padding: 0; font: inherit; color: var(--ink-60); text-decoration: underline; cursor: pointer; } /* ----------------------------------------------------------- Kopfzeile */ .fcb-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; background: var(--card); border-bottom: 1px solid var(--line); flex-wrap: wrap; } .fcb-head__who { font-size: 13.5px; color: var(--ink-60); } .fcb-head__who strong { color: var(--ink); } .fcb-tabs { display: flex; gap: 4px; flex-wrap: wrap; } .fcb-tab { appearance: none; border: 0; background: transparent; font: inherit; font-weight: 600; font-size: 14px; color: var(--ink-60); padding: 7px 12px; border-radius: 999px; cursor: pointer; } .fcb-tab[aria-current="true"] { background: var(--ink); color: #fff; } /* --------------------------------------------------------------- Layout */ /* Der Kalender richtet sich nach dem Platz, den das Theme ihm lässt – die zugehörigen Regeln stehen am Dateiende. */ .fcb-main { container-type: inline-size; container-name: fcbmain; } .fcb-main { padding: 16px 18px 22px; } .fcb-split { display: grid; grid-template-columns: 214px minmax(0, 1fr); gap: 18px; align-items: start; } /* Ohne min-width: 0 wachsen Grid-Kinder auf ihre Inhaltsbreite an, statt sich dem verfügbaren Platz anzupassen. */ .fcb-split > * { min-width: 0; } .fcb-side { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; position: sticky; top: 12px; } .fcb-side h3 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-60); } .fcb-side__group { margin-bottom: 12px; } .fcb-side__group > div:first-child { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-30); margin-bottom: 5px; } .fcb-check { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 13.5px; cursor: pointer; } .fcb-check input { accent-color: var(--signal); } .fcb-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; } /* ------------------------------------------------------------ Kalender */ .fcb-calbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; } .fcb-calbar__month { font-size: 20px; font-weight: 650; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } .fcb-nav { display: flex; gap: 6px; align-items: center; } .fcb-nav button { appearance: none; border: 1px solid var(--line); background: var(--card); width: 34px; height: 34px; border-radius: 8px; cursor: pointer; font-size: 16px; line-height: 1; color: var(--ink); } .fcb-nav .fcb-today { width: auto; padding: 0 12px; font: inherit; font-size: 13.5px; font-weight: 600; } .fcb-grid { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .fcb-grid__head, .fcb-grid__body { display: grid; /* minmax(0, 1fr), nicht 1fr: sonst erzwingt der breiteste Buchungsbalken die Spaltenbreite, Kopf und Zellen laufen auseinander und das Raster wird breiter als der Platz im Theme. */ grid-template-columns: repeat(7, minmax(0, 1fr)); } .fcb-grid__head div { padding: 8px 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-30); border-bottom: 1px solid var(--line); text-align: center; } .fcb-day { min-height: 104px; min-width: 0; overflow: hidden; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 6px; background: var(--card); text-align: left; font: inherit; cursor: pointer; display: block; width: 100%; appearance: none; } .fcb-day__chips { display: block; min-width: 0; } .fcb-day:nth-child(7n) { border-right: 0; } .fcb-day:hover { background: #fafbfa; } .fcb-day--out { background: #f7f8f7; color: var(--ink-30); } .fcb-day--weekend { background: #fafbfa; } .fcb-day--today .fcb-day__num { background: var(--ink); color: #fff; border-radius: 999px; padding: 1px 7px; } .fcb-day__num { font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; display: inline-block; margin-bottom: 4px; } .fcb-chip { display: flex; align-items: baseline; gap: 5px; font-size: 11.5px; padding: 2px 4px 2px 6px; border-radius: 5px; margin-bottom: 2px; background: #f1f3f2; border-left: 3px solid var(--ink-30); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fcb-chip time { font-family: var(--mono); font-size: 10.5px; color: var(--ink-60); flex: none; } .fcb-chip__name { overflow: hidden; text-overflow: ellipsis; } .fcb-chip--more { background: transparent; border: 0; color: var(--ink-60); padding-left: 6px; } /* --------------------------------------------------------------- Liste */ .fcb-list { display: flex; flex-direction: column; gap: 8px; } .fcb-item { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--ink-30); border-radius: 8px; padding: 10px 12px; display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; } .fcb-item__title { font-weight: 650; } .fcb-item__meta { font-size: 13px; color: var(--ink-60); } .fcb-item__meta time { font-family: var(--mono); } .fcb-item__actions { display: flex; gap: 6px; } .fcb-empty { background: var(--card); border: 1px dashed var(--line); border-radius: var(--radius); padding: 26px 18px; text-align: center; color: var(--ink-60); } /* --------------------------------------------------------------- Modal */ .fcb-modal { position: fixed; inset: 0; background: rgba(19, 26, 24, .45); display: flex; align-items: flex-end; justify-content: center; z-index: 99999; padding: 0; } .fcb-modal__box { /* Deckendes Weiß, nicht var(--paper): das Fenster liegt über der Seite und muss unabhängig vom Theme lesbar bleiben. */ background: #ffffff; color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.45; width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto; border: 1px solid var(--line); border-bottom: 0; border-radius: 14px 14px 0 0; padding: 18px; box-shadow: 0 8px 32px rgba(13, 18, 17, .22); animation: fcb-rise .18s ease-out; } @media (min-width: 700px) { .fcb-modal { align-items: center; padding: 20px; } .fcb-modal__box { border-radius: 14px; border-bottom: 1px solid var(--line); } } @keyframes fcb-rise { from { transform: translateY(14px); opacity: .6; } to { transform: none; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .fcb-modal__box { animation: none; } .fcb-btn { transition: none; } } .fcb-modal__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 14px; } .fcb-modal__close { appearance: none; border: 0; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; color: var(--ink-60); padding: 2px 6px; } .fcb-modal__actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; } /* ---------------------------------------------------------- Verwaltung */ .fcb-panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; } .fcb-table { width: 100%; border-collapse: collapse; font-size: 14px; } .fcb-table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-30); border-bottom: 1px solid var(--line); padding: 6px 8px 6px 0; } .fcb-table td { padding: 9px 8px 9px 0; border-bottom: 1px solid var(--line); vertical-align: middle; } .fcb-table tr:last-child td { border-bottom: 0; } .fcb-badge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: #eceeed; color: var(--ink-60); } .fcb-badge--admin { background: var(--signal-soft); color: #12513a; } .fcb-badge--off { background: var(--warn-soft); color: #8a3421; } /* Im Fenster ist der Grund weiß – Einträge brauchen eine leichte Tönung, damit sie sich absetzen. */ .fcb-modal .fcb-item { background: #f6f7f6; } .fcb-modal .fcb-empty { background: #f6f7f6; border-color: var(--line); } .fcb-toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 999px; font-size: 14px; z-index: 100000; max-width: 90vw; text-align: center; } .fcb-toast--bad { background: var(--warn); } /* --------------------------------------------------------------- Mobil */ @media (max-width: 860px) { .fcb-split { grid-template-columns: 1fr; } .fcb-side { position: static; } .fcb-day { min-height: 76px; padding: 4px; } .fcb-chip time { display: none; } .fcb-main { padding: 12px; } .fcb-head { padding: 12px; } } @media (max-width: 560px) { .fcb-app { font-size: 14.5px; border-radius: 0; border-left: 0; border-right: 0; } .fcb-chip__name { display: none; } .fcb-chip { height: 8px; padding: 0; margin-bottom: 3px; border-radius: 3px; } .fcb-day { min-height: 62px; } .fcb-calbar__month { font-size: 17px; } } /* ------------------------------------------- Anpassung an den Platzbedarf */ /* Die Media Queries oben kennen nur die Fensterbreite. Fasst das Theme den Inhalt schmal ein, ist der Kalender aber auch am großen Bildschirm eng. Diese Regeln richten sich nach dem Platz, den das Tool wirklich hat, und stehen bewusst am Dateiende, damit sie die Vorgaben oben überschreiben. */ @container fcbmain (max-width: 780px) { .fcb-split { grid-template-columns: minmax(0, 1fr); } .fcb-side { position: static; } } @container fcbmain (max-width: 620px) { .fcb-day { min-height: 78px; padding: 4px; } .fcb-chip time { display: none; } } @container fcbmain (max-width: 470px) { .fcb-chip__name { display: none; } .fcb-chip { height: 8px; padding: 0; margin-bottom: 3px; border-radius: 3px; } .fcb-day { min-height: 62px; } .fcb-calbar__month { font-size: 17px; } }