/* Gartenplaner — Design „Feldbuch" --------------------------------------------------------------------------- Leitgedanke: Die Farben benennen die Phasen einer Kultur, statt zu dekorieren. Erde → Anzucht (Aussaat, Platte, noch kein Beet) Blatt → Wachstum, Primärfarbe der Oberfläche Reife → Erntefenster Frost → kalte Warnung; Frost ist blau, nicht rot Alarm → echte Fehler: Überschneidung, Überbelegung Zahlen stehen in IBM Plex Mono — Beetmeter, Kalenderwochen und Mengen lesen sich wie Einträge in einem Feldbuch. Fraunces trägt die Überschriften, Karla den Fließtext. Tag ist der Standard; Nacht über data-theme="dark" am -Element. */ @import url('/fonts/fonts.css'); :root { /* --- Tag --- */ --bg: #eaefe4; --bg-tint: #dfe7d7; --surface: #ffffff; --surface-2: #f4f7f0; --surface-3: #e8eee2; --line: #cfd9c6; --line-soft: #e0e7d8; --ink: #1b2a1d; --ink-2: #5a6b58; --ink-3: #86927f; --leaf: #2f6b3f; --leaf-bright: #46915a; --leaf-wash: rgba(47, 107, 63, 0.09); --leaf-edge: rgba(47, 107, 63, 0.28); --soil: #8a6544; --soil-wash: rgba(138, 101, 68, 0.12); --reife: #b8901f; --reife-wash: rgba(184, 144, 31, 0.16); --frost: #3d7ba8; --frost-wash: rgba(61, 123, 168, 0.13); --alarm: #a8442f; --alarm-wash: rgba(168, 68, 47, 0.10); /* Text auf datengefärbten Flächen (Kulturfarben) — in beiden Modi gleich */ --on-crop: #16200f; --shadow: 0 1px 2px rgba(27, 42, 29, 0.06), 0 8px 24px rgba(27, 42, 29, 0.07); --shadow-lift: 0 12px 40px rgba(27, 42, 29, 0.18); --fd: 'Fraunces', Georgia, serif; --fb: 'Karla', system-ui, sans-serif; --fm: 'IBM Plex Mono', ui-monospace, monospace; --r-sm: 4px; --r: 8px; --r-lg: 12px; --t: 170ms; --t-slow: 320ms; } :root[data-theme="dark"] { /* --- Nacht: Gewächshaus nach Sonnenuntergang --- */ --bg: #0e1610; --bg-tint: #0a110c; --surface: #16211a; --surface-2: #1c2a20; --surface-3: #223227; --line: #2c3d31; --line-soft: #24332a; --ink: #dde7d8; --ink-2: #93a58d; --ink-3: #6d7f69; --leaf: #6cb86a; --leaf-bright: #93d68d; --leaf-wash: rgba(108, 184, 106, 0.11); --leaf-edge: rgba(108, 184, 106, 0.3); --soil: #bb8f66; --soil-wash: rgba(187, 143, 102, 0.14); --reife: #e0bd4e; --reife-wash: rgba(224, 189, 78, 0.16); --frost: #7cb4dc; --frost-wash: rgba(124, 180, 220, 0.14); --alarm: #e28b72; --alarm-wash: rgba(226, 139, 114, 0.12); --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35); --shadow-lift: 0 12px 40px rgba(0, 0, 0, 0.55); } * { box-sizing: border-box; margin: 0; padding: 0; } /* Muss über den Layout-Regeln stehen: display:flex o.ä. würde das hidden-Attribut sonst aushebeln (höhere Spezifität als das UA-Stylesheet). */ [hidden] { display: none !important; } html, body { height: 100%; } body { background: var(--bg); color: var(--ink); font-family: var(--fb); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; transition: background var(--t-slow), color var(--t-slow); } h1, h2, h3, h4 { font-family: var(--fd); font-optical-sizing: auto; color: var(--ink); font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; } h1 { font-size: 29px; } h2 { font-size: 22px; margin-bottom: 14px; } h3 { font-size: 18px; margin-bottom: 10px; } a { color: var(--leaf); } .app-shell { display: flex; min-height: 100vh; } /* ---------- Sidebar ---------- */ .sidebar { width: 236px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--line); padding: 22px 14px; position: sticky; top: 0; height: 100vh; overflow-y: auto; transition: background var(--t-slow), border-color var(--t-slow); } .brand { margin-bottom: 24px; display: flex; flex-direction: column; gap: 1px; padding: 0 6px; } .brand-mark { color: var(--leaf); margin-bottom: 8px; } .brand-name { font-family: var(--fd); font-size: 23px; color: var(--ink); font-weight: 600; letter-spacing: -0.02em; } .brand-tag { font-size: 11px; color: var(--ink-3); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; } .nav { display: flex; flex-direction: column; gap: 1px; } .nav a { display: flex; align-items: center; gap: 11px; padding: 9px 12px; color: var(--ink-2); text-decoration: none; border-radius: var(--r); min-height: 42px; font-size: 14.5px; position: relative; transition: background var(--t), color var(--t); } .nav a svg { flex-shrink: 0; opacity: 0.75; } .nav a:hover { color: var(--ink); background: var(--surface-2); } .nav a.active { color: var(--leaf); background: var(--leaf-wash); font-weight: 500; } .nav a.active svg { opacity: 1; } /* Aktive Seite bekommt einen Trieb am linken Rand */ .nav a.active::before { content: ''; position: absolute; left: -14px; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--leaf); } .nav-section { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); padding: 18px 12px 6px; font-weight: 600; } /* ---------- Content ---------- */ .content { flex: 1; min-width: 0; padding: 0 28px 60px; } .topbar { display: flex; align-items: center; gap: 14px; padding: 20px 0 16px; border-bottom: 1px solid var(--line); margin-bottom: 22px; } .topbar h1 { margin-bottom: 0; } .icon-btn { background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); border-radius: var(--r); width: 40px; height: 40px; display: none; align-items: center; justify-content: center; cursor: pointer; transition: all var(--t); } .icon-btn:hover { color: var(--leaf); border-color: var(--leaf-edge); } .topbar-tools { margin-left: auto; display: flex; align-items: center; gap: 10px; } .wip-badge { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; border: 1px solid var(--line); padding: 4px 10px; border-radius: 999px; } /* Tag/Nacht — Sonne wächst zum Mond */ .theme-btn { background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); border-radius: 999px; height: 38px; padding: 0 14px 0 11px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-family: var(--fb); font-size: 12.5px; letter-spacing: 0.04em; transition: all var(--t); } .theme-btn:hover { color: var(--leaf); border-color: var(--leaf-edge); background: var(--leaf-wash); } .theme-btn svg { flex-shrink: 0; } .theme-btn .icon-night { display: none; } :root[data-theme="dark"] .theme-btn .icon-day { display: none; } :root[data-theme="dark"] .theme-btn .icon-night { display: block; } /* ---------- Cards & Grid ---------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--shadow); transition: background var(--t-slow), border-color var(--t-slow); } .grid { display: grid; gap: 16px; } .grid-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .view { max-width: 1280px; } .stat-card { text-align: left; } .stat-value { font-family: var(--fd); font-optical-sizing: auto; font-size: 36px; font-weight: 600; color: var(--leaf); line-height: 1.05; letter-spacing: -0.03em; } .stat-label { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); margin-top: 6px; font-weight: 600; } .stat-sub { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; } /* ---------- Buttons ---------- */ .btn { font-family: var(--fb); font-weight: 500; font-size: 13.5px; letter-spacing: 0.02em; border-radius: var(--r); padding: 10px 17px; min-height: 42px; cursor: pointer; border: 1px solid var(--leaf); transition: all var(--t); display: inline-flex; align-items: center; gap: 8px; text-decoration: none; } .btn-primary { background: var(--leaf); color: #fff; } .btn-primary:hover { background: var(--leaf-bright); border-color: var(--leaf-bright); } :root[data-theme="dark"] .btn-primary { color: #0e1610; font-weight: 600; } .btn-ghost { background: transparent; color: var(--leaf); } .btn-ghost:hover { background: var(--leaf-wash); } .btn-danger { background: transparent; color: var(--alarm); border-color: var(--alarm); } .btn-danger:hover { background: var(--alarm-wash); } .btn-sm { padding: 6px 12px; min-height: 34px; font-size: 12.5px; } .btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .btn:focus-visible, .nav a:focus-visible, .tab:focus-visible, .icon-btn:focus-visible, .theme-btn:focus-visible, .chev-btn:focus-visible { outline: 2px solid var(--leaf); outline-offset: 2px; } /* ---------- Formulare ---------- */ .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 13px; } .form-field { display: flex; flex-direction: column; gap: 5px; } .form-field.full { grid-column: 1 / -1; } label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); font-weight: 600; } input, select, textarea { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); font-family: var(--fb); font-weight: 400; padding: 10px 12px; min-height: 42px; font-size: 14px; transition: border-color var(--t), box-shadow var(--t); } input[type="number"], input[type="date"] { font-family: var(--fm); font-size: 13.5px; } textarea { min-height: 80px; resize: vertical; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--leaf); box-shadow: 0 0 0 3px var(--leaf-wash); } input[type="color"] { padding: 4px; cursor: pointer; min-height: 42px; } input[type="checkbox"] { min-height: auto; width: 18px; height: 18px; accent-color: var(--leaf); } select option { background: var(--surface); color: var(--ink); } .form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; flex-wrap: wrap; } .hint { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; } /* ---------- Tabellen ---------- */ .table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 14px; } th { text-align: left; font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; padding: 9px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; } td { padding: 9px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; } tbody tr:last-child td { border-bottom: none; } tr:hover td { background: var(--surface-2); } td.editable { cursor: pointer; border-radius: var(--r-sm); } td.editable:hover { background: var(--leaf-wash); box-shadow: inset 0 0 0 1px var(--leaf-edge); } .inline-editor { padding: 4px 8px; min-height: 30px; font-size: 13px; width: 100%; } /* Messwerte im Feldbuch-Satz */ td.num, .bar-row .bar-val { text-align: right; font-family: var(--fm); font-size: 13px; font-variant-numeric: tabular-nums; } .table-actions { display: flex; gap: 6px; justify-content: flex-end; } .table-actions button { background: transparent; border: 1px solid var(--line); color: var(--ink-3); border-radius: var(--r-sm); width: 32px; height: 32px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all var(--t); } .table-actions button:hover { color: var(--leaf); border-color: var(--leaf); background: var(--leaf-wash); } .table-actions button.del:hover { color: var(--alarm); border-color: var(--alarm); background: var(--alarm-wash); } /* ---------- Badges ---------- */ .badge { display: inline-block; font-size: 11px; letter-spacing: 0.03em; padding: 3px 9px; border-radius: 999px; font-weight: 500; border: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; } .badge.gold { color: var(--reife); border-color: var(--reife); background: var(--reife-wash); } .badge.green { color: var(--leaf); border-color: var(--leaf-edge); background: var(--leaf-wash); } .badge.red { color: var(--alarm); border-color: var(--alarm); background: var(--alarm-wash); } .badge.muted { color: var(--ink-3); } /* Signaturelement: das Pflanzschild. Steht überall dort, wo eine Kultur benannt wird — Tabelle, Kalenderdetail, Draufsicht, Anzuchtliste. */ .color-dot { display: inline-block; width: 11px; height: 15px; clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%); vertical-align: -3px; margin-right: 7px; } /* ---------- Tabs ---------- */ .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 20px; flex-wrap: wrap; } .tab { background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--ink-2); font-family: var(--fb); font-size: 13.5px; letter-spacing: 0.02em; font-weight: 500; padding: 10px 14px; cursor: pointer; min-height: 42px; margin-bottom: -1px; transition: color var(--t), border-color var(--t); } .tab:hover { color: var(--ink); } .tab.active { color: var(--leaf); border-bottom-color: var(--leaf); } /* ---------- Anbau-Kalender ---------- */ .calendar-scroll { overflow-x: auto; padding: 0; } .calendar { min-width: 900px; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); } .cal-row { display: flex; border-bottom: 1px solid var(--line-soft); } .cal-row:last-child { border-bottom: none; } .cal-label { flex: 0 0 168px; padding: 10px 12px; font-size: 13.5px; color: var(--ink); border-right: 1px solid var(--line); display: flex; align-items: center; gap: 8px; background: var(--surface-2); } .cal-label small { color: var(--ink-3); font-size: 11.5px; } .cal-track { flex: 1; position: relative; height: 44px; background: repeating-linear-gradient(to right, transparent 0, transparent calc(8.333% - 1px), var(--line-soft) calc(8.333% - 1px), var(--line-soft) 8.333%); } .cal-month-labels { display: flex; } .cal-month-labels .cal-month { flex: 1; text-align: center; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; padding: 9px 0; border-bottom: 1px solid var(--line); } .cal-bar { position: absolute; top: 6px; height: 30px; border-radius: var(--r-sm); cursor: pointer; border: 1px solid rgba(0, 0, 0, 0.18); display: flex; align-items: center; padding: 0 8px; font-size: 11.5px; color: var(--on-crop); font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: filter var(--t), box-shadow var(--t); } .cal-bar:hover { filter: brightness(1.07); box-shadow: 0 0 0 2px var(--leaf-edge); } .cal-bar.dragging { opacity: 0.35; } /* Frost ist kalt — nicht rot */ .cal-bar.frost { outline: 1.5px solid var(--frost); outline-offset: -1px; } .cal-track.drop-target { background: var(--leaf-wash); box-shadow: inset 0 0 0 1px var(--leaf-edge); } /* Erntefenster: warme Schraffur auf der Kulturfarbe */ .cal-bar .harvest-mark { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.5) 0 3px, transparent 3px 7px); border-left: 1px solid rgba(255, 255, 255, 0.45); } /* Anzucht: Erde, gestrichelt — das Beet ist noch frei */ .cal-bar.anzucht { background: var(--soil-wash) !important; border: 1px dashed var(--soil); height: 13px; top: 15px; cursor: default; } .cal-bar.anzucht:hover { filter: none; box-shadow: none; } .cal-bed-detail .cal-bar.anzucht { height: 11px; top: 11px; } .cal-legend { display: flex; gap: 20px; margin-top: 14px; font-size: 12.5px; color: var(--ink-2); flex-wrap: wrap; } .cal-legend .swatch { display: inline-block; width: 15px; height: 11px; border-radius: 2px; margin-right: 7px; vertical-align: -1px; } .cal-legend .swatch.solid { background: var(--leaf-bright); } .cal-legend .swatch.hatched { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.55) 0 2px, transparent 2px 5px), var(--reife); } .cal-legend .swatch.anzucht { background: var(--soil-wash); border: 1px dashed var(--soil); } .cal-legend .swatch.frost { background: transparent; border: 1.5px solid var(--frost); } /* Beet auf-/zuklappen */ .cal-bed-head .cal-label { cursor: pointer; user-select: none; } .cal-bed-head .cal-label:hover { background: var(--surface-3); } .cal-bed-head.expanded .cal-label { background: var(--leaf-wash); } .chevron { display: inline-block; width: 15px; color: var(--ink-3); font-size: 11px; flex-shrink: 0; } .cal-bed-head .cal-track { height: 44px; } .cal-label.detail { background: var(--surface); padding-left: 26px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; } .cal-label.detail small { font-size: 11px; font-family: var(--fm); } .cal-bed-detail .cal-row { border-bottom: 1px solid var(--line-soft); } .cal-bed-detail .cal-row:last-child { border-bottom: none; } .cal-bed-detail .cal-track { height: 34px; } .cal-bed-detail .cal-bar { top: 2px; height: 28px; } /* ---------- Kulturen / Sorten-Collapse ---------- */ .crop-row.expanded td { background: var(--leaf-wash); } .chev-btn { background: transparent; border: none; color: var(--ink-3); cursor: pointer; font-size: 12px; width: 30px; height: 30px; border-radius: var(--r-sm); transition: all var(--t); } .chev-btn:hover { color: var(--leaf); background: var(--leaf-wash); } .crop-detail > td { padding: 0; background: var(--surface-2); } .variety-panel { padding: 16px 18px; } .variety-table th { font-size: 10px; } .variety-table td { padding: 7px 10px; font-size: 13px; } /* ---------- Modal ---------- */ .modal-backdrop { position: fixed; inset: 0; z-index: 200; background: rgba(14, 22, 16, 0.5); backdrop-filter: blur(3px); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; } .modal { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); width: 100%; max-width: 660px; padding: 26px; box-shadow: var(--shadow-lift); } .modal h3 { margin-bottom: 16px; } .modal .close-x { float: right; background: transparent; border: none; color: var(--ink-3); font-size: 22px; cursor: pointer; line-height: 1; padding: 4px 6px; border-radius: var(--r-sm); } .modal .close-x:hover { color: var(--alarm); background: var(--alarm-wash); } .hidden { display: none !important; } /* ---------- Listen ---------- */ .list-item { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--line-soft); } .list-item:last-child { border-bottom: none; } .list-item .grow { flex: 1; min-width: 0; } .list-item .title { font-size: 14.5px; color: var(--ink); } .list-item .sub { font-size: 12.5px; color: var(--ink-3); } .empty { padding: 34px; text-align: center; color: var(--ink-3); font-family: var(--fd); font-size: 17px; font-optical-sizing: auto; } .toolbar { display: flex; gap: 11px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; } .toolbar .grow { flex: 1; } .toolbar input, .toolbar select { min-width: 180px; } /* ---------- Toast ---------- */ .toast-wrap { position: fixed; bottom: 20px; right: 20px; z-index: 300; display: flex; flex-direction: column; gap: 8px; } .toast { background: var(--surface); border: 1px solid var(--leaf); border-left-width: 3px; color: var(--ink); padding: 12px 18px; border-radius: var(--r); font-size: 14px; box-shadow: var(--shadow-lift); animation: toast-in var(--t) ease; } .toast.error { border-color: var(--alarm); color: var(--alarm); } @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* ---------- Statistik-Balken ---------- */ .bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 13px; } .bar-row .bar-label { flex: 0 0 150px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bar-row .bar-track { flex: 1; height: 12px; background: var(--surface-3); border-radius: 999px; overflow: hidden; } .bar-row .bar-fill { height: 100%; border-radius: 999px; background: var(--leaf); min-width: 2px; } .bar-row .bar-val { flex: 0 0 64px; color: var(--ink); } /* ---------- Beet-Draufsicht ---------- */ .bed-plan { position: relative; margin-top: 14px; padding: 26px 0 6px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); } .bed-ruler { position: absolute; top: 0; left: 0; right: 0; height: 22px; } .bed-tick { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); } .bed-tick span { position: absolute; top: 3px; left: 4px; font-size: 10px; color: var(--ink-3); font-family: var(--fm); } .bed-lane { position: relative; height: 52px; margin: 0 0 6px; } .bed-lane:last-child { margin-bottom: 0; } .bed-block { position: absolute; top: 0; height: 52px; border: 1px solid rgba(0, 0, 0, 0.18); border-radius: var(--r-sm); display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 0 9px; overflow: hidden; cursor: pointer; transition: filter var(--t), box-shadow var(--t); } .bed-block:hover { filter: brightness(1.07); box-shadow: 0 0 0 2px var(--leaf-edge); } .bed-block.konflikt { outline: 1.5px solid var(--alarm); outline-offset: -1px; } .bed-block-label { font-size: 11.5px; color: var(--on-crop); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Pflanzreihen als Schnüre über dem Beet */ .bed-rows { display: flex; flex-direction: column; gap: 2px; } .bed-rows i { display: block; height: 1px; background: rgba(0, 0, 0, 0.22); } .warn-card { border-left: 3px solid var(--alarm); background: var(--alarm-wash); font-size: 13.5px; padding: 13px 18px; margin-bottom: 12px; } .warn-card b { color: var(--alarm); } /* ---------- Satzserien-Vorschau ---------- */ .series-preview { margin: 16px 0 4px; } .series-preview:empty { margin: 0; } .series-head { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--leaf); margin-bottom: 8px; font-weight: 600; } .series-preview td { font-family: var(--fm); font-size: 12.5px; } .series-preview td:first-child { font-family: var(--fb); } /* ---------- Anzucht: Kalenderwochen-Trenner ---------- */ tr.kw-sep td { background: var(--surface-3); font-family: var(--fm); font-size: 11px; letter-spacing: 0.08em; color: var(--ink-2); padding: 6px 12px; font-weight: 500; } tr.kw-sep:hover td { background: var(--surface-3); } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .sidebar { position: fixed; left: 0; top: 0; bottom: 0; z-index: 150; transform: translateX(-100%); transition: transform var(--t-slow); box-shadow: var(--shadow-lift); } .sidebar.open { transform: none; } .content { padding: 0 16px 50px; } .icon-btn { display: inline-flex; } .cal-label { flex-basis: 120px; } h1 { font-size: 24px; } } @media (max-width: 620px) { .theme-btn span { display: none; } .theme-btn { padding: 0; width: 38px; justify-content: center; } } @media (max-width: 520px) { .grid-2 { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; } .bed-block-label { font-size: 10.5px; } .bed-lane, .bed-block { height: 44px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ---------- Anmeldung ---------- */ .login-screen { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--bg); } .login-screen[hidden] { display: none; } .login-card { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px 28px 28px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 14px; } .login-mark { color: var(--leaf); } .login-card h1 { font-size: 26px; margin: 0; } .login-sub { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; margin: -12px 0 8px; } .login-btn { justify-content: center; margin-top: 6px; } .login-error { font-size: 13px; color: var(--alarm); background: var(--alarm-wash); border-left: 3px solid var(--alarm); padding: 9px 12px; margin: 0; } .login-error[hidden] { display: none; } /* ---------- Konto im Header ---------- */ .user-btn { background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); border-radius: 999px; height: 38px; padding: 0 14px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-family: var(--fb); font-size: 13px; transition: all var(--t); } .user-btn:hover { color: var(--leaf); border-color: var(--leaf-edge); background: var(--leaf-wash); } .user-rolle { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; padding: 2px 7px; border-radius: 999px; } .user-rolle.rolle-gaertner { color: var(--leaf); background: var(--leaf-wash); } .user-rolle.rolle-helfer { color: var(--reife); background: var(--reife-wash); } @media (max-width: 620px) { .user-btn span:not(.user-rolle) { display: none; } .user-btn { padding: 0 8px; } }