/** * Batcounter - Stylesheet * ======================= * * Fledermaus-Winterzählung im Fränkischen Karst, Bayern. * * Minimalistisches, mobile-first CSS für die Offline-fähige * Zählungs-Anwendung. Optimiert für Nutzung auf Smartphones * in dunklen Höhlen und Kellern. */ /* ============================================================================= CSS-Variablen (Farbschema und Abstände) ============================================================================= */ :root { /* Primärfarben (Höhlen-Blau, passend zum Headerbild) */ --farbe-primaer: #1c2c50; --farbe-primaer-hell: #32456f; --farbe-primaer-dunkel: #14203b; /* Sekundärfarben (Mittelblau) */ --farbe-sekundaer: #4b5f8c; --farbe-sekundaer-hell: #667aa6; /* Akzentfarben */ --farbe-akzent: #95a6c9; --farbe-erfolg: #2e7d52; --farbe-warnung: #d4a030; --farbe-fehler: #c0392b; --farbe-info: #596b96; /* Neutrale Farben */ --farbe-hintergrund: #eef1f7; --farbe-karte: #ffffff; --farbe-text: #1a2540; --farbe-text-hell: #4b5f8c; --farbe-grenze: #ccd6eb; --farbe-schatten: rgba(20, 32, 59, 0.12); /* Abstände */ --abstand-xs: 0.25rem; --abstand-sm: 0.5rem; --abstand-md: 1rem; --abstand-lg: 1.5rem; --abstand-xl: 2rem; /* Schriftgrößen */ --schrift-xs: 0.75rem; --schrift-sm: 0.875rem; --schrift-md: 1rem; --schrift-lg: 1.25rem; --schrift-xl: 1.5rem; --schrift-xxl: 2rem; /* Rundungen */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-rund: 50%; /* Übergänge */ --uebergang: 0.2s ease; /* Header-Höhe */ --header-hoehe: 120px; /* Header-Hintergrundbild (Fallback: Winter-1) */ --header-bg-image: url('../img/header-bg-winter-1.png'); --header-bg-repeat: no-repeat; --header-bg-size: cover; --header-bg-position: center top; --header-bg-farbe: #c7d1e5; --notch-farbe: #667e99; /* Navigation-Höhe */ --nav-hoehe: 60px; } /* Zufällige Header-Bild-Varianten (per data-header Attribut, JS setzt 1-4) */ [data-header="2"] { --header-bg-image: url('../img/header-bg-winter-2.png'); } [data-header="3"] { --header-bg-image: url('../img/header-bg-winter-3.png'); } [data-header="4"] { --header-bg-image: url('../img/header-bg-winter-4.png'); } [data-season="summer"] { --header-bg-image: url('../img/header-bg-summer-1.png'); } [data-season="summer"][data-header="2"] { --header-bg-image: url('../img/header-bg-summer-2.png'); } [data-season="summer"][data-header="3"] { --header-bg-image: url('../img/header-bg-summer-3.png'); } [data-season="summer"][data-header="4"] { --header-bg-image: url('../img/header-bg-summer-4.png'); } /* Saisonales Farbschema: Sommer (Höhlen-Grau, 01.04. - 30.09.) */ [data-season="summer"] { --header-bg-repeat: no-repeat; --header-bg-size: cover; --header-bg-position: center top; --header-bg-farbe: #2a2a2e; --notch-farbe: #2d211b; /* Primärfarben (Höhlen-Grau) */ --farbe-primaer: #2c2c2c; --farbe-primaer-hell: #4a4a4a; --farbe-primaer-dunkel: #1a1a1a; /* Sekundärfarben (Mittelgrau) */ --farbe-sekundaer: #5a5a5a; --farbe-sekundaer-hell: #787878; /* Akzentfarben */ --farbe-akzent: #8a8a8a; --farbe-info: #6a6a6a; /* Neutrale Farben */ --farbe-hintergrund: #f0f0f0; --farbe-karte: #ffffff; --farbe-text: #1a1a1a; --farbe-text-hell: #5a5a5a; --farbe-grenze: #d0d0d0; --farbe-schatten: rgba(0, 0, 0, 0.12); } /* Dunkler Modus Winter (Höhlen-Blau, reduzierte Helligkeit) Wird per data-theme="dark" auf gesteuert. */ [data-theme="dark"] { --header-bg-farbe: #c7d1e5; --notch-farbe: #111827; /* Blautöne aufgehellt für Lesbarkeit auf dunklen Karten */ --farbe-primaer: #6b8bc4; --farbe-primaer-hell: #8aa5d6; --farbe-primaer-dunkel: #5474a8; /* Sekundärfarben */ --farbe-sekundaer: #7b93bf; --farbe-sekundaer-hell: #96acd4; /* Akzentfarben */ --farbe-akzent: #a3b5d6; --farbe-erfolg: #4ece6a; --farbe-warnung: #ffda6a; --farbe-fehler: #ea6d7a; --farbe-info: #7b9fd4; --farbe-hintergrund: #111827; --farbe-karte: #1e293b; --farbe-text: #e0e6f0; --farbe-text-hell: #94a3bf; --farbe-grenze: #334155; --farbe-schatten: rgba(0, 0, 0, 0.35); } /* Dunkler Modus Sommer (Höhlen-Grau, reduzierte Helligkeit) */ [data-season="summer"][data-theme="dark"] { --header-bg-farbe: #2a2a2e; --notch-farbe: #1a1510; /* Grautöne aufgehellt für Lesbarkeit */ --farbe-primaer: #a0a0a0; --farbe-primaer-hell: #b8b8b8; --farbe-primaer-dunkel: #888888; /* Sekundärfarben */ --farbe-sekundaer: #909090; --farbe-sekundaer-hell: #aaaaaa; /* Akzentfarben */ --farbe-akzent: #b0b0b0; --farbe-erfolg: #4ece6a; --farbe-warnung: #ffda6a; --farbe-fehler: #ea6d7a; --farbe-info: #9a9a9a; --farbe-hintergrund: #181818; --farbe-karte: #252525; --farbe-text: #e8e8e8; --farbe-text-hell: #a0a0a0; --farbe-grenze: #3a3a3a; --farbe-schatten: rgba(0, 0, 0, 0.4); } /* Meldungen im Dark Mode anpassen */ [data-theme="dark"] .meldung.erfolg { background-color: #1a3a1f; color: #8edd9b; border: 1px solid #2a5a32; } [data-theme="dark"] .meldung.warnung { background-color: #3a3418; color: #ffe08a; border: 1px solid #5a4e22; } [data-theme="dark"] .meldung.fehler { background-color: #3a1a1e; color: #f0929c; border: 1px solid #5a2a30; } [data-theme="dark"] .meldung.info { background-color: #172033; color: #8ab4e0; border: 1px solid #243a52; } /* Eingabefeld-Fokus-Schatten anpassen */ [data-theme="dark"] .form-group input:focus, [data-theme="dark"] .form-group select:focus, [data-theme="dark"] .form-group textarea:focus { box-shadow: 0 0 0 3px rgba(107, 139, 196, 0.3); } /* Attribut-Chip Hover-Hintergrund anpassen */ [data-theme="dark"] .attribut-chip:hover { background: rgba(107, 139, 196, 0.15); } /* Nav-Tabs: Inaktive Buttons im Dark Mode mit blaustichigem Grau */ [data-theme="dark"] .main-nav button { color: #7b8ba0; } [data-theme="dark"] .main-nav button:hover, [data-theme="dark"] .main-nav button:focus { color: var(--farbe-primaer-hell); } /* Header im Dark Mode anpassen */ [data-theme="dark"] .app-header { background-color: #111827; } /* FHKF-Logo im Dark Mode invertieren (schwarz → weiß) */ [data-theme="dark"] .fhkf-logo { filter: invert(1); } /* ============================================================================= Reset und Basis-Styles ============================================================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: var(--schrift-md); line-height: 1.5; color: var(--farbe-text); background-color: var(--farbe-hintergrund); min-height: 100vh; display: flex; flex-direction: column; } /* ============================================================================= Header ============================================================================= */ .app-header { position: fixed; top: 0; left: 0; right: 0; height: var(--header-hoehe); margin-top: env(safe-area-inset-top, 0px); background-color: var(--header-bg-farbe); background-image: var(--header-bg-image); background-repeat: var(--header-bg-repeat); background-size: var(--header-bg-size); background-position: var(--header-bg-position); color: white; display: flex; align-items: flex-end; justify-content: space-between; padding: 0 var(--abstand-md) var(--abstand-sm); z-index: 100; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35); } /* Notch-Bereich: Solide Farbe passend zur oberen Bildkante */ .app-header::before { content: ''; position: absolute; top: calc(-1 * env(safe-area-inset-top, 0px)); left: 0; right: 0; height: env(safe-area-inset-top, 0px); background-color: var(--notch-farbe); z-index: 1; } /* Eiszapfen-Dekor am unteren Rand des Headers */ .app-header::after { content: none; } /* Rechter Bereich im Header: Dark Mode Toggle + Sync-Status */ .header-rechts { display: flex; align-items: center; gap: var(--abstand-sm); } .header-content { display: flex; align-items: center; gap: var(--abstand-sm); } .header-bat { flex-shrink: 0; width: 34px; height: 34px; display: block; object-fit: contain; border-radius: 8px; overflow: hidden; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3)); } .header-content h1 { font-size: var(--schrift-lg); font-weight: 600; margin: 0; } .header-content .subtitle { font-size: var(--schrift-sm); opacity: 0.8; display: none; } @media (min-width: 480px) { .header-content .subtitle { display: inline; } } /* Sync-Status Anzeige */ .sync-status { font-size: var(--schrift-sm); padding: var(--abstand-xs) var(--abstand-sm); border-radius: var(--radius-sm); background-color: rgba(255, 255, 255, 0.2); cursor: pointer; transition: background-color var(--uebergang); } .sync-status:hover { background-color: rgba(255, 255, 255, 0.3); } .sync-status.offline { background-color: var(--farbe-warnung); color: #333; } .sync-status.syncing { animation: pulsieren 1s infinite; } /* Dark Mode Toggle-Button im Header */ .dark-mode-toggle { background: none; border: none; font-size: 1.3rem; cursor: pointer; padding: var(--abstand-xs); border-radius: var(--radius-sm); line-height: 1; transition: transform var(--uebergang); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); } .dark-mode-toggle:hover { transform: scale(1.15); } .dark-mode-toggle:active { transform: scale(0.95); } @keyframes pulsieren { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } /* ============================================================================= Hauptnavigation (Tab-Navigation für Mobile) ============================================================================= */ .main-nav { position: fixed; bottom: 0; left: 0; right: 0; height: var(--nav-hoehe); background-color: var(--farbe-karte); display: flex; justify-content: space-around; align-items: center; border-top: 1px solid var(--farbe-grenze); z-index: 100; box-shadow: 0 -2px 4px var(--farbe-schatten); } .main-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--abstand-xs) var(--abstand-sm); border: none; background: transparent; color: var(--farbe-text-hell); font-size: var(--schrift-sm); font-weight: 600; cursor: pointer; transition: color var(--uebergang); flex: 1; height: 100%; } .main-nav button:hover, .main-nav button:focus { color: var(--farbe-primaer); } .main-nav button.active { color: var(--farbe-primaer); font-weight: 600; } .main-nav button.active::after { content: ''; display: block; width: 30px; height: 3px; background-color: var(--farbe-primaer); border-radius: 2px; margin-top: var(--abstand-xs); } /* ============================================================================= Hauptinhalt ============================================================================= */ .app-content { flex: 1; margin-top: calc(var(--header-hoehe) + env(safe-area-inset-top, 0px)); margin-bottom: var(--nav-hoehe); padding: var(--abstand-md); overflow-y: auto; -webkit-overflow-scrolling: touch; } /* Seiten-Container */ .page { max-width: 600px; margin: 0 auto; } .page h2 { font-size: var(--schrift-xl); margin-bottom: var(--abstand-lg); color: var(--farbe-primaer-dunkel); } /* Seiten-Header mit Zurück-Button */ .seiten-header { display: flex; align-items: center; gap: var(--abstand-sm); margin-bottom: var(--abstand-lg); } .seiten-header h2 { margin-bottom: 0; } .btn-zurueck { background: none; border: none; font-size: 1.5rem; cursor: pointer; padding: var(--abstand-xs) var(--abstand-sm); color: var(--farbe-primaer); border-radius: var(--radius-md); line-height: 1; } .btn-zurueck:hover { background: var(--farbe-hintergrund-hover, #f0f0f0); } /* ============================================================================= Formular-Elemente ============================================================================= */ .form-group { margin-bottom: var(--abstand-lg); } .form-group label { display: block; font-size: var(--schrift-sm); font-weight: 600; color: var(--farbe-text); margin-bottom: var(--abstand-xs); } .form-group input[type="text"], .form-group input[type="number"], .form-group input[type="email"], .form-group input[type="password"], .form-group select, .form-group textarea { width: 100%; padding: var(--abstand-sm) var(--abstand-md); font-size: var(--schrift-md); border: 2px solid var(--farbe-grenze); border-radius: var(--radius-md); background-color: var(--farbe-karte); color: var(--farbe-text); transition: border-color var(--uebergang), box-shadow var(--uebergang); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--farbe-primaer); box-shadow: 0 0 0 3px rgba(45, 80, 22, 0.2); } /* Pflichtfeld-Markierung bei Leerzählung */ .pflichtfeld { color: var(--farbe-warnung, #e67e22); font-size: var(--schrift-xs); font-weight: normal; } .input-pflicht { border-color: var(--farbe-warnung, #e67e22) !important; } .form-group small { display: block; font-size: var(--schrift-xs); color: var(--farbe-text-hell); margin-top: var(--abstand-xs); } /* Datei-Upload */ .form-group input[type="file"] { display: block; padding: var(--abstand-sm); } /* ============================================================================= Buttons ============================================================================= */ button, .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--abstand-sm); padding: var(--abstand-sm) var(--abstand-lg); font-size: var(--schrift-md); font-weight: 600; border: none; border-radius: var(--radius-md); cursor: pointer; transition: all var(--uebergang); text-decoration: none; } .btn-primary { background-color: var(--farbe-primaer); color: white; } .btn-primary:hover, .btn-primary:focus { background-color: var(--farbe-primaer-hell); } .btn-primary:disabled { background-color: var(--farbe-grenze); cursor: not-allowed; } .btn-secondary { background-color: transparent; color: var(--farbe-primaer); border: 2px solid var(--farbe-primaer); } .btn-secondary:hover, .btn-secondary:focus { background-color: var(--farbe-primaer); color: white; } .btn-gefahr { background-color: var(--farbe-fehler); color: white; } .btn-gefahr:hover, .btn-gefahr:focus { background-color: #c82333; } .form-actions { margin-top: var(--abstand-xl); } .form-actions button { width: 100%; padding: var(--abstand-md); font-size: var(--schrift-lg); } /* ============================================================================= Meldungen (Erfolg, Warnung, Fehler) ============================================================================= */ .meldung { padding: var(--abstand-md); border-radius: var(--radius-md); margin: var(--abstand-md) 0; font-weight: 500; } .meldung.erfolg { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; } .meldung.warnung { background-color: #fff3cd; color: #856404; border: 1px solid #ffeeba; } .meldung.fehler { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } .meldung.info { background-color: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; } /* ============================================================================= Listen ============================================================================= */ .objekt-liste, .zaehlung-liste { list-style: none; padding: 0; } .objekt-item, .zaehlung-item { background-color: var(--farbe-karte); padding: var(--abstand-md); border-radius: var(--radius-md); margin-bottom: var(--abstand-md); box-shadow: 0 2px 4px var(--farbe-schatten); transition: transform var(--uebergang); } .objekt-item:hover, .zaehlung-item:hover { transform: translateY(-2px); } .objekt-item strong, .zaehlung-item strong { color: var(--farbe-primaer-dunkel); } .objekt-typ, .objekt-ort { display: inline-block; font-size: var(--schrift-xs); color: var(--farbe-text-hell); background-color: var(--farbe-hintergrund); padding: var(--abstand-xs) var(--abstand-sm); border-radius: var(--radius-sm); margin-top: var(--abstand-xs); margin-right: var(--abstand-xs); } /* =================================================================== Erweiterte Objekt-Ansicht mit Raum-Verwaltung =================================================================== */ .objekt-item-erweitert { background-color: var(--farbe-karte); border-radius: var(--radius-md); margin-bottom: var(--abstand-md); box-shadow: 0 2px 4px var(--farbe-schatten); overflow: hidden; } .objekt-kopf { display: flex; justify-content: space-between; align-items: center; padding: var(--abstand-md); cursor: pointer; transition: background-color var(--uebergang); } .objekt-kopf:hover { background-color: rgba(45, 80, 22, 0.04); } .objekt-info { display: flex; flex-direction: column; gap: 2px; } .objekt-info strong { color: var(--farbe-primaer-dunkel); } .objekt-toggle { font-size: var(--schrift-lg); color: var(--farbe-text-hell); transition: transform 0.2s ease; flex-shrink: 0; } .objekt-toggle.offen { transform: rotate(90deg); } .objekt-kopf-aktionen { display: flex; align-items: center; gap: var(--abstand-xs); flex-shrink: 0; } .btn-objekt-edit { font-size: var(--schrift-base); padding: var(--abstand-xs); min-width: 36px; min-height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); opacity: 0.6; transition: opacity 0.2s; } .btn-objekt-edit:hover, .btn-objekt-edit:active { opacity: 1; background: rgba(45, 80, 22, 0.1); } .objekt-raeume { padding: 0 var(--abstand-md) var(--abstand-md); border-top: 1px solid var(--farbe-grenze); background: rgba(45, 80, 22, 0.02); } .objekt-raeume h4 { margin: var(--abstand-md) 0 var(--abstand-sm); font-size: var(--schrift-sm); color: var(--farbe-primaer-dunkel); } .raum-liste { list-style: none; padding: 0; margin: 0 0 var(--abstand-sm); } .raum-item { display: flex; align-items: center; gap: var(--abstand-sm); padding: var(--abstand-sm) var(--abstand-md); background: var(--farbe-karte); border-radius: var(--radius-sm); margin-bottom: 4px; font-size: var(--schrift-sm); } .raum-name { font-weight: 600; color: var(--farbe-text); } .raum-offline-badge { font-size: var(--schrift-xs); color: var(--farbe-warnung); background: rgba(255, 152, 0, 0.1); padding: 1px 6px; border-radius: 999px; } .raum-beschreibung { font-size: var(--schrift-xs); color: var(--farbe-text-hell); margin-left: auto; } .keine-raeume { font-size: var(--schrift-sm); color: var(--farbe-text-hell); font-style: italic; padding: var(--abstand-sm) 0; } .neuer-raum-formular { margin-top: var(--abstand-sm); } .neuer-raum-eingabe { display: flex; align-items: center; gap: var(--abstand-xs); } .neuer-raum-eingabe input[type="text"] { flex: 1; min-width: 0; font-size: var(--schrift-sm); padding: var(--abstand-sm) var(--abstand-md); } /* Zählungsliste-Spezifisch */ .zaehlung-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--abstand-xs); } .zaehlung-datum { font-size: var(--schrift-sm); color: var(--farbe-text-hell); } .zaehlung-status { font-size: var(--schrift-lg); } .zaehlung-details { font-size: var(--schrift-sm); color: var(--farbe-text-hell); margin-bottom: var(--abstand-sm); } .zaehlung-ergebnis { font-size: var(--schrift-md); } .zaehlung-item.nicht-sync { border-left: 4px solid var(--farbe-warnung); } /* ============================================================================= Einstellungen ============================================================================= */ .einstellungen-gruppe { background-color: var(--farbe-karte); padding: var(--abstand-lg); border-radius: var(--radius-md); margin-bottom: var(--abstand-lg); box-shadow: 0 2px 4px var(--farbe-schatten); } .einstellungen-gruppe h3 { font-size: var(--schrift-lg); margin-bottom: var(--abstand-md); color: var(--farbe-primaer-dunkel); padding-bottom: var(--abstand-sm); border-bottom: 1px solid var(--farbe-grenze); } .einstellungen-gruppe p { margin-bottom: var(--abstand-md); } .einstellungen-gruppe button { margin-right: var(--abstand-sm); margin-bottom: var(--abstand-sm); } .benutzer-info { display: flex; flex-direction: column; gap: var(--abstand-xs); } .login-form { max-width: 300px; } .warnung { color: var(--farbe-fehler); font-size: var(--schrift-sm); } /* ============================================================================= Artenauswahl (Einstellungen) ============================================================================= */ .artenauswahl-toolbar { display: flex; gap: var(--abstand-sm); align-items: center; margin-bottom: var(--abstand-md); flex-wrap: wrap; } .artenauswahl-suche { flex: 1; min-width: 150px; padding: var(--abstand-sm) var(--abstand-md); border: 1px solid var(--farbe-grenze); border-radius: var(--radius-sm); font-size: var(--schrift-base); } .artenauswahl-aktionen { display: flex; gap: var(--abstand-xs); } .btn-klein { padding: var(--abstand-xs) var(--abstand-sm); font-size: var(--schrift-sm); border: 1px solid var(--farbe-grenze); border-radius: var(--radius-sm); background: var(--farbe-hintergrund); cursor: pointer; } .btn-klein:hover { background: var(--farbe-grenze); } .artenauswahl-liste { max-height: 400px; overflow-y: auto; border: 1px solid var(--farbe-grenze); border-radius: var(--radius-sm); background: var(--farbe-hintergrund); } .artenauswahl-item { display: flex; align-items: center; gap: var(--abstand-sm); padding: var(--abstand-sm) var(--abstand-md); border-bottom: 1px solid var(--farbe-grenze); cursor: pointer; transition: background-color 0.15s; } .artenauswahl-item:last-child { border-bottom: none; } .artenauswahl-item:hover { background-color: rgba(var(--farbe-primaer-rgb, 46, 125, 50), 0.08); } .artenauswahl-item input[type="checkbox"] { flex-shrink: 0; width: 18px; height: 18px; accent-color: var(--farbe-primaer); } .artenauswahl-item .art-kuerzel { font-weight: bold; min-width: 2.5rem; color: var(--farbe-primaer-dunkel); font-size: var(--schrift-sm); } .artenauswahl-item .art-name { flex: 1; font-size: var(--schrift-base); } .artenauswahl-item .art-wiss { font-style: italic; color: var(--farbe-text-leicht); font-size: var(--schrift-sm); } .artenauswahl-item.ist-sammeltaxon { background-color: rgba(255, 152, 0, 0.08); } .artenauswahl-item.ist-sammeltaxon .art-name { font-style: italic; } /* ============================================================================= Hilfstexte ============================================================================= */ .hinweis { background-color: #e7f3ff; color: #0c5460; padding: var(--abstand-md); border-radius: var(--radius-md); margin-bottom: var(--abstand-lg); font-size: var(--schrift-sm); } .keine-daten { text-align: center; color: var(--farbe-text-hell); padding: var(--abstand-xl); font-style: italic; } /* ============================================================================= Verlauf-Filter ============================================================================= */ .verlauf-filter { margin-bottom: var(--abstand-lg); } .verlauf-filter select { width: 100%; padding: var(--abstand-sm) var(--abstand-md); font-size: var(--schrift-md); border: 2px solid var(--farbe-grenze); border-radius: var(--radius-md); background-color: var(--farbe-karte); } /* ============================================================================= Desktop-Anpassungen ============================================================================= */ @media (min-width: 768px) { :root { --header-hoehe: 100px; } .app-content { padding: var(--abstand-lg); } .page { max-width: 800px; } /* Navigation als Sidebar oder Tabs oben */ .main-nav { height: auto; position: static; border-top: none; box-shadow: none; background-color: transparent; justify-content: center; gap: var(--abstand-md); padding: var(--abstand-md); } .main-nav button { flex-direction: row; padding: var(--abstand-sm) var(--abstand-lg); font-size: var(--schrift-md); border-radius: var(--radius-md); flex: 0; } .main-nav button.active::after { display: none; } .main-nav button.active { background-color: var(--farbe-primaer); color: white; } .app-content { margin-bottom: 0; } } /* ============================================================================= Druckansicht ============================================================================= */ @media print { .app-header, .main-nav, .btn, button { display: none !important; } .app-content { margin: 0; padding: 0; } body { background-color: white; color: black; } } /* ============================================================================= Animationen ============================================================================= */ /* Einblenden */ @keyframes einblenden { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .page { animation: einblenden 0.3s ease; } /* Laden-Animation */ .laden { display: inline-block; width: 20px; height: 20px; border: 2px solid var(--farbe-grenze); border-top-color: var(--farbe-primaer); border-radius: 50%; animation: drehen 0.8s linear infinite; } @keyframes drehen { to { transform: rotate(360deg); } } /* ============================================================================= Barrierefreiheit ============================================================================= */ /* Fokus-Styles für Tastaturnavigation */ *:focus-visible { outline: 3px solid var(--farbe-primaer); outline-offset: 2px; } /* Reduzierte Bewegung für Nutzer mit Bewegungsempfindlichkeit */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* Hoher Kontrast */ @media (prefers-contrast: high) { :root { --farbe-grenze: #000000; } .form-group input, .form-group select, .form-group textarea { border-width: 3px; } } /* ============================================================================= Zusätzliche Komponenten für Phase 5 ============================================================================= */ /* Alpine.js Cloak (versteckt Elemente bis Alpine geladen ist) */ [x-cloak] { display: none !important; } /* Login-Seite */ .page-login { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - var(--header-hoehe) - 40px); padding: var(--abstand-lg); } .login-container { width: 100%; max-width: 400px; } .login-header { text-align: center; margin-bottom: var(--abstand-xl); } .login-icon { font-size: 64px; display: block; margin-bottom: var(--abstand-md); } .login-header h2 { margin-bottom: var(--abstand-sm); } .login-header p { color: var(--farbe-text-hell); font-size: var(--schrift-sm); } .login-hinweis { margin-top: var(--abstand-lg); padding: var(--abstand-md); background: rgba(255, 193, 7, 0.1); border: 1px solid var(--farbe-warnung); border-radius: var(--radius-md); text-align: center; font-size: var(--schrift-sm); } .btn-block { display: block; width: 100%; } /* Dashboard */ .page-dashboard { padding: var(--abstand-md); } /* Profil-Bereich auf dem Dashboard */ .profil-bereich { margin-bottom: var(--abstand-md); } .profil-details summary { cursor: pointer; color: var(--farbe-text-sekundaer); font-size: var(--schrift-sm); padding: var(--abstand-xs) 0; } .profil-details summary:hover { color: var(--farbe-primaer); } .profil-formular { padding: var(--abstand-md); background: var(--farbe-karte); border: 1px solid var(--farbe-grenze); border-radius: var(--radius-md); margin-top: var(--abstand-sm); } .profil-formular .btn-secondary { margin-top: var(--abstand-sm); } /* Vereinsausweis-Bereich */ .erlaubnis-status { margin-bottom: var(--abstand-md); } .erlaubnis-vorhanden { color: var(--farbe-erfolg); font-weight: 600; margin: 0 0 var(--abstand-sm) 0; } .erlaubnis-aktionen { display: flex; gap: var(--abstand-sm); flex-wrap: wrap; } .erlaubnis-upload { margin-top: var(--abstand-sm); } .erlaubnis-upload-btn { display: inline-block; cursor: pointer; } /* Floating Action Button für Vereinsausweis-Schnellanzeige */ .erlaubnis-fab { position: fixed; bottom: 80px; right: 20px; width: 56px; height: 56px; border-radius: 50%; background: var(--farbe-primaer); color: white; border: none; font-size: 24px; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); z-index: 100; display: flex; align-items: center; justify-content: center; transition: transform 0.2s, box-shadow 0.2s; } .erlaubnis-fab:hover { transform: scale(1.1); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4); } .erlaubnis-fab:active { transform: scale(0.95); } /* Vereinsausweis Overlay */ .erlaubnis-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.92); z-index: 1000; display: flex; flex-direction: column; /* iOS PWA: Touch-Events aktivieren */ -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .erlaubnis-overlay-header { display: flex; justify-content: space-between; align-items: center; padding: var(--abstand-sm) var(--abstand-md); /* iOS Safe-Area (Notch) berücksichtigen */ padding-top: max(var(--abstand-sm), env(safe-area-inset-top, 0px)); background: var(--farbe-karte); border-bottom: 2px solid var(--farbe-fehler); position: relative; z-index: 1010; flex-shrink: 0; } .erlaubnis-overlay-header h3 { margin: 0; color: var(--farbe-text); font-size: var(--schrift-base); } .erlaubnis-overlay-close { background: var(--farbe-fehler); border: none; font-size: 18px; font-weight: 700; color: white; cursor: pointer; padding: var(--abstand-sm) var(--abstand-lg); border-radius: var(--radius-sm); min-height: 48px; min-width: 120px; /* iOS: Touch-Target vergrößern */ -webkit-tap-highlight-color: rgba(255, 255, 255, 0.3); touch-action: manipulation; } .erlaubnis-overlay-close:active { background: #a00; transform: scale(0.95); } .erlaubnis-overlay-inhalt { flex: 1; display: flex; align-items: center; justify-content: center; overflow: auto; padding: var(--abstand-md); } .erlaubnis-pdf-fallback { text-align: center; color: white; padding: var(--abstand-xl); } .erlaubnis-pdf-icon { font-size: 4rem; margin-bottom: var(--abstand-md); } .erlaubnis-pdf-fallback p { margin-bottom: var(--abstand-md); font-size: var(--schrift-lg); } .erlaubnis-pdf-hint { font-size: var(--schrift-sm) !important; color: rgba(255, 255, 255, 0.5); margin-top: var(--abstand-lg) !important; } .erlaubnis-pdf-open-btn { display: inline-block; padding: var(--abstand-md) var(--abstand-xl); font-size: var(--schrift-lg); min-height: 48px; text-decoration: none; } .erlaubnis-bild { max-width: 100%; max-height: 100%; object-fit: contain; } /* Kleiner Lösch-Button */ .btn-danger.btn-small { padding: var(--abstand-xs) var(--abstand-sm); font-size: var(--schrift-sm); background: var(--farbe-fehler); color: white; border: none; border-radius: var(--radius-sm); cursor: pointer; } .btn-danger.btn-small:hover { opacity: 0.9; } .dashboard-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--abstand-sm); margin-bottom: var(--abstand-lg); } .stat-card { background: var(--farbe-karte); border: 1px solid var(--farbe-grenze); border-radius: var(--radius-md); padding: var(--abstand-md); text-align: center; } .stat-card.warning { border-color: var(--farbe-warnung); background: rgba(255, 193, 7, 0.1); } .stat-value { display: block; font-size: var(--schrift-xxl); font-weight: 700; color: var(--farbe-primaer); } .stat-label { display: block; font-size: var(--schrift-xs); color: var(--farbe-text-hell); margin-top: var(--abstand-xs); } .dashboard-actions { display: flex; flex-direction: column; gap: var(--abstand-sm); margin-bottom: var(--abstand-lg); } .btn-large { padding: var(--abstand-md) var(--abstand-lg); font-size: var(--schrift-lg); } .dashboard-recent h3 { margin-bottom: var(--abstand-md); font-size: var(--schrift-md); } .btn-text { background: none; border: none; color: var(--farbe-primaer); padding: var(--abstand-sm) 0; cursor: pointer; font-size: var(--schrift-sm); } .btn-text:hover { text-decoration: underline; } /* Keine Daten Anzeige */ .keine-daten { text-align: center; padding: var(--abstand-xl); color: var(--farbe-text-hell); } .keine-daten-icon { font-size: 64px; display: block; margin-bottom: var(--abstand-md); opacity: 0.5; } /* Formular-Sektionen */ .form-section { background: var(--farbe-karte); border: 1px solid var(--farbe-grenze); border-radius: var(--radius-md); padding: var(--abstand-md); margin-bottom: var(--abstand-md); } .form-section h3 { font-size: var(--schrift-md); margin-bottom: var(--abstand-md); padding-bottom: var(--abstand-sm); border-bottom: 1px solid var(--farbe-grenze); } .form-section.collapsible { padding: 0; } .form-section.collapsible summary { padding: var(--abstand-md); cursor: pointer; font-weight: 600; list-style: none; } .form-section.collapsible summary::-webkit-details-marker { display: none; } .form-section.collapsible summary::before { content: "▶ "; font-size: var(--schrift-sm); } .form-section.collapsible[open] summary::before { content: "▼ "; } .form-section-content { padding: 0 var(--abstand-md) var(--abstand-md); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--abstand-md); } /* Einträge-Liste */ .eintrag-eingabe { background: rgba(45, 80, 22, 0.05); padding: var(--abstand-md); border-radius: var(--radius-md); margin-bottom: var(--abstand-md); } .wert-gruppe { margin-bottom: var(--abstand-sm); } .wert-eingabe { display: flex; align-items: center; gap: var(--abstand-sm); } .wert-input { flex: 1; font-size: var(--schrift-lg); font-weight: 600; max-width: 160px; } .wert-einheit { font-size: var(--schrift-md); color: var(--farbe-text-hell); font-weight: 500; white-space: nowrap; } .wert-einheit-klein { font-size: var(--schrift-xs, 0.75rem); color: var(--farbe-text-hell); font-weight: 400; margin-left: 2px; } .wert-warnung { display: block; margin-top: var(--abstand-xs); padding: var(--abstand-xs) var(--abstand-sm); background: #fff3cd; color: #856404; border-radius: var(--radius-sm); font-size: var(--schrift-sm); line-height: 1.4; } @media (prefers-color-scheme: dark) { .wert-warnung { background: #3d3520; color: #ffc107; } } [data-theme="dark"] .wert-warnung { background: #3d3520; color: #ffc107; } .btn-add-eintrag { width: 100%; margin-top: var(--abstand-sm); } .eintraege-liste { margin-top: var(--abstand-md); } .eintraege-liste h4 { font-size: var(--schrift-sm); color: var(--farbe-text-hell); margin-bottom: var(--abstand-sm); } .eintraege-liste ul { list-style: none; } .eintrag-item { display: flex; align-items: center; gap: var(--abstand-sm); padding: var(--abstand-sm); background: var(--farbe-hintergrund); border-radius: var(--radius-sm); margin-bottom: var(--abstand-xs); flex-wrap: wrap; } .eintrag-item.eintrag-bearbeitung-aktiv { border: 2px solid var(--farbe-primaer); background: rgba(45, 80, 22, 0.03); } .eintrag-info { flex: 1; min-width: 0; } .eintrag-aktionen { display: flex; align-items: center; gap: var(--abstand-xs); } .btn-edit-eintrag { width: 28px; height: 28px; border-radius: var(--radius-sm); background: rgba(45, 80, 22, 0.1); border: none; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; padding: 0; } .btn-edit-eintrag:hover, .btn-edit-eintrag.aktiv { background: var(--farbe-primaer); filter: none; } /* Inline-Bearbeitungspanel für Einträge */ .eintrag-bearbeitung { width: 100%; padding-top: var(--abstand-sm); border-top: 1px solid var(--farbe-grenze); margin-top: var(--abstand-xs); } .eintrag-bearbeitung .form-group { margin-bottom: var(--abstand-xs); } .eintrag-bearbeitung .form-group label { font-size: var(--schrift-xs); font-weight: 600; margin-bottom: 2px; } .eintrag-bearbeitung textarea { font-size: var(--schrift-sm); } .btn-sm { padding: 4px 12px; font-size: var(--schrift-xs); } .eintrag-art { display: block; font-weight: 600; } .eintrag-wissenschaftlich { display: block; font-size: var(--schrift-xs); color: var(--farbe-text-hell); font-style: italic; } .eintrag-raum { display: block; font-size: var(--schrift-xs); color: var(--farbe-info); } .eintrag-unsicher { font-size: var(--schrift-xs); color: var(--farbe-warnung); } /* Attribut-Auswahl im Eingabeformular */ .attribut-auswahl { display: flex; flex-wrap: wrap; gap: var(--abstand-xs); margin-top: var(--abstand-xs); } .attribut-chip { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; border: 1.5px solid var(--farbe-grenze); background: var(--farbe-hintergrund); color: var(--farbe-text); font-size: var(--schrift-xs); cursor: pointer; transition: all 0.15s ease; user-select: none; -webkit-user-select: none; } .attribut-chip:hover { border-color: var(--farbe-primaer-hell); background: rgba(45, 80, 22, 0.05); } .attribut-chip.aktiv { background: var(--farbe-primaer); color: #fff; border-color: var(--farbe-primaer); } .attribut-chip.aktiv:hover { background: var(--farbe-primaer-hell); border-color: var(--farbe-primaer-hell); } /* =================================================================== Raum-Eingabe mit Autocomplete =================================================================== */ .raum-eingabe { display: flex; align-items: center; gap: var(--abstand-xs); } .raum-eingabe input[type="text"] { flex: 1; min-width: 0; } .btn-raum-neu { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: var(--schrift-lg); border: 2px solid var(--farbe-primaer); border-radius: var(--radius-md); background: var(--farbe-primaer); color: #fff; cursor: pointer; transition: all var(--uebergang); } .btn-raum-neu:hover, .btn-raum-neu:active { background: var(--farbe-primaer-dunkel); border-color: var(--farbe-primaer-dunkel); } .raum-hinweis { display: block; margin-top: 3px; font-size: var(--schrift-xs); line-height: 1.3; } .raum-hinweis.erfolg { color: var(--farbe-erfolg); } .raum-hinweis.neu { color: var(--farbe-info); font-style: italic; } /* Attribut-Tags an Einträgen (Erfassungsliste) */ .eintrag-attribute { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2px; } .attribut-tag { display: inline-block; padding: 1px 6px; border-radius: 999px; background: var(--farbe-akzent); color: var(--farbe-primaer-dunkel); font-size: 0.65rem; font-weight: 600; line-height: 1.4; white-space: nowrap; } /* Attribut-Tags in der Detailansicht */ .detail-eintrag-info { display: flex; flex-direction: column; gap: 2px; flex: 1; } .detail-eintrag-raum { font-size: var(--schrift-xs); color: var(--farbe-info); } .detail-eintrag-attribute { display: flex; flex-wrap: wrap; gap: 3px; } /* Bemerkungen pro Eintrag (Erfassungsliste + Detailansicht) */ .eintrag-bemerkungen { font-size: var(--schrift-xs); color: var(--farbe-text-leicht); font-style: italic; display: block; margin-top: 2px; } /* PDF-Download und andere Aktionen in der Detailansicht */ .detail-aktionen { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--farbe-rand); } .export-aktionen { display: flex; gap: var(--abstand-sm); flex-wrap: wrap; } .export-aktionen .btn-block { flex: 1; min-width: 180px; } .eintrag-anzahl { display: flex; align-items: center; gap: var(--abstand-xs); } .btn-mini { width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--farbe-grenze); border: none; cursor: pointer; font-size: var(--schrift-sm); } .btn-mini:hover { background: var(--farbe-text-hell); color: white; } .anzahl-display { min-width: 30px; text-align: center; font-weight: 600; } .btn-remove { width: 28px; height: 28px; border-radius: var(--radius-sm); background: rgba(220, 53, 69, 0.1); border: none; cursor: pointer; color: var(--farbe-fehler); } .btn-remove:hover { background: var(--farbe-fehler); color: white; } .keine-eintraege { text-align: center; padding: var(--abstand-lg); color: var(--farbe-text-hell); font-size: var(--schrift-sm); } /* Sticky Actions */ .sticky-actions { position: sticky; bottom: 0; background: var(--farbe-hintergrund); padding: var(--abstand-md); margin: 0 calc(-1 * var(--abstand-md)); border-top: 1px solid var(--farbe-grenze); display: flex; gap: var(--abstand-sm); } .sticky-actions .btn-save { flex: 2; } .sticky-actions .btn-primary { flex: 2; } .sticky-actions .btn-secondary { flex: 1; } /* Verlauf Filter */ .verlauf-filter { margin-bottom: var(--abstand-md); } .filter-dates { margin-top: var(--abstand-sm); display: flex; gap: var(--abstand-sm); } .filter-date-group { flex: 1; min-width: 0; } .filter-date-group label { display: block; font-size: var(--schrift-xs); color: var(--farbe-text-hell); margin-bottom: 2px; font-weight: 500; } .filter-dates input { width: 100%; padding: var(--abstand-sm); border: 2px solid var(--farbe-grenze); border-radius: var(--radius-md); background-color: var(--farbe-karte); font-size: 16px; color: var(--farbe-text); box-sizing: border-box; max-width: 100%; -webkit-appearance: none; appearance: none; } /* Zählungs-Detail */ .page-detail { padding: var(--abstand-md); } .btn-back { background: none; border: none; color: var(--farbe-primaer); padding: var(--abstand-sm) 0; cursor: pointer; margin-bottom: var(--abstand-md); } .detail-content h2 { margin-bottom: var(--abstand-md); } .detail-meta { background: var(--farbe-karte); border: 1px solid var(--farbe-grenze); border-radius: var(--radius-md); padding: var(--abstand-md); margin-bottom: var(--abstand-md); } .detail-meta p { margin-bottom: var(--abstand-xs); } .detail-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--abstand-sm); margin-bottom: var(--abstand-lg); } .status-synced { color: var(--farbe-erfolg); } .status-pending { color: var(--farbe-warnung); } .detail-eintraege { list-style: none; background: var(--farbe-karte); border: 1px solid var(--farbe-grenze); border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--abstand-lg); } .detail-eintraege li { display: flex; justify-content: space-between; padding: var(--abstand-sm) var(--abstand-md); border-bottom: 1px solid var(--farbe-grenze); } .detail-eintraege li:last-child { border-bottom: none; } .art-anzahl { font-weight: 600; color: var(--farbe-primaer); } .detail-bemerkungen { background: var(--farbe-karte); border: 1px solid var(--farbe-grenze); border-radius: var(--radius-md); padding: var(--abstand-md); margin-bottom: var(--abstand-lg); } /* Meldungen Container */ .meldungen-container { position: fixed; top: calc(var(--header-hoehe) + var(--abstand-sm)); left: 50%; transform: translateX(-50%); z-index: 1000; width: calc(100% - 2 * var(--abstand-md)); max-width: 400px; } .meldung { padding: var(--abstand-md); border-radius: var(--radius-md); text-align: center; font-weight: 500; box-shadow: 0 4px 12px var(--farbe-schatten); } /* Lade-Overlay */ .lade-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 2000; color: white; } .lade-spinner { font-size: 48px; animation: drehen 1s linear infinite; } /* Sync-Status clickable */ .sync-status .clickable { cursor: pointer; } .sync-status .clickable:hover { text-decoration: underline; } /* Zaehlung Status synced */ .zaehlung-status.synced { color: var(--farbe-erfolg); } /* Copyright */ .copyright { font-size: var(--schrift-xs); color: var(--farbe-text-hell); margin-top: var(--abstand-sm); } /* ============================================================================= Neues Objekt Seite ============================================================================= */ .page-neuer-objekt h2 { margin-bottom: var(--abstand-lg); } /* Input mit Button */ .input-with-button { display: flex; gap: var(--abstand-sm); } .input-with-button select, .input-with-button input { flex: 1; } .btn-icon { width: 44px; height: 44px; min-width: 44px; border: none; border-radius: var(--radius-md); background: var(--farbe-primaer); color: white; font-size: var(--schrift-lg); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; } .btn-icon:hover { background: var(--farbe-primaer-hell); } .btn-icon:active { transform: scale(0.95); } /* Höhlenplan-Button */ .btn-hoehlenplan { display: inline-block; margin-top: var(--abstand-xs); padding: var(--abstand-xs) var(--abstand-md); background: var(--farbe-info, #3498db); color: #fff; border: none; border-radius: var(--radius-md); text-decoration: none; font-size: var(--schrift-sm); font-weight: 500; cursor: pointer; transition: background var(--uebergang); } .btn-hoehlenplan:hover { background: #2980b9; } /* Koordinatensystem Toggle */ .koordinaten-system-toggle { display: flex; gap: 0; background: var(--farbe-grenze); border-radius: var(--radius-md); padding: 2px; } .koordinaten-system-toggle button { flex: 1; padding: var(--abstand-sm) var(--abstand-md); border: none; background: transparent; color: var(--farbe-text); font-size: var(--schrift-sm); font-weight: 500; cursor: pointer; border-radius: var(--radius-sm); transition: all 0.2s; } .koordinaten-system-toggle button.active { background: var(--farbe-primaer); color: white; } .koordinaten-system-toggle button:hover:not(.active) { background: rgba(0, 0, 0, 0.1); } /* GPS Status */ .gps-info { display: block; margin-top: var(--abstand-xs); color: var(--farbe-erfolg); } .gps-fehler { display: block; margin-top: var(--abstand-xs); color: var(--farbe-fehler); } .form-hint { display: block; margin-top: var(--abstand-xs); color: var(--farbe-text-sekundaer); font-style: italic; } /* Koordinaten Info */ .koordinaten-info { background: rgba(45, 80, 22, 0.1); padding: var(--abstand-sm) var(--abstand-md); border-radius: var(--radius-sm); margin-top: var(--abstand-sm); } .koordinaten-info small { color: var(--farbe-text-hell); } /* Button Group */ .button-group { display: flex; gap: var(--abstand-sm); } .button-group button { flex: 1; } /* Offline-Objekt Kennzeichnung */ select option[data-offline="true"]::after { content: " (offline)"; color: var(--farbe-warnung); } /* ============================================================================= Bearbeiten/Löschen von Zählungen ============================================================================= */ /* Aktions-Buttons in der Detail-Ansicht */ .detail-aktionen-bearbeiten { display: flex; gap: var(--abstand-md); margin-top: var(--abstand-lg); padding-top: var(--abstand-lg); border-top: 1px solid var(--farbe-grenze); } .detail-aktionen-bearbeiten button { flex: 1; } /* Danger Button (Löschen) */ .btn-danger { background-color: var(--farbe-fehler); color: white; border: none; padding: var(--abstand-sm) var(--abstand-md); border-radius: var(--radius-md); font-size: var(--schrift-md); cursor: pointer; transition: var(--uebergang); display: flex; align-items: center; justify-content: center; gap: var(--abstand-xs); } .btn-danger:hover:not(:disabled) { background-color: #c82333; } .btn-danger:disabled { opacity: 0.5; cursor: not-allowed; } /* Hinweis-Box */ .detail-hinweis { margin-top: var(--abstand-md); padding: var(--abstand-sm) var(--abstand-md); border-radius: var(--radius-sm); font-size: var(--schrift-sm); } .detail-hinweis.warnung { background-color: rgba(255, 193, 7, 0.15); color: var(--farbe-warnung); border: 1px solid var(--farbe-warnung); } /* ============================================================================= Bearbeitungs-Seite ============================================================================= */ .page-bearbeiten { padding-bottom: calc(var(--nav-hoehe) + var(--abstand-xl)); } .bearbeiten-header { display: flex; align-items: center; gap: var(--abstand-md); margin-bottom: var(--abstand-lg); } .bearbeiten-header h2 { margin: 0; flex: 1; } .bearbeiten-hinweis { padding: var(--abstand-md); border-radius: var(--radius-md); margin-bottom: var(--abstand-lg); } .bearbeiten-hinweis.info { background-color: rgba(23, 162, 184, 0.15); color: var(--farbe-info); border: 1px solid var(--farbe-info); } .bearbeiten-hinweis p { margin: 0; font-size: var(--schrift-sm); } /* Collapsible Form Sections */ .form-section.collapsible { border: 1px solid var(--farbe-grenze); border-radius: var(--radius-md); margin-bottom: var(--abstand-md); } .form-section.collapsible > summary { padding: var(--abstand-md); cursor: pointer; font-weight: 600; background-color: var(--farbe-karte); border-radius: var(--radius-md); list-style: none; display: flex; align-items: center; gap: var(--abstand-sm); } .form-section.collapsible > summary::-webkit-details-marker { display: none; } .form-section.collapsible > summary::before { content: "▶"; font-size: var(--schrift-xs); transition: transform var(--uebergang); } .form-section.collapsible[open] > summary::before { transform: rotate(90deg); } .form-section.collapsible .form-section-content { padding: var(--abstand-md); padding-top: 0; } /* Einträge-Liste in Bearbeitung */ .page-bearbeiten .eintraege-liste { margin-top: var(--abstand-lg); padding-top: var(--abstand-md); border-top: 1px solid var(--farbe-grenze); } .page-bearbeiten .eintraege-liste h4 { margin: 0 0 var(--abstand-md) 0; color: var(--farbe-text-hell); font-size: var(--schrift-sm); } .page-bearbeiten .eintraege-liste ul { list-style: none; padding: 0; margin: 0; } .page-bearbeiten .eintrag-item { display: flex; align-items: center; gap: var(--abstand-sm); padding: var(--abstand-sm); background-color: var(--farbe-hintergrund); border-radius: var(--radius-sm); margin-bottom: var(--abstand-sm); } .page-bearbeiten .eintrag-info { flex: 1; min-width: 0; } .page-bearbeiten .eintrag-info .art-name { font-weight: 600; display: block; } .page-bearbeiten .eintrag-info .eintrag-raum, .page-bearbeiten .eintrag-info .eintrag-unsicher, .page-bearbeiten .eintrag-info .eintrag-bemerkungen { font-size: var(--schrift-xs); color: var(--farbe-text-hell); display: block; } .page-bearbeiten .eintrag-anzahl-controls { display: flex; align-items: center; gap: var(--abstand-xs); } .page-bearbeiten .eintrag-anzahl-controls button { width: 28px; height: 28px; border: 1px solid var(--farbe-grenze); background: var(--farbe-karte); border-radius: var(--radius-sm); cursor: pointer; font-size: var(--schrift-md); } .page-bearbeiten .eintrag-anzahl { min-width: 2em; text-align: center; font-weight: 600; } .page-bearbeiten .keine-eintraege { text-align: center; color: var(--farbe-text-hell); padding: var(--abstand-lg); background-color: var(--farbe-hintergrund); border-radius: var(--radius-md); } /* Form Actions in Bearbeitung */ .page-bearbeiten .form-actions { margin-top: var(--abstand-xl); display: flex; flex-direction: column; gap: var(--abstand-md); } /* Dark Mode Anpassungen */ @media (prefers-color-scheme: dark) { .btn-danger { background-color: #bd2130; } .btn-danger:hover:not(:disabled) { background-color: #a71d2a; } .detail-hinweis.warnung { background-color: rgba(255, 193, 7, 0.1); border-color: rgba(255, 193, 7, 0.5); } .bearbeiten-hinweis.info { background-color: rgba(23, 162, 184, 0.1); border-color: rgba(23, 162, 184, 0.5); } }