/* @theme-name: Warm */ /* @theme-description: Serif-Überschriften, warme Erdtöne, runde Ecken, weiche Schatten. */ /* ============================================================ Theme "Warm" - einladend, gemeindlich Serif-Ueberschriften, warme Erdtoene, grosse Radien, weiche Schatten statt Rahmen. Uebernommen aus dem Schwesterprojekt Konfirmanden-Portal. Wird nur geladen, wenn in den Systemeinstellungen ausgewaehlt (siehe App\Service\ThemeService), und zwar NACH app.css. Es ist immer nur genau eine Theme-Datei aktiv, daher bewusst ohne zusaetzliches Scoping - die Selektoren bleiben so schwach wie moeglich. Ein Prefix wie html[data-theme=...] wuerde nur die Spezifitaet anheben, ohne etwas zu gewinnen. Schriften: bewusst OHNE externes CDN (Datenschutz). Ist die jeweilige Schrift auf dem Geraet vorhanden, wird sie benutzt, sonst greift der System-Fallback. Zum Nachruesten eigene woff2-Dateien unter public/assets/fonts/ ablegen und hier @font-face-Regeln ergaenzen. ============================================================ */ :root { --bs-body-font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; --bs-body-font-size: 1rem; --bs-body-bg: #faf6f0; --bs-body-color: #332c26; --bs-emphasis-color: #1e1916; --bs-secondary-color: rgba(51, 44, 38, 0.6); --bs-tertiary-bg: #f3ece2; /* Die bg-*-Utilities (u.a. .bg-body-tertiary am ) lesen die -rgb-Variante, nicht die Hex-Variable - ohne diese Zeilen bliebe der Seitenhintergrund grau. */ --bs-body-bg-rgb: 250, 246, 240; --bs-body-color-rgb: 51, 44, 38; --bs-tertiary-bg-rgb: 243, 236, 226; --bs-secondary-bg-rgb: 247, 241, 232; --bs-light-rgb: 243, 236, 226; --bs-border-color: #e8dccd; --bs-border-radius: 0.875rem; --bs-border-radius-sm: 0.5rem; --bs-border-radius-lg: 1.125rem; --bs-primary: #a8543a; --bs-primary-rgb: 168, 84, 58; --bs-link-color: #8f4530; --bs-link-color-rgb: 143, 69, 48; --bs-link-hover-color: #6d3322; --bs-focus-ring-color: rgba(168, 84, 58, 0.22); --bs-heading-color: #241d18; } /* Serif nur fuer Ueberschriften - das ist der eigentliche Charakter-Traeger */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .card-title, .navbar-brand { font-family: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif; font-weight: 600; letter-spacing: -0.012em; } h1, .h1 { font-size: 2rem; } /* Karten: randlos, plastisch durch Schatten */ .card { --bs-card-bg: #fffdfa; --bs-card-border-width: 0; --bs-card-border-color: transparent; --bs-card-spacer-y: 1.35rem; --bs-card-spacer-x: 1.35rem; box-shadow: 0 1px 2px rgba(74, 52, 38, 0.05), 0 12px 28px -14px rgba(74, 52, 38, 0.2); transition: transform 0.18s ease, box-shadow 0.18s ease; } a.card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(74, 52, 38, 0.06), 0 18px 36px -14px rgba(74, 52, 38, 0.28); } /* Buttons: etwas luftiger, mittleres Gewicht */ .btn { --bs-btn-font-weight: 500; --bs-btn-padding-y: 0.5rem; --bs-btn-padding-x: 1.05rem; --bs-btn-border-radius: 0.6rem; } .btn-sm { --bs-btn-border-radius: 0.5rem; } .btn-primary { --bs-btn-bg: #a8543a; --bs-btn-border-color: #a8543a; --bs-btn-hover-bg: #8f4530; --bs-btn-hover-border-color: #8f4530; --bs-btn-active-bg: #77381f; --bs-btn-active-border-color: #77381f; --bs-btn-disabled-bg: #a8543a; --bs-btn-disabled-border-color: #a8543a; } .btn-outline-secondary { --bs-btn-color: #6b5a4c; --bs-btn-border-color: #dccfbe; --bs-btn-hover-bg: #f0e7da; --bs-btn-hover-border-color: #cdbca6; --bs-btn-hover-color: #3c322a; } /* Navbar */ .navbar.bg-dark { background-color: #362c25 !important; } .navbar.bg-white { background-color: #fffdfa !important; border-bottom-color: #ece0d0 !important; } /* Formulare */ .form-control, .form-select { --bs-border-radius: 0.6rem; background-color: #fffdfa; border-color: #e0d2c0; } .form-control:focus, .form-select:focus { border-color: #c68268; box-shadow: 0 0 0 0.2rem rgba(168, 84, 58, 0.16); } .form-label { font-weight: 500; margin-bottom: 0.35rem; } .form-check-input:checked { background-color: #a8543a; border-color: #a8543a; } /* Tabellen: Kopfzeile als ruhige Flaeche, feine Trennlinien */ .table { --bs-table-bg: transparent; --bs-table-striped-bg: rgba(168, 84, 58, 0.035); --bs-table-border-color: #ebe0d2; --bs-table-hover-bg: rgba(168, 84, 58, 0.055); } .table > thead th { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(51, 44, 38, 0.55); border-bottom-width: 1px; } /* Listen */ .list-group { --bs-list-group-bg: #fffdfa; --bs-list-group-border-color: #ece0d0; --bs-list-group-border-radius: 0.875rem; --bs-list-group-action-hover-bg: #f7efe5; box-shadow: 0 1px 2px rgba(74, 52, 38, 0.05), 0 12px 28px -16px rgba(74, 52, 38, 0.18); } /* Badges */ .badge { font-weight: 500; letter-spacing: 0.01em; padding: 0.42em 0.75em; } .text-bg-primary { background-color: #a8543a !important; } .text-bg-secondary { background-color: #8a7866 !important; } /* Alerts: ohne Rahmen, getoente Flaeche */ .alert { border: 0; border-radius: 0.75rem; } .alert-success { --bs-alert-bg: #e6efe2; --bs-alert-color: #35502c; } .alert-danger { --bs-alert-bg: #f7e3dd; --bs-alert-color: #7d2f1c; }