/* Hafenmanager – eigene Stile */ :root { --sidebar-breite: 240px; --header-hoehe: 56px; } body { padding-top: var(--header-hoehe); } /* Mobile-Header: Inhalt einzeilig halten — sonst bricht der Brand auf eine zweite Zeile um und die Navbar wird doppelt so hoch. */ @media (max-width: 991.98px) { .navbar > .container-fluid { flex-wrap: nowrap; } .navbar-brand { min-width: 0; /* erlaubt Schrumpfen unter Inhaltsbreite */ font-size: 1.05rem; } .navbar-brand span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .navbar .btn { padding: 0.25rem 0.55rem; } } /* App-Shell mit Sidebar links und Hauptbereich rechts */ .app-shell { display: flex; min-height: calc(100vh - var(--header-hoehe)); } .app-sidebar { width: var(--sidebar-breite); background: #fff; border-right: 1px solid var(--bs-border-color); } @media (min-width: 992px) { .app-sidebar { position: fixed; top: var(--header-hoehe); bottom: 0; left: 0; z-index: 1020; overflow-y: auto; visibility: visible !important; transform: none !important; } .app-main { margin-left: var(--sidebar-breite); flex: 1 1 auto; min-width: 0; } .app-footer { margin-left: var(--sidebar-breite); } } @media (max-width: 991.98px) { .app-main { flex: 1 1 auto; min-width: 0; width: 100%; } } /* Sidebar-Links */ .app-sidebar .nav-link { color: var(--bs-body-color); border-radius: 0.375rem; padding: 0.55rem 0.75rem; margin-bottom: 0.15rem; } .app-sidebar .nav-link:hover { background: var(--bs-tertiary-bg); } .app-sidebar .nav-link.active { background: var(--bs-primary); color: #fff; } /* Login-/Aktivierungs-Seiten */ .auth-card { max-width: 420px; margin: 4rem auto; } /* Pflichtfeld-Sternchen */ .pflicht::after { content: " *"; color: var(--bs-danger); font-weight: 700; } /* === Mobile: Tabellen zuverlässig horizontal scrollen lassen === */ @media (max-width: 991.98px) { /* Body / Main auf Viewport festnageln, sonst dehnt eine breite Tabelle den ganzen Layout-Block aus und der lokale Scroll greift nicht. `overflow-x: clip` statt `hidden`, damit `position: sticky` (z. B. die Konto-Kopfzeile) nicht von einem Scroll-Kontext auf gebrochen wird. */ body { overflow-x: clip; } .app-main, .container-fluid { max-width: 100vw; min-width: 0; } /* Berührungs-Scrolling glätten */ .table-responsive { -webkit-overflow-scrolling: touch; } /* Zellen nicht umbrechen → Tabelle wird wider Viewport breit → .table-responsive zeigt seinen Scrollbalken automatisch. */ .table-responsive > table th, .table-responsive > table td { white-space: nowrap; } /* Spalten, die explizit umbrechen sollen, mit Klasse .col-wrap */ .table-responsive > table .col-wrap { white-space: normal; } /* Ausnahme: Stege-Liste „Heimat-Boote & Eigner" → mehrzeilige Liste, wirkt sonst durch nowrap als eine endlose Zeile. */ .table-responsive > table td ul.list-unstyled, .table-responsive > table td ul.list-unstyled li { white-space: normal; } /* Schrift kompakter */ .table-responsive table { font-size: 0.92rem; } } /* === Belegungskalender === */ /* Tabelle so breit machen, wie ihre Spalten zusammen brauchen — nicht 100% des Containers (sonst staucht Bootstrap auf Mobile alle 31 Spalten in den Viewport). */ .kal-tabelle { font-size: 0.78rem; table-layout: fixed; width: max-content; min-width: 100%; } .kal-tabelle th, .kal-tabelle td { padding: 0.25rem; text-align: center; vertical-align: middle; } /* Scroll-Container: vertikal + horizontal — sticky-Elemente kleben relativ zu DIESEM Container. Höhe so, dass Navbar + Filter/Legende sichtbar bleiben. */ .kal-scroll { max-height: calc(100vh - var(--header-hoehe) - 220px); min-height: 360px; overflow: auto; -webkit-overflow-scrolling: touch; } .kal-stegspalte { position: sticky; left: 0; z-index: 2; background: #fff; --bs-table-bg-state: #fff; text-align: left !important; width: 130px; min-width: 130px; max-width: 130px; } /* Header-Zeile beim vertikalen Scrollen am oberen Rand des Scroll-Containers festhalten */ .kal-tabelle thead th { position: sticky; top: 0; z-index: 3; background: #f8f9fa; } /* Ecke oben links: doppelt sticky (links + oben), höchster z-index */ .kal-tabelle thead .kal-stegspalte { z-index: 4; background: #f8f9fa; --bs-table-bg-state: #f8f9fa; } .kal-tagheader { width: 30px; min-width: 30px; padding: 0.15rem !important; } .kal-tagnr { font-weight: 600; font-size: 0.8rem; } .kal-wochentag { font-size: 0.65rem; color: #6c757d; } .kal-weekend { background: #f1f3f5 !important; } .kal-today { background: #cfe2ff !important; } .kal-zelle { width: 30px; min-width: 30px; height: 36px; cursor: pointer; font-size: 0.7rem; font-weight: 600; user-select: none; transition: outline 0.1s; } .kal-zelle:hover { outline: 2px solid #0d6efd; outline-offset: -2px; } .kal-zelle.kal-selected { outline: 3px solid #fd7e14 !important; outline-offset: -3px; } .kal-zelle.kal-vergangen { opacity: 0.7; cursor: not-allowed; } /* Wichtig: Bootstrap 5 zeichnet den Tabellen-Zellenhintergrund per box-shadow inset → background allein wird überdeckt. Daher zusätzlich die CSS-Variable --bs-table-bg-state setzen. */ .kal-frei { background: #b8e0c4; color: #0f5132; --bs-table-bg-state: #b8e0c4; } .kal-teilfrei { background: #ffe184; color: #5c4400; --bs-table-bg-state: #ffe184; } .kal-voll { background: #9ec5fe; color: #052c65; --bs-table-bg-state: #9ec5fe; } .kal-gast { background: #ffb877; color: #5e3000; --bs-table-bg-state: #ffb877; } .kal-gemischt-frei { background: #ffcf90; color: #5c4400; --bs-table-bg-state: #ffcf90; } .kal-gemischt { background: #f1929b; color: #58151c; --bs-table-bg-state: #f1929b; } .kal-konflikt { background: #f1929b; color: #58151c; --bs-table-bg-state: #f1929b; outline: 2px dashed #842029; outline-offset: -2px; } .kal-legende { display: inline-block; width: 16px; height: 16px; border: 1px solid rgba(0,0,0,0.1); vertical-align: middle; margin-right: 0.25rem; border-radius: 2px; } /* === Buchhaltung === */ .geld-positiv { color: #198754; font-weight: 600; } .geld-negativ { color: #dc3545; font-weight: 600; } .geld-cell { font-variant-numeric: tabular-nums; white-space: nowrap; } .beleg-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 4px; border: 1px solid var(--bs-border-color); cursor: zoom-in; background: #f5f5f5; } .beleg-pdf-icon { display: inline-flex; width: 64px; height: 64px; align-items: center; justify-content: center; border: 1px solid var(--bs-border-color); border-radius: 4px; background: #f5f5f5; color: #c0392b; font-size: 1.5rem; text-decoration: none; } .beleg-pdf-icon:hover { background: #ebebeb; } /* Lightbox */ .lightbox-overlay { position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,0.85); display: flex; align-items: center; justify-content: center; overflow: auto; -webkit-overflow-scrolling: touch; touch-action: pinch-zoom; } .lightbox-overlay img { max-width: 95vw; max-height: 95vh; transform-origin: center center; transition: transform 0.15s ease; user-select: none; -webkit-user-drag: none; } .lightbox-controls { position: fixed; top: 12px; right: 12px; display: flex; gap: 6px; z-index: 2001; } .lightbox-controls button { width: 40px; height: 40px; border: none; border-radius: 50%; background: rgba(255,255,255,0.92); color: #000; font-size: 1.25rem; line-height: 1; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.4); } .lightbox-controls button:hover { background: #fff; } .lightbox-caption { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); color: #fff; background: rgba(0,0,0,0.6); padding: 0.4rem 0.8rem; border-radius: 4px; font-size: 0.85rem; max-width: 90vw; text-align: center; } /* === Infocenter === */ .info-card { display: flex; flex-direction: column; height: 100%; transition: transform 0.1s ease, box-shadow 0.1s ease; text-decoration: none; color: inherit; } .info-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.08); } .info-card.info-wichtig { border-left: 4px solid #ffc107; } .info-card .info-titel { font-weight: 600; line-height: 1.25; } .info-card .info-excerpt { color: var(--bs-secondary-color); display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; /* Zeilenumbrüche & Absätze sichtbar */ font-size: 0.9rem; line-height: 1.4; } /* Mit Anhang-Vorschauen: weniger Text, damit Cards nicht aufquellen */ .info-card .info-excerpt-kurz { -webkit-line-clamp: 3; } .info-card .info-excerpt-lang { -webkit-line-clamp: 6; } .info-card .info-meta { font-size: 0.8rem; color: var(--bs-secondary-color); } .info-card .info-anhaenge { font-size: 0.85rem; } .info-anhaenge-thumbs { display: flex; flex-wrap: wrap; gap: 8px; } /* Portrait-Format (3:4), passt zu A4-PDFs ohne Crop und zu Hochkant-Fotos. */ .info-thumb { width: 168px; height: 224px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--bs-border-color); border-radius: 4px; overflow: hidden; background: #f5f5f5; flex-shrink: 0; cursor: zoom-in; text-decoration: none; } /* Foto-Thumbs: Cover — füllen das Format, ggf. mit Crop (Wirkung). */ .info-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } /* PDF-Vorschau (gerendert per pdftoppm). Identisches Layout wie Bild-Thumbs, plus eine kleine PDF-Marke unten rechts. */ .info-thumb-pdf-preview { position: relative; background: #fff; } /* PDF-Thumbs: Contain — zeigt die ganze erste Seite ohne Crop. */ .info-thumb-pdf-preview img { width: 100%; height: 100%; object-fit: contain; object-position: top center; background: #fff; } .info-thumb-pdf-preview::after { content: 'PDF'; position: absolute; bottom: 4px; right: 4px; background: rgba(192, 57, 43, 0.92); color: #fff; font-size: 0.7rem; line-height: 1; padding: 3px 6px; border-radius: 3px; letter-spacing: 0.04em; font-weight: 700; pointer-events: none; } /* Fallback-Icon, wenn die PDF-Vorschau nicht generiert werden konnte */ .info-thumb-pdf-icon { width: 100%; height: 100%; align-items: center; justify-content: center; color: #c0392b; font-size: 4.5rem; background: #f5f5f5; } .info-thumb-more { display: inline-flex; align-items: center; justify-content: center; width: 168px; height: 224px; border: 1px dashed var(--bs-border-color); border-radius: 4px; color: var(--bs-secondary-color); font-size: 1.15rem; background: #fafafa; } /* Inhalts-Anzeige (nach sanitize_html) */ .info-inhalt h2 { font-size: 1.4rem; margin-top: 1rem; } .info-inhalt h3 { font-size: 1.2rem; margin-top: 0.8rem; } .info-inhalt h4 { font-size: 1.05rem; margin-top: 0.6rem; } .info-inhalt p { margin-bottom: 0.75rem; } .info-inhalt blockquote { border-left: 3px solid var(--bs-border-color); margin: 0.5rem 0; padding: 0.25rem 0.75rem; color: var(--bs-secondary-color); } /* === Buchungen: Anhang-Thumbnails ========================================= */ /* .buchung-anhang-liste: kompakte, zentrierte Thumbnail-Reihe in der Tabellen- zelle (Desktop). In den Mobil-Karten reicht eine einfache d-flex-Reihe. */ .buchung-anhang-liste { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; justify-content: center; max-width: 156px; vertical-align: middle; } .buchung-anhang-thumb { width: 72px; height: 72px; object-fit: cover; border-radius: 4px; border: 1px solid var(--bs-border-color); background: #f5f5f5; vertical-align: middle; cursor: zoom-in; } .buchung-anhang-pdf { display: inline-flex; width: 72px; height: 72px; align-items: center; justify-content: center; border: 1px solid var(--bs-border-color); border-radius: 4px; background: #f5f5f5; color: #c0392b; font-size: 1.7rem; vertical-align: middle; } .buchung-anhang-pdf:hover { background: #ebebeb; } /* === Konto-Detailseite: Kopfzeile „Konto: …" beim Scrollen klebend ======== */ .konto-sticky-header { position: sticky; top: var(--header-hoehe); z-index: 1010; background: var(--bs-body-bg); padding: 0.5rem 0; border-bottom: 1px solid var(--bs-border-color); }