/** * CaveMate – Hauptstylesheet * * Höhlentouren-App mit Dark-Mode-Support. * Farben: Dunkelblau (#1a1a2e), Marineblau (#16213e), Akzent (#9a8c7a) */ /* ============================================================================= CSS-Variablen ============================================================================= */ :root { --bg-primary: #ffffff; --bg-secondary: #f5f5f5; --bg-card: #ffffff; --text-primary: #1a1a2e; --text-secondary: #555; --text-muted: #888; --border: #ddd; --accent: #9a8c7a; --accent-hover: #847663; --success: #27ae60; --warning: #f39c12; --danger: #e74c3c; --info: #3498db; --shadow: rgba(0, 0, 0, 0.1); --radius: 8px; --radius-sm: 4px; --spacing: 1rem; --header-height: 120px; --header-bg-image: url('../img/header-bg-1.jpg'); --nav-height: 60px; } .dark-mode { --bg-primary: #1c1a17; --bg-secondary: #2a2722; --bg-card: #332f29; --text-primary: #e8e4df; --text-secondary: #b0a99e; --text-muted: #7a746b; --border: #3d3831; --accent: #b8a88e; --accent-hover: #a09078; --shadow: rgba(0, 0, 0, 0.4); } /* ============================================================================= Reset & Basis ============================================================================= */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; -webkit-text-size-adjust: 100%; overflow-x: hidden; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; background-color: var(--bg-primary); color: var(--text-primary); line-height: 1.5; min-height: 100vh; width: 100%; overflow-x: hidden; padding-top: calc(var(--header-height) + env(safe-area-inset-top, 0px)); padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px)); transition: background-color 0.3s, color 0.3s; } /* Zufälliges Header-Hintergrundbild (per data-header auf , JS setzt 1-7) */ [data-header="2"] { --header-bg-image: url('../img/header-bg-2.jpg'); } [data-header="3"] { --header-bg-image: url('../img/header-bg-3.jpg'); } [data-header="4"] { --header-bg-image: url('../img/header-bg-4.jpg'); } [data-header="5"] { --header-bg-image: url('../img/header-bg-5.jpg'); } [data-header="6"] { --header-bg-image: url('../img/header-bg-6.jpg'); } [data-header="7"] { --header-bg-image: url('../img/header-bg-7.jpg'); } /* ============================================================================= Header ============================================================================= */ .header { position: fixed; top: 0; left: 0; right: 0; height: calc(var(--header-height) + env(safe-area-inset-top, 0px)); background-color: #1a1a2e; background-image: var(--header-bg-image); background-repeat: no-repeat; background-size: cover; background-position: center top; color: white; display: flex; align-items: flex-end; justify-content: space-between; padding: 0 var(--spacing) 0.5rem; padding-top: env(safe-area-inset-top, 0px); z-index: 100; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35); } .header-title { font-size: 1.3rem; font-weight: 700; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); } .header-actions { display: flex; gap: 0.5rem; align-items: center; } .header-btn { background: none; border: none; color: #fff; cursor: pointer; padding: 0.5rem; font-size: 1.2rem; border-radius: var(--radius-sm); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); } .header-btn:hover { background: rgba(255, 255, 255, 0.15); } .header-tour-btn { font-size: 0.7rem; padding: 2px 8px; background: rgba(255, 102, 0, 0.25); border-radius: 4px; border: 1px solid #ff6600; color: #ff6600; cursor: pointer; white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; } /* Sync-Badge */ .sync-badge { background: var(--warning); color: #fff; font-size: 0.7rem; padding: 0.1rem 0.4rem; border-radius: 10px; position: absolute; top: -2px; right: -4px; } /* ============================================================================= Navigation (Bottom Tabs) ============================================================================= */ .nav-bottom { position: fixed; bottom: 0; left: 0; right: 0; height: var(--nav-height); background: var(--bg-secondary); border-top: 1px solid var(--border); display: flex; justify-content: space-around; align-items: center; padding-bottom: calc(env(safe-area-inset-bottom, 0px) / 2); z-index: 100; box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.06); } .nav-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4px 8px; background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.8rem; font-weight: 600; text-decoration: none; transition: color 0.2s; flex: 1; height: 100%; } .nav-tab:hover, .nav-tab:focus { color: var(--accent); } .nav-tab.active { color: var(--accent); } .nav-tab.active::after { content: ''; display: block; width: 30px; height: 3px; background-color: var(--accent); border-radius: 2px; margin-top: 4px; } .nav-tab-icon { font-size: 1.4rem; } /* ============================================================================= Inhalt ============================================================================= */ .content { max-width: 800px; margin: 0 auto; padding: var(--spacing); } /* ============================================================================= Karten ============================================================================= */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--spacing); margin-bottom: var(--spacing); box-shadow: 0 2px 4px var(--shadow); } .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; } .card-title { font-size: 1.1rem; font-weight: 600; } .card-subtitle { font-size: 0.85rem; color: var(--text-secondary); } .card-body { color: var(--text-secondary); font-size: 0.9rem; } .card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--border); font-size: 0.85rem; } .card-clickable { cursor: pointer; transition: box-shadow 0.2s, transform 0.1s; } .card-clickable:hover { box-shadow: 0 4px 8px var(--shadow); transform: translateY(-1px); } /* ============================================================================= Buttons ============================================================================= */ .btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.6rem 1.2rem; border: none; border-radius: var(--radius); font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: background 0.2s, transform 0.1s; text-decoration: none; } .btn:active { transform: scale(0.97); } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent-hover); } .btn-secondary { background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border); } .btn-secondary:hover { background: var(--border); } .btn-danger { background: var(--danger); color: #fff; } .btn-success { background: var(--success); color: #fff; } .btn-sm { padding: 0.4rem 0.8rem; font-size: 0.8rem; } .btn-block { display: flex; justify-content: center; width: 100%; } .btn:disabled { opacity: 0.6; cursor: not-allowed; } .btn-group { display: flex; gap: 0.5rem; flex-wrap: wrap; } /* ============================================================================= Formulare ============================================================================= */ .form-group { margin-bottom: 1rem; } .form-label { display: block; font-size: 0.85rem; font-weight: 500; margin-bottom: 0.3rem; color: var(--text-secondary); } .form-input, .form-select, .form-textarea { width: 100%; min-width: 0; padding: 0.6rem 0.8rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-primary); color: var(--text-primary); font-size: 0.95rem; font-family: inherit; transition: border-color 0.2s; } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--accent); } .form-textarea { min-height: 80px; resize: vertical; } /* Native Datums-/Zeit-Inputs: WebKit/iOS rendern diese sonst mit intrinsischer Mindestbreite und sprengen den Container. */ input[type="date"].form-input, input[type="datetime-local"].form-input, input[type="time"].form-input { -webkit-appearance: none; appearance: none; max-width: 100%; } input[type="date"].form-input::-webkit-date-and-time-value, input[type="datetime-local"].form-input::-webkit-date-and-time-value, input[type="time"].form-input::-webkit-date-and-time-value { min-width: 0; text-align: left; } .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.75rem; } .form-row > .form-group { min-width: 0; } /* Resize-Handle für die Tour-Karte (zum Größerziehen) */ .karte-resize-handle { width: 100%; height: 18px; cursor: ns-resize; display: flex; align-items: center; justify-content: center; touch-action: none; user-select: none; -webkit-user-select: none; } .karte-resize-handle::after { content: ''; width: 40px; height: 4px; background: var(--border); border-radius: 2px; } .karte-resize-handle:active::after { background: var(--text-muted); } /* Hoehlen-Suche (Autocomplete) */ .objekt-suche-container { position: relative; } .objekt-suche-container input { width: 100%; box-sizing: border-box; } .objekt-suchliste { position: absolute; top: 100%; left: 0; right: 0; max-height: 250px; overflow-y: auto; background: var(--bg-card, #fff); border: 1px solid var(--border-color, #ddd); border-top: none; border-radius: 0 0 8px 8px; list-style: none; margin: 0; padding: 0; z-index: 100; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .objekt-suchliste li { padding: 0.6rem 0.8rem; cursor: pointer; border-bottom: 1px solid var(--border-color, #eee); } .objekt-suchliste li:last-child { border-bottom: none; } .objekt-suchliste li:hover { background: var(--primary, #2c7a3e); color: white; } .objekt-suchliste li.objekt-leer { color: #999; cursor: default; font-style: italic; } .objekt-suchliste li.objekt-leer:hover { background: transparent; color: #999; } .objekt-gewaehlt { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.8rem; background: var(--bg-card, #f8f9fa); border: 1px solid var(--border-color, #ddd); border-radius: 8px; min-height: 44px; } .objekt-gewaehlt span { flex: 1; font-weight: 600; } .btn-objekt-loeschen { background: none; border: none; font-size: 1.2rem; cursor: pointer; color: #999; padding: 0 4px; line-height: 1; } .btn-objekt-loeschen:hover { color: var(--danger, #dc3545); } /* ============================================================================= Status-Badges ============================================================================= */ .badge { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 12px; font-size: 0.75rem; font-weight: 500; } .badge-geplant { background: var(--info); color: #fff; } .badge-aktiv { background: var(--success); color: #fff; } .badge-abgeschlossen { background: var(--text-muted); color: #fff; } .badge-abgebrochen { background: var(--danger); color: #fff; } /* Schwierigkeitsgrad */ .badge-einfach { background: #27ae60; color: #fff; } .badge-mittel { background: #f39c12; color: #fff; } .badge-schwer { background: #e74c3c; color: #fff; } .badge-extrem { background: #8e44ad; color: #fff; } /* Verschlussobjekt */ .badge-verschluss { background: #c0392b; color: #fff; } /* Duplikat-Warnung */ .badge-duplikat { background: #fff3cd; color: #856404; } /* Tour-Sichtbarkeit */ .badge-privat { background: #c0392b; color: #fff; } .badge-eingeschraenkt { background: #f39c12; color: #fff; } /* ============================================================================= Sterne-Bewertung ============================================================================= */ .sterne { color: #f1c40f; font-size: 1.1rem; letter-spacing: 2px; } .sterne-leer { color: var(--border); } /* ============================================================================= Listen ============================================================================= */ .list-item { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 0; border-bottom: 1px solid var(--border); } .list-item:last-child { border-bottom: none; } /* ============================================================================= Benachrichtigungen ============================================================================= */ .alert { padding: 0.75rem 1rem; border-radius: var(--radius); margin-bottom: var(--spacing); font-size: 0.9rem; } .alert-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; } .alert-error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } .alert-warning { background: #fff3cd; color: #856404; border: 1px solid #ffeeba; } .alert-info { background: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; } .dark-mode .alert-success { background: #1e4230; color: #a3d9a5; border-color: #2d5a3f; } .dark-mode .alert-error { background: #4a1c24; color: #f5a3a8; border-color: #6b2c35; } .dark-mode .alert-warning { background: #4a3c0e; color: #f5d77a; border-color: #6b5620; } .dark-mode .alert-info { background: #0c3a48; color: #7ecad3; border-color: #165a6b; } /* ============================================================================= Lade-Indikator ============================================================================= */ .spinner { display: inline-block; width: 1.5rem; height: 1.5rem; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .lade-logo { width: 48px; height: 48px; border-radius: 50%; animation: spin 2s linear infinite; } .lade-overlay { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 3rem; color: var(--text-muted); gap: 0.75rem; } /* Tab-Logo (Schleifsack) */ .nav-tab-logo { width: 32px; height: 32px; border-radius: 4px; } /* ============================================================================= Dashboard-Statistik-Kacheln ============================================================================= */ .dashboard-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; } .stat-card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 12px; padding: 12px; text-align: center; } .stat-card.warning { border-color: var(--warning, #e6a817); background: rgba(255, 193, 7, 0.1); } .stat-value { display: block; font-size: 1.8rem; font-weight: 700; color: var(--accent); } .stat-label { display: block; font-size: 0.7rem; color: var(--text-muted); margin-top: 2px; } /* ============================================================================= Login ============================================================================= */ .login-container { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100vh - var(--header-height) - var(--nav-height) - env(safe-area-inset-top, 0px)); padding: 2rem; } .login-logo { margin-bottom: 1rem; } .login-logo-img { width: 120px; height: auto; display: block; margin: 0 auto; } .login-title { font-size: 1.8rem; font-weight: 700; color: var(--accent); margin-bottom: 0.5rem; } .login-subtitle { color: var(--text-muted); margin-bottom: 2rem; } .login-form { width: 100%; max-width: 360px; } /* ============================================================================= Leer-Zustände ============================================================================= */ .empty-state { text-align: center; padding: 3rem 1rem; color: var(--text-muted); } .empty-state-icon { font-size: 3rem; margin-bottom: 1rem; } .empty-state-text { font-size: 0.95rem; margin-bottom: 1rem; } /* ============================================================================= Seiten-Header ============================================================================= */ .page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing); } .page-title { font-size: 1.3rem; } /* ============================================================================= Kalender ============================================================================= */ .kalender-nav { display: flex; justify-content: space-between; align-items: center; } .kalender-monat { font-size: 1.1rem; font-weight: 600; color: var(--text-primary); } .kalender-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .kalender-header { margin-bottom: 4px; } .kalender-header > div { text-align: center; font-size: 0.75rem; font-weight: 600; color: var(--text-muted); padding: 4px 0; } .kalender-tag { min-height: 48px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px; cursor: default; position: relative; } .kalender-tag-leer { background: transparent; border-color: transparent; } .kalender-tag-heute { border-color: var(--accent); border-width: 2px; } .kalender-tag-hat-tour { cursor: pointer; background: color-mix(in srgb, var(--info) 10%, var(--bg-card)); } .kalender-tag-hat-tour:hover { background: color-mix(in srgb, var(--info) 20%, var(--bg-card)); } .kalender-tag-nummer { font-size: 0.8rem; font-weight: 500; color: var(--text-primary); } .kalender-tag-punkte { display: flex; gap: 3px; margin-top: 2px; flex-wrap: wrap; } .kalender-punkt { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .punkt-geplant { background: var(--info); } .punkt-aktiv { background: var(--success); } .punkt-abgeschlossen { background: var(--text-muted); } .punkt-abgebrochen { background: var(--danger); } font-weight: 600; } /* ============================================================================= Detail-Ansicht ============================================================================= */ .detail-section { margin-bottom: var(--spacing); } .detail-label { font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.25rem; } .detail-value { font-size: 1rem; color: var(--text-primary); } .detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--spacing); } /* ============================================================================= Foto-Grid ============================================================================= */ .foto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.5rem; } .foto-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm); cursor: pointer; } /* ============================================================================= Responsive ============================================================================= */ @media (max-width: 480px) { .form-row { grid-template-columns: 1fr; } .btn-group { flex-direction: column; } .detail-grid { grid-template-columns: 1fr; } } /* ============================================================================= Übergänge ============================================================================= */ [x-cloak] { display: none !important; } .fade-enter { opacity: 0; transform: translateY(10px); } .fade-leave { opacity: 0; } /* ============================================================================= Utility-Klassen ============================================================================= */ /* ============================================================================= Foto-Fächer ============================================================================= */ .foto-faecher { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; } .foto-faecher-item { text-align: center; cursor: pointer; } .foto-faecher-item img { width: 100%; border-radius: 6px; aspect-ratio: 1; object-fit: cover; transition: opacity 0.15s; } .foto-faecher-item:hover img { opacity: 0.8; } /* ============================================================================= Lightbox-Overlay ============================================================================= */ .lightbox-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(30, 30, 30, 0.92); display: flex; align-items: center; justify-content: center; } .lightbox-schliessen { position: absolute; top: 12px; right: 16px; background: none; border: none; color: #fff; font-size: 2.5rem; cursor: pointer; line-height: 1; z-index: 10000; } .lightbox-pfeil { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: none; color: #fff; font-size: 3.5rem; cursor: pointer; padding: 0 12px; z-index: 10000; user-select: none; } .lightbox-pfeil-links { left: 4px; } .lightbox-pfeil-rechts { right: 4px; } .lightbox-pfeil:hover { color: var(--accent); } .lightbox-inhalt { max-width: 90vw; max-height: 85vh; display: flex; flex-direction: column; align-items: center; } .lightbox-bild { max-width: 90vw; max-height: 78vh; object-fit: contain; border-radius: 6px; } .lightbox-beschriftung { margin-top: 8px; color: #ccc; font-size: 0.9rem; text-align: center; display: flex; gap: 12px; justify-content: center; } .lightbox-copyright { color: #999; font-size: 0.8rem; text-align: center; display: flex; gap: 10px; justify-content: center; } /* ============================================================================= Steckbrief-Overlay ============================================================================= */ .steckbrief-overlay { position: fixed; inset: 0; z-index: 2000; background: var(--bg-primary); display: flex; flex-direction: column; overflow: hidden; } .steckbrief-overlay-header { display: flex; justify-content: flex-end; padding: 12px 16px; background: var(--bg-secondary); border-bottom: 1px solid var(--border); padding-top: calc(12px + env(safe-area-inset-top, 0px)); } .steckbrief-schliessen { background: var(--accent); color: #fff; border: none; border-radius: 6px; padding: 8px 16px; font-size: 0.9rem; cursor: pointer; } .steckbrief-overlay-inhalt { flex: 1; overflow-y: auto; padding: 20px 16px; -webkit-overflow-scrolling: touch; } /* Steckbrief-Inhalt (lokal generiertes HTML) */ .steckbrief-lokal { max-width: 700px; margin: 0 auto; } .steckbrief-header { margin-bottom: 20px; padding-bottom: 12px; border-bottom: 2px solid var(--accent); } .steckbrief-header h1 { margin: 0; font-size: 1.5rem; color: var(--text-primary); } .steckbrief-sub { color: var(--text-muted); font-size: 0.95rem; margin-top: 4px; } .steckbrief-lokal h2 { font-size: 1.1rem; color: var(--accent); margin: 20px 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--border); } .steckbrief-lokal p { margin: 0 0 8px; line-height: 1.5; } .steckbrief-lokal ul { margin: 0 0 12px; padding-left: 20px; } .steckbrief-lokal li { margin-bottom: 4px; line-height: 1.4; } .steckbrief-tabelle { width: 100%; border-collapse: collapse; margin-bottom: 16px; } .steckbrief-tabelle th { text-align: left; padding: 6px 12px 6px 0; color: var(--text-muted); font-weight: 600; width: 120px; vertical-align: top; border-bottom: 1px solid var(--border); } .steckbrief-tabelle td { padding: 6px 0; border-bottom: 1px solid var(--border); } .steckbrief-info { color: var(--text-muted); font-style: italic; margin-top: 16px; } .steckbrief-plaene { display: flex; flex-direction: column; gap: 12px; } .steckbrief-plan img { max-width: 100%; border-radius: 6px; border: 1px solid var(--border); } .steckbrief-plan-titel { font-weight: 600; margin-top: 4px; } /* ============================================================================= Knotenkunde ============================================================================= */ .knotenkunde-suche { width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); color: var(--text-primary); font-size: 0.95rem; margin-bottom: 12px; } .knotenkunde-suche::placeholder { color: var(--text-muted); } .knotenkunde-hinweis { text-align: center; color: var(--text-muted); font-size: 0.85rem; margin-bottom: 12px; } .knoten-grid { display: flex; flex-direction: column; gap: 8px; } .knoten-karte { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: background 0.2s, box-shadow 0.2s; } .knoten-karte:hover, .knoten-karte:active { background: var(--bg-secondary); box-shadow: 0 2px 8px var(--shadow); } .knoten-karte-foto { width: 56px; height: 56px; border-radius: var(--radius); object-fit: cover; flex-shrink: 0; background: var(--bg-secondary); } .knoten-karte-platzhalter { width: 56px; height: 56px; border-radius: var(--radius); background: var(--bg-secondary); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; color: var(--text-muted); } .knoten-karte-info { flex: 1; min-width: 0; } .knoten-karte-name { font-weight: 600; color: var(--text-primary); font-size: 0.95rem; } .knoten-karte-vorschau { color: var(--text-muted); font-size: 0.8rem; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .knoten-karte-pfeil { color: var(--text-muted); font-size: 1.2rem; flex-shrink: 0; } /* Knoten-Overlay */ .knoten-overlay { position: fixed; inset: 0; z-index: 2000; background: rgba(0, 0, 0, 0.92); display: flex; flex-direction: column; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .knoten-overlay-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; padding-top: max(8px, env(safe-area-inset-top, 0px)); background: var(--bg-card); border-bottom: 2px solid var(--accent); flex-shrink: 0; } .knoten-overlay-header h3 { margin: 0; color: var(--text-primary); font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; } .knoten-overlay-close { background: var(--accent); border: none; font-size: 14px; font-weight: 700; color: white; cursor: pointer; padding: 8px 16px; border-radius: var(--radius-sm); min-height: 44px; min-width: 100px; flex-shrink: 0; margin-left: 8px; } .knoten-overlay-close:active { opacity: 0.8; transform: scale(0.95); } .knoten-overlay-inhalt { flex: 1; overflow-y: auto; padding: 16px; -webkit-overflow-scrolling: touch; } .knoten-detail { max-width: 600px; margin: 0 auto; color: #e0e6f0; } .knoten-detail h2 { font-size: 1.1rem; margin: 20px 0 8px 0; padding-bottom: 4px; border-bottom: 2px solid rgba(255,255,255,0.25); color: #ffffff; } .knoten-detail p { line-height: 1.6; margin: 0 0 8px 0; color: #e0e6f0; white-space: pre-line; } .knoten-detail-foto { margin-bottom: 16px; text-align: center; } .knoten-detail-foto img { max-width: 100%; max-height: 400px; border-radius: var(--radius); object-fit: contain; } .knoten-anleitung-foto { margin: 0 -16px 16px -16px; } .knoten-anleitung-foto img { width: 100%; display: block; object-fit: contain; } .knoten-kein-inhalt { text-align: center; color: rgba(255,255,255,0.5); padding: 40px 0; font-size: 0.95rem; } /* ============================================================================= Utility-Klassen ============================================================================= */ .text-center { text-align: center; } .text-right { text-align: right; } .text-muted { color: var(--text-muted); } .text-accent { color: var(--accent); } .text-success { color: var(--success); } .text-danger { color: var(--danger); } .text-small { font-size: 0.85rem; } .mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; } .mb-1 { margin-bottom: 0.5rem; } .mb-2 { margin-bottom: 1rem; } .gap-1 { gap: 0.5rem; } .flex { display: flex; } .flex-between { display: flex; justify-content: space-between; align-items: center; } .hidden { display: none !important; } /* Tour starten/stoppen – große, auffällige Buttons */ .tour-start-stop-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 16px 24px; border: none; border-radius: var(--radius); font-size: 1.2rem; font-weight: 700; color: #fff; cursor: pointer; letter-spacing: 0.5px; transition: opacity 0.15s, transform 0.1s; -webkit-tap-highlight-color: transparent; } .tour-start-stop-btn:active { transform: scale(0.97); opacity: 0.9; } .tour-start-stop-icon { font-size: 1.5rem; line-height: 1; } .tour-start-btn { background: #4caf50; box-shadow: 0 3px 8px rgba(76, 175, 80, 0.35); } .tour-stop-btn { background: #e53935; box-shadow: 0 3px 8px rgba(229, 57, 53, 0.35); } /* Resize-Handle für Höhlenplan */ .plan-resize-handle { width: 100%; height: 18px; cursor: ns-resize; display: flex; align-items: center; justify-content: center; touch-action: none; user-select: none; } .plan-resize-handle::after { content: ''; width: 40px; height: 4px; background: #ccc; border-radius: 2px; } .plan-resize-handle:active::after { background: #999; }