/*:root { --bg: #f4f6f8; --card: #ffffff; --text: #17202a; --muted: #6b7280; --primary: #2563eb; --primary-hover: #1d4ed8; --danger: #dc2626; --danger-bg: #fee2e2; --border: #e5e7eb; --shadow: 0 8px 24px rgba(15, 23, 42, 0.04); } */ :root { --bg: #f4f6f8; --card: #ffffff; --text: #17202a; --muted: #6b7280; --primary: #006e3a; --primary-hover: #00562d; --danger: #dc2626; --danger-bg: #fee2e2; --border: #e5e7eb; --shadow: 0 8px 24px rgba(15, 23, 42, 0.04); } * { box-sizing: border-box; } /* Platz fuer die Scrollleiste immer freihalten, auch wenn die Seite gerade nicht scrollt. Sonst aendert sich die nutzbare Breite in dem Moment, in dem Inhalt dazukommt oder wegfaellt - und weil .page zentriert ist (margin: 0 auto), rutscht die gesamte Seite um die halbe Leistenbreite zur Seite. Sichtbar wurde das beim Umschalten zwischen automatischen Regeln und Karten-Buttons, es betrifft aber jede Liste, die sich filtern oder auf- und zuklappen laesst. Bewusst auf und damit fuer alle Seiten: die Ursache ist nicht diese eine Ansicht, sondern das zentrierte Layout. */ html { scrollbar-gutter: stable; } body { margin: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); } .page { max-width: 1200px; margin: 0 auto; padding: 24px; } body.kanban-page .page { max-width: none; } .topbar, .card, .sheet-page-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); } .topbar { padding: 18px 22px; margin-bottom: 24px; } .topbar-title { font-weight: 700; } .topbar-title small { display: block; margin-top: 2px; color: var(--muted); font-weight: 600; font-size: 0.8rem; } .topbar-burger { position: relative; } .topbar-burger-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 12px; background: white; font-size: 1.1rem; cursor: pointer; } .topbar-burger-toggle:hover { border-color: var(--primary); } .topbar-burger-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 20; display: flex; flex-direction: column; min-width: 200px; background: white; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12); overflow: hidden; } .topbar-burger-panel[hidden] { display: none; } .topbar-burger-item { display: flex; align-items: center; gap: 10px; padding: 12px 16px; color: var(--text); text-decoration: none; font-weight: 600; font-size: 0.9rem; text-align: left; border: none; background: none; width: 100%; cursor: pointer; } .topbar-burger-item:hover { background: #f2f4f7; } .topbar-burger-item-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 18px; width: 18px; height: 18px; color: var(--muted); } .topbar-burger-item-icon svg { width: 16px; height: 16px; } .topbar-burger-item-button { color: #b91c1c; } .card { padding: 22px; margin-bottom: 20px; } .card h1, .card h2, .card h3 { margin-top: 0; } .section-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 12px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border); background: white; color: var(--text); text-decoration: none; cursor: pointer; font: inherit; font-weight: 600; } .btn:hover { background: #f9fafb; } .btn-primary { background: var(--primary); color: white; border-color: var(--primary); } .btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); } .btn-secondary { background: white; color: var(--text); border-color: var(--border); } .icon-button { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--border); background: white; cursor: pointer; line-height: 1; font-size: 16px; } .icon-button:hover { background: #f9fafb; } .icon-button.danger { color: #ef4444; } .icon-button.danger:hover { background: #fef2f2; border-color: #fecaca; color: #dc2626; } .icon-button.success { color: #16a34a; } .icon-button.success:hover { background: #dcfce7; border-color: #bbf7d0; } .trash-svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } form { margin: 0; } input, select, textarea { width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 10px; font: inherit; background: white; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); } label { display: block; margin-bottom: 6px; font-weight: 600; } .muted, .empty-row { color: var(--muted); } .messages { margin-bottom: 20px; } .message { padding: 12px 16px; border-radius: 12px; background: #e0f2fe; margin-bottom: 8px; } .message.error { background: #fee2e2; } .message.success { background: #dcfce7; } .message.warning { background: #fef3c7; } /* Projekt-Kacheln */ .carousel-controls { display: flex; gap: 8px; } .tile-row-wrapper { overflow-x: auto; padding-bottom: 12px; } .tile-row { display: flex; gap: 20px; scroll-behavior: smooth; } .tile-card { flex: 0 0 calc((100% - 40px) / 3); min-width: calc((100% - 40px) / 3); background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 20px; min-height: 340px; box-shadow: var(--shadow); display: flex; flex-direction: column; } .tile-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; } .tile-title-link { color: var(--text); text-decoration: none; font-weight: 800; font-size: 1.35rem; line-height: 1.2; } .tile-title-link:hover { color: var(--primary); } .tile-room-list { flex: 1; max-height: 220px; overflow-y: auto; padding-right: 6px; margin-bottom: 14px; } .tile-room-item { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--border); } .tile-room-item:last-child { border-bottom: none; } .tile-room-main a { color: var(--primary); text-decoration: none; font-weight: 600; } .tile-room-actions { display: flex; align-items: center; gap: 8px; white-space: nowrap; } .element-count { color: var(--muted); font-size: 0.95rem; } .add-panel { margin-top: 18px; } .add-panel > summary { list-style: none; width: fit-content; } .add-panel > summary::-webkit-details-marker { display: none; } .add-panel[open] > summary { margin-bottom: 16px; } .compact-form { border-top: 1px solid var(--border); padding-top: 16px; display: grid; gap: 14px; } .button-row { display: flex; justify-content: flex-end; gap: 10px; } /* Toggle */ .toggle-card { padding: 12px; } .modern-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; background: #eef2f7; border: 1px solid var(--border); border-radius: 18px; padding: 6px; } .modern-toggle-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; color: var(--muted); text-decoration: none; transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } .modern-toggle-item strong { display: block; color: inherit; font-size: 1rem; } .modern-toggle-item small { display: block; margin-top: 2px; color: inherit; opacity: 0.75; } .modern-toggle-item.active { background: white; color: var(--text); box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08); } .modern-toggle-flex { display: flex; flex-wrap: wrap; gap: 10px; background: #eef2f7; border: 1px solid var(--border); border-radius: 18px; padding: 6px; } .modern-toggle-flex .modern-toggle-item { flex: 1 1 160px; justify-content: center; } .toggle-icon { width: 42px; height: 42px; border-radius: 14px; background: white; border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; flex-shrink: 0; } /* Listen / Detailseiten */ .room-list { list-style: none; padding: 0; margin: 0; } .room-list li { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-bottom: 1px solid var(--border); padding: 12px 0; } .room-list li:last-child { border-bottom: none; } .room-main { min-width: 0; } .room-list a { color: var(--primary); text-decoration: none; font-weight: 600; } .room-actions { display: flex; align-items: center; gap: 10px; white-space: nowrap; } .group-navigation, .bottom-navigation { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; } .group-navigation > :last-child, .bottom-navigation > :last-child { justify-self: end; } /* Kunden-Projektübersicht */ .customer-project-table { width: 100%; border-collapse: collapse; border-spacing: 0; table-layout: fixed; } .customer-project-table th, .customer-project-table td { text-align: left; vertical-align: middle; border-bottom: 1px solid var(--border); padding: 10px 10px; } .customer-project-table th { color: var(--muted); font-size: 0.9rem; font-weight: 800; } .customer-project-table td { color: var(--text); font-size: 0.96rem; } .customer-project-table tbody tr:last-child td { border-bottom: none; } .customer-project-table tbody tr:hover td { background: #f8fafc; } /* Spaltenbreiten wie im gewünschten Screenshot */ .customer-table-scroll { width: 100%; max-width: 100%; } .customer-project-table th:nth-child(1), .customer-project-table td:nth-child(1) { width: 10%; } .customer-project-table th:nth-child(2), .customer-project-table td:nth-child(2) { width: 35%; } .customer-project-table th:nth-child(3), .customer-project-table td:nth-child(3) { width: 35%; } .customer-project-table th:nth-child(4), .customer-project-table td:nth-child(4) { width: 20%; } .muted-link { color: var(--text); } .table-link { color: var(--primary); text-decoration: none; font-weight: 600; } .table-link:hover { text-decoration: underline; } /* Normale Tabellen in Cards, aber ohne Datenblatt zu beeinflussen */ .card table:not(.heating-sheet) { width: 100%; border-collapse: collapse; } .card table:not(.heating-sheet) th, .card table:not(.heating-sheet) td { border-bottom: 1px solid var(--border); padding: 10px 10px; text-align: left; } .card table:not(.heating-sheet) th { color: var(--muted); font-size: 0.9rem; font-weight: 800; } .card table:not(.heating-sheet) tbody tr:last-child td { border-bottom: none; } .card table:not(.heating-sheet) tbody tr:hover td { background: #f8fafc; } /* ========================================================= DATENBLATT – ZEILE MIT GESCHOSS + RAUM + ELEMENT ========================================================= */ .sheet-page-card { background: white; border: 1px solid var(--border); border-radius: 16px; padding: 28px; box-shadow: var(--shadow); overflow-x: auto; } .room-sheet-block { margin: 0 auto 28px; max-width: 1180px; padding-bottom: 18px; border-bottom: 1px solid var(--border); } .room-sheet-block:last-child { border-bottom: none; } .room-elements { display: grid; gap: 12px; } .room-sheet-header { display: none; } /* Eine komplette Zeile: Geschoss | Raum | Element | Slot1 | Slot2 | Slot3 | Slot4 | Slot5 | Löschen */ .sheet-row-grid, .sheet-existing-row.sheet-row-grid, .add-sheet-row { display: grid !important; grid-template-columns: 110px /* Geschoss */ 170px /* Raum */ 130px /* Element */ 95px /* Slot 1 */ 95px /* Slot 2 */ 95px /* Slot 3 */ 110px /* Slot 4 */ 95px /* Slot 5 */ 42px; /* Löschen / Aktion */ gap: 14px; align-items: end; width: 100%; } .sheet-existing-row.sheet-row-grid { margin-bottom: 8px; } .sheet-inline-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .sheet-inline-meta-label { font-size: 0.9rem; font-weight: 600; color: var(--text); line-height: 1.1; min-height: 18px; } .sheet-inline-meta-value { height: 34px; line-height: 34px; font-size: 1rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sheet-row-form { display: contents; } .sheet-row-delete-form { display: contents; } .sheet-delete-button .icon-button { grid-column: 9; } .sheet-slot { display: flex !important; flex-direction: column; gap: 4px; min-width: 0; margin: 0; font-weight: 600; } .sheet-slot-label { font-size: 0.6rem !important; font-weight: 600 !important; color: var(--text); line-height: 1.05; min-height: 14px; } .sheet-slot-input, .sheet-slot select, .sheet-slot input { width: 100% !important; min-width: 0 !important; border: none !important; border-bottom: 1px solid transparent !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; height: 34px; font-size: 1rem !important; color: var(--text); } .sheet-slot select:focus, .sheet-slot input:focus, .sheet-slot-input:focus { outline: none !important; border-bottom-color: var(--primary) !important; } .sheet-slot-input:disabled { color: var(--muted); opacity: 1; } .sheet-add-actions { margin-top: 14px; } .inline-add-panel { margin-top: 14px; padding: 18px; border: 1px solid var(--border); border-radius: 14px; background: #f8fafc; } .inline-add-panel.is-hidden { display: none; } .sheet-add-submit { grid-column: 9; white-space: nowrap; padding: 10px 14px; align-self: end; justify-self: start; } .add-sheet-block { display: none; } /* Responsive erst bei wirklich kleinen Breiten */ @media (max-width: 860px) { .sheet-row-grid, .sheet-existing-row.sheet-row-grid, .add-sheet-row { grid-template-columns: 1fr; border: 1px solid var(--border); border-radius: 14px; padding: 14px; } .sheet-row-form, .sheet-row-delete-form { display: block; } .sheet-delete-button .icon-button, .sheet-add-submit { grid-column: auto; } } .room-element-table { width: 100%; border-collapse: collapse; } .room-element-table th, .room-element-table td { border-bottom: 1px solid var(--border); padding: 10px; text-align: left; } .room-element-table th { color: var(--muted); font-size: 0.9rem; font-weight: 800; } .element-add-toggle { display: inline-flex; background: #eef2f7; border: 1px solid var(--border); border-radius: 14px; padding: 4px; margin-bottom: 18px; } .toggle-add-button { border: none; background: transparent; border-radius: 10px; padding: 10px 14px; font: inherit; font-weight: 700; color: var(--muted); cursor: pointer; } .toggle-add-button.active { background: white; color: var(--text); box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08); } .element-add-panel.is-hidden { display: none; } .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 18px; } /* Raumdetail: Heizkörper-Formular einzeilig im Stil der Flächenheizung */ .radiator-inline-form { display: grid; grid-template-columns: minmax(170px, 1.1fr) minmax(120px, 0.8fr) minmax(150px, 1fr) minmax(150px, 1fr) minmax(170px, 1fr) minmax(150px, 1fr); gap: 14px; align-items: start; margin-bottom: 14px; } .radiator-inline-form .form-field { min-width: 0; } .radiator-inline-form .form-field > label { display: block; margin-bottom: 6px; font-weight: 700; font-size: 0.9rem; line-height: 1.2; min-height: 0; } .radiator-inline-form input, .radiator-inline-form select { min-height: 38px; height: 38px; padding: 6px 10px; line-height: 1.25; } .radiator-inline-form select { min-width: 0; padding-right: 32px; text-overflow: ellipsis; } .radiator-inline-form .form-field:first-child { min-width: 170px; } /* Toggle soll optisch wie ein normaler Header + Feld wirken */ .mini-toggle { display: inline-flex; background: #eef2f7; border: 1px solid var(--border); border-radius: 10px; padding: 3px; width: 100%; height: 32px; } .mini-toggle-as-label { margin-bottom: 6px; min-height: 27px; align-items: center; } .toggle-form-field { padding-top: 0; } .toggle-form-field .mini-toggle-as-label { margin-top: 0; min-height: 27px; margin-bottom: 6px; } .toggle-form-field .mini-toggle-as-label { transform: translateY(-15px); } .radiator-inline-form .form-field:has(.mini-toggle-as-label) { padding-top: 0; } .radiator-inline-form .form-field:has(.mini-toggle-as-label) .mini-toggle { margin-top: 0; } .mini-toggle-item { flex: 1; display: inline-flex !important; align-items: center; justify-content: center; border-radius: 7px; padding: 5px 8px; margin: 0 !important; cursor: pointer; color: var(--muted); font-size: 0.82rem; font-weight: 700; line-height: 1; } .mini-toggle-item input { display: none; } .mini-toggle-item.active { background: white; color: var(--text); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08); } .is-hidden { display: none !important; } @media (max-width: 1100px) { .radiator-inline-form { grid-template-columns: repeat(2, minmax(220px, 1fr)); } } @media (max-width: 650px) { .radiator-inline-form { grid-template-columns: 1fr; } } .toggle-form-field input, .toggle-form-field select { transform: translateY(-15px); } /* Topbar Navigation */ .topbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; } .topbar-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .topbar-link { display: inline-flex; align-items: center; justify-content: center; padding: 8px 11px; border-radius: 10px; color: var(--text); text-decoration: none; font-size: 0.9rem; font-weight: 700; border: 1px solid var(--border); background: white; } .topbar-link:hover { background: #f9fafb; } .topbar-link.disabled { color: var(--muted); opacity: 0.55; cursor: default; } /* Raumkopf mit Vorschau */ .room-hero-card { padding: 24px; } .room-hero { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: center; } .eyebrow { color: var(--muted); font-size: 0.85rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; } .room-hero-info h1 { margin: 0 0 18px; font-size: 2rem; } .room-meta-list { display: flex; gap: 14px; flex-wrap: wrap; } .room-meta-list div { min-width: 130px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: #f8fafc; } .room-meta-list span { display: block; color: var(--muted); font-size: 0.82rem; font-weight: 700; margin-bottom: 4px; } .room-meta-list strong { font-size: 1.05rem; } .room-preview-card { border: 1px solid var(--border); border-radius: 16px; background: #f8fafc; padding: 6px; text-align: center; } .heating-preview-image { width: 100%; max-height: 180px; object-fit: contain; display: block; } .heating-preview-caption { margin-top: 10px; color: var(--muted); font-size: 0.85rem; font-weight: 700; } @media (max-width: 850px) { .topbar { align-items: flex-start; flex-direction: column; } .room-hero { grid-template-columns: 1fr; } .room-preview-card { max-width: 360px; } } .mini-toggle.is-disabled { opacity: 0.45; pointer-events: none; } .mini-toggle-item.is-option-disabled { opacity: 0.35; cursor: not-allowed; } .mini-toggle-item.is-option-disabled:hover { background: transparent; } .mobile-table-scroll { width: 100%; max-width: 100%; } @media (max-width: 700px) { .card { overflow: hidden; } .mobile-table-scroll { display: block; width: 100%; max-width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; padding-bottom: 8px; } .mobile-table-scroll .room-element-table { width: max-content !important; min-width: 760px; max-width: none; } .mobile-table-scroll .room-element-table th, .mobile-table-scroll .room-element-table td { white-space: nowrap; } .mobile-table-scroll-small .room-element-table { min-width: 560px; } } /* Mobile Raumleiste */ .mobile-room-sticky-bar { display: none !important; } @media (max-width: 700px) { .topbar-room-nav { display: none !important; } .mobile-room-sticky-bar { position: sticky; top: 8px; z-index: 50; display: grid !important; grid-template-columns: 42px minmax(0, 1fr) 42px; align-items: center; gap: 8px; margin: -8px 0 16px; padding: 8px; background: rgba(255, 255, 255, 0.96); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10); backdrop-filter: blur(8px); } .mobile-room-sticky-title { min-width: 0; text-align: center; font-size: 0.9rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mobile-room-nav-button { width: 42px; height: 36px; border-radius: 10px; border: 1px solid var(--border); background: white; color: var(--text); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 900; line-height: 1; } .mobile-room-nav-button.primary { background: var(--primary); border-color: var(--primary); color: white; } .mobile-room-nav-button.disabled { opacity: 0.35; pointer-events: none; } } .customer-project-row { cursor: pointer; } .customer-project-row:hover td { background: #f8fafc; } @media (max-width: 700px) { .customer-project-table { table-layout: auto; } .customer-project-table th, .customer-project-table td { padding: 12px 10px; } .customer-project-row { cursor: pointer; } } @media (max-width: 700px) { .customer-table-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; padding-bottom: 8px; } .customer-table-scroll .customer-project-table { width: max-content; min-width: 720px; max-width: none; table-layout: auto; } .customer-table-scroll .customer-project-table th, .customer-table-scroll .customer-project-table td { white-space: nowrap; } } /* Mobile Projektübersicht */ @media (max-width: 700px) { /* Toggle: Beschreibung ausblenden */ .modern-toggle-item small { display: none; } /* Toggle: Bezeichnung über Icon */ .modern-toggle-item { flex-direction: column-reverse; justify-content: center; align-items: center; gap: 6px; padding: 10px 8px; text-align: center; min-width: 0; } .modern-toggle-item span:not(.toggle-icon) { min-width: 0; width: 100%; } .modern-toggle-item strong { font-size: 0.9rem; line-height: 1.1; white-space: normal; overflow-wrap: anywhere; text-align: center; } .toggle-icon { width: 38px; height: 38px; font-size: 1rem; } .modern-toggle { grid-template-columns: 1fr 1fr; gap: 8px; } /* Im mobilen Karussell immer nur eine Karte sichtbar */ .tile-row-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; padding-bottom: 10px; } .tile-row { gap: 12px; } .tile-card { flex: 0 0 100%; min-width: 100%; min-height: auto; scroll-snap-align: start; } /* Mobile Projektübersicht: nur Geschoss / Wohneinheit zeigen */ .tile-card .tile-room-list, .tile-card .add-panel, .tile-card .tile-room-actions { display: none !important; } /* Mülleimer für Geschoss / Wohneinheit mobil ausblenden */ .tile-card-header form { display: none !important; } .tile-card-header { margin-bottom: 0; align-items: center; } .tile-title-link { font-size: 1.35rem; } /* Pfeile optional mobil etwas größer und gut erreichbar */ .carousel-controls .icon-button { width: 40px; height: 40px; } } /* Mobile Projektübersicht: Geschosse / Wohneinheiten als Liste */ .mobile-group-list { display: none; } @media (max-width: 700px) { .mobile-group-list { display: block; max-height: 325px; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-right: 4px; } .mobile-group-item { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border); } .mobile-group-item:last-child { border-bottom: none; } .mobile-group-main { min-width: 0; } .mobile-group-main a { color: var(--primary); text-decoration: none; font-weight: 700; font-size: 1rem; } .mobile-group-main a:hover { text-decoration: underline; } .mobile-group-main .muted { margin-top: 3px; font-size: 0.9rem; } .mobile-group-item form { flex-shrink: 0; } /* Desktop-Kacheln mobil ausblenden */ .tile-row-wrapper { display: none; } /* Pfeile für Kachel-Karussell mobil ausblenden */ .carousel-controls { display: none; } } .topbar-brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; } .topbar-logo { width: auto; height: 40px; object-fit: contain; flex-shrink: 0; } .topbar-title { font-weight: 700; white-space: nowrap; } .project-title-header h1 { font-size: 1.45rem; line-height: 1.25; margin-bottom: 6px; } .project-title-header p { margin: 0; font-size: 0.95rem; } @media (max-width: 700px) { .project-title-header h1 { font-size: 1.2rem; } .project-title-header p { font-size: 0.9rem; } } .project-module-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .project-module-card { display: flex; align-items: flex-start; gap: 16px; min-height: 130px; padding: 22px; background: var(--card); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); color: var(--text); text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .project-module-card:hover { transform: translateY(-2px); border-color: var(--primary); box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08); } .project-module-icon { width: 46px; height: 46px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; background: #eef2f7; font-size: 1.35rem; } .project-module-card h2 { margin: 0 0 6px; font-size: 1.15rem; } .project-module-card p { margin: 0; color: var(--muted); font-size: 0.95rem; line-height: 1.4; } .project-module-disabled { opacity: 0.65; } .project-module-disabled:hover { transform: none; border-color: var(--border); box-shadow: var(--shadow); cursor: not-allowed; } @media (max-width: 700px) { .project-module-grid { grid-template-columns: 1fr; gap: 12px; } .project-module-card { min-height: auto; padding: 16px; } .project-module-icon { width: 42px; height: 42px; font-size: 1.15rem; } .project-module-card h2 { font-size: 1rem; } .project-module-card p { font-size: 0.88rem; } } .topbar-brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; color: var(--text); text-decoration: none; } .topbar-brand:hover { color: var(--text); text-decoration: none; } .upload-form { display: grid; gap: 16px; } .upload-category-row { max-width: 360px; } .upload-dropzone { display: grid; place-items: center; gap: 8px; min-height: 220px; padding: 26px; border: 2px dashed var(--border); border-radius: 18px; background: #f8fafc; text-align: center; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } .upload-dropzone:hover, .upload-dropzone.is-dragover { border-color: var(--primary); background: rgba(0, 110, 58, 0.06); } .upload-dropzone-icon { font-size: 2rem; } .upload-dropzone strong { font-size: 1.1rem; } .upload-dropzone span { color: var(--muted); font-weight: 600; } .upload-file-input { display: none; } .upload-selected-file { color: var(--muted); font-size: 0.95rem; font-weight: 600; } @media (max-width: 700px) { .upload-dropzone { min-height: 130px; padding: 18px; border-style: solid; } .upload-dropzone strong { font-size: 1rem; } .upload-dropzone span { font-size: 0.88rem; } .upload-category-row { max-width: none; } } .upload-dropzone small { color: var(--muted); font-weight: 600; font-size: 0.85rem; } .upload-selected-files { display: grid; gap: 8px; } .upload-selected-empty { color: var(--muted); font-size: 0.95rem; font-weight: 600; } .upload-selected-file-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: #f8fafc; } .upload-selected-file-info { min-width: 0; } .upload-selected-file-info strong { display: block; color: var(--text); font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .upload-selected-file-info span { display: block; margin-top: 2px; color: var(--muted); font-size: 0.85rem; font-weight: 600; } .header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .booking-service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .booking-service-card { display: flex; align-items: flex-start; gap: 16px; padding: 22px; min-height: 170px; background: var(--card); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); } .booking-service-icon { width: 48px; height: 48px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; background: #eef2f7; font-size: 1.4rem; } .booking-service-content { min-width: 0; } .booking-service-content h2 { margin: 0 0 8px; font-size: 1.15rem; } .booking-service-content p { margin: 0 0 16px; color: var(--muted); line-height: 1.4; } .booking-coming-soon { display: inline-flex; padding: 8px 12px; border-radius: 999px; background: #f3f4f6; color: var(--muted); font-size: 0.9rem; font-weight: 700; } .booking-service-disabled { opacity: 0.7; } @media (max-width: 700px) { .customer-overview-header, .project-title-header { align-items: flex-start; flex-direction: column; } .header-actions { width: 100%; } .header-actions .btn { width: 100%; } .booking-service-grid { grid-template-columns: 1fr; gap: 12px; } .booking-service-card { padding: 16px; min-height: auto; } .booking-service-icon { width: 42px; height: 42px; font-size: 1.15rem; } .booking-service-content h2 { font-size: 1rem; } .booking-service-content p { font-size: 0.9rem; } } /* ========================================================= BUCHUNG HEIZLASTBERECHNUNG – NEUAUFBAU ========================================================= */ .booking-stack { display: grid; gap: 20px; } .booking-frame { padding: 26px; } .booking-frame h2 { margin: 0 0 18px; font-size: 1.35rem; } .booking-building-toggle-card { padding: 12px; margin-bottom: 22px; box-shadow: none; } .booking-modern-toggle-item { margin: 0; cursor: pointer; } .booking-modern-toggle-item input { display: none; } .booking-modern-toggle-item:hover { background: rgba(255, 255, 255, 0.65); } .booking-modern-toggle-item.active:hover { background: white; } .booking-question-grid { display: grid; grid-template-columns: 1fr !important; gap: 16px; align-items: start; margin-bottom: 20px; } .booking-field-residential, .booking-field-non-residential, .booking-field-address { grid-column: 1 / -1 !important; grid-row: auto !important; } .booking-input-with-unit, .booking-field-address textarea { width: 100%; min-height: 44px; } .booking-field-address textarea { height: 44px; line-height: 1.35; resize: vertical; } .booking-field { min-width: 0; } .booking-field label { margin-bottom: 7px; font-size: 0.9rem; font-weight: 800; } .booking-input-with-unit { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; background: white; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } .booking-input-with-unit input { border: none; border-radius: 0; box-shadow: none; } .booking-input-with-unit span { padding: 0 12px; color: var(--muted); font-weight: 800; } .booking-service-checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .booking-service-check { display: flex; align-items: flex-start; gap: 10px; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: #f8fafc; } .booking-service-check > span { width: 24px; height: 24px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(0, 110, 58, 0.10); color: var(--primary); font-weight: 900; } .booking-service-check strong { display: block; margin-bottom: 3px; font-size: 0.95rem; } .booking-service-check small { display: block; color: var(--muted); line-height: 1.35; } .booking-cart-frame { display: grid; gap: 18px; } .booking-cart-title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border); } .booking-cart-title-row h2 { margin-bottom: 4px; } .booking-cart-title-row p { margin: 0; } .booking-cart-label { white-space: nowrap; padding: 6px 10px; border-radius: 999px; background: rgba(0, 110, 58, 0.08); color: var(--primary); font-size: 0.78rem; font-weight: 900; } .booking-cart-table, .booking-cart-totals { display: grid; } .booking-cart-row { display: flex; justify-content: space-between; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--border); } .booking-cart-row span { color: var(--muted); } .booking-cart-row strong { white-space: nowrap; color: var(--text); font-weight: 800; } .booking-express-section { padding: 16px; border: 1px solid var(--border); border-radius: 16px; background: #f8fafc; } .booking-express-section h3 { margin: 0 0 12px; font-size: 1rem; } .booking-express-choice { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 0 0 8px; padding: 10px; border: 1px solid transparent; border-radius: 12px; cursor: pointer; } .booking-express-choice:last-child { margin-bottom: 0; } .booking-express-choice:hover, .booking-express-choice.active { background: white; border-color: rgba(0, 110, 58, 0.25); } .booking-express-choice input { width: auto; } .booking-express-choice strong { display: block; font-size: 0.95rem; } .booking-express-choice small { display: block; margin-top: 2px; color: var(--muted); font-weight: 600; } .booking-express-choice b { white-space: nowrap; color: var(--muted); font-size: 0.85rem; } .booking-cart-total { border-bottom: none; padding-top: 16px; font-size: 1.08rem; } .booking-cart-total strong { color: var(--primary); font-size: 1.25rem; } .booking-checkout-button { width: 100%; padding: 13px 16px; text-transform: uppercase; letter-spacing: 0.08em; } .booking-cart-note { margin: -4px 0 0; color: var(--muted); text-align: center; font-size: 0.82rem; line-height: 1.4; } @media (max-width: 700px) { .booking-frame { padding: 20px; } .booking-building-toggle { grid-template-columns: 1fr; } .booking-building-toggle-item { padding: 13px; } .booking-question-grid, .booking-service-checklist { grid-template-columns: 1fr; } .booking-field-address { grid-column: auto; grid-row: auto; } .booking-cart-title-row { flex-direction: column; } .booking-express-choice { grid-template-columns: auto minmax(0, 1fr); } .booking-express-choice b { grid-column: 2; white-space: normal; } } /* ========================================================= CHECKOUT / BUCHUNGSABSCHLUSS ========================================================= */ .checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 22px; align-items: start; } .checkout-frame { padding: 26px; } .checkout-frame h2 { margin: 0 0 18px; font-size: 1.35rem; } .checkout-billing-frame { min-width: 0; } .checkout-order-frame { position: sticky; top: 18px; } .checkout-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .checkout-field { min-width: 0; } .checkout-field-full { grid-column: 1 / -1; } .checkout-field label { margin-bottom: 7px; font-size: 0.9rem; font-weight: 600; } .checkout-order-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--border); } .checkout-order-header h2 { margin: 0 0 4px; } .checkout-order-header p { margin: 0; } .checkout-order-badge { white-space: nowrap; padding: 6px 10px; border-radius: 999px; background: rgba(0, 110, 58, 0.08); color: var(--primary); font-size: 0.78rem; font-weight: 900; } .checkout-summary-box, .checkout-total-box, .checkout-confirm-box { border: 1px solid var(--border); border-radius: 16px; background: #f8fafc; padding: 16px; margin-bottom: 16px; } .checkout-summary-row, .checkout-total-row { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--border); } .checkout-summary-row:first-child, .checkout-total-row:first-child { padding-top: 0; } .checkout-summary-row:last-child, .checkout-total-row:last-child { border-bottom: none; padding-bottom: 0; } .checkout-summary-row span, .checkout-total-row span { color: var(--muted); } .checkout-summary-row strong, .checkout-total-row strong { min-width: 0; text-align: right; font-weight: 600; overflow-wrap: anywhere; } .checkout-grand-total { padding-top: 15px; font-size: 1.08rem; } .checkout-grand-total strong { color: var(--primary); font-size: 1.25rem; } .checkout-confirm-box { display: grid; gap: 12px; background: white; } .checkout-checkbox { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; margin: 0; padding: 13px; border: 1px solid var(--border); border-radius: 14px; background: #f8fafc; font-weight: 400; line-height: 1.45; cursor: pointer; } .checkout-checkbox:hover { border-color: rgba(0, 110, 58, 0.30); background: rgba(0, 110, 58, 0.04); } .checkout-checkbox input { width: 18px; height: 18px; margin: 2px 0 0; } .checkout-checkbox span { min-width: 0; } .checkout-checkbox a { color: var(--primary); font-weight: 900; } .checkout-submit-button { width: 100%; padding: 13px 16px; text-transform: uppercase; letter-spacing: 0.06em; } .checkout-note { margin: 12px 0 0; color: var(--muted); text-align: center; font-size: 0.85rem; line-height: 1.4; } .checkout-error-card { border-color: #fecaca; background: #fff7f7; } .checkout-error-card h2 { color: #b91c1c; } .checkout-error-card ul { margin: 0; padding-left: 20px; } .checkout-success-card { max-width: 720px; margin: 0 auto; text-align: center; padding: 34px; } .checkout-success-icon { width: 54px; height: 54px; margin: 0 auto 18px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(0, 110, 58, 0.10); color: var(--primary); font-size: 1.7rem; font-weight: 900; } .checkout-success-card .checkout-summary-box { margin: 22px 0; text-align: left; } @media (max-width: 950px) { .checkout-layout { grid-template-columns: 1fr; } .checkout-order-frame { position: static; } } @media (max-width: 700px) { .checkout-frame { padding: 20px; } .checkout-form-grid { grid-template-columns: 1fr; } .checkout-summary-row, .checkout-total-row { grid-template-columns: 1fr; gap: 4px; } .checkout-summary-row strong, .checkout-total-row strong { text-align: left; } .checkout-order-header { flex-direction: column; } } .checkout-summary-card { background: #ffffff; border: 1px solid var(--border); border-radius: 20px; padding: 24px; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04); } .checkout-summary-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 20px; } .checkout-summary-head h2 { margin: 0; font-size: 1.35rem; font-weight: 800; color: var(--text); } .summary-badge { display: inline-flex; align-items: center; padding: 7px 12px; border-radius: 999px; background: #eef7f1; color: #006e3a; font-size: 0.82rem; font-weight: 700; white-space: nowrap; } .summary-section, .summary-totals { border-top: 1px solid var(--border); padding-top: 14px; } .summary-section { margin-bottom: 18px; } .summary-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 14px 0; border-bottom: 1px solid #edf0f3; } .summary-row:last-child { border-bottom: none; } .summary-label { min-width: 140px; color: var(--muted); font-size: 0.98rem; font-weight: 500; } .summary-value { flex: 1; text-align: right; color: var(--text); font-size: 1.05rem; font-weight: 700; line-height: 1.35; } .summary-subvalue { display: inline-block; margin-top: 2px; color: var(--muted); font-size: 0.9rem; font-weight: 600; } .summary-address { max-width: 280px; line-height: 1.5; } .summary-totals .summary-label { font-size: 1rem; } .summary-totals .summary-value { font-size: 1.08rem; } .summary-row-total { margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--border); } .summary-row-total .summary-label { color: var(--text); font-size: 1.1rem; font-weight: 700; } .summary-row-total .summary-value { color: #006e3a; font-size: 1.55rem; font-weight: 800; } .summary-row-address { align-items: flex-start; } @media (max-width: 768px) { .checkout-summary-head { flex-direction: column; align-items: flex-start; } .summary-row { flex-direction: column; gap: 6px; } .summary-label { min-width: auto; } .summary-value { text-align: left; width: 100%; } .summary-address { max-width: none; } } .checkout-left-column { display: grid; gap: 20px; min-width: 0; } .checkout-frame-intro { margin: -8px 0 18px; line-height: 1.45; } .checkout-document-options { display: grid; gap: 12px; margin-bottom: 18px; } .checkout-document-option { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; align-items: center; margin: 0; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: #f8fafc; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; } .checkout-document-option:hover { border-color: rgba(0, 110, 58, 0.30); background: rgba(0, 110, 58, 0.04); } .checkout-document-option.active { border-color: rgba(0, 110, 58, 0.35); background: rgba(0, 110, 58, 0.06); box-shadow: 0 0 0 3px rgba(0, 110, 58, 0.08); } .checkout-document-option input { display: none; } .checkout-document-icon { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 14px; background: white; font-size: 1.1rem; } .checkout-document-option strong { display: block; margin-bottom: 3px; color: var(--text); } .checkout-document-option small { display: block; color: var(--muted); font-weight: 600; line-height: 1.35; } .checkout-client-email-field.is-hidden { display: none; } .energy-data-form { display: grid; gap: 20px; } .energy-frame { padding: 26px; } .energy-frame h2 { margin: 0 0 18px; font-size: 1.35rem; } .energy-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .energy-field { min-width: 0; } .energy-field-full { grid-column: 1 / -1; } .contact-name-fields, .triple-fields { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; } @media (max-width: 640px) { .contact-name-fields, .triple-fields { grid-template-columns: 1fr; } } .energy-check-row { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: center; margin: 0; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: #f8fafc; font-weight: 700; } .energy-check-row input { width: 18px; height: 18px; margin: 0; } .energy-renovation-grid { display: grid; gap: 12px; } .energy-renovation-row { display: grid; grid-template-columns: 170px 100px 110px minmax(0, 1fr) 110px 130px; gap: 12px; align-items: end; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: #f8fafc; } .energy-renovation-title { align-self: center; } .document-dropzone-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .document-dropzone-field { padding: 16px; border: 1px solid var(--border); border-radius: 16px; background: #f8fafc; } .document-dropzone-field.is-done { border-color: rgba(0, 110, 58, 0.3); background: rgba(0, 110, 58, 0.05); } .document-dropzone-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .document-dropzone-badge { flex-shrink: 0; font-size: 0.8rem; font-weight: 700; color: var(--primary); white-space: nowrap; } .document-dropzone-reupload-toggle { margin-top: 10px; background: none; border: none; padding: 0; color: var(--primary); font-weight: 700; font-size: 0.85rem; cursor: pointer; text-decoration: underline; } .document-dropzone { display: grid; place-items: center; gap: 4px; min-height: 0; margin-top: 10px; padding: 8px; border: 2px dashed var(--border); border-radius: 14px; background: #fff; text-align: center; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } .document-dropzone:hover, .document-dropzone.is-dragover { border-color: var(--primary); background: rgba(0, 110, 58, 0.06); } .document-dropzone-label { display: grid; place-items: center; gap: 6px; cursor: pointer; } .document-dropzone-icon { display: block; width: 24px; height: 20px; } .document-dropzone-hint { font-size: 0.8rem; font-weight: 600; color: var(--muted); } .document-dropzone-input { display: none; } .document-dropzone-filelist { list-style: none; margin: 8px 0 0; padding: 0; width: 100%; display: grid; gap: 6px; } .document-dropzone-filelist li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 10px; background: #f8fafc; font-size: 0.85rem; text-align: left; } .document-dropzone-remove { background: none; border: none; color: var(--muted); font-size: 1.1rem; line-height: 1; cursor: pointer; } .document-dropzone-error { margin: 6px 0 0; color: #b91c1c; font-size: 0.85rem; font-weight: 600; } .document-dropzone-filelist:empty, .document-dropzone-error:empty { display: none; } .document-manual-toggle-list { display: grid; gap: 6px; margin-top: 12px; } .document-manual-toggle-row { margin: 0; } .document-manual-toggle-button { background: none; border: none; padding: 0; color: var(--muted); font-size: 0.85rem; text-decoration: underline; cursor: pointer; } @media (max-width: 900px) { .energy-renovation-row { grid-template-columns: 1fr 1fr; } .energy-renovation-title { grid-column: 1 / -1; } } @media (max-width: 700px) { .energy-form-grid { grid-template-columns: 1fr; } .energy-renovation-row { grid-template-columns: 1fr; } } /* ========================================================= BERECHNUNGSERGEBNISSE ========================================================= */ .result-upload-frame, .result-files-frame { padding: 26px; } .result-upload-frame h2, .result-files-frame h2 { margin: 0 0 18px; font-size: 1.35rem; } .result-upload-form { display: grid; gap: 18px; } .result-upload-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) auto; gap: 16px; align-items: end; } .result-field { min-width: 0; } .result-check-row { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 9px; align-items: center; margin: 0; padding: 11px 12px; border: 1px solid var(--border); border-radius: 12px; background: #f8fafc; font-weight: 700; } .result-check-row input { width: 18px; height: 18px; margin: 0; } .result-file-list { display: grid; gap: 12px; } .result-file-card { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px; border: 1px solid var(--border); border-radius: 16px; background: #f8fafc; } .result-file-icon { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 14px; background: white; font-size: 1.25rem; } .result-file-content { min-width: 0; } .result-file-content strong { display: block; margin-bottom: 3px; font-size: 1.02rem; } .result-file-content span { display: block; color: var(--text); font-weight: 600; overflow-wrap: anywhere; } .result-file-content small { display: block; margin-top: 4px; color: var(--muted); font-weight: 600; } .result-file-actions { display: flex; align-items: center; gap: 10px; } .empty-result-box { padding: 22px; border: 1px dashed var(--border); border-radius: 16px; background: #f8fafc; text-align: center; } .empty-result-box p { margin-bottom: 0; } @media (max-width: 850px) { .result-upload-grid, .result-file-card { grid-template-columns: 1fr; } .result-file-actions { width: 100%; } .result-file-actions .btn { flex: 1; } } .result-dropzone input[type="file"], .result-file-input, .upload-file-input { display: none !important; } .result-dropzone { cursor: pointer; } /* ========================================================= BELLO / INTERNER BEREICH ========================================================= */ .bello-login-wrapper { min-height: 100vh; display: grid; place-items: center; } .bello-login-card { width: min(100%, 460px); padding: 32px; } .bello-login-header { margin-bottom: 22px; } .bello-login-header h1 { margin: 0 0 6px; font-size: 2rem; } .bello-login-header p { margin: 0; } .bello-login-form { display: grid; gap: 16px; } .bello-login-button { width: 100%; margin-top: 4px; padding: 13px 16px; } .bello-login-card-wide { width: min(100%, 640px); } .bello-login-chooser-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .bello-login-chooser-logo { display: flex; align-items: center; justify-content: center; height: 140px; padding: 20px; border: 1px solid var(--border); border-radius: 14px; background: #ffffff; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .bello-login-chooser-logo:hover { border-color: var(--primary); box-shadow: 0 6px 18px rgba(0, 110, 58, 0.12); } .bello-login-chooser-logo img { max-width: 100%; max-height: 100%; object-fit: contain; } @media (max-width: 560px) { .bello-login-chooser-options { grid-template-columns: 1fr; } } .bello-module-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .bello-module-card { display: flex; align-items: flex-start; gap: 16px; min-height: 150px; padding: 24px; background: var(--card); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); color: var(--text); text-decoration: none; transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .bello-module-card:hover { transform: translateY(-2px); border-color: var(--primary); box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08); } .bello-module-icon { width: 48px; height: 48px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; background: #eef2f7; font-size: 1.35rem; } .bello-module-card h2 { margin: 0 0 6px; font-size: 1.15rem; } .bello-module-card p { margin: 0 0 12px; color: var(--muted); line-height: 1.4; } .bello-module-card strong { display: inline-flex; padding: 6px 10px; border-radius: 999px; background: rgba(0, 110, 58, 0.08); color: var(--primary); font-size: 0.85rem; } .bello-module-disabled { opacity: 0.65; cursor: not-allowed; } .bello-module-disabled:hover { transform: none; border-color: var(--border); box-shadow: var(--shadow); } .bello-customer-table { width: 100%; border-collapse: collapse; } .bello-customer-table th, .bello-customer-table td { padding: 12px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; } .bello-customer-table th { color: var(--muted); font-size: 0.9rem; font-weight: 800; } .bello-customer-table tbody tr:last-child td { border-bottom: none; } .bello-customer-table tbody tr:hover td { background: #f8fafc; } .bello-customer-table td:last-child { text-align: right; } @media (max-width: 700px) { .bello-module-grid { grid-template-columns: 1fr; gap: 12px; } .bello-module-card { min-height: auto; padding: 16px; } .bello-module-icon { width: 42px; height: 42px; font-size: 1.15rem; } .bello-customer-table { width: max-content; min-width: 620px; } } /* ========================================================= Firmen-Logo ========================================================= */ .customer-overview-hero { padding: 26px; } .customer-overview-title { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .customer-overview-title h1 { margin: 0 0 6px; } .customer-overview-title p { margin: 0; color: var(--muted); font-weight: 700; } .customer-company-logo-box { width: 180px; height: 72px; flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; } .customer-company-logo { display: block; width: 100% !important; height: 100% !important; object-fit: contain; } @media (max-width: 700px) { .customer-company-logo-box { width: 82px; height: 34px; justify-content: flex-start; } } /* ========================================================= BELLO KANBAN ========================================================= */ .kanban-board { display: grid; grid-auto-flow: column; grid-auto-columns: 310px; gap: 18px; overflow-x: auto; padding-bottom: 18px; } .kanban-column { display: flex; flex-direction: column; min-height: 520px; max-height: calc(100vh - 210px); background: #eef2f7; border: 1px solid var(--border); border-radius: 18px; padding: 14px; } .kanban-column-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 4px 12px; } .kanban-column-header h2 { margin: 0; font-size: 1rem; } .kanban-column-header span { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 9px; border-radius: 999px; background: white; color: var(--muted); font-weight: 800; font-size: 0.85rem; } .kanban-card-list { display: grid; gap: 12px; overflow-y: auto; padding-right: 4px; } .kanban-card { display: grid; gap: 12px; padding: 14px; background: white; border: 1px solid var(--border); border-radius: 15px; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05); } .kanban-card > a { color: var(--text); text-decoration: none; } .kanban-card > a strong { display: block; margin-bottom: 4px; color: var(--muted); font-size: 0.95rem; font-weight: 400; } .kanban-card > a span { display: block; color: var(--text); font-size: 0.95rem; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; } .kanban-card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--muted); font-size: 0.82rem; font-weight: 700; } .kanban-priority { display: inline-flex; padding: 5px 8px; border-radius: 999px; background: #f3f4f6; } .kanban-priority-high, .kanban-priority-urgent { background: #fee2e2; color: #b91c1c; } .kanban-priority-normal { background: #e0f2fe; color: #0369a1; } .kanban-priority-low { background: #dcfce7; color: #166534; } /* Karten-Labels (crm/models.py::CardLabel) - feste Farbpalette, siehe CardLabel.COLOR_CHOICES. */ .kanban-label-chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 400; color: #1f2937; } .kanban-label-green { background: #bbf7d0; } .kanban-label-yellow { background: #fef08a; } .kanban-label-orange { background: #fed7aa; } .kanban-label-red { background: #fecaca; } .kanban-label-purple { background: #e9d5ff; } .kanban-label-blue { background: #bfdbfe; } .kanban-label-sky { background: #bae6fd; } .kanban-label-lime { background: #d9f99d; } .kanban-label-pink { background: #fbcfe8; } .kanban-label-black { background: #d1d5db; } .kanban-card-labels { display: flex; flex-wrap: wrap; gap: 4px; } .kanban-detail-labels { position: relative; /* Hoeher als .kanban-map-field-header (z-index: 130, siehe bello_kanban_card_detail.html) - beide liegen im selben Stacking-Context (.kanban-detail-topbar), das Popover muss darueber liegen koennen. */ z-index: 200; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; } .kanban-detail-labels-edit-btn { border: none; background: none; color: var(--muted); font-size: 0.78rem; font-weight: 700; text-decoration: underline; cursor: pointer; padding: 0; } /* [hidden] hat dieselbe Spezifitaet wie die Klassenregel unten (author-CSS schlaegt sonst das UA-Default [hidden]{display:none}, siehe die analogen [hidden]-Regeln in bello_kanban_card_detail.html) und muss deshalb hier explizit erzwungen werden. */ .kanban-labels-popover[hidden], .kanban-labels-row[hidden], .kanban-labels-show-more[hidden] { display: none; } .kanban-labels-popover { position: absolute; top: 100%; left: 0; z-index: 500; margin-top: 6px; padding: 14px; display: flex; flex-direction: column; gap: 10px; width: 300px; max-height: 70vh; overflow-y: auto; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16); font-weight: 400; } .kanban-labels-popover-header { display: flex; align-items: center; justify-content: space-between; } .kanban-labels-popover-title { font-weight: 700; color: #1d2939; } .kanban-labels-popover-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: none; border-radius: 6px; background: none; color: #6b7280; cursor: pointer; } .kanban-labels-popover-icon-btn:hover { background: #eef1f6; } .kanban-labels-popover-icon-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .kanban-labels-search { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; } .kanban-labels-list { display: flex; flex-direction: column; gap: 6px; } .kanban-labels-row { display: flex; align-items: center; gap: 6px; } .kanban-label-row-btn { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border: none; border-radius: 6px; font-size: 13px; font-weight: 700; color: #1f2937; cursor: pointer; text-align: left; } .kanban-label-row-check { display: none; width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .kanban-label-row-btn.is-selected .kanban-label-row-check { display: block; } .kanban-label-row-edit { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: 6px; color: #6b7280; } .kanban-label-row-edit:hover { background: #eef1f6; } .kanban-label-row-edit svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .kanban-labels-show-more, .kanban-labels-create-btn { display: block; width: 100%; padding: 9px; border: 1px solid var(--border); border-radius: 6px; background: #f8f9fb; color: #1d2939; font-size: 13px; text-align: center; text-decoration: none; cursor: pointer; } .kanban-labels-show-more:hover, .kanban-labels-create-btn:hover { background: #eef1f6; } /* ---- Label anlegen/bearbeiten (bello_label_form.html) ------------------ */ .label-preview { justify-content: center; margin-bottom: 20px; padding: 18px; font-size: 15px; } .label-color-swatches { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; } .label-color-swatch { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 2px solid transparent; border-radius: 8px; cursor: pointer; } .label-color-swatch.is-selected { border-color: #1d2939; } .label-color-swatch-check { display: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; color: #1f2937; } .label-color-swatch.is-selected .label-color-swatch-check { display: block; } .kanban-empty { padding: 18px; border: 1px dashed var(--border); border-radius: 14px; background: rgba(255, 255, 255, 0.6); color: var(--muted); text-align: center; font-weight: 700; } @media (max-width: 700px) { .kanban-board { grid-auto-columns: 86vw; } .kanban-column { max-height: none; } } .kanban-comment-form { display: grid; gap: 12px; margin-top: 18px; } .kanban-checklist-list { display: grid; gap: 16px; } .kanban-checklist { padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: #f8fafc; } .kanban-checklist h3 { margin: 0 0 12px; } .kanban-checklist-item { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 0; } .kanban-checklist-toggle { width: 28px; height: 28px; border-radius: 999px; border: 1px solid var(--border); background: white; cursor: pointer; font-weight: 900; } .kanban-checklist-toggle.is-done { background: rgba(0, 110, 58, 0.10); color: var(--primary); border-color: rgba(0, 110, 58, 0.35); } .kanban-checklist-item span.is-done { color: var(--muted); text-decoration: line-through; } .kanban-add-column-form { display: grid; grid-template-columns: minmax(240px, 360px) auto; gap: 12px; align-items: center; margin-top: 18px; } @media (max-width: 700px) { .kanban-add-column-form { grid-template-columns: 1fr; } .kanban-add-column-form .btn { width: 100%; } } .kanban-add-column { display: flex; flex-direction: column; align-items: stretch; padding-top: 4px; } .kanban-add-column-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 12px 14px; border: 1px dashed var(--border); border-radius: 14px; background: transparent; color: var(--muted); font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; } .kanban-card-list .kanban-add-column-toggle { width: 100%; box-sizing: border-box; justify-content: center; } .kanban-add-column-toggle span { font-size: 1.1rem; line-height: 1; } .kanban-add-column-toggle:hover { border-color: var(--primary); color: var(--primary); background: rgba(0, 110, 58, 0.05); } .kanban-add-column-toggle[hidden] { display: none; } .kanban-add-column-form-inline { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: #fff; } .kanban-add-column-form-inline[hidden] { display: none; } .kanban-add-column-form-inline input[type="text"] { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 0.95rem; } .kanban-add-column-actions { display: flex; gap: 8px; } /* ========================================================= KANBAN DETAIL - LINKS INHALT, RECHTS KOMMENTARE ========================================================= */ .kanban-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 22px; align-items: start; height: calc(100vh - 190px); min-height: 520px; } .kanban-detail-main { display: grid; gap: 20px; min-width: 0; min-height: 0; max-height: 100%; overflow-y: auto; padding-right: 6px; } .kanban-comment-sidebar { min-height: 0; max-height: 100%; overflow-y: auto; position: sticky; top: 0; } .kanban-sidebar-toggle { display: flex; gap: 6px; margin-bottom: 16px; padding: 4px; background: #eef2f7; border-radius: 12px; } .kanban-sidebar-toggle-item { flex: 1 1 0; padding: 9px 12px; border: none; border-radius: 9px; background: none; color: var(--muted); font-weight: 700; font-size: 0.85rem; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } .kanban-sidebar-toggle-item.is-active { background: white; color: var(--text); box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08); } .kanban-sidebar-panel { display: none; } .kanban-sidebar-panel.is-active { display: block; } .kanban-comment-form { display: grid; gap: 12px; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--border); } .kanban-comment-form textarea { resize: vertical; min-height: 110px; } .kanban-comment-form .btn { justify-self: start; } .kanban-comment-list { display: grid; gap: 12px; } .kanban-comment { padding: 13px; border: 1px solid var(--border); border-radius: 14px; background: #f8fafc; } .kanban-comment-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .kanban-comment-head strong { font-size: 0.95rem; } .kanban-comment-head small { color: var(--muted); font-size: 0.8rem; white-space: nowrap; } .kanban-comment p { margin: 0; color: var(--text); line-height: 1.45; } @media (max-width: 950px) { .kanban-detail-layout { grid-template-columns: 1fr; height: auto; min-height: 0; } .kanban-detail-main, .kanban-comment-sidebar { max-height: none; overflow: visible; padding-right: 0; } .kanban-comment-sidebar { position: static; } } .kanban-description-form, .kanban-custom-field-form, .kanban-add-checklist-form, .kanban-add-checklist-item-form { display: grid; gap: 12px; } .kanban-description-form textarea { min-height: 130px; resize: vertical; } .kanban-custom-field-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; } .kanban-custom-field { display: grid; gap: 6px; } .kanban-custom-field label { color: var(--muted); font-size: 0.88rem; font-weight: 800; } .kanban-add-checklist-form { grid-template-columns: minmax(0, 1fr) auto; margin-bottom: 18px; } .kanban-add-checklist-item-form { grid-template-columns: minmax(0, 1fr) auto; margin-top: 12px; } @media (max-width: 850px) { .kanban-custom-field-list, .kanban-add-checklist-form, .kanban-add-checklist-item-form { grid-template-columns: 1fr; } } .kanban-editor-toolbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: -4px; } .kanban-editor-button { min-width: 34px; height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: 9px; background: white; color: var(--text); font: inherit; font-weight: 900; cursor: pointer; } .kanban-editor-button:hover { background: #f8fafc; border-color: rgba(0, 110, 58, 0.35); } .kanban-editor-button-italic { font-style: italic; } .kanban-editor-toolbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .kanban-editor-button { min-width: 34px; height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: 9px; background: white; color: var(--text); font: inherit; font-weight: 900; cursor: pointer; } .kanban-editor-button:hover { background: #f8fafc; border-color: rgba(0, 110, 58, 0.35); } .kanban-editor-button-italic { font-style: italic; } .kanban-rich-editor { min-height: 120px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: white; font: inherit; line-height: 1.45; outline: none; } .kanban-rich-editor:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0, 110, 58, 0.12); } .kanban-rich-editor ul { margin: 8px 0 8px 22px; padding: 0; } .kanban-rich-editor p { margin: 0 0 8px; } .kanban-comment-text ul { margin: 8px 0 8px 22px; padding: 0; } .kanban-comment-text p { margin: 0 0 8px; } /* Kommentar-Schrift kleiner */ .kanban-comment, .kanban-comment-text, .kanban-comment-text p, .kanban-comment-text li { font-size: 0.88rem; line-height: 1.45; } .kanban-comment-meta { font-size: 0.78rem; } .kanban-comment-meta span, .kanban-comment-head small { font-size: 0.72rem; } /* Kommentar-Editor eingeklappt */ .kanban-comment-form-collapsed { display: block; } .kanban-comment-collapsed-input { width: 100%; min-height: 42px; padding: 10px 12px; display: flex; align-items: center; border: 1px solid var(--border); border-radius: 10px; background: white; color: var(--muted); font-size: 0.9rem; cursor: text; } .kanban-comment-collapsed-input:hover { border-color: rgba(0, 110, 58, 0.35); } .kanban-comment-expanded { display: none; } .kanban-comment-form-collapsed.is-expanded .kanban-comment-collapsed-input { display: none; } .kanban-comment-form-collapsed.is-expanded .kanban-comment-expanded { display: grid; gap: 12px; } .kanban-comment-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .kanban-comment-actions .btn { width: auto; } /* ========================================================= KANBAN DETAIL - KOMPAKTERE SCHRIFT / BUTTONS / FELDER Breite bleibt unverändert ========================================================= */ .kanban-detail-page { font-size: 0.9rem; } /* Header der Karte kompakter, aber nicht entfernen */ .kanban-detail-page .section-header { align-items: flex-start; gap: 12px; margin-bottom: 8px; } .kanban-detail-page .section-header h1 { font-size: 1.2rem; line-height: 1.25; margin: 0 0 2px; } .kanban-detail-page .section-header p { font-size: 0.82rem; } /* Cards kompakter */ .kanban-detail-page .card { padding: 14px; margin-bottom: 12px; border-radius: 12px; } .kanban-detail-page .card h2 { font-size: 0.98rem; margin: 0 0 10px; } .kanban-detail-page .card h3 { font-size: 0.88rem; margin: 0 0 8px; } /* Layoutbreite bleibt wie vorher, nur Abstände kleiner */ .kanban-detail-page .kanban-detail-layout { grid-template-columns: minmax(0, 1fr) 380px; gap: 14px; height: calc(100vh - 170px); min-height: 0; overflow: hidden; } .kanban-detail-page .kanban-detail-main { gap: 12px; padding-right: 4px; } .kanban-detail-page .kanban-comment-sidebar { padding-right: 4px; } /* Labels kleiner */ .kanban-detail-page label { margin-bottom: 4px; font-size: 0.76rem; font-weight: 700; } /* Inputs / Selects / Textareas kompakter */ .kanban-detail-page input, .kanban-detail-page select, .kanban-detail-page textarea { min-height: 32px; padding: 6px 8px; border-radius: 8px; font-size: 0.82rem; } /* Buttons kompakter */ .kanban-detail-page .btn { min-height: 32px; padding: 6px 10px; border-radius: 8px; font-size: 0.8rem; gap: 6px; } /* Beschreibung kompakter */ .kanban-detail-page .kanban-description-form { gap: 8px; } .kanban-detail-page .kanban-description-form textarea { min-height: 82px; rows: 3; } /* Felder kompakter */ .kanban-detail-page .kanban-custom-field-form { gap: 8px; } .kanban-detail-page .kanban-custom-field-list { gap: 9px; margin-bottom: 10px; } .kanban-detail-page .kanban-custom-field { gap: 4px; } .kanban-detail-page .kanban-custom-field label { font-size: 0.74rem; } /* Checklisten kompakter */ .kanban-detail-page .kanban-add-checklist-form { gap: 8px; margin-bottom: 10px; } .kanban-detail-page .kanban-checklist-list { gap: 9px; } .kanban-detail-page .kanban-checklist { padding: 10px; border-radius: 10px; } .kanban-detail-page .kanban-checklist-item { grid-template-columns: 24px minmax(0, 1fr); gap: 7px; padding: 4px 0; font-size: 0.8rem; } .kanban-detail-page .kanban-checklist-toggle { width: 21px; height: 21px; font-size: 0.72rem; } .kanban-detail-page .kanban-add-checklist-item-form { gap: 8px; margin-top: 8px; } /* Kommentarbereich kompakter */ .kanban-detail-page .kanban-comment-sidebar h2 { font-size: 0.98rem; margin-bottom: 10px; } .kanban-detail-page .kanban-comment-form { gap: 8px; margin: 0 0 12px; padding-bottom: 12px; } .kanban-detail-page .kanban-comment-collapsed-input { min-height: 32px; padding: 6px 9px; border-radius: 8px; font-size: 0.82rem; } .kanban-detail-page .kanban-editor-toolbar { gap: 5px; } .kanban-detail-page .kanban-editor-button { min-width: 29px; height: 29px; padding: 0 8px; border-radius: 7px; font-size: 0.78rem; } .kanban-detail-page .kanban-rich-editor { min-height: 76px; padding: 7px 8px; border-radius: 8px; font-size: 0.82rem; line-height: 1.35; } .kanban-detail-page .kanban-comment-actions { gap: 8px; } .kanban-detail-page .kanban-comment-list { gap: 8px; } .kanban-detail-page .kanban-comment { padding: 9px; border-radius: 10px; } .kanban-detail-page .kanban-comment-head { margin-bottom: 5px; gap: 8px; } .kanban-detail-page .kanban-comment-head strong { font-size: 0.78rem; } .kanban-detail-page .kanban-comment-head small { font-size: 0.68rem; } .kanban-detail-page .kanban-comment-text, .kanban-detail-page .kanban-comment-text p, .kanban-detail-page .kanban-comment-text li { font-size: 0.78rem; line-height: 1.35; } .kanban-detail-page .kanban-comment-text p { margin-bottom: 5px; } .kanban-detail-page .kanban-comment-text ul { margin: 5px 0 5px 18px; } .kanban-detail-page .topbar { display: none !important; } /* Mobil unverändert gut nutzbar */ @media (max-width: 950px) { .kanban-detail-page .kanban-detail-layout { grid-template-columns: 1fr; height: auto; overflow: visible; } .kanban-detail-page .kanban-detail-main, .kanban-detail-page .kanban-comment-sidebar { max-height: none; overflow: visible; padding-right: 0; } } /* ========================================================= KANBAN DETAIL - GRUPPIERTE FELDER ========================================================= */ .kanban-field-card { padding: 16px !important; } .kanban-field-card-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; } .kanban-field-card-header h2 { margin: 0 !important; } .kanban-field-group-list { display: grid; gap: 14px; } .kanban-field-group { border: 1px solid var(--border); border-radius: 14px; background: #f8fafc; overflow: hidden; transition: box-shadow 0.15s ease; } .kanban-field-group:hover { box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06); } .kanban-field-group > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 12px; cursor: pointer; list-style: none; font-weight: 850; font-size: 0.95rem; } .kanban-field-group > summary::-webkit-details-marker { display: none; } .kanban-field-group > summary::after { content: "▾"; flex-shrink: 0; color: var(--muted); font-size: 0.8rem; transition: transform 0.15s ease; } .kanban-field-group:not([open]) > summary::after { transform: rotate(-90deg); } .kanban-field-group-title { display: inline-flex; align-items: center; gap: 8px; } .kanban-field-group-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: white; border: 1px solid var(--border); font-size: 0.9rem; flex-shrink: 0; } .kanban-field-group > summary small { color: var(--muted); font-size: 0.78rem; font-weight: 750; } .kanban-field-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 14px; padding: 4px 16px 16px; } .kanban-field-grid .kanban-custom-field { display: grid; gap: 6px; min-width: 0; } .kanban-field-grid .kanban-custom-field label { margin: 0; color: var(--muted); font-size: 0.74rem; font-weight: 500; color: var(--muted); line-height: 1.15; } .kanban-field-grid input, .kanban-field-grid select, .kanban-field-grid textarea { width: 100%; min-height: 40px; padding: 9px 12px; border-radius: 10px; font-size: 0.88rem; line-height: 1.35; border: 1px solid var(--border); background: #fff; box-sizing: border-box; } .kanban-field-grid textarea { min-height: 72px; resize: vertical; } .kanban-custom-field-wide { grid-column: 1 / -1; } .kanban-compact-checkbox { display: inline-flex !important; align-items: center; gap: 8px; min-height: 40px; margin: 0 !important; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; background: white; font-size: 0.88rem !important; font-weight: 700 !important; } .kanban-compact-checkbox input { width: 16px !important; height: 16px !important; min-height: 0 !important; padding: 0 !important; } @media (max-width: 1100px) { .kanban-field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { .kanban-field-card { padding: 12px !important; } .kanban-field-group > summary { padding: 12px 14px 10px; } .kanban-field-grid { grid-template-columns: 1fr; gap: 12px; padding: 4px 14px 14px; } } /* ========================================================= KANBAN DETAIL - AUTOSAVE BESCHREIBUNG / FELDER ========================================================= */ .kanban-description-card .kanban-description-form { display: none !important; } .kanban-description-card.is-editing .kanban-description-form { display: grid !important; } .kanban-description-card.is-editing .kanban-description-read { display: none; } .kanban-description-read { min-height: 42px; padding: 8px 10px; border: 1px solid transparent; border-radius: 9px; background: #f8fafc; cursor: text; font-size: 0.86rem; line-height: 1.4; } .kanban-description-read:hover { border-color: var(--border); background: white; } .kanban-description-form textarea { min-height: 90px; } .kanban-description-form small, .kanban-field-autosave-status { font-size: 0.74rem; } .kanban-custom-field-form > .btn { display: none !important; } /* ========================================================= KANBAN DETAIL - KOMMENTARE BREITER + GLEICHE SCHRIFT WIE FELDER ========================================================= */ /* Mehr Anteil für die Kommentarspalte */ .kanban-detail-page .kanban-detail-layout { grid-template-columns: minmax(0, 1fr) 470px; } /* Kommentartexte wie Feldereinträge */ .kanban-detail-page .kanban-comment-text, .kanban-detail-page .kanban-comment-text p, .kanban-detail-page .kanban-comment-text li, .kanban-detail-page .kanban-comment-text div { font-family: inherit; font-size: 0.88rem; line-height: 1.35; font-weight: 400; color: var(--text); } /* Kommentarboxen etwas luftiger, passend zur größeren Spalte */ .kanban-detail-page .kanban-comment { padding: 11px 12px; } /* Name/Zeit etwas dezenter lassen */ .kanban-detail-page .kanban-comment-head strong { font-size: 0.78rem; font-weight: 700; } .kanban-detail-page .kanban-comment-head small { font-size: 0.72rem; } /* Eingabefeld für neue Kommentare ebenfalls an Feldereinträge angleichen */ .kanban-detail-page .kanban-rich-editor, .kanban-detail-page .kanban-comment-collapsed-input { font-family: inherit; font-size: 0.88rem; line-height: 1.35; } /* Bei etwas kleineren Bildschirmen Kommentarspalte nicht zu breit werden lassen */ @media (max-width: 1200px) { .kanban-detail-page .kanban-detail-layout { grid-template-columns: minmax(0, 1fr) 430px; } } @media (max-width: 950px) { .kanban-detail-page .kanban-detail-layout { grid-template-columns: 1fr; } } /* ========================================================= KANBAN DETAIL - DIENSTLEISTUNGS-CHECKBOXEN ========================================================= */ .kanban-field-group[data-field-group="dienstleistungen"] .kanban-field-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .kanban-field-group[data-field-group="dienstleistungen"] .kanban-custom-field { gap: 0; } .kanban-field-group[data-field-group="dienstleistungen"] .kanban-custom-field > label:first-child { display: none; } .kanban-compact-checkbox { display: flex !important; align-items: center; justify-content: flex-start; gap: 8px; min-height: 38px; margin: 0 !important; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: white; color: var(--text); font-size: 0.86rem !important; font-weight: 600 !important; cursor: pointer; } .kanban-compact-checkbox:hover { border-color: rgba(0, 110, 58, 0.35); background: rgba(0, 110, 58, 0.04); } .kanban-compact-checkbox input { width: 15px !important; height: 15px !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; } .kanban-compact-checkbox:has(input:checked) { border-color: rgba(0, 110, 58, 0.40); background: rgba(0, 110, 58, 0.08); color: var(--primary); } /* ========================================================= KANBAN DETAIL - DIENSTLEISTUNGEN IM HEADER ========================================================= */ .kanban-header-service-card { display: grid; gap: 8px; align-content: start; width: 360px; max-width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 14px; background: #fafbfc; } .kanban-header-service-title { font-size: 0.76rem; font-weight: 700; color: var(--text); } .kanban-header-service-areas { display: flex; gap: 6px; flex-wrap: wrap; } .kanban-header-service-area { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; background: white; font-size: 0.74rem; font-weight: 600; color: var(--text); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; } .kanban-header-service-area:has(input:checked) { border-color: rgba(0, 110, 58, 0.45); background: rgba(0, 110, 58, 0.08); color: var(--primary); } .kanban-header-service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; } .kanban-header-service-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 8px; background: white; font-size: 0.68rem; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; } .kanban-header-service-chip:has(input:checked) { border-color: rgba(0, 110, 58, 0.45); background: rgba(0, 110, 58, 0.08); color: var(--primary); } .kanban-header-service-area input, .kanban-header-service-chip input { width: 13px; height: 13px; flex-shrink: 0; accent-color: var(--primary); } @media (max-width: 900px) { .kanban-header-service-card { width: 100%; } } /* ========================================================= KANBAN DETAIL - WEITERE FUNKTIONEN MENÜ ========================================================= */ .kanban-header-menu { position: relative; } .kanban-header-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 12px; background: white; font-size: 1.2rem; line-height: 1; cursor: pointer; } .kanban-header-menu-toggle:hover { border-color: var(--primary); } .kanban-header-menu-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 20; display: flex; flex-direction: column; min-width: 220px; background: white; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12); overflow: hidden; } .kanban-header-menu-panel[hidden] { display: none; } .kanban-header-menu-item { display: flex; align-items: center; gap: 8px; padding: 12px 16px; color: var(--text); text-decoration: none; font-weight: 600; font-size: 0.88rem; } .kanban-header-menu-item:hover { background: #f2f4f7; } .kanban-header-menu-item.has-data { color: var(--primary); } /* ========================================================= KANBAN DETAIL - HEADER ACTIONS ========================================================= */ .kanban-detail-meta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 8px 0 10px; } .kanban-detail-assignee { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 5px; border-radius: 999px; background: #f3f4f6; font-size: 0.82rem; font-weight: 700; color: var(--text); } .kanban-detail-assignee-avatar { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--primary); color: white; font-size: 0.72rem; font-weight: 800; } .kanban-detail-type-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: #f3f4f6; font-size: 0.82rem; font-weight: 700; color: var(--muted); } .kanban-detail-type-badge-pi { background: #ede9fe; color: #6d28d9; } .kanban-detail-type-badge-cop { background: #dbeafe; color: #1d4ed8; } .kanban-detail-type-badge a, .kanban-partner-link { color: inherit; font-weight: 700; text-decoration: none; } .kanban-detail-type-badge a:hover { text-decoration: underline; } .kanban-partner-link { color: var(--primary); } .kanban-partner-link { display: inline-block; padding: 10px 0; } .kanban-partner-picker { position: relative; } .kanban-partner-picker-input { width: 100%; box-sizing: border-box; } .kanban-partner-picker-results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 15; max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; background: white; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12); } .kanban-partner-picker-results[hidden] { display: none; } .kanban-partner-picker-option { display: block; width: 100%; padding: 10px 14px; border: none; background: none; text-align: left; font-size: 0.9rem; font-weight: 600; color: var(--text); cursor: pointer; } .kanban-partner-picker-option:hover { background: #f2f4f7; } .kanban-partner-picker-option[hidden] { display: none; } .kanban-partner-picker-clear { color: var(--muted); border-top: 1px solid var(--border); } .kanban-detail-move-form { margin-top: 8px; } .kanban-detail-move-form select { min-width: 200px; } .kanban-detail-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; } .kanban-detail-header-actions .btn { white-space: nowrap; } @media (max-width: 800px) { .kanban-detail-header-card .section-header { align-items: flex-start; flex-direction: column; } .kanban-detail-header-actions { width: 100%; justify-content: flex-start; } } /* ========================================================= KANBAN DETAIL - HEADER TABS MIT DATENSTATUS ========================================================= */ .kanban-header-tab { position: relative; } .kanban-header-tab.has-data { border-color: rgba(0, 110, 58, 0.45); background: rgba(0, 110, 58, 0.08); color: var(--primary); } .kanban-header-tab.has-data:hover { background: rgba(0, 110, 58, 0.12); } .kanban-tab-status-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--primary); display: inline-block; } /* ========================================================= COP - ÜBERSICHT - SUCHE ========================================================= */ /* Customer overview: Seite fixieren, nur Projekte scrollen */ .customer-overview-page { overflow: hidden; } .customer-overview-page .page { height: calc(100vh - 72px); overflow: hidden; display: flex; flex-direction: column; gap: 18px; } .customer-overview-page .customer-overview-hero, .customer-overview-page .customer-booking-card { flex: 0 0 auto; } .customer-project-list-card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 16px; } .customer-project-list-header { flex: 0 0 auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; } .customer-project-list-header h2 { margin: 0; } .customer-table-scroll { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; overflow-x: auto; border: 1px solid var(--border); border-radius: 16px; } .customer-project-table { width: 100%; margin: 0; border-collapse: collapse; } .customer-project-table thead th { position: sticky; top: 0; z-index: 2; background: #f8fafc; } .customer-project-row[style*="display: none"] { display: none !important; } /* Suche direkt in der bestehenden Topbar */ .topbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; } .topbar-brand { flex: 0 0 auto; } .topbar-project-search { margin-left: auto; display: flex; align-items: center; justify-content: flex-end; gap: 8px; } .topbar-project-search-button { width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 999px; background: #ffffff; color: var(--text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08); } .topbar-project-search-input { width: 0; min-width: 0; height: 38px; padding: 0; border: 0; opacity: 0; pointer-events: none; border-radius: 999px; background: #ffffff; color: var(--text); font-size: 0.92rem; box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08); transition: width 0.18s ease, opacity 0.18s ease, padding 0.18s ease; } .topbar-project-search.is-open .topbar-project-search-input { width: 260px; padding: 0 14px; border: 1px solid var(--border); opacity: 1; pointer-events: auto; } .topbar-project-search-input:focus { outline: none; border-color: rgba(0, 110, 58, 0.45); box-shadow: 0 0 0 4px rgba(0, 110, 58, 0.08); } /* Customer overview: Seite fixieren, nur Projektliste scrollt */ body.customer-overview-page { height: 100vh; overflow: hidden; } .customer-overview-page .page { height: 100vh; overflow: hidden; display: flex; flex-direction: column; } .customer-overview-page .topbar { flex: 0 0 auto; } .customer-overview-page main { flex: 1 1 auto; min-height: 0; overflow: hidden; display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 18px; } .customer-overview-page .customer-overview-hero, .customer-overview-page .customer-booking-card { min-height: 0; } .customer-overview-page .customer-project-list-card { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 16px; } .customer-overview-page .customer-project-list-header { flex: 0 0 auto; } .customer-overview-page .customer-table-scroll { flex: 1 1 auto; min-height: 0; height: auto; max-height: none; overflow-y: auto; overflow-x: auto; border: 1px solid var(--border); border-radius: 16px; } .customer-overview-page .customer-project-table { width: 100%; margin: 0; border-collapse: collapse; } .customer-overview-page .customer-project-table thead th { position: sticky; top: 0; z-index: 2; background: #f8fafc; } /* ========================================================= PARTNER LOGIN ========================================================= */ .partner-login-card { max-width: 460px; margin: 70px auto 0; padding: 32px; } .partner-login-header { margin-bottom: 24px; } .partner-login-header h1 { margin: 0 0 8px; font-size: 2rem; } .partner-login-header p { margin: 0; } .partner-login-form { display: grid; gap: 18px; } .partner-login-button { width: 100%; padding: 13px 16px; } @media (max-width: 700px) { .partner-login-card { margin-top: 24px; padding: 24px; } } /* ========================================================= PARTNER LOGOUT ========================================================= */ .topbar-right { margin-left: auto; display: flex; align-items: center; justify-content: flex-end; gap: 10px; } .topbar-logout-form { margin: 0; } .topbar-logout-button { height: 38px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px; background: #ffffff; color: var(--text); font: inherit; font-size: 0.9rem; font-weight: 700; cursor: pointer; box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08); } .topbar-logout-button:hover { background: #f8fafc; border-color: rgba(0, 110, 58, 0.35); } /* ========================================================= TOPBAR - NUR FIRMENLOGO FÜR ENDKUNDEN ========================================================= */ .topbar-company-only { justify-content: center; min-height: 78px; } .topbar-company-only .topbar-brand-static { margin: 0 auto; cursor: default; } .topbar-company-logo { display: block; max-width: 220px; max-height: 58px; width: auto; height: auto; object-fit: contain; } @media (max-width: 700px) { .topbar-company-only { min-height: 66px; } .topbar-company-logo { max-width: 170px; max-height: 46px; } } /* ========================================================= BESTELLUNG - COP-DATEN ========================================================= */ .checkout-partner-contact-box { margin: 0 0 22px; padding: 18px; border: 1px solid var(--border); border-radius: 16px; background: #f8fafc; } .checkout-partner-contact-box h3 { margin: 0 0 14px; font-size: 1rem; } .checkout-partner-contact-row { display: grid; grid-template-columns: 0.75fr 1fr 1fr; gap: 14px; } .checkout-partner-contact-row .checkout-field:nth-child(4), .checkout-partner-contact-row .checkout-field:nth-child(5) { grid-column: span 1; } @media (min-width: 900px) { .checkout-partner-contact-row { grid-template-columns: 0.7fr 1fr 1fr 1.2fr 1fr; } } @media (max-width: 700px) { .checkout-partner-contact-row { grid-template-columns: 1fr; } } /* ========================================================= Partner-/Kundendaten-Formulare Trotz des Namens auch von den Kundenseiten benutzt (crm/bello_kunde_profile.html, customers/kunde_profile.html). Die Partnerseite selbst bringt ihre eigenen Regeln mit (siehe Abschnitt PARTNERSEITE am Ende) - die sind auf .partner-page eingegrenzt und lassen diese hier unberuehrt. ========================================================= */ .partner-profile-form { display: flex; flex-direction: column; gap: 26px; } .partner-profile-section { padding-bottom: 22px; border-bottom: 1px solid var(--border); } .partner-profile-section:last-of-type { border-bottom: 0; padding-bottom: 0; } .partner-profile-section h2 { margin: 0 0 16px; } .partner-profile-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .form-field { display: flex; flex-direction: column; gap: 7px; } .form-field-full { grid-column: 1 / -1; } .form-field label { font-weight: 700; color: var(--text); } .form-field input, .form-field select, .form-field textarea { width: 100%; min-height: 42px; border: 1px solid var(--border); border-radius: 12px; padding: 9px 11px; font: inherit; color: var(--text); background: #ffffff; } /* Checkbox-Feld - Checkbox + Label nebeneinander statt der sonst uebliche label-oben/input-volle-Breite-Anordnung, sonst wuerde die Checkbox durch .form-field input { width:100%; ... } zu einer riesigen Box verzerrt. */ .form-field-checkbox { flex-direction: row; align-items: center; gap: 9px; } .form-field-checkbox input[type="checkbox"] { width: auto; min-height: 0; border-radius: 4px; padding: 0; accent-color: var(--primary); } .form-field-checkbox label { margin: 0; } .form-field textarea { min-height: 120px; resize: vertical; } .partner-logo-preview { margin-bottom: 14px; padding: 14px; border: 1px solid var(--border); border-radius: 16px; background: #f8fafc; display: inline-flex; align-items: center; justify-content: center; } .partner-logo-preview img { display: block; max-width: 220px; max-height: 90px; width: auto; height: auto; object-fit: contain; } .form-actions { display: flex; justify-content: flex-end; } @media (max-width: 800px) { .partner-profile-grid { grid-template-columns: 1fr; } .form-actions { justify-content: stretch; } .form-actions .btn { width: 100%; } } .partner-logo-editor { position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 12px; } .partner-logo-preview-box { width: 140px; height: 140px; border: 1px solid var(--border); border-radius: 18px; background: #f8fafc; display: flex; align-items: center; justify-content: center; overflow: hidden; } .partner-logo-preview-box.is-dragover { border-color: rgba(0, 110, 58, 0.65); background: rgba(0, 110, 58, 0.06); } .partner-logo-preview-image { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } .partner-logo-placeholder { padding: 14px; text-align: center; color: var(--muted); font-weight: 700; font-size: 0.9rem; } .partner-logo-file-input { display: none; } .partner-logo-edit-button { min-height: 38px; padding: 0 16px; border: 1px solid var(--border); border-radius: 999px; background: #ffffff; color: var(--text); font: inherit; font-weight: 700; cursor: pointer; box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08); } .partner-logo-edit-button:hover { background: #f8fafc; border-color: rgba(0, 110, 58, 0.35); } .partner-logo-menu { position: absolute; top: 190px; left: 0; z-index: 20; min-width: 230px; padding: 8px; border: 1px solid var(--border); border-radius: 16px; background: #ffffff; box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16); } .partner-logo-menu-item { width: 100%; min-height: 40px; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--text); font: inherit; font-weight: 700; text-align: left; cursor: pointer; } .partner-logo-menu-item:hover { background: #f8fafc; } .partner-logo-menu-danger { color: #b91c1c; } .partner-logo-menu-danger:hover { background: #fef2f2; } .partner-logo-drop-hint { margin: 0; color: var(--muted); font-size: 0.88rem; } /* ---------- Microsoft 365 Verbindungsstatus ---------- */ .msgraph-status-wrapper { display: grid; place-items: start center; padding-top: 40px; } .msgraph-status-card { width: min(100%, 480px); } .msgraph-status-connected { margin: 16px 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; background: #f8fafc; } .msgraph-status-connected p { margin: 0 0 4px; } .msgraph-status-error { color: var(--danger); } .msgraph-status-hint { margin-top: 14px; font-size: 0.85rem; } .mail-template-header-actions { display: flex; gap: 10px; flex-wrap: wrap; } .mail-oft-import-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; } .mail-oft-import-status { margin: 8px 0 0; font-size: 0.85rem; color: var(--muted); } /* ---------- Tiptap-Editor (Mailvorlagen, Signaturen, Mail-Composer) ---------- */ /* Selbst gehostetes Tiptap-Bundle (core/static/vendor/tiptap), siehe core/static/js/mail_editor.js. Bewusst kleine, eigene Toolbar statt einer fremden Fertig-UI, damit sie sich optisch nicht von Bello unterscheidet. */ .mail-editor-wrapper { width: 100%; max-width: none; box-sizing: border-box; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--card); } .mail-editor-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 6px; background: #f8fafc; border-bottom: 1px solid var(--border); } .mail-editor-btn { min-width: 28px; height: 28px; padding: 0 6px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text); font-size: 13px; cursor: pointer; } .mail-editor-btn:hover { background: #eef2f7; } .mail-editor-btn.is-active { background: #dbeafe; border-color: #bfdbfe; } .mail-editor-sep { width: 1px; height: 20px; margin: 0 4px; background: var(--border); } .mail-editor-dropdown { position: relative; display: inline-flex; } .mail-editor-dropdown-panel { position: absolute; top: calc(100% + 4px); left: 0; z-index: 40; min-width: 160px; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); box-shadow: var(--shadow); } /* :not([hidden]) statt eines unbedingten display:flex - eine Regel ohne diese Absicherung wuerde (gleiche Spezifitaet, spaeter im Stylesheet als der Browser-Standard fuer [hidden]) das Ausblenden per hidden-Attribut aushebeln und die Farbpalette dauerhaft sichtbar lassen - derselbe Fehler wie zuvor bei .kanban-mail-panel. */ .mail-editor-color-panel:not([hidden]) { display: flex; flex-wrap: wrap; gap: 6px; min-width: auto; } .mail-editor-color-swatch { width: 22px; height: 22px; border: 1px solid var(--border); border-radius: 999px; cursor: pointer; padding: 0; } .mail-editor-color-swatch-none { background: repeating-linear-gradient(45deg, #fff, #fff 3px, #f3f4f6 3px, #f3f4f6 6px) !important; } .mail-editor-variable-panel { max-height: 320px; overflow-y: auto; } .mail-editor-variable-group + .mail-editor-variable-group { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); } .mail-editor-variable-group-label { margin-bottom: 4px; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; } .mail-editor-variable-item { display: block; width: 100%; padding: 5px 6px; border: none; border-radius: 6px; background: transparent; text-align: left; font-size: 12.5px; cursor: pointer; white-space: nowrap; } .mail-editor-variable-item:hover { background: #eef2f7; } .mail-editor-fontsize-control { align-items: center; } .mail-editor-fontsize-input { width: 44px; height: 28px; padding: 0 4px; border: 1px solid var(--border); border-radius: 6px 0 0 6px; background: var(--card); color: var(--text); font-size: 13px; text-align: center; } .mail-editor-fontsize-input::-webkit-outer-spin-button, .mail-editor-fontsize-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .mail-editor-fontsize-caret { min-width: 20px; margin-left: -1px; border-radius: 0 6px 6px 0; } /* Bild mit Ziehgriff (siehe mail_editor.js::createResizableImageExtension) - der Griff ist nur bei Hover/Auswahl sichtbar, damit ein eingefuegtes Logo im Ruhezustand wie gewoehnlicher Mailinhalt wirkt. */ .mail-editor-image-wrap { position: relative; display: inline-block; line-height: 0; } .mail-editor-image-wrap img { display: block; max-width: 100%; height: auto; } .mail-editor-image-wrap.is-selected { outline: 2px solid #1D4ED8; outline-offset: 2px; } .mail-editor-image-resize-handle { position: absolute; right: -5px; bottom: -5px; width: 12px; height: 12px; border: 2px solid #fff; border-radius: 999px; background: #1D4ED8; cursor: nwse-resize; opacity: 0; transition: opacity .1s ease; } .mail-editor-image-wrap:hover .mail-editor-image-resize-handle, .mail-editor-image-wrap.is-selected .mail-editor-image-resize-handle { opacity: 1; } .mail-editor-content { /* Bewusst KEINE feste Breite (frueher 640px, passend zur tatsaechlichen Mailbreite inkl. Zellenpadding) - der Editor soll den kompletten verfuegbaren Rahmen ausnutzen. Der reale Zeilenumbruch der versendeten Mail bleibt trotzdem bei 608px Text (siehe crm/mail_html.py::MAIL_TEXT_WIDTH_PX/wrap_mail_html). */ width: 100%; padding: 8px; box-sizing: border-box; font-family: Calibri, Arial, Helvetica, sans-serif; font-size: 11pt; line-height: normal; color: #1f2933; max-height: 60vh; overflow-y: auto; } .mail-editor-content.ProseMirror, .mail-editor-content .ProseMirror { width: 100%; max-width: none; box-sizing: border-box; margin: 0; padding: 6px 0; outline: none; font-family: Calibri, Arial, Helvetica, sans-serif; font-size: 11pt; line-height: normal; } .mail-editor-content p { margin: 0; padding: 0; line-height: normal; } /* Calibri Light zieht ein Leerzeichen, das direkt vor einem Bindestrich steht, per Kerning auf etwa ein Fuenftel zusammen (0,6px statt 3px bei 10pt) - in einer Signaturzeile wie "INFENSA - Institut fuer ..." sieht es dann aus, als fehlte das Leerzeichen ganz. Nur der Bindestrich ist betroffen, Gedanken- und Geviertstrich nicht. Outlook macht das nicht: die versendete Mail zeigt den Abstand normal. Diese Regel gleicht deshalb nur die ANZEIGE an das an, was beim Empfaenger ankommt - sie steht in app.css und wird nie mitgesendet. Bewusst nur dort, wo Calibri Light ausdruecklich gesetzt ist: ueberall sonst bleibt das Kerning an, damit der Editor weiter so umbricht wie die Mail. */ .mail-editor-content [style*="Calibri Light"] { font-kerning: none; } .mail-editor-content ul, .mail-editor-content ol { /* Dieselben Werte, die im versendeten HTML gelten: dort steht am