/* Family - handwritten stylesheet. Implements the design tokens and three-column layout from chapter 13. No build step: a single static CSS file kept intentionally small. */ :root { --bg-app: #f8fafc; --bg-surface: #ffffff; --bg-subtle: #f8fafc; /* leicht abgesetzte Flächen (Karten-Innen, Hover) */ --bg-hover: #f1f5f9; /* Hover für Listen/Navigation */ --bg-active: #eef2ff; /* aktive/ausgewählte Elemente */ --border-subtle: #e5e7eb; --border-strong: #cbd5e1; /* Baumlinien, kräftigere Ränder */ --grid-dot: #e2e8f0; /* Punkteraster im Stammbaum */ --text-primary: #0f172a; --text-muted: #64748b; --accent: #6d5ef7; --accent-soft: rgba(109, 94, 247, .15); --accent-contrast: #ffffff; --lineage-bg: #ecfdf5; --lineage-border: #10b981; --danger-bg: #fef2f2; --danger-border: #fecaca; --danger-text: #b91c1c; --success-bg: #ecfdf5; --success-border: #a7f3d0; --success-text: #047857; --focus-bg: #0b1220; --badge: #f43f5e; --shadow: rgba(15, 23, 42, .08); --radius-card: 16px; --radius-field: 8px; --gap: 24px; /* Globaler Schrift-/Zoom-Faktor (per Cookie steuerbar, siehe prefs.js). */ --font-scale: 1; /* Dynamische Viewport-Höhe: berücksichtigt ein-/ausblendende Browserleisten und vermeidet so überall ungenutzten Leerraum. Fallback für alte Browser. */ --vh: 100vh; --vh: 100dvh; } /* --- Dunkelmodus: redefiniert nur die Farbtoken (siehe prefs.js / Cookie) --- */ :root[data-theme="dark"] { --bg-app: #0b1220; --bg-surface: #161f33; --bg-subtle: #1e293b; --bg-hover: #273349; --bg-active: #2d2a66; --border-subtle: #2c3a52; --border-strong: #3b4a63; --grid-dot: #25324a; --text-primary: #e8edf6; --text-muted: #93a3bb; --accent: #8b7dff; --accent-soft: rgba(139, 125, 255, .22); --accent-contrast: #ffffff; --lineage-bg: #0f2e26; --lineage-border: #2dd4a7; --danger-bg: #3a1620; --danger-border: #6e2435; --danger-text: #fca5a5; --success-bg: #0f2e26; --success-border: #1f7a5c; --success-text: #6ee7b7; --focus-bg: #020617; --shadow: rgba(0, 0, 0, .45); } /* Sanfter Übergang beim Umschalten von Hell/Dunkel. */ body, .sidebar, .card, .btn, .field input, .field select, .field textarea { transition: background-color .12s ease, border-color .12s ease, color .12s ease; } /* Beim Theme-Wechsel kurz eine weiche Farb-Überblendung über ALLE Elemente legen (prefs.js setzt diese Klasse nur für die Dauer des Wechsels auf ). So fadet der Moduswechsel angenehm, ohne normale Hover-Übergänge zu bremsen. WICHTIG: Die Dauer ist auf die Schalter-Animation (.switch --duration .85s) abgestimmt, damit Seite und Sonne/Mond-Knopf GEMEINSAM umschalten – sonst ist die Seite schon dunkel, während die Sonne im Schalter noch sichtbar ist. Der Timeout in prefs.js muss minimal länger sein, sonst springt der Wechsel hart. */ .theme-anim, .theme-anim * { transition: background-color .4s ease, color .4s ease, border-color .4s ease, box-shadow .4s ease, fill .4s ease !important; } * { box-sizing: border-box; } body { margin: 0; font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--bg-app); color: var(--text-primary); font-size: 14px; line-height: 1.5; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* --- App shell: three-column layout --- */ .app-shell { display: flex; min-height: var(--vh); } .sidebar { width: 280px; flex-shrink: 0; background: var(--bg-surface); border-right: 1px solid var(--border-subtle); display: flex; flex-direction: column; padding: var(--gap); position: sticky; top: 0; /* Höhe gegen den Zoom normalisieren, damit die Leiste eine Bildschirmhöhe bleibt. */ height: calc(var(--vh) / var(--font-scale, 1)); overflow-y: auto; zoom: var(--font-scale, 1); } .main { flex: 1; min-width: 0; } /* Zoom liegt auf dem inneren Wrapper. Ein gezoomter Block füllt seinen Eltern- bereich bereits visuell aus – keine Breiten-Korrektur nötig (sonst entstünde Leerraum bzw. Abschneiden rechts beim Rein-/Rauszoomen). */ .main-inner { padding: var(--gap); zoom: var(--font-scale, 1); /* Flex-Spalte über die volle Bildschirmhöhe: große Panels (Baum, Karte, Ahnenblatt) wachsen via flex:1 automatisch mit und nutzen den Platz restlos – kein fester Höhenabzug/Magic-Number mehr nötig. */ display: flex; flex-direction: column; min-height: calc(var(--vh) / var(--font-scale, 1)); } /* Vollbild-Seiten (Baum, Karte, Ahnenblatt): Höhe FEST auf eine Bildschirmseite begrenzen, statt nur min-height. Nur so werden die inneren Panels (overflow:auto) zu echten Scroll-Containern – sonst wächst der Inhalt endlos, die Suche klebt nutzlos fest und das Zentrieren der angesprungenen Person (panel.scrollTop) bleibt wirkungslos. Nur am Desktop; auf kleinen Bildschirmen scrollt die Seite normal. */ @media (min-width: 1025px) { .main-inner--fill { height: calc(var(--vh) / var(--font-scale, 1)); min-height: 0; overflow: hidden; } } /* --- Brand --- */ .brand { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; text-decoration: none !important; color: inherit !important; } .brand:hover { text-decoration: none !important; } .brand:hover .brand-name { color: var(--accent); } .brand-logo { width: 40px; height: 40px; border-radius: 10px; background: var(--accent); color: var(--accent-contrast); display: flex; align-items: center; justify-content: center; font-size: 20px; } /* Flaticon-Icon sauber mittig im Kästchen (eigene Zeilenhöhe ausgleichen). */ .brand-logo i { line-height: 1; display: block; transform: translateY(2px); } .brand-name { font-weight: 700; font-size: 17px; } .brand-count { font-size: 12px; color: var(--text-muted); } /* --- Navigation (größer & mit Icons für gute Lesbarkeit) --- */ .nav { margin-top: var(--gap); display: flex; flex-direction: column; gap: 2px; flex: 1; } .nav-section { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin: 18px 0 6px; font-weight: 700; } .nav-section.clickable { cursor: pointer; display: flex; justify-content: space-between; align-items: center; user-select: none; transition: color 0.12s ease; } .nav-section.clickable:hover { color: var(--accent); } .nav-section-badge-wrap { display: flex; align-items: center; gap: 8px; } .section-chevron { font-size: 10px; color: var(--text-muted); transition: transform 0.2s ease, color 0.12s ease; } .nav-section.clickable:hover .section-chevron { color: var(--accent); } .nav-group-items { max-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 2px; transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .nav-group.expanded .nav-group-items { max-height: 400px; } .nav-group.expanded .section-chevron { transform: rotate(180deg); } .badge-red { display: inline-flex; align-items: center; justify-content: center; background-color: #ef4444; color: #ffffff; font-size: 10px; font-weight: 700; min-width: 17px; height: 17px; border-radius: 50%; padding: 0 4px; line-height: 1; text-transform: none; letter-spacing: normal; } .nav-item { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; border-radius: 10px; color: var(--text-primary); font-size: 15px; } .nav-link { display: inline-flex; align-items: center; gap: 11px; } .nav-icon { font-size: 17px; color: var(--text-muted); display: inline-flex; } .nav-item:hover { background: var(--bg-hover); text-decoration: none; } .nav-item.active { background: var(--bg-active); color: var(--accent); font-weight: 600; } .nav-item.active .nav-icon { color: var(--accent); } /* Eingerückte Admin-Unterseiten */ .nav-sub { padding-left: 26px; font-size: 14px; } .nav-sub .nav-icon { font-size: 15px; } .nav-badge { background: var(--badge); color: #fff; border-radius: 999px; font-size: 11px; padding: 1px 8px; font-weight: 600; } /* --- User footer --- */ .user-footer { display: flex; align-items: center; gap: 10px; background: var(--bg-subtle); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 10px 12px; margin-top: 12px; } /* Klickbarer Bereich (Name + Bild) führt zum eigenen Profil. */ .user-footer-main { display: flex; align-items: center; gap: 10px; flex: 1; text-decoration: none; color: inherit; border-radius: 10px; padding: 4px; } .user-footer-main:hover { background: var(--bg-hover); } .avatar { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; overflow: hidden; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 18px; font-weight: 700; } .avatar img { width: 100%; height: 100%; object-fit: cover; } .avatar-initials { line-height: 1; } .user-name { font-weight: 600; font-size: 13px; } .user-role { font-size: 12px; color: var(--text-muted); } /* Abmelden-Knopf: klares, quadratisches Icon rechts. */ .logout-form { margin: 0; display: flex; } .logout-btn { flex-shrink: 0; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--border-subtle); background: var(--bg-surface); border-radius: 6px; cursor: pointer; color: var(--text-muted); font-size: 17px; transition: background .12s ease, color .12s ease, border-color .12s ease; } .logout-btn:hover { background: var(--danger-bg); color: var(--badge); border-color: var(--danger-border); } .logout-btn i { line-height: 1; } /* --- Darstellung: Dunkelmodus + Schriftgröße --- */ .appearance { display: flex; flex-direction: column; gap: 12px; background: var(--bg-subtle); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 12px; margin-top: 16px; } .appearance-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; } .appearance-info { display: flex; align-items: center; gap: 8px; color: var(--text-primary); } .appearance-icon { font-size: 16px; color: var(--text-muted); display: inline-flex; } .appearance-label { font-size: 13px; font-weight: 500; } /* Einstellungs-Toggles: Einfacher, schneller Button für Tag/Nachtwechsel */ .theme-toggle-btn { width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: none; background: transparent; border-radius: 50%; cursor: pointer; color: var(--text-primary); font-size: 20px; transition: background .15s ease, color .15s ease, transform .15s ease; } .theme-toggle-btn:hover { background: var(--bg-hover); color: var(--accent); } .theme-toggle-btn:active { transform: scale(0.90); } .theme-toggle-btn .icon-moon { display: none; } .theme-toggle-btn.is-active .icon-sun { display: none; } .theme-toggle-btn.is-active .icon-moon { display: block; } /* Schriftgröße: − A + als kompakte Gruppe, gleiche Höhe wie der Theme-Schalter. */ .font-size-control { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; height: 38px; border: 1px solid var(--border-subtle); background: var(--bg-subtle); border-radius: 999px; padding: 3px; /* Gleicher Schatten wie der Theme-Switch – einheitliches, ruhiges Bild. */ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); } .font-btn { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: none; background: transparent; border-radius: 50%; cursor: pointer; color: var(--text-muted); font-size: 13px; font-family: inherit; transition: background .12s ease, color .12s ease; } .font-btn:hover:not(:disabled) { background: var(--bg-hover); color: var(--accent); } .font-btn:disabled { opacity: 0.35; cursor: not-allowed; color: var(--text-muted) !important; background: transparent !important; } .font-btn i { line-height: 1; } .font-size-label { min-width: 26px; text-align: center; cursor: pointer; user-select: none; font-weight: 700; font-size: 14px; color: var(--text-primary); } .font-size-label:hover { color: var(--accent); } /* --- Profilseite: Identitäts-Kopf (Avatar + Name + Bild-Editor-Öffner) --- */ .identity-head { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--border-subtle); } .identity-avatar { width: 88px; height: 88px; border-radius: 50%; flex-shrink: 0; overflow: hidden; position: relative; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 30px; font-weight: 700; box-shadow: 0 4px 14px var(--shadow); } .identity-avatar-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; } .identity-avatar-img[hidden] { display: none; } .identity-avatar-fallback[hidden] { display: none; } .identity-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .identity-name { font-size: 18px; font-weight: 700; color: var(--text-primary); margin: 0; } .identity-role { font-size: 13px; color: var(--text-muted); margin: 0 0 4px; } .identity-meta .btn { align-self: flex-start; } /* --- Modal (natives ) --- */ .modal { border: none; padding: 0; margin: auto; width: min(500px, calc(100vw - 32px)); border-radius: 16px; background: var(--bg-surface); color: var(--text-primary); box-shadow: 0 24px 64px var(--shadow); overflow: hidden; } .modal--lg { width: min(840px, calc(100vw - 48px)); } .modal::backdrop { background: rgba(15, 18, 28, .55); backdrop-filter: blur(2px); } .modal[open] { animation: modal-pop .16s ease-out; } @keyframes modal-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .modal-card { display: flex; flex-direction: column; } .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 28px; border-bottom: 1px solid var(--border-subtle); } .modal-title { font-size: 19px; font-weight: 700; margin: 0; } .modal-close { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: none; background: transparent; border-radius: 50%; cursor: pointer; color: var(--text-muted); font-size: 18px; transition: background .12s ease, color .12s ease; } .modal-close:hover { background: var(--bg-hover); color: var(--text-primary); } .modal-body { padding: 28px; } .modal-foot { display: flex; justify-content: flex-end; gap: 12px; padding: 20px 28px; border-top: 1px solid var(--border-subtle); background: var(--bg-subtle); } /* --- Bild-Zuschnitt-Widget (Personenfoto & Avatar) --- */ .crop-widget { display: flex; flex-direction: column; gap: 10px; } /* Editor-Layout im Modal: Vorschau zentriert über den Werkzeugen. */ .crop-editor { display: flex; flex-direction: column; align-items: center; gap: 18px; } .crop-tools { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; } /* Runder Vorschau-Rahmen: zeigt den Bildausschnitt wie er gespeichert wird. */ .crop-frame { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; position: relative; flex-shrink: 0; cursor: grab; background: var(--bg-subtle); border: 2px solid var(--border-subtle); display: grid; place-items: center; } /* Große Variante im Modal für komfortables Ausrichten. */ .crop-frame--lg { width: 200px; height: 200px; } .crop-frame:active { cursor: grabbing; } .crop-image { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: none; user-select: none; -webkit-user-drag: none; } .crop-placeholder { color: var(--text-muted); font-size: 28px; } /* Datei-Auswahl als gestylter Button (versteckt den nativen File-Input). */ .upload-btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 9px 16px; border-radius: var(--radius-field); border: 1px solid var(--border-subtle); background: var(--bg-subtle); color: var(--text-primary); font-size: 14px; font-weight: 600; transition: background .12s ease, border-color .12s ease; } .upload-btn:hover { background: var(--bg-hover); border-color: var(--accent); } .upload-btn input[type="file"] { display: none; } /* Zoom-Regler unter der Vorschau. */ .crop-controls { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 260px; } .crop-controls i { color: var(--text-muted); font-size: 13px; } .crop-zoom { flex: 1; accent-color: var(--accent); } .crop-hint { font-size: 12px; color: var(--text-muted); text-align: center; } /* --- Headings --- */ .page-head { display: flex; justify-content: flex-end; align-items: flex-start; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; } .page-head h1, .page-head .subtitle, .page-head div:has(h1) { display: none !important; } .page-head:not(:has(.btn)) { display: none !important; } h1 { font-size: 24px; font-weight: 600; margin: 0; } .subtitle { color: var(--text-muted); font-size: 14px; margin-top: 4px; } /* --- Cards --- */ .card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); padding: 20px; margin-bottom: var(--gap); } .card h2 { font-size: 16px; margin: 0 0 12px; } .grid { display: grid; gap: var(--gap); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-2 { grid-template-columns: repeat(2, 1fr); } /* Einklappbare Karte (
): kompakter Kopf, der den Inhalt aufdeckt. */ .collapse-card { padding: 0; overflow: hidden; } .collapse-summary { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; cursor: pointer; list-style: none; font-size: 16px; font-weight: 600; color: var(--text-primary); } .collapse-summary::-webkit-details-marker { display: none; } .collapse-summary span { display: inline-flex; align-items: center; gap: 8px; } .collapse-summary i:first-child { color: var(--accent); } .collapse-summary:hover { background: var(--bg-hover); } /* Pfeil dreht sich beim Aufklappen. */ .collapse-chevron { transition: transform .15s ease; color: var(--text-muted); } .collapse-card[open] .collapse-chevron { transform: rotate(180deg); } .collapse-body { padding: 12px 20px 20px; } .stat { text-align: center; } .stat-value { font-size: 28px; font-weight: 700; } .stat-label { color: var(--text-muted); font-size: 13px; } /* --- Buttons --- */ .btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 9px 16px; border-radius: 12px; border: 1px solid transparent; font-size: 14px; font-weight: 600; font-family: inherit; } .btn-primary { background: var(--accent); color: var(--accent-contrast); } .btn-primary:hover { filter: brightness(.95); text-decoration: none; } .btn-secondary { background: var(--bg-surface); border-color: var(--border-subtle); color: var(--text-primary); } .btn-secondary:hover { background: var(--bg-hover); text-decoration: none; } .btn-danger { background: var(--danger-bg); color: var(--danger-text); border-color: var(--danger-border); } .btn-sm { padding: 5px 10px; font-size: 12px; border-radius: 8px; } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Deaktivierter Button (z. B. während ein Export läuft). */ .btn:disabled { opacity: .6; cursor: progress; } /* Rotierendes Icon für Lade-Zustände. */ .spin { animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* --- Forms --- */ .field { margin-bottom: 16px; } .field label { display: block; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; } .field input, .field select, .field textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--border-subtle); border-radius: var(--radius-field); font-family: inherit; font-size: 14px; background: var(--bg-surface); color: var(--text-primary); } .field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 8px; } /* --- Neue-Person: Platzierungs-Auswahl (neuer Strang vs. anhängen) --- */ .placement-choice { border: none; padding: 0; margin: 0 0 16px; } .placement-choice legend { font-size: 13px; font-weight: 600; color: var(--text-muted); padding: 0; margin-bottom: 10px; } .radio-card { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; margin-bottom: 8px; border: 1px solid var(--border-subtle); border-radius: 12px; cursor: pointer; transition: border-color .15s, background .15s; } .radio-card:hover { border-color: var(--accent); } .radio-card input[type="radio"] { margin-top: 3px; accent-color: var(--accent); } /* Highlight the card whose radio is selected. */ .radio-card:has(input:checked) { border-color: var(--accent); background: var(--bg-active); } .radio-card span { display: flex; flex-direction: column; gap: 2px; } .radio-card strong { font-size: 14px; } .radio-card small { color: var(--text-muted); font-size: 12px; } .attach-target { padding: 14px; margin-bottom: 16px; background: var(--bg-subtle); border: 1px solid var(--border-subtle); border-radius: 12px; } .attach-target[hidden] { display: none; } /* --- Tables --- */ table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); } th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); } tbody tr:hover { background: var(--bg-hover); } /* --- Badges & alerts --- */ .badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; } .badge-living { background: var(--success-bg); color: var(--success-text); } .badge-deceased { background: var(--bg-hover); color: var(--text-muted); } .badge-accent { background: var(--accent-soft); color: var(--accent); } .alert { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; font-size: 14px; } .alert-error { background: var(--danger-bg); color: var(--danger-text); border: 1px solid var(--danger-border); } .alert-success { background: var(--success-bg); color: var(--success-text); border: 1px solid var(--success-border); } /* --- Auth pages --- */ .auth-wrap { position: relative; min-height: var(--vh); display: grid; place-items: center; padding: 24px; overflow: hidden; } /* Dezente, vielfach gekachelte Baum-Icons als Hintergrund-Verzierung. */ .auth-wrap::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='%23cbd5e1'%3E%3Cpath d='M34 22c8 0 14 6 14 14 0 6-4 11-9 13v9h-10v-9c-5-2-9-7-9-13 0-8 6-14 14-14z'/%3E%3Cpath d='M150 38c10 0 18 8 18 18 0 8-5 14-12 17v11h-12v-11c-7-3-12-9-12-17 0-10 8-18 18-18z'/%3E%3Cpath d='M88 96c7 0 12 5 12 12 0 5-3 9-8 11v8h-8v-8c-5-2-8-6-8-11 0-7 5-12 12-12z'/%3E%3Cpath d='M168 132c8 0 14 6 14 14 0 6-4 11-9 13v9h-10v-9c-5-2-9-7-9-13 0-8 6-14 14-14z'/%3E%3Cpath d='M40 150c9 0 16 7 16 16 0 7-4 13-11 15v10h-10v-10c-7-2-11-8-11-15 0-9 7-16 16-16z'/%3E%3C/g%3E%3C/svg%3E"); background-size: 200px 200px; opacity: .35; } .auth-card { position: relative; z-index: 1; width: 100%; max-width: 420px; } /* Etwas breitere Karte für die Registrierung (zweispaltige Felder). */ .auth-card--register { max-width: 560px; } /* Dezenter Hinweis am Fuß der Login-Karte (private Familienseite). */ .auth-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-subtle); font-size: 12.5px; line-height: 1.5; color: var(--text-muted); } .auth-note i { margin-top: 2px; color: var(--accent); flex-shrink: 0; } /* Registrierung: zentriertes Formular, Hinweise gestapelt darunter. */ .auth-stack { display: flex; flex-direction: column; gap: var(--gap); } .auth-main { margin-bottom: 0; } /* Kompaktere Felder, damit alles ohne Scrollen auf eine Seite passt. */ .auth-main .field { margin-bottom: 12px; } .auth-main .field-row { gap: 12px; } .auth-main h2 { margin-bottom: 14px; } /* Hinweis-Karte: gleiche weiße Fläche, mit Akzent-Leiste; Liste zweispaltig für eine kompakte, ansehnliche Höhe. */ .auth-aside { margin-bottom: 0; border-left: 3px solid var(--accent); font-size: 13px; line-height: 1.5; color: var(--text-muted); } .auth-aside-title { margin: 0 0 12px; font-weight: 700; color: var(--text-primary); } .auth-aside-title i { color: var(--accent); margin-right: 6px; } .auth-aside ul { margin: 0; padding-left: 18px; columns: 2; column-gap: 28px; } .auth-aside li { margin-bottom: 8px; break-inside: avoid; } .auth-aside li:last-child { margin-bottom: 0; } /* Passwortfeld mit eingebettetem Auge-Button (anzeigen/verbergen). */ .pw-field { position: relative; } .pw-field input { padding-right: 40px; } .pw-toggle { position: absolute; top: 0; right: 0; height: 100%; width: 38px; display: grid; place-items: center; border: none; background: transparent; cursor: pointer; color: var(--text-muted); font-size: 15px; padding: 0; } .pw-toggle:hover { color: var(--accent); } /* Auf schmalen Bildschirmen: Hinweis-Liste einspaltig. */ @media (max-width: 640px) { .auth-aside ul { columns: 1; } } /* --- Stammbaum: echte Top-Down-Baumstruktur mit Verbindungslinien --- */ /* Füllt als Flex-Spalte die restliche Höhe; Viewport darin wächst automatisch. */ .tree-card { position: relative; overflow: hidden; padding: 0; display: flex; flex-direction: column; flex: 1; min-height: 0; margin-bottom: 0; } /* Werkzeugleiste über dem Baum */ .tree-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 12px; } .tree-tool-group { display: flex; align-items: center; gap: 6px; } .tree-search-group { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 8px; } .tree-search { max-width: 360px; padding: 2px 14px; } .tree-search .search-input { padding: 8px 0; font-size: 14px; } .tree-search-nav { display: flex; align-items: center; gap: 4px; } /* hidden-Attribut hat Vorrang: ohne (mehrere) Treffer wird die Navigation ausgeblendet. */ .tree-search-nav[hidden] { display: none; } .tree-search-count { font-size: 13px; white-space: nowrap; min-width: 56px; text-align: center; color: var(--text-muted); font-variant-numeric: tabular-nums; } .tree-zoom-label { min-width: 56px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; font-size: 14px; } .tree-hint { position: relative; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; cursor: help; border: 1px solid var(--border-subtle); background: var(--bg-surface); color: var(--text-muted); font-size: 15px; flex-shrink: 0; } /* Icon-Glyph optisch zentrieren (Flaticon bringt eigene Metriken/Zeilenhöhe mit). */ .tree-hint > i { display: block; line-height: 1; } .tree-hint > i::before { display: block; line-height: 1; } .tree-hint:hover, .tree-hint:focus-visible { color: var(--accent); border-color: var(--accent); outline: none; } /* Sprechblase mit den Bedien-Tipps, erscheint bei Hover/Fokus. */ .tree-hint-bubble { position: absolute; top: calc(100% + 8px); right: 0; z-index: 20; width: max-content; max-width: 280px; padding: 10px 12px; background: var(--focus-bg); color: #fff; border-radius: 10px; font-size: 12px; line-height: 1.5; box-shadow: 0 4px 14px rgba(15, 23, 42, .25); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s ease, transform .15s ease, visibility .15s ease; } .tree-hint-bubble i { font-size: 12px; } .tree-hint:hover .tree-hint-bubble, .tree-hint:focus-visible .tree-hint-bubble { opacity: 1; visibility: visible; transform: translateY(0); } /* --- Wiederverwendbares Info-Icon: Hinweis hinter Symbol + Hover/Fokus --- */ .info-hint { position: relative; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; cursor: help; border: 1px solid var(--border-subtle); background: var(--bg-surface); color: var(--text-muted); font-size: 11px; vertical-align: middle; margin-left: 8px; flex-shrink: 0; } /* Icon-Glyph optisch zentrieren (Flaticon bringt eigene Metriken/Zeilenhöhe mit). */ .info-hint > i { display: block; line-height: 1; } .info-hint > i::before { display: block; line-height: 1; } .info-hint:hover, .info-hint:focus-visible { color: var(--accent); border-color: var(--accent); outline: none; } .info-bubble { position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; width: max-content; max-width: 280px; padding: 10px 12px; background: var(--focus-bg); color: #fff; border-radius: 10px; font-size: 12px; line-height: 1.5; font-weight: 400; box-shadow: 0 4px 14px rgba(15, 23, 42, .25); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s ease, transform .15s ease, visibility .15s ease; } .info-hint:hover .info-bubble, .info-hint:focus-visible .info-bubble { opacity: 1; visibility: visible; transform: translateY(0); } /* Bedienbarer Ausschnitt: passt sich der Fensterhöhe an, in beide Richtungen scrollbar. */ .tree-viewport { /* Füllt automatisch die restliche Höhe der Karte (Flex) – ohne Leerraum. */ flex: 1; min-height: 0; overflow: auto; /* Dunklere Arbeitsfläche (App-Hintergrund) + Punkteraster: dadurch heben sich die helleren Knoten-Kacheln deutlich ab – besonders im Darkmode. */ background-color: var(--bg-app); background-image: radial-gradient(circle, var(--grid-dot) 1px, transparent 1px); background-size: 22px 22px; border-radius: var(--radius-card); cursor: grab; } .tree-viewport.is-dragging { cursor: grabbing; } .tree-viewport.is-dragging a { pointer-events: none; } /* Bühne, die gezoomt wird. */ .tree-stage { transform-origin: top center; transition: transform .08s ease-out; display: inline-block; min-width: 100%; padding: 24px; } .tree-topdown { display: inline-block; min-width: 100%; position: relative; } /* SVG-Overlay: zeichnet die Verbindungslinien aus den echten Knoten- Positionen (siehe tree.js). Liegt hinter den Karten, fängt keine Klicks ab und skaliert mit der gezoomten Bühne mit. Ersetzt die früheren, fragilen CSS-Pseudoelement-Linien (die je nach Zeilenhöhe Lücken zeigten). */ .tree-links { position: absolute; top: 0; left: 0; pointer-events: none; overflow: visible; } .tree-links path { fill: none; stroke: var(--border-strong); stroke-width: 2; } /* Jede Ebene ist eine waagerechte Reihe von Knoten. Das Padding schafft den senkrechten Raum, in den das SVG-Overlay die Linien zeichnet. */ .tree-topdown ul { display: flex; justify-content: center; list-style: none; padding-top: 32px; margin: 0; position: relative; } .tree-topdown > ul { padding-top: 0; } .tree-topdown li { list-style: none; position: relative; text-align: center; padding: 32px 10px 0; } /* Zugeklappter Ast: Kinder ausblenden. */ .tree-topdown li.collapsed > ul { display: none; } /* Knoten-Kachel im Baum. */ .tnode { position: relative; /* Über dem SVG-Linien-Overlay liegen, damit Karten die Linien verdecken. */ z-index: 1; display: inline-flex; flex-direction: column; gap: 2px; align-items: center; background: var(--bg-surface); border: 1px solid var(--border-strong); /* Farbiger oberer Akzent je Generation – macht Ebenen sofort erkennbar. */ border-top: 3px solid var(--lvl, var(--accent)); border-radius: 12px; padding: 8px 14px; white-space: nowrap; box-shadow: 0 1px 3px var(--shadow); transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease; } /* Hover: Kachel leicht anheben und Akzent verstärken (klare Interaktivität). */ .tnode:hover { border-color: var(--lvl, var(--accent)); box-shadow: 0 0 0 2px var(--accent-soft), 0 4px 10px var(--shadow); transform: translateY(-1px); } /* Hauptlinien-Highlighting entfernt – alle Personen werden gleich dargestellt. */ .tnode.is-deceased .tnode-name { color: var(--text-muted); } /* Suchtreffer hervorheben. */ .tnode.is-match { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(109, 94, 247, .35); } .tnode.is-first-match { background: var(--bg-active); } /* Name in heller Vordergrundfarbe statt Akzent-Lila (bessere Lesbarkeit). */ .tnode-name { font-weight: 600; font-size: 14px; color: var(--text-primary); } .tnode-name:hover { color: var(--accent); } .tnode-dates { font-size: 12px; color: var(--text-muted); } /* Generations-Badge als farbige Pille je Ebene (wie im Ahnenblatt). */ .tnode-gen { font-size: 10px; text-transform: uppercase; font-weight: 700; color: var(--accent-contrast); background: var(--lvl, var(--accent)); border-radius: 999px; padding: 1px 8px; letter-spacing: .3px; } .tnode-spouse { font-size: 12px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 4px; } .tnode-spouse i { color: var(--lineage-border); font-size: 12px; } /* Klapp-Schalter unten an der Kachel. */ .tnode-toggle { position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); width: 24px; height: 24px; border-radius: 50%; cursor: pointer; /* Rahmen in Hintergrundfarbe „schneidet“ die Verbindungslinie sauber (Hell/Dunkel). */ background: var(--accent); color: #fff; border: 2px solid var(--bg-app); display: grid; place-items: center; font-size: 12px; padding: 0; box-shadow: 0 1px 3px var(--shadow); z-index: 2; } .tnode-toggle:hover { filter: brightness(.95); } .tnode-toggle i { line-height: 1; } /* Zugeklappt: Pfeil nach unten + Anzahl der verborgenen Kinder. */ .collapsed > .tnode > .tnode-toggle i { transform: rotate(180deg); } .collapsed > .tnode > .tnode-toggle::after { content: attr(data-count); position: absolute; top: -8px; right: -8px; background: var(--badge); color: #fff; font-size: 10px; font-weight: 700; border-radius: 999px; padding: 0 5px; min-width: 16px; line-height: 16px; } /* --- Map --- */ /* Karte füllt die restliche Höhe (Flex); die Leaflet-Fläche zieht 100% mit. */ .map-card { flex: 1; min-height: 0; margin-bottom: 0; } #map { height: 100%; min-height: 0; border-radius: var(--radius-card); border: 1px solid var(--border-subtle); } /* --- Explorer (Ahnenblatt): two-column data sheet --- */ .explorer-layout { display: grid; grid-template-columns: minmax(0, 1fr) 8px minmax(0, 1fr); /* Eine Zeile, die GENAU die verfügbare Höhe füllt (minmax(0,1fr) erlaubt das Schrumpfen unter die Inhaltshöhe) – erst dadurch werden die Panels darunter zu echten Scroll-Containern statt endlos zu wachsen. */ grid-template-rows: minmax(0, 1fr); gap: 0; align-items: stretch; /* Füllt die restliche Höhe unter dem Seitenkopf; Panels scrollen intern. */ flex: 1; min-height: 0; } /* Tree panel is its own scroll container. Its top padding is removed so the sticky toolbar can sit flush at the very top with NO content peeking above or below it. The list and empty state carry their own inner padding instead. */ .expl-tree-panel { min-height: 0; overflow: auto; margin: 0 var(--gap) 0 0; padding: 0; } .expl-sheet-panel { min-height: 0; overflow: auto; margin: 0 0 0 var(--gap); } /* Kopfzeile der Baumansicht mit Auf-/Zuklappen-Buttons. */ .expl-tree-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .expl-tree-tools { display: flex; gap: 6px; } .btn-sm { padding: 5px 10px; font-size: 13px; } /* Werkzeugleiste (Titel + Klapp-Buttons + Suche) klebt beim Scrollen oben. Negative Ränder ziehen sie über die Card-Polsterung, damit kein Inhalt oberhalb durchscrollt und der Hintergrund bis an die Kanten reicht. */ /* Toolbar (title + collapse buttons + search) sticks to the top while the tree scrolls beneath it. It sits at top:0 with full inner padding and no negative margins, so the panel's rounded corners clip it cleanly and nothing scrolls through above it. */ .expl-tree-toolbar { position: sticky; top: 0; z-index: 5; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 16px 20px 12px; background: var(--bg-surface); border-bottom: 1px solid var(--border-subtle); } /* Suchleiste im Ahnenblatt: volle Breite unter dem Titel. */ .expl-search-bar { display: flex; align-items: center; gap: 8px; } .expl-search { flex: 1; min-width: 160px; max-width: none; padding: 2px 14px; } .expl-search .search-input { padding: 8px 0; font-size: 14px; } /* Schieberegler zwischen Baumansicht und Datenblatt. */ .expl-resizer { align-self: stretch; width: 8px; cursor: col-resize; border-radius: 999px; background: var(--border-subtle); transition: background .15s ease; position: sticky; top: var(--gap); } .expl-resizer:hover, .expl-resizer:focus-visible { background: var(--accent); outline: none; } /* Zeile mit Klapp-Schalter + Knoten. */ .expl-row { display: flex; align-items: center; gap: 4px; } .expl-toggle { flex-shrink: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; border-radius: 4px; cursor: pointer; color: var(--text-muted); padding: 0; font-size: 14px; transition: transform .15s ease, background .12s ease, color .12s ease; } .expl-toggle i { display: flex; align-items: center; justify-content: center; line-height: 1; } .expl-toggle:hover { background: var(--bg-hover); color: var(--text-primary); } .expl-toggle-spacer { flex-shrink: 0; width: 24px; height: 24px; } /* Eingeklappter Ast: Kinder ausblenden, Pfeil drehen. */ .expl-item.collapsed > .expl-children { display: none; } .expl-item.collapsed > .expl-row .expl-toggle { transform: rotate(-90deg); } /* Nested tree with dashed level guides (kept from the PoC). */ /* The list carries the panel's inner padding (the panel itself has none so the sticky toolbar can sit flush at the top). */ .expl-tree { list-style: none; margin: 0; padding: 12px 20px 20px; } .expl-children { list-style: none; margin: 6px 0; padding: 0; } /* Empty state ("no persons yet") needs the same inner padding as the list. */ .expl-tree-panel > .muted { padding: 16px 20px; } .expl-children { padding-left: 26px; border-left: 1px dashed var(--border-strong); margin-left: 8px; } .expl-item { position: relative; margin: 6px 0; } .expl-node { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-left: 3px solid var(--lvl, var(--accent)); border-radius: 999px; padding: 6px 14px 6px 10px; transition: background .12s ease, box-shadow .12s ease, border-color .12s ease; } .expl-node:hover { background: var(--bg-hover); } .expl-node:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Suchtreffer hervorheben (darkmode-fähig über Tokens). */ .expl-node.is-match { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); } /* Aktiver Treffer bzw. von außen angesprungene Person: deutlich abgesetzt. */ .expl-node.is-current { background: var(--bg-active); border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft), 0 0 0 4px rgba(109, 94, 247, .18); } /* Kurzer Aufmerksamkeits-Puls beim Springen von einer anderen Seite. */ .expl-node.is-jump { animation: expl-pulse 1.4s ease-out 2; } @keyframes expl-pulse { 0%, 100% { box-shadow: 0 0 0 2px var(--accent-soft); } 50% { box-shadow: 0 0 0 4px var(--accent), 0 0 0 8px var(--accent-soft); } } .expl-level { flex-shrink: 0; font-size: 11px; font-weight: 700; color: #fff; background: var(--lvl, var(--accent)); border-radius: 999px; padding: 2px 8px; } .expl-text { font-size: 13px; } .expl-dates { color: var(--text-muted); font-size: 12px; } .expl-spouse { color: var(--text-muted); font-size: 12px; } /* Per-level accent colours (cycled), mirroring the PoC palette. */ .lvl-0 { --lvl: #0b7a75; } .lvl-1 { --lvl: #a16207; } .lvl-2 { --lvl: #7c3aed; } .lvl-3 { --lvl: #15803d; } .lvl-4 { --lvl: #c2410c; } .lvl-5 { --lvl: #2563eb; } .lvl-6 { --lvl: #be185d; } /* Detail sheet cards on the right. */ .sheet-title { font-size: 16px; margin: 4px 0 16px; } .sheet-card { border: 1px solid var(--border-subtle); border-radius: 12px; padding: 16px; margin-bottom: 16px; background: var(--bg-subtle); } .sheet-card-head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 12px; } .sheet-pid { font-variant-numeric: tabular-nums; } .sheet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .sheet-field { display: flex; flex-direction: column; gap: 4px; } .sheet-field-wide { grid-column: 1 / -1; } .sheet-field label { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); } .sheet-value { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-field); padding: 9px 11px; font-size: 14px; min-height: 38px; } .sheet-actions { margin-top: 12px; } /* --- Ahnenblatt: ausklappbare Bearbeitung & Beziehungen --- */ .edit-block { border: 1px solid var(--border-subtle); border-radius: 12px; margin-bottom: 16px; background: var(--bg-surface); overflow: hidden; } .edit-block > summary { cursor: pointer; padding: 12px 16px; font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; list-style: none; background: var(--bg-subtle); user-select: none; } .edit-block > summary::-webkit-details-marker { display: none; } .edit-block > summary:hover { background: var(--bg-hover); } .edit-block > summary i { color: var(--accent); } .edit-block[open] > summary { border-bottom: 1px solid var(--border-subtle); } .edit-form { padding: 16px; } /* Beziehungslisten im Datenblatt */ .rel-title { margin: 10px 0 4px; font-weight: 600; font-size: 13px; } .rel-empty { margin: 0 0 6px; } .rel-list { list-style: none; margin: 0 0 8px; padding: 0; } .rel-list li { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 14px; } .rel-list li i { color: var(--text-muted); font-size: 13px; } .sheet-delete { margin-top: 8px; } /* --- Ahnenblatt-Datenblatt: prominent & einfach --- */ /* Abstammungslinie (Wurzel -> Person) als klickbarer Breadcrumb-Pfad. */ .lineage-path { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border-subtle); } .lineage-crumb { font-size: 12px; display: inline-flex; align-items: center; color: var(--text-muted); text-decoration: none; white-space: nowrap; transition: color .15s ease; } a.lineage-crumb:hover { color: var(--accent); text-decoration: underline; } .lineage-crumb.is-current { color: var(--accent-contrast); background: var(--accent); font-weight: 600; padding: 3px 8px; border-radius: 6px; } .lineage-sep { color: var(--text-muted); font-size: 11px; line-height: 1; margin: 0 2px; opacity: 0.7; } .crumb-years { font-size: 10px; opacity: 0.75; margin-left: 4px; font-weight: 400; } .lineage-crumb.is-current .crumb-years { opacity: 0.9; } /* Kopf mit Profilfoto + Name. */ .sheet-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; } .person-photo-container { position: relative; display: inline-block; flex-shrink: 0; } .person-photo { width: 64px; height: 64px; flex-shrink: 0; border-radius: 50%; overflow: hidden; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: 28px; border: 2px solid var(--border-subtle); } .person-photo.is-clickable { cursor: zoom-in; transition: filter .12s ease, border-color .12s ease; } .person-photo.is-clickable:hover { filter: brightness(.95); border-color: var(--accent); } .person-photo img { width: 100%; height: 100%; object-fit: cover; } .avatar-edit-badge { position: absolute; bottom: -2px; right: -2px; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--accent-contrast, #ffffff); border: 2px solid var(--bg-surface); display: grid; place-items: center; font-size: 11px; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); transition: transform 0.16s cubic-bezier(0.16, 1, 0.3, 1), filter 0.16s ease; z-index: 5; padding: 0; } .avatar-edit-badge:hover { transform: scale(1.12); filter: brightness(1.08); } .avatar-edit-badge i { display: flex; align-items: center; justify-content: center; } .sheet-head .sheet-title { margin: 0; } /* Ehepartner ganz oben, deutlich hervorgehoben. */ .spouse-banner { background: var(--lineage-bg); border: 1px solid var(--lineage-border); border-radius: 12px; padding: 14px 16px; margin-bottom: 18px; } .spouse-banner-label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: 10px; } .spouse-banner-label i { color: var(--lineage-border); } .spouse-chips { display: flex; flex-wrap: wrap; gap: 10px; } /* Große, gut anklickbare Karte je Ehepartner. */ .spouse-chip { display: inline-flex; align-items: center; gap: 10px; background: var(--bg-surface); border: 1px solid var(--lineage-border); border-radius: 10px; padding: 10px 14px; text-decoration: none; color: var(--text-primary); font-weight: 600; cursor: pointer; } .spouse-chip:hover { box-shadow: 0 2px 8px var(--shadow); } .spouse-chip i { font-size: 20px; color: var(--lineage-border); } .spouse-chip small { color: var(--text-muted); font-weight: 500; } .spouse-hint { margin: 10px 0 0; font-size: 12px; } /* Eckdaten als klare Definitionsliste. */ .fact-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin: 0 0 18px; } .fact { display: flex; flex-direction: column; gap: 2px; } .fact-wide { grid-column: 1 / -1; } .fact dt { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); } .fact dd { margin: 0; font-size: 15px; } /* Eltern & Kinder kompakt nebeneinander. */ .family-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 20px; } .family-mini h4 { margin: 0 0 6px; font-size: 13px; color: var(--text-muted); } .mini-link { display: block; padding: 4px 0; font-size: 14px; color: var(--accent); text-decoration: none; } .mini-link:hover { text-decoration: underline; } /* Große, eindeutige Aktions-Buttons (ausklappbar). */ .action-list { display: flex; flex-direction: column; gap: 10px; } .action { border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--bg-surface); overflow: hidden; } .action > summary { cursor: pointer; padding: 14px 16px; font-weight: 600; font-size: 15px; display: flex; align-items: center; justify-content: space-between; list-style: none; user-select: none; } .action > summary::-webkit-details-marker { display: none; } .action > summary:hover { background: var(--bg-hover); } .action-label { display: inline-flex; align-items: center; gap: 8px; } .action-label i { color: var(--accent); font-size: 16px; } .action .chev { color: var(--text-muted); transition: transform .15s ease; } .action[open] .chev { transform: rotate(180deg); } .action[open] > summary { border-bottom: 1px solid var(--border-subtle); } .action-form { padding: 16px; } /* Löschen klar abgesetzt am Ende. */ .action-delete { margin-top: 4px; } .action-delete-btn { width: 100%; justify-content: center; } /* Modern Action Buttons instead of Collapsibles */ .action-section { margin-bottom: 24px; } .action-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); letter-spacing: .08em; margin: 0 0 10px 4px; } .action-grid { display: flex; flex-direction: column; gap: 10px; } .action-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 16px 20px; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 14px; cursor: pointer; text-align: left; color: var(--text-primary); font-family: inherit; transition: all .2s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02); position: relative; overflow: hidden; } .action-btn::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); opacity: 0; transition: opacity .2s ease; } .action-btn:hover { background: var(--bg-hover); border-color: var(--accent); box-shadow: 0 6px 16px var(--shadow); } .action-btn:hover::after { opacity: 1; } .action-btn:active { transform: scale(0.995); } .action-btn-content { display: flex; align-items: center; gap: 16px; } .action-btn-icon { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 10px; background: var(--bg-subtle); color: var(--accent); font-size: 20px; flex-shrink: 0; transition: all .2s ease; } .action-btn:hover .action-btn-icon { background: var(--accent); color: var(--accent-contrast, #ffffff); } .action-btn-text { display: flex; flex-direction: column; gap: 3px; } .action-btn-title { font-size: 15px; font-weight: 600; color: var(--text-primary); } .action-btn-desc { font-size: 12px; font-weight: 400; color: var(--text-muted); line-height: 1.4; } .action-btn .fi-rr-angle-small-right { font-size: 20px; color: var(--text-muted); transition: all .2s ease; } .action-btn:hover .fi-rr-angle-small-right { color: var(--text-primary); transform: translateX(4px); } /* --- Rendered markdown docs (changelog / readme) --- */ .doc-content { line-height: 1.7; } .doc-content h1, .doc-content h2, .doc-content h3 { margin-top: 1.4em; } .doc-content h1 { font-size: 22px; } .doc-content h2 { font-size: 18px; border-bottom: 1px solid var(--border-subtle); padding-bottom: 6px; } .doc-content h3 { font-size: 15px; } .doc-content code { background: var(--bg-subtle); padding: 2px 6px; border-radius: 6px; font-size: 13px; } .doc-content pre { background: #0b1220; color: #e2e8f0; padding: 14px 16px; border-radius: 10px; overflow-x: auto; } .doc-content pre code { background: transparent; padding: 0; color: inherit; } .doc-content ul { padding-left: 22px; } .doc-content table { margin: 12px 0; } @media (max-width: 1024px) { /* Volle Höhe auf Mobilgeräten nutzen für Vollbildansichten */ .app-shell { height: var(--vh) !important; overflow: hidden !important; display: flex !important; flex-direction: row !important; } .main { flex: 1 !important; min-height: 0 !important; overflow-y: auto; display: flex !important; flex-direction: column !important; } /* Nur bei Vollbild-Ansichten das Scrollen der Hauptseite verhindern */ .main:has(.main-inner--fill) { overflow: hidden !important; } .main-inner--fill { flex: 1 !important; min-height: 0 !important; height: 100% !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; padding: 12px !important; } .explorer-layout { grid-template-columns: 1fr !important; grid-template-rows: 1fr !important; flex: 1 !important; min-height: 0 !important; height: 100% !important; } .expl-resizer { display: none; } .expl-tree-panel { margin: 0 !important; height: 100% !important; min-height: 0 !important; overflow-y: auto !important; display: flex !important; flex-direction: column !important; } .expl-sheet-panel { margin: 0 !important; height: 100% !important; min-height: 0 !important; overflow-y: auto !important; } .sheet-grid { grid-template-columns: 1fr; } .fact-list { grid-template-columns: 1fr; } .family-mini { grid-template-columns: 1fr; } } /* --- Search results --- */ .search-results { list-style: none; padding: 0; margin: 8px 0 0; } .search-results li a { display: block; padding: 8px 12px; border-radius: 8px; color: var(--text-primary); } .search-results li a:hover { background: #f1f5f9; text-decoration: none; } /* --- Dashboard quick search box (full width, pill-shaped) --- */ .search-box { display: flex; align-items: center; gap: 10px; width: 100%; background: var(--bg-subtle); border: 1px solid var(--border-subtle); border-radius: 999px; padding: 4px 18px; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; } .search-box:focus-within { background: var(--bg-surface); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .search-box .search-icon { font-size: 20px; color: var(--text-muted); flex-shrink: 0; } .search-input { flex: 1; width: 100%; border: none; outline: none; background: transparent; font-family: inherit; font-size: 16px; color: var(--text-primary); padding: 12px 0; } .search-input::placeholder { color: var(--text-muted); } .muted { color: var(--text-muted); } .right { text-align: right; } .mt { margin-top: var(--gap); } /* --- Mobile-Kopfleiste & Drawer (standardmäßig versteckt) --- */ .mobile-topbar { display: none; } .sidebar-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 1990; border: none; } /* --- Responsive --- */ @media (max-width: 1024px) { .grid-3 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } } .sidebar-close-btn { display: none; } @media (max-width: 768px) { .field-row { grid-template-columns: 1fr; } /* Kopfleiste oben mit Hamburger-Schalter einblenden. */ .mobile-topbar { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-subtle); box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03); padding: 10px 16px; height: 60px; } :root[data-theme="dark"] .mobile-topbar { background: rgba(22, 31, 51, 0.88); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18); } .mobile-menu-btn { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border: none; background: transparent; border-radius: 50%; cursor: pointer; font-size: 20px; color: var(--text-primary); transition: background 0.12s ease, color 0.12s ease, transform 0.12s ease; } .mobile-menu-btn:hover { background: var(--bg-hover); color: var(--accent); } .mobile-menu-btn:active { transform: scale(0.9); } .mobile-brand { display: flex; align-items: center; gap: 10px; text-decoration: none !important; color: inherit !important; } .mobile-brand:hover { text-decoration: none !important; } .mobile-brand:hover .brand-name { color: var(--accent); } .mobile-brand .brand-logo { width: 34px; height: 34px; font-size: 17px; } /* App-Shell stapelt sich; die Seitenleiste wird zum ausfahrbaren Drawer. */ .app-shell { flex-direction: column !important; } .sidebar { position: fixed; top: 0; left: 0; height: calc(var(--vh) / var(--font-scale, 1)); width: 100%; max-width: none; z-index: 2000; transform: translateX(-100%); transition: transform .25s ease; box-shadow: none; padding-bottom: calc(var(--gap) + env(safe-area-inset-bottom, 0px)); } .sidebar-close-btn { display: grid; place-items: center; position: absolute; top: 18px; right: 18px; width: 36px; height: 36px; border: 1px solid var(--border-subtle); background: var(--bg-surface); color: var(--text-primary); border-radius: 50%; cursor: pointer; font-size: 16px; z-index: 10; transition: background 0.15s ease, color 0.15s ease; padding: 0; } .sidebar-close-btn:hover { background: var(--bg-hover); color: var(--accent); } body.nav-open .sidebar { transform: translateX(0); } .main-inner { padding: 16px; } /* Größere Touch-Ziele in der Navigation. */ .nav-item { padding: 13px 14px; font-size: 16px; } } /* === Bildergalerie (Personen) ============================================== */ .gallery { margin: 22px 0 28px; } .gallery-title { display: flex; align-items: center; gap: 8px; font-size: 15px; margin: 0 0 12px; color: var(--text-primary); } .gallery-title i { color: var(--accent); } .gallery-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); } .gallery-item { margin: 0; position: relative; } .gallery-thumb { display: block; width: 100%; aspect-ratio: 1; padding: 0; cursor: zoom-in; border: 1px solid var(--border-subtle); border-radius: 10px; overflow: hidden; background: var(--bg-subtle); position: relative; transition: border-color .16s ease, box-shadow .16s ease; } .gallery-thumb:hover { border-color: var(--accent); box-shadow: 0 4px 12px var(--shadow); } .gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .gallery-badge { position: absolute; top: 6px; left: 6px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--accent-contrast); font-size: 12px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); z-index: 5; } .gallery-item figcaption { display: none; } .gallery-action-form { position: absolute; top: 6px; opacity: 0; transition: opacity .12s ease; z-index: 10; } .gallery-action-form--primary { left: 6px; } .gallery-action-form--delete { right: 6px; } .gallery-item:hover .gallery-action-form, .gallery-action-form:focus-within { opacity: 1; } .gallery-action { width: 26px; height: 26px; display: grid; place-items: center; cursor: pointer; border: none; border-radius: 50%; font-size: 12px; background: rgba(15, 23, 42, .75); color: #fff; transition: background-color .12s ease, transform .12s ease; } .gallery-action:hover { background: var(--accent); transform: scale(1.1); } .gallery-action--danger:hover { background: #dc2626; } /* === Lightbox (große Bildansicht) ========================================== */ body.lightbox-open { overflow: hidden; } .lightbox { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 24px; background: rgba(8, 12, 20, .92); } .lightbox[hidden] { display: none; } .lightbox-stage { margin: 0; display: flex; flex-direction: column; align-items: center; max-width: min(92vw, 1100px); max-height: 90vh; } .lightbox-image { max-width: 100%; max-height: 80vh; object-fit: contain; border-radius: 8px; box-shadow: 0 24px 64px rgba(0, 0, 0, .6); } .lightbox-caption { color: #e5e7eb; margin-top: 12px; font-size: 14px; text-align: center; } .lightbox-counter { color: #94a3b8; margin-top: 4px; font-size: 12px; } .lightbox-close { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; } .lightbox-nav, .lightbox-close { flex-shrink: 0; display: grid; place-items: center; cursor: pointer; border: none; border-radius: 50%; font-size: 20px; color: #fff; background: rgba(255, 255, 255, .12); transition: background .12s ease; } .lightbox-nav { width: 48px; height: 48px; } .lightbox-nav:hover, .lightbox-close:hover { background: rgba(255, 255, 255, .28); } @media (max-width: 768px) { .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); } .lightbox { padding: 12px; } .lightbox-nav { width: 40px; height: 40px; font-size: 17px; } } /* === Mobile & Tablet Responsive Optimizations === */ /* --- Explorer Mobile Tabs --- */ .explorer-tabs { display: none; } @media (max-width: 1024px) { .explorer-tabs { display: flex; gap: 2px; margin-bottom: 16px; background: var(--bg-subtle); padding: 3px; border-radius: 9px; border: 1px solid var(--border-subtle); } .explorer-tab-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 12px; border: none !important; background: transparent !important; border-radius: 6px; font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer; box-shadow: none !important; transition: background 0.15s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1); } .explorer-tab-btn:hover { color: var(--text-primary); } .explorer-tab-btn.active { background: var(--bg-surface) !important; color: var(--accent) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04) !important; } .explorer-tab-btn i { font-size: 13px; } /* Hide the panel that is not active on mobile/tablet */ .explorer-layout:not(.tab-sheet) .expl-sheet-panel { display: none !important; } .explorer-layout.tab-sheet .expl-tree-panel { display: none !important; } } @media (max-width: 768px) { /* Hide button text on mobile to fit icons */ .btn-text { display: none !important; } /* Compact tree/explorer toolbars */ .tree-toolbar { gap: 8px !important; } .tree-tool-group { gap: 4px !important; } .tree-search-group { min-width: 100% !important; margin-bottom: 4px; } .tree-search { max-width: none !important; } .tree-zoom-label { min-width: 44px !important; font-size: 13px; } .expl-tree-toolbar { padding: 12px 14px 10px !important; } .expl-search-bar { gap: 6px !important; } .expl-search { padding: 2px 12px !important; } .expl-search .search-input { padding: 6px 0 !important; font-size: 13px !important; } .tree-search-nav { gap: 2px !important; } .tree-search-count { min-width: 48px !important; font-size: 12px !important; } /* Reduce explorer tree indentation */ .expl-children { padding-left: 14px !important; margin-left: 4px !important; } /* Compact explorer nodes */ .expl-node { padding: 4px 10px 4px 8px !important; gap: 6px !important; } .expl-level { padding: 1px 6px !important; font-size: 10px !important; } .expl-text { font-size: 12px !important; } .expl-dates, .expl-spouse { font-size: 11px !important; } /* Spacing in the main area */ .main-inner { padding: 12px !important; } } /* Spinner Rotation Animation for File Compression Loader */ @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .spin { display: inline-block; animation: spin 1s linear infinite; }