rene
553e9e7854
Tagebuch:
- Day-One-Listenansicht: Wochentag + Tageszahl + Meta-Zeile (Zeit/Ort/Wetter)
- 4 Ansichten: Liste, Medien-Mosaik, Kalender (mit Sprungbuttons), Karte (GPS-Marker)
- Detail-Ansicht inline im Content-Bereich (kein Fullscreen-Overlay mehr)
- Hero-Bild vollständig sichtbar (object-fit:contain), Lightbox mit Safe-Area
- 2-Spalten-Layout Desktop: Text + Leaflet-Karte + POI-Liste
- EXIF-GPS-Extraktion bei Foto-Upload, historisches Wetter via Archive-API
- NoteStation-Import: Fotos in diary_media (80 Einträge migriert, 94 Medien)
- Stats-Endpoints: /diary/stats, /diary/calendar, /diary/locations
Notiz-Feature:
- Generische notes-Tabelle (parent_type + parent_id + meta_json)
- 📝-Button in 8 Bereichen, Notizblock-Seite mit KI-Analyse
- KI-Toggle in Einstellungen, notes_ki_enabled in User-Profil
Icons & Design:
- fill:currentColor Fix für welcome/onboarding/friends.js
- --c-icon Variable, --c-text-muted Dark Mode aufgehellt
- 15+ neue Phosphor-Icons aus lokaler Kopie
- CSS Network-First im SW, Cache-Control-Middleware
Infrastruktur:
- Wiki-Anreicherungs-Scheduler-Jobs entfernt (abgeschlossen)
- auth.py: notes_ki_enabled + is_social_media im User-Response
6566 lines
176 KiB
CSS
6566 lines
176 KiB
CSS
/* ============================================================
|
||
BAN YARO — Komponenten
|
||
Alle wiederverwendbaren UI-Bausteine an einem Ort.
|
||
Kein Baustein wird zweimal definiert.
|
||
============================================================ */
|
||
|
||
/* ------------------------------------------------------------
|
||
1. BUTTONS
|
||
------------------------------------------------------------ */
|
||
.btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: var(--space-2);
|
||
padding: var(--space-3) var(--space-5);
|
||
font-size: var(--text-base);
|
||
font-weight: var(--weight-semibold);
|
||
line-height: 1;
|
||
border-radius: var(--radius-md);
|
||
border: 2px solid transparent;
|
||
transition: background var(--transition-fast),
|
||
color var(--transition-fast),
|
||
border-color var(--transition-fast),
|
||
transform var(--transition-fast),
|
||
box-shadow var(--transition-fast);
|
||
cursor: pointer;
|
||
white-space: nowrap;
|
||
-webkit-tap-highlight-color: transparent;
|
||
touch-action: manipulation;
|
||
min-height: 44px; /* Touch-Target Minimum */
|
||
}
|
||
|
||
.btn:active { transform: scale(0.97); }
|
||
|
||
.btn-primary {
|
||
background: var(--c-primary);
|
||
color: var(--c-text-inverse);
|
||
border-color:var(--c-primary);
|
||
}
|
||
.btn-primary:hover {
|
||
background: var(--c-primary-dark);
|
||
border-color: var(--c-primary-dark);
|
||
}
|
||
|
||
.btn-secondary {
|
||
background: var(--c-surface);
|
||
color: var(--c-text);
|
||
border-color: var(--c-border);
|
||
box-shadow: var(--shadow-xs);
|
||
}
|
||
.btn-secondary:hover {
|
||
background: var(--c-surface-2);
|
||
border-color: var(--c-surface-3);
|
||
}
|
||
|
||
.btn-active {
|
||
background: color-mix(in srgb, var(--c-primary) 15%, var(--c-surface)) !important;
|
||
border-color: var(--c-primary) !important;
|
||
color: var(--c-primary-dark) !important;
|
||
}
|
||
|
||
/* Meilenstein-Toggle im Formular */
|
||
.diary-milestone-toggle {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
width: 100%;
|
||
padding: var(--space-3) var(--space-4);
|
||
border: 1.5px dashed var(--c-border);
|
||
border-radius: var(--radius-md);
|
||
background: transparent;
|
||
color: var(--c-text-secondary);
|
||
font-size: var(--text-sm);
|
||
font-weight: var(--weight-medium);
|
||
cursor: pointer;
|
||
transition: all var(--transition-fast);
|
||
}
|
||
.diary-milestone-toggle:hover {
|
||
border-color: #d4a017;
|
||
color: #8a6400;
|
||
}
|
||
.diary-milestone-toggle--active {
|
||
border-style: solid;
|
||
border-color: #d4a017;
|
||
background: color-mix(in srgb, #d4a017 10%, transparent);
|
||
color: #8a6400;
|
||
font-weight: var(--weight-semibold);
|
||
}
|
||
.diary-milestone-toggle .ph-icon { font-size: 1.2rem; }
|
||
|
||
.btn-ghost {
|
||
background: transparent;
|
||
color: var(--c-text-secondary);
|
||
border-color: transparent;
|
||
}
|
||
.btn-ghost:hover {
|
||
background: var(--c-surface-2);
|
||
color: var(--c-text);
|
||
}
|
||
|
||
.btn-danger {
|
||
background: var(--c-danger);
|
||
color: #fff;
|
||
border-color: var(--c-danger);
|
||
}
|
||
.btn-danger:hover {
|
||
background: var(--c-danger-dark);
|
||
border-color: var(--c-danger-dark);
|
||
}
|
||
|
||
.btn-nature {
|
||
background: var(--c-nature);
|
||
color: #fff;
|
||
border-color: var(--c-nature);
|
||
}
|
||
|
||
/* Größen */
|
||
.btn-sm {
|
||
padding: var(--space-2) var(--space-3);
|
||
font-size: var(--text-sm);
|
||
min-height: 36px;
|
||
border-radius: var(--radius-sm);
|
||
}
|
||
.btn-lg {
|
||
padding: var(--space-4) var(--space-8);
|
||
font-size: var(--text-md);
|
||
min-height: 52px;
|
||
border-radius: var(--radius-lg);
|
||
}
|
||
.btn-full { width: 100%; }
|
||
|
||
.btn:disabled {
|
||
opacity: 0.45;
|
||
cursor: not-allowed;
|
||
transform: none;
|
||
}
|
||
|
||
/* Icon-only Button */
|
||
.btn-icon {
|
||
padding: var(--space-2);
|
||
border-radius: var(--radius-md);
|
||
min-height: 44px;
|
||
min-width: 44px;
|
||
}
|
||
|
||
/* ------------------------------------------------------------
|
||
2. CARDS
|
||
------------------------------------------------------------ */
|
||
.card {
|
||
background: var(--c-surface);
|
||
border: 1px solid var(--c-border-light);
|
||
border-radius: var(--radius-lg);
|
||
box-shadow: var(--shadow-sm);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.card-body {
|
||
padding: var(--space-4);
|
||
}
|
||
|
||
.card-header {
|
||
padding: var(--space-4);
|
||
border-bottom: 1px solid var(--c-border-light);
|
||
font-weight: var(--weight-semibold);
|
||
font-size: var(--text-md);
|
||
}
|
||
|
||
.card-footer {
|
||
padding: var(--space-3) var(--space-4);
|
||
border-top: 1px solid var(--c-border-light);
|
||
background: var(--c-bg);
|
||
}
|
||
|
||
/* Klickbare Card */
|
||
.card-clickable {
|
||
cursor: pointer;
|
||
transition: box-shadow var(--transition-fast),
|
||
transform var(--transition-fast);
|
||
}
|
||
.card-clickable:hover {
|
||
box-shadow: var(--shadow-md);
|
||
transform: translateY(-1px);
|
||
}
|
||
.card-clickable:active {
|
||
transform: translateY(0);
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
/* Horizontale Card (Bild links + Inhalt rechts) */
|
||
.card-horizontal {
|
||
display: flex;
|
||
align-items: stretch;
|
||
}
|
||
.card-horizontal .card-image {
|
||
width: 88px;
|
||
flex-shrink: 0;
|
||
object-fit: cover;
|
||
}
|
||
|
||
/* ------------------------------------------------------------
|
||
3. BY-TABS — Einheitliche Tab/Filter-Navigation (app-weit)
|
||
------------------------------------------------------------ */
|
||
.by-tabs {
|
||
display: flex;
|
||
gap: var(--space-2);
|
||
overflow-x: auto;
|
||
flex-wrap: nowrap;
|
||
scrollbar-width: none;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
.by-tabs::-webkit-scrollbar { display: none; }
|
||
|
||
|
||
.by-tab {
|
||
flex-shrink: 0;
|
||
padding: var(--space-2) var(--space-3);
|
||
border: 1.5px solid var(--c-border);
|
||
border-radius: var(--radius-full);
|
||
background: var(--c-surface);
|
||
color: var(--c-text-secondary);
|
||
font-size: var(--text-sm);
|
||
font-weight: var(--weight-medium);
|
||
cursor: pointer;
|
||
white-space: nowrap;
|
||
transition: all var(--transition-fast);
|
||
touch-action: manipulation;
|
||
}
|
||
.by-tab.active {
|
||
background: var(--c-primary);
|
||
border-color: var(--c-primary);
|
||
color: var(--c-text-inverse);
|
||
}
|
||
.by-tab:hover:not(.active) {
|
||
border-color: var(--c-primary);
|
||
color: var(--c-primary);
|
||
}
|
||
|
||
/* ------------------------------------------------------------
|
||
4. BY-SECTION-LABEL + BY-TOOLBAR — weitere gemeinsame Elemente
|
||
------------------------------------------------------------ */
|
||
|
||
/* Kleines Überschriften-Label über Gruppen ("Aktuelle Medikamente" etc.) */
|
||
.by-section-label {
|
||
font-size: var(--text-sm);
|
||
font-weight: var(--weight-semibold);
|
||
color: var(--c-text-secondary);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
padding: var(--space-3) 0 var(--space-1);
|
||
}
|
||
|
||
/* Toolbar-Leiste oben auf einer Seite (Background + Border + Flex) */
|
||
.by-toolbar {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
padding: var(--space-3) var(--space-4);
|
||
background: var(--c-surface);
|
||
border-bottom: 1px solid var(--c-border);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* Health: Transponder-Zeile */
|
||
.health-transponder {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
padding: var(--space-2) var(--space-4);
|
||
background: var(--c-surface);
|
||
border-bottom: 1px solid var(--c-border);
|
||
font-size: var(--text-sm);
|
||
color: var(--c-text-secondary);
|
||
flex-shrink: 0;
|
||
}
|
||
.health-transponder-label { color: var(--c-text-muted); }
|
||
.health-transponder-edit { margin-left: auto; }
|
||
|
||
/* Diary: Suchleiste */
|
||
.diary-search-wrap {
|
||
position: relative;
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
.diary-search-icon {
|
||
position: absolute;
|
||
left: var(--space-3);
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
color: var(--c-text-muted);
|
||
pointer-events: none;
|
||
}
|
||
.diary-search-input {
|
||
width: 100%;
|
||
padding: var(--space-2) var(--space-3) var(--space-2) 2.2rem;
|
||
border: 1.5px solid var(--c-border);
|
||
border-radius: var(--radius-md);
|
||
font-size: var(--text-sm);
|
||
font-family: var(--font-sans);
|
||
background: var(--c-bg);
|
||
color: var(--c-text);
|
||
outline: none;
|
||
transition: border-color var(--transition-fast);
|
||
}
|
||
.diary-search-input:focus { border-color: var(--c-primary); }
|
||
|
||
/* Widget-Karte */
|
||
.widget-card {
|
||
background: var(--c-surface);
|
||
border-radius: var(--radius-xl);
|
||
overflow: hidden;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
.widget-dog-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-3);
|
||
padding: var(--space-4);
|
||
}
|
||
.widget-dog-av {
|
||
width: 48px; height: 48px; border-radius: 50%;
|
||
object-fit: cover; border: 2px solid var(--c-primary-light);
|
||
flex-shrink: 0;
|
||
}
|
||
.widget-dog-av--placeholder {
|
||
display: flex; align-items: center; justify-content: center;
|
||
background: var(--c-surface-2); font-size: 1.5rem;
|
||
}
|
||
.widget-reminder {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-3);
|
||
padding: var(--space-3) var(--space-4);
|
||
background: var(--c-primary-subtle);
|
||
color: var(--c-primary-dark);
|
||
border-top: 1px solid var(--c-border-light);
|
||
}
|
||
.widget-reminder--overdue { background: var(--c-danger-subtle); color: var(--c-danger); }
|
||
.widget-reminder--ok { background: var(--c-success-subtle); color: var(--c-success); }
|
||
.widget-photo-wrap {
|
||
position: relative;
|
||
aspect-ratio: 4/3;
|
||
overflow: hidden;
|
||
border-top: 1px solid var(--c-border-light);
|
||
display: flex; align-items: center; justify-content: center;
|
||
background: var(--c-surface-2);
|
||
}
|
||
.widget-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||
.widget-photo-placeholder { flex-direction: column; gap: var(--space-2); }
|
||
.widget-photo-caption {
|
||
position: absolute;
|
||
bottom: 0; left: 0; right: 0;
|
||
padding: var(--space-2) var(--space-3);
|
||
background: linear-gradient(transparent, rgba(0,0,0,.55));
|
||
color: #fff;
|
||
font-size: var(--text-sm);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-end;
|
||
}
|
||
.widget-photo-date { font-size: var(--text-xs); opacity: .8; }
|
||
|
||
/* Import: Format-Auswahl-Karten */
|
||
.import-format-card {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-3);
|
||
padding: var(--space-3) var(--space-4);
|
||
border: 2px solid var(--c-border);
|
||
border-radius: var(--radius-md);
|
||
cursor: pointer;
|
||
transition: border-color var(--transition-fast), background var(--transition-fast);
|
||
}
|
||
.import-format-card:hover { border-color: var(--c-primary-light); }
|
||
.import-format-card--active { border-color: var(--c-primary); background: var(--c-primary-subtle); }
|
||
.import-format-icon {
|
||
font-size: 1.5rem;
|
||
color: var(--c-primary);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* ------------------------------------------------------------
|
||
5. BADGES & STATUS-PILLS
|
||
------------------------------------------------------------ */
|
||
.badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: var(--space-1);
|
||
padding: var(--space-1) var(--space-2);
|
||
font-size: var(--text-xs);
|
||
font-weight: var(--weight-semibold);
|
||
border-radius: var(--radius-full);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.badge-primary { background: var(--c-primary-subtle); color: var(--c-primary-dark); }
|
||
.badge-success { background: var(--c-success-subtle); color: var(--c-success); }
|
||
.badge-danger { background: var(--c-danger-subtle); color: var(--c-danger); }
|
||
.badge-warning { background: var(--c-warning-subtle); color: var(--c-primary-dark); }
|
||
.badge-info { background: var(--c-info-subtle); color: var(--c-info); }
|
||
.badge-nature { background: var(--c-nature-subtle); color: var(--c-nature); }
|
||
.badge-muted { background: var(--c-surface-2); color: var(--c-text-secondary); }
|
||
|
||
/* Dot-Indicator */
|
||
.badge-dot::before {
|
||
content: '';
|
||
display: inline-block;
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: var(--radius-full);
|
||
background: currentColor;
|
||
}
|
||
|
||
/* Giftköder-spezifisch — besonders auffällig */
|
||
.badge-alarm {
|
||
background: var(--c-danger);
|
||
color: #fff;
|
||
font-size: var(--text-xs);
|
||
font-weight: var(--weight-bold);
|
||
animation: pulse-alarm 2s ease-in-out infinite;
|
||
}
|
||
@keyframes pulse-alarm {
|
||
0%, 100% { box-shadow: 0 0 0 0 rgba(196, 57, 26, 0.4); }
|
||
50% { box-shadow: 0 0 0 6px rgba(196, 57, 26, 0); }
|
||
}
|
||
|
||
/* ------------------------------------------------------------
|
||
4. FORMULARE
|
||
------------------------------------------------------------ */
|
||
.form-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-2);
|
||
}
|
||
|
||
.form-label {
|
||
font-size: var(--text-sm);
|
||
font-weight: var(--weight-medium);
|
||
color: var(--c-text-secondary);
|
||
}
|
||
|
||
/* iOS Safari: font-size < 16px triggert Auto-Zoom beim Fokus — muss alle Klassen überschreiben */
|
||
input, select, textarea {
|
||
font-size: var(--text-base) !important;
|
||
}
|
||
|
||
.form-control {
|
||
width: 100%;
|
||
padding: var(--space-3) var(--space-4);
|
||
font-size: var(--text-base);
|
||
color: var(--c-text);
|
||
background: var(--c-surface);
|
||
border: 1.5px solid var(--c-border);
|
||
border-radius: var(--radius-md);
|
||
transition: border-color var(--transition-fast),
|
||
box-shadow var(--transition-fast);
|
||
min-height: 44px;
|
||
appearance: none;
|
||
-webkit-appearance: none;
|
||
}
|
||
|
||
.form-control::placeholder { color: var(--c-text-muted); }
|
||
|
||
/* Kalender-Icon in Datumseingaben: Amber statt schwarz
|
||
color-scheme: light → schwarzes Icon
|
||
invert(0.55) → mittleres Grau (vermeidet Clipping bei sepia auf Weiß)
|
||
→ sepia → saturate → brightness auf ~#C4843A bringen */
|
||
input[type="date"],
|
||
input[type="time"] {
|
||
color-scheme: light;
|
||
}
|
||
input[type="date"]::-webkit-calendar-picker-indicator,
|
||
input[type="time"]::-webkit-calendar-picker-indicator {
|
||
cursor: pointer;
|
||
filter: brightness(0) invert(0.55) sepia(1) saturate(4) brightness(0.77);
|
||
}
|
||
|
||
.form-control:focus {
|
||
outline: none;
|
||
border-color: var(--c-primary);
|
||
box-shadow: 0 0 0 3px rgba(196, 132, 58, 0.15);
|
||
}
|
||
|
||
.form-control:invalid:not(:placeholder-shown) {
|
||
border-color: var(--c-danger);
|
||
}
|
||
|
||
textarea.form-control {
|
||
resize: vertical;
|
||
min-height: 100px;
|
||
}
|
||
|
||
.form-control-icon {
|
||
position: relative;
|
||
}
|
||
.form-control-icon .form-control {
|
||
padding-left: var(--space-10);
|
||
}
|
||
.form-control-icon .icon {
|
||
position: absolute;
|
||
left: var(--space-3);
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
color: var(--c-text-muted);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.form-hint {
|
||
font-size: var(--text-xs);
|
||
color: var(--c-text-muted);
|
||
}
|
||
.form-error {
|
||
font-size: var(--text-xs);
|
||
color: var(--c-danger);
|
||
}
|
||
|
||
/* Toggle / Checkbox */
|
||
.toggle {
|
||
position: relative;
|
||
display: inline-block;
|
||
width: 48px;
|
||
height: 28px;
|
||
flex-shrink: 0;
|
||
}
|
||
.toggle input { opacity: 0; width: 0; height: 0; }
|
||
.toggle-slider {
|
||
position: absolute;
|
||
inset: 0;
|
||
background: var(--c-border);
|
||
border-radius: var(--radius-full);
|
||
transition: background var(--transition-normal);
|
||
cursor: pointer;
|
||
}
|
||
.toggle-slider::before {
|
||
content: '';
|
||
position: absolute;
|
||
width: 22px;
|
||
height: 22px;
|
||
left: 3px;
|
||
top: 3px;
|
||
background: #fff;
|
||
border-radius: var(--radius-full);
|
||
transition: transform var(--transition-normal);
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
.toggle input:checked + .toggle-slider {
|
||
background: var(--c-primary);
|
||
}
|
||
.toggle input:checked + .toggle-slider::before {
|
||
transform: translateX(20px);
|
||
}
|
||
|
||
/* ------------------------------------------------------------
|
||
5. AVATAR
|
||
------------------------------------------------------------ */
|
||
.avatar {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: var(--radius-full);
|
||
overflow: hidden;
|
||
background: var(--c-surface-2);
|
||
color: var(--c-text-secondary);
|
||
font-weight: var(--weight-semibold);
|
||
flex-shrink: 0;
|
||
}
|
||
.avatar img { width: 100%; height: 100%; object-fit: cover; }
|
||
|
||
.avatar-sm { width: 32px; height: 32px; font-size: var(--text-xs); }
|
||
.avatar-md { width: 44px; height: 44px; font-size: var(--text-sm); }
|
||
.avatar-lg { width: 64px; height: 64px; font-size: var(--text-lg); }
|
||
.avatar-xl { width: 96px; height: 96px; font-size: var(--text-2xl); }
|
||
.avatar-2xl { width: 128px; height: 128px; font-size: var(--text-3xl); }
|
||
|
||
/* Hunde-Avatar mit Rahmen in Primärfarbe */
|
||
.avatar-dog {
|
||
border: 3px solid var(--c-primary-light);
|
||
box-shadow: 0 0 0 1px var(--c-primary);
|
||
}
|
||
|
||
/* ------------------------------------------------------------
|
||
6. LISTE (Einstellungen, Menüs)
|
||
------------------------------------------------------------ */
|
||
.list {
|
||
background: var(--c-surface);
|
||
border: 1px solid var(--c-border-light);
|
||
border-radius: var(--radius-lg);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.list-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-3);
|
||
padding: var(--space-4);
|
||
border-bottom: 1px solid var(--c-border-light);
|
||
transition: background var(--transition-fast);
|
||
min-height: 52px;
|
||
}
|
||
.list-item:last-child { border-bottom: none; }
|
||
.list-item.clickable { cursor: pointer; }
|
||
.list-item.clickable:hover { background: var(--c-bg); }
|
||
|
||
.list-item-icon {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: var(--radius-md);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
font-size: 20px;
|
||
}
|
||
|
||
.list-item-content { flex: 1; min-width: 0; }
|
||
.list-item-title { font-weight: var(--weight-medium); }
|
||
.list-item-desc { font-size: var(--text-sm); color: var(--c-text-secondary); }
|
||
|
||
/* ------------------------------------------------------------
|
||
7. TOAST / BENACHRICHTIGUNGEN
|
||
------------------------------------------------------------ */
|
||
.toast-container {
|
||
position: fixed;
|
||
top: calc(var(--safe-top) + var(--space-4));
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
z-index: 1000;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-2);
|
||
pointer-events: none;
|
||
width: calc(100% - var(--space-8));
|
||
max-width: 400px;
|
||
}
|
||
|
||
.toast {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-3);
|
||
padding: var(--space-3) var(--space-4);
|
||
background: var(--c-text);
|
||
color: var(--c-text-inverse);
|
||
border-radius: var(--radius-lg);
|
||
box-shadow: var(--shadow-lg);
|
||
font-size: var(--text-sm);
|
||
font-weight: var(--weight-medium);
|
||
pointer-events: auto;
|
||
animation: toast-in 200ms ease forwards;
|
||
}
|
||
|
||
.toast-success { background: var(--c-success); }
|
||
.toast-danger { background: var(--c-danger); }
|
||
.toast-warning { background: var(--c-warning); color: var(--c-text); }
|
||
.toast-info { background: var(--c-info); }
|
||
|
||
@keyframes toast-in {
|
||
from { opacity: 0; transform: translateY(-8px) scale(0.96); }
|
||
to { opacity: 1; transform: translateY(0) scale(1); }
|
||
}
|
||
@keyframes toast-out {
|
||
from { opacity: 1; transform: translateY(0) scale(1); }
|
||
to { opacity: 0; transform: translateY(-8px) scale(0.96); }
|
||
}
|
||
.toast.removing { animation: toast-out 200ms ease forwards; }
|
||
|
||
/* ------------------------------------------------------------
|
||
8. MODAL
|
||
------------------------------------------------------------ */
|
||
/* Verhindert Body-Scroll wenn Modal offen — kein Layout-Sprung */
|
||
html.modal-open {
|
||
overflow: hidden;
|
||
overscroll-behavior: none;
|
||
}
|
||
|
||
.modal-overlay {
|
||
position: fixed;
|
||
inset: 0;
|
||
background: rgba(42, 31, 20, 0.5);
|
||
z-index: 900;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: center;
|
||
padding: var(--space-4);
|
||
backdrop-filter: blur(2px);
|
||
animation: overlay-in var(--transition-normal) ease;
|
||
touch-action: none;
|
||
overscroll-behavior: none;
|
||
}
|
||
@media (min-width: 768px) {
|
||
.modal-overlay { align-items: center; }
|
||
}
|
||
|
||
.modal {
|
||
background: var(--c-surface);
|
||
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
|
||
border: 2px solid var(--c-primary);
|
||
width: 100%;
|
||
max-width: 480px;
|
||
max-height: 90vh;
|
||
max-height: 90svh;
|
||
overflow: hidden; /* Modal selbst scrollt NICHT */
|
||
display: flex;
|
||
flex-direction: column;
|
||
box-shadow: var(--shadow-xl);
|
||
animation: modal-in var(--transition-slow) cubic-bezier(0.34, 1.56, 0.64, 1);
|
||
}
|
||
@media (min-width: 768px) {
|
||
.modal {
|
||
border-radius: var(--radius-xl);
|
||
animation: overlay-in var(--transition-normal) ease;
|
||
}
|
||
}
|
||
|
||
.modal-handle {
|
||
width: 40px;
|
||
height: 4px;
|
||
background: var(--c-border);
|
||
border-radius: var(--radius-full);
|
||
margin: var(--space-3) auto;
|
||
}
|
||
@media (min-width: 768px) { .modal-handle { display: none; } }
|
||
|
||
.modal-overlay--fullscreen {
|
||
padding: 0;
|
||
}
|
||
.modal-overlay--fullscreen .modal {
|
||
width: 100%;
|
||
max-width: 100%;
|
||
height: 100%;
|
||
max-height: 100%;
|
||
border-radius: 0;
|
||
border: none;
|
||
}
|
||
.modal-overlay--fullscreen .modal-handle { display: none; }
|
||
|
||
.ausweis-frame {
|
||
width: 100%;
|
||
height: 100%;
|
||
border: none;
|
||
flex: 1 1 auto;
|
||
}
|
||
|
||
.modal-header {
|
||
padding: var(--space-4) var(--space-6);
|
||
border-bottom: 1px solid var(--c-border-light);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content:space-between;
|
||
}
|
||
.modal-title {
|
||
font-size: var(--text-lg);
|
||
font-weight: var(--weight-semibold);
|
||
}
|
||
.modal-body {
|
||
padding: var(--space-6);
|
||
overflow-y: auto;
|
||
flex: 1;
|
||
overscroll-behavior: contain;
|
||
-webkit-overflow-scrolling: touch;
|
||
scrollbar-width: thin;
|
||
scrollbar-color: var(--c-primary) var(--c-surface);
|
||
}
|
||
.modal-body::-webkit-scrollbar { width: 6px; }
|
||
.modal-body::-webkit-scrollbar-track { background: var(--c-surface); }
|
||
.modal-body::-webkit-scrollbar-thumb {
|
||
background: var(--c-primary);
|
||
border-radius: var(--radius-full);
|
||
}
|
||
.modal-body::-webkit-scrollbar-thumb:hover { background: var(--c-primary-dark); }
|
||
.modal-footer {
|
||
padding: var(--space-4) var(--space-6);
|
||
border-top: 1px solid var(--c-border-light);
|
||
display: flex;
|
||
gap: var(--space-3);
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
@keyframes overlay-in {
|
||
from { opacity: 0; }
|
||
to { opacity: 1; }
|
||
}
|
||
@keyframes modal-in {
|
||
from { transform: translateY(100%); }
|
||
to { transform: translateY(0); }
|
||
}
|
||
|
||
/* ------------------------------------------------------------
|
||
9. LADEINDIKATOR
|
||
------------------------------------------------------------ */
|
||
.spinner {
|
||
width: 24px;
|
||
height: 24px;
|
||
border: 2.5px solid var(--c-border);
|
||
border-top-color: var(--c-primary);
|
||
border-radius: var(--radius-full);
|
||
animation: spin 0.7s linear infinite;
|
||
flex-shrink: 0;
|
||
}
|
||
.spinner-sm { width: 16px; height: 16px; border-width: 2px; }
|
||
.spinner-lg { width: 36px; height: 36px; border-width: 3px; }
|
||
|
||
@keyframes spin {
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
|
||
.loading-overlay {
|
||
position: absolute;
|
||
inset: 0;
|
||
background: rgba(250, 247, 242, 0.7);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 10;
|
||
border-radius: inherit;
|
||
}
|
||
|
||
/* ------------------------------------------------------------
|
||
10. LEERER ZUSTAND (Empty State)
|
||
------------------------------------------------------------ */
|
||
.empty-state {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
text-align: center;
|
||
padding: var(--space-12) var(--space-8);
|
||
gap: var(--space-4);
|
||
}
|
||
.empty-state-icon {
|
||
font-size: 48px;
|
||
line-height: 1;
|
||
margin-bottom: var(--space-2);
|
||
}
|
||
.empty-state-title {
|
||
font-size: var(--text-lg);
|
||
font-weight: var(--weight-semibold);
|
||
color: var(--c-text);
|
||
}
|
||
.empty-state-text {
|
||
font-size: var(--text-sm);
|
||
color: var(--c-text-secondary);
|
||
max-width: 280px;
|
||
line-height: var(--leading-relaxed);
|
||
}
|
||
|
||
/* ------------------------------------------------------------
|
||
11. FOTO-UPLOAD
|
||
------------------------------------------------------------ */
|
||
.photo-upload {
|
||
position: relative;
|
||
border: 2px dashed var(--c-border);
|
||
border-radius: var(--radius-lg);
|
||
background: var(--c-bg);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content:center;
|
||
gap: var(--space-2);
|
||
padding: var(--space-8);
|
||
cursor: pointer;
|
||
transition: border-color var(--transition-fast),
|
||
background var(--transition-fast);
|
||
min-height: 140px;
|
||
}
|
||
.photo-upload:hover {
|
||
border-color: var(--c-primary);
|
||
background: var(--c-primary-subtle);
|
||
}
|
||
.photo-upload input[type="file"] {
|
||
position: absolute;
|
||
inset: 0;
|
||
opacity: 0;
|
||
cursor: pointer;
|
||
}
|
||
.photo-upload-icon { font-size: 32px; color: var(--c-text-muted); }
|
||
.photo-upload-text { font-size: var(--text-sm); color: var(--c-text-secondary); }
|
||
.photo-upload-hint { font-size: var(--text-xs); color: var(--c-text-muted); }
|
||
|
||
/* Vorschau nach Upload */
|
||
.photo-preview {
|
||
position: relative;
|
||
border-radius: var(--radius-lg);
|
||
overflow: hidden;
|
||
}
|
||
.photo-preview img { width: 100%; object-fit: cover; }
|
||
.photo-preview-remove {
|
||
position: absolute;
|
||
top: var(--space-2);
|
||
right: var(--space-2);
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: var(--radius-full);
|
||
background: rgba(42, 31, 20, 0.6);
|
||
color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
font-size: 16px;
|
||
}
|
||
|
||
/* ------------------------------------------------------------
|
||
12. TRENNLINIEN & ABSCHNITTE
|
||
------------------------------------------------------------ */
|
||
.divider {
|
||
height: 1px;
|
||
background: var(--c-border-light);
|
||
margin: var(--space-4) 0;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: var(--text-xs);
|
||
font-weight: var(--weight-semibold);
|
||
color: var(--c-text-muted);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
padding: var(--space-4) var(--space-4) var(--space-2);
|
||
}
|
||
|
||
/* ------------------------------------------------------------
|
||
13. FAB — Floating Action Button (der + Button)
|
||
------------------------------------------------------------ */
|
||
.fab {
|
||
position: fixed;
|
||
z-index: 200;
|
||
width: 56px;
|
||
height: 56px;
|
||
border-radius: var(--radius-full);
|
||
background: var(--c-primary);
|
||
color: #fff;
|
||
box-shadow: var(--shadow-lg);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 28px;
|
||
cursor: pointer;
|
||
transition: transform var(--transition-fast),
|
||
box-shadow var(--transition-fast);
|
||
-webkit-tap-highlight-color: transparent;
|
||
|
||
/* Mobile: über der Bottom-Nav zentriert */
|
||
bottom: calc(var(--nav-bottom-height) + var(--safe-bottom) + var(--space-4));
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
.fab:hover {
|
||
transform: translateX(-50%) scale(1.05);
|
||
box-shadow: var(--shadow-xl);
|
||
}
|
||
.fab:active {
|
||
transform: translateX(-50%) scale(0.95);
|
||
}
|
||
|
||
/* Desktop: FAB positioniert sich neu */
|
||
@media (min-width: 768px) {
|
||
.fab {
|
||
bottom: var(--space-8);
|
||
left: auto;
|
||
right: var(--space-8);
|
||
transform: none;
|
||
}
|
||
.fab:hover { transform: scale(1.05); }
|
||
.fab:active { transform: scale(0.95); }
|
||
}
|
||
|
||
/* ------------------------------------------------------------
|
||
12. TAGEBUCH — Day One Style
|
||
------------------------------------------------------------ */
|
||
|
||
/* Stats-Leiste */
|
||
.diary-stats-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 0;
|
||
padding: 8px 12px;
|
||
border-bottom: 1px solid var(--c-divider, var(--c-border));
|
||
background: var(--c-surface);
|
||
flex-shrink: 0;
|
||
}
|
||
.diary-stats-numbers {
|
||
display: flex;
|
||
gap: 0;
|
||
overflow-x: auto;
|
||
scrollbar-width: none;
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
.diary-stats-numbers::-webkit-scrollbar { display: none; }
|
||
.diary-stat {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
min-width: 0;
|
||
padding: 0 8px;
|
||
border-right: 1px solid var(--c-border);
|
||
}
|
||
.diary-stat:last-child { border-right: none; }
|
||
.diary-stat-num {
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
color: var(--c-text);
|
||
line-height: 1.2;
|
||
white-space: nowrap;
|
||
}
|
||
.diary-stat-label {
|
||
font-size: 9px;
|
||
color: var(--c-text-muted);
|
||
margin-top: 2px;
|
||
white-space: nowrap;
|
||
text-transform: uppercase;
|
||
letter-spacing: .04em;
|
||
}
|
||
|
||
/* View-Switcher */
|
||
.diary-view-switcher {
|
||
display: flex;
|
||
gap: 0;
|
||
flex-shrink: 0;
|
||
margin-left: 8px;
|
||
}
|
||
.diary-view-btn {
|
||
background: none;
|
||
border: none;
|
||
cursor: pointer;
|
||
padding: 5px 6px;
|
||
border-radius: 8px;
|
||
color: var(--c-text-secondary);
|
||
display: flex;
|
||
align-items: center;
|
||
transition: background .15s, color .15s;
|
||
}
|
||
.diary-view-btn:hover { background: var(--c-surface-2); color: var(--c-text); }
|
||
.diary-view-btn.active { color: var(--c-primary); background: var(--c-primary-subtle); }
|
||
.diary-view-btn .ph-icon { width: 18px; height: 18px; }
|
||
@media (min-width: 640px) {
|
||
.diary-stat { padding: 0 12px; }
|
||
.diary-stat-num { font-size: 20px; }
|
||
.diary-view-btn { padding: 6px 8px; }
|
||
.diary-view-btn .ph-icon { width: 20px; height: 20px; }
|
||
}
|
||
|
||
/* Meta-Zeile in der Karte */
|
||
.diary-meta-loc {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 2px;
|
||
max-width: 140px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.diary-meta-dot { color: var(--c-text-muted); opacity: .5; }
|
||
|
||
/* Medien-Mosaic */
|
||
.diary-media-mosaic {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 2px;
|
||
padding: 2px;
|
||
}
|
||
.diary-mosaic-item {
|
||
aspect-ratio: 1;
|
||
overflow: hidden;
|
||
cursor: pointer;
|
||
position: relative;
|
||
}
|
||
.diary-mosaic-item img {
|
||
width: 100%; height: 100%;
|
||
object-fit: cover;
|
||
display: block;
|
||
transition: opacity .2s;
|
||
}
|
||
.diary-mosaic-item:hover img { opacity: .85; }
|
||
|
||
/* Kalender-Ansicht */
|
||
.diary-calendar { padding: 0 0 80px; }
|
||
.diary-cal-nav {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 16px 16px 8px;
|
||
}
|
||
.diary-cal-nav button {
|
||
background: none; border: none; cursor: pointer;
|
||
padding: 6px; border-radius: 8px; color: var(--c-text-muted);
|
||
display: flex; align-items: center;
|
||
}
|
||
.diary-cal-nav button:hover { background: var(--c-surface-2); }
|
||
.diary-cal-nav button .ph-icon { width: 20px; height: 20px; }
|
||
.diary-cal-month { font-size: 16px; font-weight: 600; color: var(--c-text); }
|
||
.diary-cal-weekdays {
|
||
display: grid;
|
||
grid-template-columns: repeat(7, 1fr);
|
||
padding: 0 8px 4px;
|
||
text-align: center;
|
||
font-size: 11px;
|
||
color: var(--c-text-muted);
|
||
font-weight: 500;
|
||
}
|
||
.diary-cal-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(7, 1fr);
|
||
gap: 3px;
|
||
padding: 0 8px;
|
||
}
|
||
.diary-cal-cell {
|
||
aspect-ratio: 1;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 3px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
font-size: 13px;
|
||
color: var(--c-text-secondary);
|
||
}
|
||
.diary-cal-cell.has-entry {
|
||
cursor: pointer;
|
||
color: var(--c-text);
|
||
font-weight: 600;
|
||
}
|
||
.diary-cal-cell.has-entry:active { opacity: .7; }
|
||
/* Oranger Punkt unter der Tageszahl — sichtbar auch ohne Foto */
|
||
.diary-cal-cell.has-entry::after {
|
||
content: '';
|
||
display: block;
|
||
width: 5px;
|
||
height: 5px;
|
||
border-radius: 50%;
|
||
background: var(--c-primary);
|
||
flex-shrink: 0;
|
||
}
|
||
/* Foto als Hintergrund */
|
||
.diary-cal-cell.has-entry img {
|
||
position: absolute; inset: 0;
|
||
width: 100%; height: 100%;
|
||
object-fit: cover;
|
||
opacity: .4;
|
||
border-radius: 8px;
|
||
}
|
||
.diary-cal-cell.has-entry:hover img,
|
||
.diary-cal-cell.has-entry:active img { opacity: .6; }
|
||
/* Punkt ausblenden wenn Foto vorhanden (Foto reicht als Indikator) */
|
||
.diary-cal-cell.has-entry:has(img)::after { display: none; }
|
||
.diary-cal-cell.today .diary-cal-day {
|
||
background: var(--c-primary);
|
||
color: var(--c-text-inverse);
|
||
border-radius: 50%;
|
||
width: 26px; height: 26px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-weight: 700;
|
||
}
|
||
.diary-cal-day { position: relative; z-index: 1; font-size: 13px; }
|
||
|
||
/* Monats-Section */
|
||
.diary-month-header {
|
||
font-size: 22px;
|
||
font-weight: 700;
|
||
color: var(--c-text);
|
||
padding: 12px 16px;
|
||
background: var(--c-surface-2, #f5f5f5);
|
||
margin: 0;
|
||
border-top: 1px solid var(--c-border);
|
||
border-bottom: none;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
.diary-month-header:first-child {
|
||
border-top: none;
|
||
margin-top: 0;
|
||
}
|
||
@media (prefers-color-scheme: dark) {
|
||
.diary-month-header { background: var(--c-surface-2); }
|
||
}
|
||
[data-theme="dark"] .diary-month-header { background: var(--c-surface-2); }
|
||
|
||
/* Monats-Eintrags-Container (umschließt alle Karten einer Section) */
|
||
.diary-month-entries {
|
||
background: var(--c-surface);
|
||
border-bottom: 1px solid var(--c-border);
|
||
}
|
||
|
||
/* Eintragskarte — Day One Row-Style */
|
||
.diary-card {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 12px;
|
||
padding: 14px 16px;
|
||
background: transparent;
|
||
border: none;
|
||
border-bottom: 1px solid var(--c-divider, var(--c-border));
|
||
border-radius: 0;
|
||
margin-bottom: 0;
|
||
overflow: visible;
|
||
cursor: pointer;
|
||
transition: background var(--transition-fast);
|
||
box-shadow: none;
|
||
-webkit-tap-highlight-color: transparent;
|
||
}
|
||
.diary-card:last-child {
|
||
border-bottom: none;
|
||
}
|
||
.diary-card:hover {
|
||
background: rgba(0,0,0,0.025);
|
||
box-shadow: none;
|
||
transform: none;
|
||
}
|
||
.diary-card:active {
|
||
background: rgba(0,0,0,0.05);
|
||
transform: none;
|
||
}
|
||
[data-theme="dark"] .diary-card:hover { background: rgba(255,255,255,0.04); }
|
||
[data-theme="dark"] .diary-card:active { background: rgba(255,255,255,0.07); }
|
||
|
||
/* Datum-Spalte links */
|
||
.diary-card-date-col {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
width: 44px;
|
||
flex-shrink: 0;
|
||
padding-top: 1px;
|
||
}
|
||
.diary-card-weekday {
|
||
font-size: 10px;
|
||
font-weight: 600;
|
||
color: var(--c-text-muted);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
line-height: 1;
|
||
margin-bottom: 2px;
|
||
}
|
||
.diary-card-daynum {
|
||
font-size: 28px;
|
||
font-weight: 700;
|
||
color: var(--c-text);
|
||
line-height: 1;
|
||
}
|
||
|
||
/* Meilenstein-Icon auf der Datum-Spalte */
|
||
.diary-card-date-col .diary-milestone-icon {
|
||
font-size: 14px;
|
||
color: #c4a000;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
/* Meilenstein-Hervorhebung */
|
||
.diary-card--milestone {
|
||
background: color-mix(in srgb, #d4a017 4%, transparent);
|
||
}
|
||
.diary-card--milestone .diary-card-daynum {
|
||
color: #b8860b;
|
||
}
|
||
|
||
/* Meilenstein-Badge innerhalb der Karte */
|
||
.diary-card-milestone-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
background: color-mix(in srgb, #d4a017 15%, transparent);
|
||
color: #8a6400;
|
||
font-weight: 600;
|
||
font-size: var(--text-xs);
|
||
padding: 2px var(--space-2);
|
||
border-radius: var(--radius-full);
|
||
margin-bottom: 4px;
|
||
letter-spacing: 0.03em;
|
||
}
|
||
|
||
/* Foto / Thumbnail rechts — 72×72px */
|
||
.diary-card-photo {
|
||
width: 72px;
|
||
height: 72px;
|
||
flex-shrink: 0;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
position: relative;
|
||
margin-top: 2px;
|
||
}
|
||
.diary-card-photo img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
display: block;
|
||
}
|
||
.diary-media-picker {
|
||
display: flex;
|
||
gap: var(--space-2);
|
||
margin-top: var(--space-1);
|
||
}
|
||
.diary-media-pick-btn {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: var(--space-1);
|
||
padding: var(--space-3) var(--space-2);
|
||
border: 1.5px solid var(--c-border);
|
||
border-radius: var(--radius-md);
|
||
background: var(--c-surface);
|
||
color: var(--c-text-secondary);
|
||
font-size: var(--text-sm);
|
||
cursor: pointer;
|
||
transition: border-color var(--transition-fast), color var(--transition-fast);
|
||
}
|
||
.diary-media-pick-btn:hover,
|
||
.diary-media-pick-btn:active {
|
||
border-color: var(--c-primary);
|
||
color: var(--c-primary);
|
||
}
|
||
.diary-media-pick-btn .ph-icon { font-size: 1.5rem; }
|
||
|
||
/* Multi-Medien: Formular-Grid (Thumbnails beim Erstellen/Bearbeiten) */
|
||
.diary-media-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
|
||
gap: var(--space-2);
|
||
margin-bottom: var(--space-2);
|
||
}
|
||
.diary-media-thumb-wrap {
|
||
position: relative;
|
||
aspect-ratio: 1;
|
||
border-radius: var(--radius-md);
|
||
overflow: hidden;
|
||
background: var(--c-surface-2);
|
||
}
|
||
.diary-media-thumb {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
display: block;
|
||
}
|
||
.diary-media-thumb-del {
|
||
position: absolute;
|
||
top: var(--space-1);
|
||
right: var(--space-1);
|
||
width: 24px;
|
||
height: 24px;
|
||
border-radius: 50%;
|
||
border: none;
|
||
background: rgba(0,0,0,.55);
|
||
color: #fff;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0;
|
||
line-height: 1;
|
||
}
|
||
.diary-media-thumb-del .ph-icon { font-size: .9rem; }
|
||
|
||
/* Medien-Zähler-Badge auf der Karte */
|
||
.diary-card-photo { position: relative; }
|
||
.diary-card-media-count {
|
||
position: absolute;
|
||
bottom: var(--space-1);
|
||
right: var(--space-1);
|
||
background: rgba(0,0,0,.55);
|
||
color: #fff;
|
||
font-size: var(--text-xs);
|
||
font-weight: var(--weight-semibold);
|
||
padding: 2px 6px;
|
||
border-radius: 12px;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* Detail-Ansicht: horizontale Scroll-Galerie */
|
||
.diary-gallery {
|
||
display: flex;
|
||
gap: var(--space-2);
|
||
overflow-x: auto;
|
||
-webkit-overflow-scrolling: touch;
|
||
scroll-snap-type: x mandatory;
|
||
border-radius: var(--radius-md);
|
||
}
|
||
.diary-gallery-item {
|
||
flex: 0 0 auto;
|
||
width: min(80vw, 320px);
|
||
max-height: 260px;
|
||
object-fit: cover;
|
||
border-radius: var(--radius-md);
|
||
scroll-snap-align: start;
|
||
display: block;
|
||
}
|
||
|
||
.diary-card-video-thumb {
|
||
width: 100%;
|
||
height: 100%;
|
||
background: var(--c-surface-2);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: var(--c-primary);
|
||
font-size: 3rem;
|
||
}
|
||
|
||
/* Cover-Stern-Button auf Gallery- und Thumbnail-Items */
|
||
.diary-gallery-wrap {
|
||
position: relative;
|
||
display: inline-block;
|
||
}
|
||
.diary-cover-btn {
|
||
position: absolute;
|
||
bottom: var(--space-1);
|
||
left: var(--space-1);
|
||
width: 28px;
|
||
height: 28px;
|
||
border-radius: 50%;
|
||
border: none;
|
||
background: rgba(0,0,0,.50);
|
||
color: rgba(255,255,255,.55);
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0;
|
||
line-height: 1;
|
||
z-index: 2;
|
||
transition: color .15s, background .15s;
|
||
}
|
||
.diary-cover-btn--active {
|
||
color: var(--c-amber);
|
||
background: rgba(0,0,0,.65);
|
||
}
|
||
.diary-cover-btn--form {
|
||
bottom: var(--space-1);
|
||
left: var(--space-1);
|
||
}
|
||
|
||
/* Card Body — mittlere Spalte */
|
||
.diary-card-body {
|
||
flex: 1;
|
||
min-width: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
/* Titel in Karte */
|
||
.diary-card-title {
|
||
font-size: 15px;
|
||
font-weight: 700;
|
||
color: var(--c-text);
|
||
margin: 0 0 3px;
|
||
line-height: 1.3;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* Meta-Zeile: nur noch für Compat — im neuen Design nicht als flex-row genutzt */
|
||
.diary-card-meta {
|
||
display: none;
|
||
}
|
||
.diary-card-type { display: none; }
|
||
.diary-card-date { display: none; }
|
||
|
||
/* Ort-Zeile in Karte */
|
||
.diary-card-location {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
font-size: 12px;
|
||
color: var(--c-text-muted);
|
||
margin: 0 0 2px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.diary-card-location .ph-icon { flex-shrink: 0; width: 12px; height: 12px; }
|
||
|
||
/* Ort in Detail-Ansicht */
|
||
.diary-detail-location {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
font-size: var(--text-sm);
|
||
color: var(--c-primary);
|
||
margin-bottom: var(--space-3);
|
||
}
|
||
|
||
/* Koordinaten-Zeile im Formular */
|
||
.diary-coords-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
padding: var(--space-2) var(--space-3);
|
||
background: var(--c-surface-2);
|
||
border-radius: var(--radius-md);
|
||
font-size: var(--text-sm);
|
||
color: var(--c-text-secondary);
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.diary-coords-row .ph-icon { flex-shrink: 0; }
|
||
|
||
/* Location-Chip im Formular */
|
||
.diary-location-chip {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
padding: var(--space-2) var(--space-3);
|
||
background: color-mix(in srgb, var(--c-primary) 10%, transparent);
|
||
border: 1.5px solid var(--c-primary);
|
||
border-radius: var(--radius-full);
|
||
font-size: var(--text-sm);
|
||
color: var(--c-primary-dark);
|
||
}
|
||
.diary-location-chip span { flex: 1; }
|
||
.diary-location-chip button {
|
||
background: none; border: none; padding: 0; cursor: pointer;
|
||
color: var(--c-primary); display: flex;
|
||
}
|
||
|
||
/* Vorschlagsliste */
|
||
.diary-location-suggestion {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
width: 100%;
|
||
padding: var(--space-2) var(--space-3);
|
||
background: var(--c-surface);
|
||
border: 1px solid var(--c-border-light);
|
||
border-radius: var(--radius-md);
|
||
margin-bottom: var(--space-1);
|
||
cursor: pointer;
|
||
text-align: left;
|
||
font-size: var(--text-sm);
|
||
color: var(--c-text);
|
||
}
|
||
.diary-location-suggestion span { flex: 1; }
|
||
.diary-location-suggestion small { color: var(--c-text-muted); flex-shrink: 0; }
|
||
.diary-location-suggestion:hover { border-color: var(--c-primary); color: var(--c-primary); }
|
||
|
||
/* Text-Vorschau */
|
||
.diary-card-text {
|
||
font-size: 13px;
|
||
color: var(--c-text-secondary);
|
||
line-height: 1.45;
|
||
margin: 0 0 4px;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* Tags */
|
||
.diary-card-tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--space-1);
|
||
margin-top: var(--space-1);
|
||
}
|
||
|
||
/* Meta-Zeile unten in der Karte: Zeit · Ort · Wetter */
|
||
.diary-card-meta-row {
|
||
font-size: 12px;
|
||
color: var(--c-text-muted);
|
||
line-height: 1.4;
|
||
margin-top: 4px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
/* Wetter-Badge in Karten-Meta */
|
||
.diary-weather-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 2px;
|
||
font-size: var(--text-xs);
|
||
color: var(--c-text-secondary);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* FAB — Floating Action Button */
|
||
.diary-fab {
|
||
position: fixed;
|
||
bottom: calc(var(--nav-bottom-height, 64px) + env(safe-area-inset-bottom, 0px) + 16px);
|
||
right: 20px;
|
||
width: 56px;
|
||
height: 56px;
|
||
border-radius: 50%;
|
||
background: var(--c-primary);
|
||
color: #fff;
|
||
border: none;
|
||
cursor: pointer;
|
||
box-shadow: 0 4px 16px rgba(196,132,58,.4);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 100;
|
||
transition: transform .15s, box-shadow .15s;
|
||
-webkit-tap-highlight-color: transparent;
|
||
}
|
||
.diary-fab:hover { transform: scale(1.06); box-shadow: 0 6px 20px rgba(196,132,58,.5); }
|
||
.diary-fab:active { transform: scale(0.94); }
|
||
|
||
/* POI-Chips in Karte und Detail */
|
||
.diary-poi-chips,
|
||
.diary-detail-poi-chips {
|
||
font-size: var(--text-xs);
|
||
color: var(--c-text-muted);
|
||
line-height: 1.5;
|
||
margin: var(--space-1) 0 var(--space-1);
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
/* Detail-Ansicht */
|
||
.diary-detail-milestone-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: var(--space-1);
|
||
background: color-mix(in srgb, var(--c-primary) 12%, transparent);
|
||
color: var(--c-primary-dark);
|
||
font-weight: var(--weight-semibold);
|
||
font-size: var(--text-sm);
|
||
padding: var(--space-1) var(--space-3);
|
||
border-radius: var(--radius-full);
|
||
margin-bottom: var(--space-3);
|
||
}
|
||
|
||
/* Detail-View: Hero-Bild */
|
||
.diary-detail-hero {
|
||
width: 100%;
|
||
max-height: 80vh;
|
||
background: #000;
|
||
flex-shrink: 0;
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
overflow: hidden;
|
||
}
|
||
@media (min-width: 768px) {
|
||
.diary-detail-hero {
|
||
max-width: 1100px;
|
||
margin: 0 auto;
|
||
border-radius: 0 0 12px 12px;
|
||
max-height: 60vh;
|
||
}
|
||
}
|
||
@media (min-width: 1200px) {
|
||
.diary-detail-hero { max-width: 1300px; }
|
||
}
|
||
.diary-detail-hero img {
|
||
width: 100%;
|
||
height: auto;
|
||
max-height: 80vh;
|
||
object-fit: contain;
|
||
display: block;
|
||
cursor: zoom-in;
|
||
}
|
||
.diary-detail-hero video {
|
||
width: 100%;
|
||
height: auto;
|
||
max-height: 80vh;
|
||
object-fit: contain;
|
||
display: block;
|
||
background: #000;
|
||
}
|
||
|
||
/* Detail-View: inline im Content-Bereich (kein Overlay mehr) */
|
||
.diary-detail-view-inner {
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: calc(100vh - 120px);
|
||
background: var(--c-bg);
|
||
}
|
||
|
||
/* Detail-View: Header-Bar */
|
||
.diary-detail-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 12px 16px;
|
||
background: var(--c-surface);
|
||
border-bottom: 1px solid var(--c-border);
|
||
flex-shrink: 0;
|
||
min-height: 48px;
|
||
}
|
||
.diary-detail-back {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
background: none;
|
||
border: none;
|
||
color: var(--c-primary);
|
||
font-size: 16px;
|
||
cursor: pointer;
|
||
padding: 4px 0;
|
||
font-weight: 500;
|
||
}
|
||
.diary-detail-date-center {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: var(--c-text);
|
||
text-align: center;
|
||
flex: 1;
|
||
padding: 0 8px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.diary-detail-edit {
|
||
background: none;
|
||
border: none;
|
||
color: var(--c-primary);
|
||
cursor: pointer;
|
||
padding: 4px 0;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* Detail-View: Body-Wrapper (text links, Karte rechts auf Desktop) */
|
||
.diary-detail-body-wrap {
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex: 1;
|
||
width: 100%;
|
||
}
|
||
@media (min-width: 768px) {
|
||
.diary-detail-body-wrap {
|
||
flex-direction: row;
|
||
align-items: flex-start;
|
||
max-width: 1100px;
|
||
margin: 0 auto;
|
||
padding: 0 24px;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
@media (min-width: 1200px) {
|
||
.diary-detail-body-wrap { max-width: 1300px; }
|
||
}
|
||
|
||
/* Detail-View: Inhalt */
|
||
.diary-detail-content {
|
||
padding: 24px 24px 60px;
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
@media (max-width: 767px) {
|
||
.diary-detail-content { padding: 20px 16px 40px; }
|
||
}
|
||
|
||
/* Detail-View: Karte + POI-Sektion */
|
||
.diary-detail-map-wrap {
|
||
padding: 16px 16px 40px;
|
||
flex-shrink: 0;
|
||
width: 100%;
|
||
}
|
||
@media (min-width: 768px) {
|
||
.diary-detail-map-wrap {
|
||
width: 380px;
|
||
min-width: 300px;
|
||
max-width: 420px;
|
||
flex-shrink: 0;
|
||
padding: 24px 0 40px 32px;
|
||
position: sticky;
|
||
top: 60px;
|
||
align-self: flex-start;
|
||
}
|
||
}
|
||
.diary-detail-map {
|
||
width: 100%;
|
||
height: 200px;
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
border: 1px solid var(--c-border);
|
||
margin-bottom: 12px;
|
||
}
|
||
@media (min-width: 768px) {
|
||
.diary-detail-map { height: 280px; }
|
||
}
|
||
|
||
/* POI-Liste */
|
||
.diary-detail-poi-list {
|
||
background: var(--c-surface);
|
||
border: 1px solid var(--c-border);
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
}
|
||
.diary-detail-poi-heading {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: .06em;
|
||
color: var(--c-text-muted);
|
||
padding: 10px 14px 8px;
|
||
border-bottom: 1px solid var(--c-border);
|
||
}
|
||
.diary-detail-poi-heading .ph-icon { width:14px;height:14px; }
|
||
.diary-detail-poi-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 9px 14px;
|
||
border-bottom: 1px solid var(--c-border);
|
||
font-size: 13px;
|
||
}
|
||
.diary-detail-poi-row:last-child { border-bottom: none; }
|
||
.diary-detail-poi-icon { width:16px;height:16px;color:var(--c-primary);flex-shrink:0; }
|
||
.diary-detail-poi-name { flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--c-text); }
|
||
.diary-detail-poi-dist { font-size:12px;color:var(--c-text-muted);flex-shrink:0; }
|
||
.diary-detail-title {
|
||
font-size: 22px;
|
||
font-weight: 700;
|
||
color: var(--c-text);
|
||
margin: 0 0 16px;
|
||
line-height: 1.3;
|
||
}
|
||
.diary-detail-body {
|
||
font-size: 16px;
|
||
line-height: 1.7;
|
||
color: var(--c-text);
|
||
white-space: pre-wrap;
|
||
margin: 0 0 20px;
|
||
}
|
||
.diary-detail-divider {
|
||
border: none;
|
||
border-top: 1px solid var(--c-border);
|
||
margin: 20px 0;
|
||
}
|
||
|
||
/* Detail-View: Meta-Bar unten */
|
||
.diary-detail-meta-bar {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px 16px;
|
||
font-size: 13px;
|
||
color: var(--c-text-muted);
|
||
margin-bottom: 16px;
|
||
align-items: center;
|
||
}
|
||
.diary-detail-meta-bar .ph-icon {
|
||
width: 14px;
|
||
height: 14px;
|
||
flex-shrink: 0;
|
||
}
|
||
.diary-detail-meta-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
}
|
||
|
||
/* Detail-View: Thumbnail-Strip */
|
||
.diary-detail-thumbs {
|
||
display: flex;
|
||
gap: 4px;
|
||
padding: 6px 16px;
|
||
overflow-x: auto;
|
||
background: rgba(0,0,0,.6);
|
||
flex-shrink: 0;
|
||
-webkit-overflow-scrolling: touch;
|
||
scrollbar-width: none;
|
||
}
|
||
@media (min-width: 768px) {
|
||
.diary-detail-thumbs {
|
||
max-width: 1100px;
|
||
margin: 0 auto;
|
||
border-radius: 0 0 8px 8px;
|
||
padding-left: 16px;
|
||
padding-right: 16px;
|
||
background: rgba(0,0,0,.75);
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
@media (min-width: 1200px) {
|
||
.diary-detail-thumbs { max-width: 1300px; }
|
||
}
|
||
.diary-detail-thumbs::-webkit-scrollbar { display: none; }
|
||
.diary-detail-thumb {
|
||
flex-shrink: 0;
|
||
width: 56px;
|
||
height: 56px;
|
||
border-radius: 6px;
|
||
overflow: hidden;
|
||
cursor: pointer;
|
||
border: 2px solid transparent;
|
||
box-sizing: border-box;
|
||
transition: border-color .15s, opacity .15s;
|
||
opacity: .7;
|
||
}
|
||
.diary-detail-thumb:hover { opacity: 1; }
|
||
.diary-detail-thumb--active {
|
||
border-color: var(--c-primary);
|
||
opacity: 1;
|
||
}
|
||
@media (min-width: 768px) {
|
||
.diary-detail-thumb { width: 72px; height: 72px; }
|
||
}
|
||
|
||
/* Detail-View: Foto-Galerie horizontal */
|
||
.diary-detail-gallery {
|
||
display: flex;
|
||
gap: 8px;
|
||
overflow-x: auto;
|
||
-webkit-overflow-scrolling: touch;
|
||
scroll-snap-type: x mandatory;
|
||
margin: 0 -20px 20px;
|
||
padding: 0 20px;
|
||
scrollbar-width: none;
|
||
}
|
||
.diary-detail-gallery::-webkit-scrollbar { display: none; }
|
||
.diary-detail-gallery-item {
|
||
flex: 0 0 auto;
|
||
width: min(75vw, 280px);
|
||
height: 200px;
|
||
border-radius: var(--radius-md);
|
||
overflow: hidden;
|
||
scroll-snap-align: start;
|
||
cursor: zoom-in;
|
||
}
|
||
.diary-detail-gallery-item img,
|
||
.diary-detail-gallery-item video {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
display: block;
|
||
}
|
||
|
||
/* Leaflet-Attribution ausblenden */
|
||
.leaflet-control-attribution { display: none !important; }
|
||
|
||
/* ============================================================
|
||
GESUNDHEIT
|
||
============================================================ */
|
||
|
||
/* .health-header → by-toolbar with flex-end override */
|
||
.health-header { justify-content: flex-end; padding: var(--space-3) 0 var(--space-2); background: none; border-bottom: none; }
|
||
|
||
/* Tab-Leiste — Mobile: horizontal scrollbar, Desktop: umbrechen */
|
||
.health-tabs {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--space-1) var(--space-1);
|
||
padding-bottom: var(--space-2);
|
||
margin-bottom: var(--space-3);
|
||
}
|
||
/* .health-tabs / .health-tab → now use .by-tabs / .by-tab */
|
||
|
||
/* Karten-Liste */
|
||
.health-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-3);
|
||
}
|
||
|
||
/* Einzelne Karte */
|
||
.health-card {
|
||
background: var(--c-surface);
|
||
border: 1px solid var(--c-border);
|
||
border-radius: var(--radius-md);
|
||
padding: var(--space-4);
|
||
cursor: pointer;
|
||
display: flex;
|
||
gap: var(--space-3);
|
||
align-items: flex-start;
|
||
transition: box-shadow var(--transition-fast), transform var(--transition-fast);
|
||
}
|
||
.health-card:active { transform: scale(0.985); }
|
||
.health-card--inactive { opacity: 0.55; }
|
||
|
||
.health-card-body { flex: 1; min-width: 0; }
|
||
.health-card-title { font-weight: var(--weight-semibold); margin-bottom: var(--space-1); }
|
||
.health-card-meta { font-size: var(--text-sm); color: var(--c-text-secondary); }
|
||
.health-card-next { font-size: var(--text-sm); font-weight: var(--weight-medium); margin-top: var(--space-1); }
|
||
.health-card-note { font-size: var(--text-sm); color: var(--c-text-secondary); margin-top: var(--space-1); }
|
||
|
||
/* Ampel-Punkt (links an der Karte) */
|
||
.health-card-ampel {
|
||
width: 10px;
|
||
height: 10px;
|
||
border-radius: 50%;
|
||
flex-shrink: 0;
|
||
margin-top: 5px;
|
||
}
|
||
.ampel-green { background: #22c55e; }
|
||
.ampel-yellow { background: #f59e0b; }
|
||
.ampel-red { background: #ef4444; }
|
||
.ampel-grey { background: var(--c-border); }
|
||
|
||
.ampel-text-green { color: #16a34a; }
|
||
.ampel-text-yellow { color: #d97706; }
|
||
.ampel-text-red { color: #dc2626; }
|
||
|
||
/* .health-group-label → now uses .by-section-label */
|
||
|
||
/* Gewicht-Diagramm-Wrapper */
|
||
.health-chart-wrap {
|
||
background: var(--c-surface);
|
||
border: 1px solid var(--c-border);
|
||
border-radius: var(--radius-md);
|
||
padding: var(--space-4);
|
||
margin-bottom: var(--space-4);
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* Dokument-Thumbnail und Icon */
|
||
.health-doc-thumb {
|
||
width: 56px;
|
||
height: 56px;
|
||
object-fit: cover;
|
||
border-radius: var(--radius-sm);
|
||
flex-shrink: 0;
|
||
}
|
||
.health-doc-icon {
|
||
width: 56px;
|
||
height: 56px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 2rem;
|
||
background: var(--c-surface-2);
|
||
border-radius: var(--radius-sm);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* Health Multi-Media — Upload-Grid im Formular */
|
||
.health-media-grid {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--space-2);
|
||
margin-bottom: var(--space-1);
|
||
}
|
||
.health-media-thumb {
|
||
position: relative;
|
||
width: 72px;
|
||
height: 72px;
|
||
border-radius: var(--radius-md);
|
||
overflow: hidden;
|
||
background: var(--c-surface-2);
|
||
flex-shrink: 0;
|
||
border: 1px solid var(--c-border-light);
|
||
}
|
||
.health-media-thumb img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
display: block;
|
||
}
|
||
.health-media-thumb-pdf {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100%;
|
||
height: 100%;
|
||
gap: var(--space-1);
|
||
font-size: 1.4rem;
|
||
color: var(--c-text-secondary);
|
||
}
|
||
.health-media-thumb-pdf span {
|
||
font-size: var(--text-xs);
|
||
font-weight: var(--weight-semibold);
|
||
}
|
||
.health-media-remove {
|
||
position: absolute;
|
||
top: 2px;
|
||
right: 2px;
|
||
width: 20px;
|
||
height: 20px;
|
||
border-radius: 50%;
|
||
background: rgba(0,0,0,0.55);
|
||
color: #fff;
|
||
border: none;
|
||
font-size: 14px;
|
||
line-height: 1;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0;
|
||
}
|
||
.health-media-thumb--pending {
|
||
opacity: 0.75;
|
||
border-style: dashed;
|
||
}
|
||
.health-media-thumb--pending small {
|
||
position: absolute;
|
||
bottom: 2px;
|
||
left: 2px;
|
||
right: 2px;
|
||
font-size: 9px;
|
||
text-align: center;
|
||
color: var(--c-text-muted);
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
/* Health Media-Galerie in Detail-Modal */
|
||
.health-media-gallery {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--space-2);
|
||
}
|
||
.health-media-gallery-img {
|
||
display: block;
|
||
width: calc(50% - var(--space-1));
|
||
max-width: 160px;
|
||
border-radius: var(--radius-md);
|
||
overflow: hidden;
|
||
flex-shrink: 0;
|
||
}
|
||
.health-media-gallery-img img {
|
||
width: 100%;
|
||
height: 100px;
|
||
object-fit: cover;
|
||
display: block;
|
||
border-radius: var(--radius-md);
|
||
}
|
||
.health-media-gallery-pdf {
|
||
align-self: flex-start;
|
||
}
|
||
|
||
/* Detail-Dialog DL */
|
||
.health-detail-dl {
|
||
display: grid;
|
||
grid-template-columns: auto 1fr;
|
||
gap: var(--space-1) var(--space-4);
|
||
font-size: var(--text-sm);
|
||
}
|
||
.health-detail-dl dt {
|
||
color: var(--c-text-secondary);
|
||
font-weight: var(--weight-medium);
|
||
white-space: nowrap;
|
||
}
|
||
.health-detail-dl dd { margin: 0; }
|
||
|
||
/* ------------------------------------------------------------
|
||
DOG SWITCHER
|
||
Avatar-Leiste in Header (Mobile) + Sidebar-Logo (Desktop)
|
||
------------------------------------------------------------ */
|
||
|
||
/* Aktiver (linker) Hund — primärer Ring */
|
||
.dog-sw-active {
|
||
width: 34px;
|
||
height: 34px;
|
||
border-radius: var(--radius-full);
|
||
overflow: hidden;
|
||
background: var(--c-surface-2);
|
||
flex-shrink: 0;
|
||
cursor: pointer;
|
||
border: 2.5px solid var(--c-primary);
|
||
transition: transform var(--transition-fast),
|
||
box-shadow var(--transition-fast);
|
||
}
|
||
.dog-sw-active:hover {
|
||
transform: scale(1.06);
|
||
box-shadow: 0 0 0 3px var(--c-primary-subtle);
|
||
}
|
||
.dog-sw-active img { width:100%; height:100%; object-fit:cover; display:block; }
|
||
.dog-sw-active span {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100%;
|
||
height: 100%;
|
||
font-size: 17px;
|
||
}
|
||
|
||
/* "Ban Yaro" Label — füllt den Zwischenraum */
|
||
.dog-sw-title {
|
||
flex: 1;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
/* Gruppe der inaktiven Hunde (rechts) */
|
||
.dog-sw-others {
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative; /* Anker für Quickpicker-Dropdown */
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* Inaktiver Hund-Avatar */
|
||
.dog-sw-other {
|
||
width: 28px;
|
||
height: 28px;
|
||
border-radius: var(--radius-full);
|
||
overflow: hidden;
|
||
background: var(--c-surface-2);
|
||
border: 2px solid var(--c-surface);
|
||
cursor: pointer;
|
||
flex-shrink: 0;
|
||
transition: transform var(--transition-fast);
|
||
position: relative;
|
||
}
|
||
.dog-sw-other:hover { transform: scale(1.12); }
|
||
.dog-sw-other img { width:100%; height:100%; object-fit:cover; display:block; }
|
||
.dog-sw-other span {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100%;
|
||
height: 100%;
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* Gestapelter Avatar-Stack (3+ Hunde) */
|
||
.dog-sw-stack {
|
||
display: flex;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
}
|
||
.dog-sw-stack .dog-sw-other { margin-left: -9px; }
|
||
.dog-sw-stack .dog-sw-other:first-child { margin-left: 0; }
|
||
.dog-sw-stack .dog-sw-other--0 { z-index: 3; }
|
||
.dog-sw-stack .dog-sw-other--1 { z-index: 2; }
|
||
.dog-sw-stack .dog-sw-other--2 { z-index: 1; }
|
||
.dog-sw-stack:hover .dog-sw-other { filter: brightness(1.05); }
|
||
|
||
/* +N Überlauf-Badge */
|
||
.dog-sw-more {
|
||
width: 28px;
|
||
height: 28px;
|
||
border-radius: var(--radius-full);
|
||
background: var(--c-surface-2);
|
||
border: 2px solid var(--c-surface);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 9px;
|
||
font-weight: var(--weight-bold);
|
||
color: var(--c-text-secondary);
|
||
margin-left: -9px;
|
||
position: relative;
|
||
z-index: 0;
|
||
}
|
||
|
||
/* Quickpicker-Dropdown */
|
||
.dog-quickpick {
|
||
position: absolute;
|
||
top: calc(100% + 10px);
|
||
right: 0;
|
||
background: var(--c-surface);
|
||
border: 1px solid var(--c-border-light);
|
||
border-radius: var(--radius-lg);
|
||
box-shadow: var(--shadow-lg);
|
||
padding: var(--space-2);
|
||
min-width: 170px;
|
||
z-index: 600;
|
||
}
|
||
.dog-quickpick.hidden { display: none; }
|
||
|
||
.dog-qp-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-3);
|
||
padding: var(--space-2) var(--space-3);
|
||
border-radius: var(--radius-md);
|
||
cursor: pointer;
|
||
font-size: var(--text-sm);
|
||
font-weight: var(--weight-medium);
|
||
color: var(--c-text);
|
||
transition: background var(--transition-fast);
|
||
-webkit-tap-highlight-color: transparent;
|
||
}
|
||
.dog-qp-item:hover { background: var(--c-bg); }
|
||
|
||
.dog-qp-av {
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: var(--radius-full);
|
||
overflow: hidden;
|
||
background: var(--c-surface-2);
|
||
flex-shrink: 0;
|
||
}
|
||
.dog-qp-av img { width:100%; height:100%; object-fit:cover; display:block; }
|
||
.dog-qp-av span {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100%;
|
||
height: 100%;
|
||
font-size: 16px;
|
||
}
|
||
|
||
/* Sidebar: größerer aktiver Avatar */
|
||
#sidebar-dog-switcher .dog-sw-active {
|
||
width: 36px;
|
||
height: 36px;
|
||
}
|
||
|
||
/* ------------------------------------------------------------
|
||
DIARY — Multi-Dog (Hunde-Auswahl im Formular + Karten-Anzeige)
|
||
------------------------------------------------------------ */
|
||
|
||
/* Avatar-Reihe in der Tagebuch-Karte */
|
||
.diary-dog-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: -4px; /* überlappend via margin */
|
||
margin-top: var(--space-2);
|
||
flex-wrap: wrap;
|
||
gap: var(--space-1);
|
||
}
|
||
|
||
.diary-dog-av {
|
||
width: 22px;
|
||
height: 22px;
|
||
border-radius: var(--radius-full);
|
||
overflow: hidden;
|
||
background: var(--c-surface-2);
|
||
border: 1.5px solid var(--c-surface);
|
||
flex-shrink: 0;
|
||
}
|
||
.diary-dog-av img { width:100%; height:100%; object-fit:cover; display:block; }
|
||
.diary-dog-av span {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100%;
|
||
height: 100%;
|
||
font-size: 12px;
|
||
}
|
||
|
||
/* Hunde-Chip in der Detail-Ansicht */
|
||
.diary-detail-dogs {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--space-2);
|
||
margin-bottom: var(--space-3);
|
||
}
|
||
|
||
.diary-dog-chip {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-1);
|
||
padding: 3px 8px 3px 4px;
|
||
background: var(--c-surface-2);
|
||
border-radius: var(--radius-full);
|
||
font-size: var(--text-xs);
|
||
font-weight: var(--weight-medium);
|
||
color: var(--c-text-secondary);
|
||
}
|
||
.diary-dog-chip .diary-dog-av {
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
|
||
/* Hunde-Picker im Formular */
|
||
.diary-dog-picker {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--space-2);
|
||
}
|
||
|
||
.diary-dog-pick-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
padding: var(--space-2) var(--space-3);
|
||
border: 1.5px solid var(--c-border-light);
|
||
border-radius: var(--radius-full);
|
||
cursor: pointer;
|
||
font-size: var(--text-sm);
|
||
font-weight: var(--weight-medium);
|
||
color: var(--c-text-secondary);
|
||
transition: border-color var(--transition-fast),
|
||
background var(--transition-fast),
|
||
color var(--transition-fast);
|
||
-webkit-tap-highlight-color: transparent;
|
||
user-select: none;
|
||
}
|
||
.diary-dog-pick-item input { display: none; }
|
||
|
||
.diary-dog-pick-item .diary-dog-av {
|
||
width: 26px;
|
||
height: 26px;
|
||
}
|
||
|
||
.diary-dog-pick-item:hover {
|
||
border-color: var(--c-primary);
|
||
color: var(--c-text);
|
||
}
|
||
|
||
.diary-dog-pick-item.checked {
|
||
border-color: var(--c-primary);
|
||
background: var(--c-primary-subtle);
|
||
color: var(--c-primary-dark);
|
||
font-weight: var(--weight-semibold);
|
||
}
|
||
|
||
/* ============================================================
|
||
TAGEBUCH — HUNDE-PICKER (Einstiegsseite bei mehreren Hunden)
|
||
============================================================ */
|
||
|
||
.diary-picker-wrap {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: var(--space-8) var(--space-4) var(--space-4);
|
||
gap: var(--space-5);
|
||
}
|
||
|
||
.diary-picker-hint {
|
||
font-size: var(--text-lg);
|
||
font-weight: var(--weight-semibold);
|
||
color: var(--c-text-secondary);
|
||
margin: 0;
|
||
}
|
||
|
||
.diary-picker-grid {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--space-4);
|
||
justify-content: center;
|
||
}
|
||
|
||
.diary-picker-card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
padding: var(--space-4);
|
||
width: 140px;
|
||
background: var(--c-surface);
|
||
border: 2px solid var(--c-border);
|
||
border-radius: var(--radius-lg);
|
||
cursor: pointer;
|
||
transition: transform var(--transition-fast), box-shadow var(--transition-fast),
|
||
border-color var(--transition-fast);
|
||
touch-action: manipulation;
|
||
}
|
||
.diary-picker-card:active {
|
||
transform: scale(0.96);
|
||
}
|
||
.diary-picker-card--active {
|
||
border-color: var(--c-primary);
|
||
box-shadow: 0 0 0 3px var(--c-primary-subtle);
|
||
}
|
||
|
||
.diary-picker-av {
|
||
width: 88px;
|
||
height: 88px;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
background: var(--c-surface-2);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 3px solid var(--c-border);
|
||
}
|
||
.diary-picker-card--active .diary-picker-av {
|
||
border-color: var(--c-primary);
|
||
}
|
||
.diary-picker-av img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.diary-picker-name {
|
||
font-weight: var(--weight-semibold);
|
||
font-size: var(--text-base);
|
||
color: var(--c-text);
|
||
text-align: center;
|
||
}
|
||
.diary-picker-rasse {
|
||
font-size: var(--text-xs);
|
||
color: var(--c-text-secondary);
|
||
text-align: center;
|
||
}
|
||
|
||
/* ============================================================
|
||
ORTE (places.js)
|
||
============================================================ */
|
||
.places-layout {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
}
|
||
.places-toolbar {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-3);
|
||
padding: var(--space-3) var(--space-4);
|
||
background: var(--c-surface);
|
||
border-bottom: 1px solid var(--c-border-light);
|
||
flex-shrink: 0;
|
||
overflow-x: auto;
|
||
scrollbar-width: none;
|
||
}
|
||
.places-toolbar::-webkit-scrollbar { display: none; }
|
||
.places-filter {
|
||
display: flex;
|
||
gap: var(--space-2);
|
||
flex: 1;
|
||
overflow-x: auto;
|
||
scrollbar-width: none;
|
||
}
|
||
.places-filter::-webkit-scrollbar { display: none; }
|
||
.places-filter-btn {
|
||
padding: var(--space-1) var(--space-3);
|
||
border-radius: var(--radius-full);
|
||
border: 1.5px solid var(--c-border);
|
||
background: var(--c-surface);
|
||
color: var(--c-text-secondary);
|
||
font-size: var(--text-sm);
|
||
cursor: pointer;
|
||
white-space: nowrap;
|
||
transition: all 0.15s;
|
||
flex-shrink: 0;
|
||
}
|
||
.places-filter-btn.active {
|
||
background: var(--c-primary);
|
||
border-color: var(--c-primary);
|
||
color: #fff;
|
||
}
|
||
.places-map {
|
||
height: 42%;
|
||
flex-shrink: 0;
|
||
min-height: 180px;
|
||
}
|
||
.places-list {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
scrollbar-width: thin;
|
||
scrollbar-color: var(--c-primary) var(--c-surface);
|
||
}
|
||
.places-list-inner {
|
||
padding: var(--space-3) var(--space-4);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-2);
|
||
}
|
||
.places-card {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-3);
|
||
padding: var(--space-3);
|
||
background: var(--c-surface);
|
||
border: 1.5px solid var(--c-border-light);
|
||
border-left: 4px solid var(--typ-color, var(--c-primary));
|
||
border-radius: var(--radius-lg);
|
||
cursor: pointer;
|
||
transition: box-shadow 0.15s;
|
||
}
|
||
.places-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
|
||
.places-card-icon { font-size: 1.6rem; flex-shrink: 0; }
|
||
.places-card-body { flex: 1; min-width: 0; }
|
||
.places-card-name { font-weight: var(--weight-semibold); color: var(--c-text); }
|
||
.places-card-meta { font-size: var(--text-sm); color: var(--c-text-secondary); margin-top: 2px; }
|
||
.places-card-flags { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-1); }
|
||
.places-card-arrow { color: var(--c-text-muted); font-size: 1.2rem; }
|
||
.places-flag {
|
||
font-size: var(--text-xs);
|
||
padding: 2px 7px;
|
||
border-radius: var(--radius-full);
|
||
background: var(--c-surface-2);
|
||
color: var(--c-text-secondary);
|
||
}
|
||
.places-flag--detail {
|
||
font-size: var(--text-sm);
|
||
padding: var(--space-1) var(--space-3);
|
||
}
|
||
.places-locate-btn {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
background: #C4843A;
|
||
color: #fff;
|
||
border: none;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 10px;
|
||
}
|
||
.places-locate-btn:hover { background: #9E6520; }
|
||
|
||
/* ============================================================
|
||
ROUTEN — Komoot-Stil (routes.js)
|
||
============================================================ */
|
||
.rk-layout {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
background: var(--c-bg);
|
||
}
|
||
.rk-header {
|
||
background: var(--c-surface);
|
||
border-bottom: 1px solid var(--c-border-light);
|
||
padding: var(--space-3) var(--space-4);
|
||
flex-shrink: 0;
|
||
position: relative;
|
||
z-index: 10;
|
||
}
|
||
.rk-search-row {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--space-2);
|
||
margin-bottom: var(--space-3);
|
||
align-items: center;
|
||
}
|
||
.rk-search-row .rk-search {
|
||
min-width: 0;
|
||
flex-basis: 160px;
|
||
}
|
||
.rk-search-row .rk-view-toggle {
|
||
flex-shrink: 0;
|
||
}
|
||
@media (max-width: 480px) {
|
||
.rk-search-row .rk-search { flex: 1 1 100%; order: -1; }
|
||
.rk-search-row .rk-view-toggle { margin-left: auto; }
|
||
}
|
||
/* Import-Label als Button */
|
||
.rk-imp-btn {
|
||
cursor: pointer;
|
||
white-space: nowrap;
|
||
flex-shrink: 0;
|
||
}
|
||
/* Import Modal */
|
||
.rk-import-preview {
|
||
height: 160px;
|
||
border-radius: var(--radius-lg);
|
||
overflow: hidden;
|
||
background: var(--c-surface-2);
|
||
margin-bottom: var(--space-3);
|
||
}
|
||
.rk-import-stats {
|
||
display: flex;
|
||
gap: var(--space-3);
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
font-size: var(--text-sm);
|
||
color: var(--c-text-secondary);
|
||
margin-bottom: var(--space-2);
|
||
}
|
||
.rk-search {
|
||
flex: 1;
|
||
padding: var(--space-2) var(--space-3);
|
||
border: 1.5px solid var(--c-border);
|
||
border-radius: var(--radius-full);
|
||
font-size: var(--text-sm);
|
||
background: var(--c-bg);
|
||
color: var(--c-text);
|
||
outline: none;
|
||
}
|
||
.rk-search:focus { border-color: var(--c-primary); }
|
||
.rk-rec-btn--active {
|
||
animation: rec-pulse 1.2s ease-in-out infinite;
|
||
}
|
||
|
||
/* Einheitliche Aktions-Buttons (Filter / Import / Aufzeichnen) */
|
||
.rk-action-btn {
|
||
flex: 1;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: var(--space-2);
|
||
padding: var(--space-2) var(--space-3);
|
||
min-height: 40px;
|
||
font-size: var(--text-sm);
|
||
font-weight: var(--weight-semibold);
|
||
border: 1.5px solid var(--c-border);
|
||
border-radius: var(--radius-md);
|
||
background: var(--c-surface);
|
||
color: var(--c-text);
|
||
cursor: pointer;
|
||
white-space: nowrap;
|
||
transition: background var(--transition-fast), border-color var(--transition-fast);
|
||
-webkit-tap-highlight-color: transparent;
|
||
}
|
||
.rk-action-btn:hover { background: var(--c-surface-2); }
|
||
.rk-action-btn:active { background: var(--c-border); }
|
||
.rk-action-btn--primary {
|
||
background: var(--c-primary);
|
||
border-color: var(--c-primary);
|
||
color: #fff;
|
||
}
|
||
.rk-action-btn--primary:hover { background: var(--c-primary-dark); }
|
||
.rk-action-btn--danger {
|
||
background: var(--c-danger);
|
||
border-color: var(--c-danger);
|
||
color: #fff;
|
||
}
|
||
|
||
/* Filter-Panel (aufklappbar) */
|
||
.rk-filter-toggle-btn.active {
|
||
background: var(--c-primary-subtle);
|
||
border-color: var(--c-primary);
|
||
color: var(--c-primary);
|
||
}
|
||
.rk-filter-badge {
|
||
position: absolute;
|
||
top: 2px;
|
||
right: 2px;
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
background: var(--c-danger, #EF4444);
|
||
border: 1.5px solid var(--c-surface);
|
||
pointer-events: none;
|
||
}
|
||
.rk-filter-panel {
|
||
border-top: 1px solid var(--c-border-light);
|
||
padding: var(--space-3) var(--space-3) var(--space-2);
|
||
background: var(--c-surface);
|
||
}
|
||
.rk-filters {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-2);
|
||
}
|
||
.rk-filter-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-1);
|
||
}
|
||
.rk-filter-label {
|
||
font-size: var(--text-xs);
|
||
font-weight: 600;
|
||
color: var(--c-text-muted);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
padding-left: 2px;
|
||
}
|
||
.rk-chips-row {
|
||
display: flex;
|
||
gap: var(--space-1);
|
||
overflow-x: auto;
|
||
scrollbar-width: none;
|
||
flex-wrap: nowrap;
|
||
}
|
||
.rk-chips-row::-webkit-scrollbar { display: none; }
|
||
.rk-chip {
|
||
padding: 4px 10px;
|
||
border-radius: var(--radius-full);
|
||
border: 1.5px solid var(--c-border);
|
||
background: var(--c-bg);
|
||
color: var(--c-text-secondary);
|
||
font-size: var(--text-xs);
|
||
white-space: nowrap;
|
||
cursor: pointer;
|
||
transition: all 0.15s;
|
||
}
|
||
.rk-chip.active {
|
||
background: var(--c-primary);
|
||
border-color: var(--c-primary);
|
||
color: #fff;
|
||
}
|
||
.rk-grid {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: var(--space-3) var(--space-4);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-3);
|
||
scrollbar-width: thin;
|
||
}
|
||
.rk-loading, .rk-empty {
|
||
text-align: center;
|
||
padding: var(--space-10) var(--space-4);
|
||
color: var(--c-text-secondary);
|
||
}
|
||
.rk-empty-icon { font-size: 3rem; margin-bottom: var(--space-3); }
|
||
.rk-empty--onboarding { padding: var(--space-6) var(--space-4); }
|
||
.rk-empty-title { font-size: var(--text-xl); font-weight: 700; color: var(--c-text-primary); margin: 0 0 var(--space-2); }
|
||
.rk-empty-text { color: var(--c-text-secondary); margin-bottom: var(--space-5); max-width: 320px; margin-left: auto; margin-right: auto; }
|
||
.rk-empty-features {
|
||
display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-4);
|
||
max-width: 320px; margin: 0 auto var(--space-6); text-align: left;
|
||
}
|
||
.rk-empty-feature { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--c-text-secondary); }
|
||
.rk-empty-feature span:first-child { font-size: 1.1rem; flex-shrink: 0; }
|
||
.rk-card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: var(--c-surface);
|
||
border: 1.5px solid var(--c-border-light);
|
||
border-radius: var(--radius-xl);
|
||
overflow: hidden;
|
||
cursor: pointer;
|
||
transition: box-shadow 0.15s, transform 0.15s;
|
||
}
|
||
.rk-card:hover {
|
||
box-shadow: 0 4px 16px rgba(0,0,0,0.1);
|
||
transform: translateY(-1px);
|
||
}
|
||
.rk-card-preview {
|
||
height: 140px;
|
||
overflow: hidden;
|
||
background: #e8f0e8;
|
||
flex-shrink: 0;
|
||
}
|
||
.rk-preview-empty {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 100%;
|
||
font-size: 2.5rem;
|
||
color: var(--c-text-muted);
|
||
opacity: 0.4;
|
||
}
|
||
.rk-card-body {
|
||
padding: var(--space-3) var(--space-4) var(--space-4);
|
||
}
|
||
.rk-card-name {
|
||
font-weight: var(--weight-semibold);
|
||
font-size: var(--text-base);
|
||
margin-bottom: var(--space-1);
|
||
}
|
||
.rk-card-stats {
|
||
display: flex;
|
||
gap: var(--space-3);
|
||
font-size: var(--text-sm);
|
||
color: var(--c-text-secondary);
|
||
margin-bottom: var(--space-2);
|
||
}
|
||
.rk-card-tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--space-1);
|
||
margin-bottom: var(--space-3);
|
||
}
|
||
.rk-badge {
|
||
font-size: var(--text-xs);
|
||
padding: 2px 8px;
|
||
border-radius: var(--radius-full);
|
||
background: var(--c-surface-2);
|
||
color: var(--c-text-secondary);
|
||
}
|
||
|
||
/* Text-only Pills für Route-Detail */
|
||
.rk-pill {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
font-size: 10px;
|
||
font-weight: var(--weight-semibold);
|
||
padding: 2px 8px;
|
||
border-radius: var(--radius-full);
|
||
white-space: nowrap;
|
||
border: 1px solid transparent;
|
||
line-height: 1.4;
|
||
}
|
||
.rk-pill--neutral { background: var(--c-surface-2); color: var(--c-text-secondary); border-color: var(--c-border); }
|
||
.rk-pill--dog { background: #fef3c7; color: #92400e; border-color: #fde68a; }
|
||
.rk-pill--private { background: #dbeafe; color: #1d4ed8; border-color: #bfdbfe; }
|
||
.rk-pill--public { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
|
||
.rk-badge--leicht { background: #dcfce7; color: #15803d; }
|
||
.rk-badge--mittel { background: #fef9c3; color: #a16207; }
|
||
.rk-badge--anspruchsvoll{ background: #fee2e2; color: #b91c1c; }
|
||
.rk-badge--info { background: var(--c-primary-subtle); color: var(--c-primary-dark); }
|
||
.rk-card-footer {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: var(--space-2);
|
||
}
|
||
.rk-stars {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 2px;
|
||
}
|
||
.rk-star {
|
||
font-size: 1.1rem;
|
||
cursor: pointer;
|
||
color: var(--c-border);
|
||
transition: color 0.1s, transform 0.1s;
|
||
line-height: 1;
|
||
}
|
||
.rk-star.filled { color: #F59E0B; }
|
||
.rk-star:hover { color: #F59E0B; transform: scale(1.2); }
|
||
.rk-star-count { font-size: var(--text-xs); color: var(--c-text-muted); margin-left: 4px; }
|
||
.rk-card-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
}
|
||
.rk-card-author { font-size: var(--text-xs); color: var(--c-text-muted); }
|
||
.rk-card-creator {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
font-size: var(--text-xs);
|
||
font-weight: 600;
|
||
color: var(--c-primary);
|
||
margin-bottom: 2px;
|
||
}
|
||
/* Mode-Toggle: Meine Routen / Entdecken */
|
||
.rk-mode-toggle {
|
||
display: flex;
|
||
gap: 0;
|
||
margin-bottom: var(--space-3);
|
||
border: 1px solid var(--c-border);
|
||
border-radius: var(--radius-lg);
|
||
overflow: hidden;
|
||
align-self: flex-start;
|
||
}
|
||
.rk-mode-btn {
|
||
flex: 1;
|
||
padding: 6px 16px;
|
||
font-size: var(--text-sm);
|
||
font-weight: 500;
|
||
background: var(--c-bg);
|
||
color: var(--c-text-secondary);
|
||
border: none;
|
||
cursor: pointer;
|
||
transition: background 0.15s, color 0.15s;
|
||
white-space: nowrap;
|
||
}
|
||
.rk-mode-btn.active {
|
||
background: var(--c-primary);
|
||
color: #fff;
|
||
}
|
||
.rk-mode-btn:first-child { border-right: 1px solid var(--c-border); }
|
||
.rk-dl-btn {
|
||
font-size: var(--text-xs);
|
||
padding: 4px 8px;
|
||
border-radius: var(--radius-md);
|
||
border: 1px solid var(--c-border);
|
||
background: var(--c-bg);
|
||
color: var(--c-text-secondary);
|
||
cursor: pointer;
|
||
white-space: nowrap;
|
||
}
|
||
.rk-dl-btn:hover { background: var(--c-surface-2); }
|
||
|
||
/* Hundetauglichkeit-Badge */
|
||
.rk-badge--dog { background: #fef3c7; color: #92400e; font-size: 1rem; }
|
||
.rk-badge--private { background: #dbeafe; color: #1d4ed8; } /* blau = privat */
|
||
.rk-badge--public { background: #dcfce7; color: #15803d; } /* grün = öffentlich */
|
||
|
||
/* Foto-Galerie in Route-Detail */
|
||
.rk-photo-gallery {
|
||
display: flex;
|
||
gap: var(--space-2);
|
||
overflow-x: auto;
|
||
margin: var(--space-2) 0;
|
||
scrollbar-width: thin;
|
||
}
|
||
.rk-photo-thumb {
|
||
width: 80px;
|
||
height: 80px;
|
||
object-fit: cover;
|
||
border-radius: var(--radius-md);
|
||
cursor: pointer;
|
||
flex-shrink: 0;
|
||
border: 2px solid var(--c-border-light);
|
||
}
|
||
.rk-photo-add {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 80px;
|
||
height: 80px;
|
||
border: 2px dashed var(--c-border);
|
||
border-radius: var(--radius-md);
|
||
cursor: pointer;
|
||
flex-shrink: 0;
|
||
font-size: 1.5rem;
|
||
color: var(--c-text-muted);
|
||
}
|
||
.rk-photo-add-empty {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
padding: var(--space-3);
|
||
border: 2px dashed var(--c-border);
|
||
border-radius: var(--radius-md);
|
||
cursor: pointer;
|
||
color: var(--c-text-secondary);
|
||
font-size: var(--text-sm);
|
||
margin: var(--space-2) 0;
|
||
}
|
||
|
||
/* Nearby POIs */
|
||
.rk-nearby-section { margin-top: var(--space-3); }
|
||
.rk-nearby-title {
|
||
font-weight: var(--weight-semibold);
|
||
margin-bottom: var(--space-2);
|
||
color: var(--c-text);
|
||
}
|
||
.rk-nearby-group {
|
||
margin-bottom: var(--space-3);
|
||
border: 1px solid var(--c-border-light);
|
||
border-radius: var(--radius-md);
|
||
overflow: hidden;
|
||
}
|
||
.rk-nearby-group-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
padding: var(--space-2) var(--space-3);
|
||
background: var(--c-surface-2);
|
||
border: none;
|
||
cursor: pointer;
|
||
font-size: var(--text-sm);
|
||
font-weight: var(--weight-semibold);
|
||
color: var(--c-text);
|
||
text-align: left;
|
||
-webkit-tap-highlight-color: transparent;
|
||
}
|
||
.rk-nearby-group-header:hover { background: var(--c-border-light); }
|
||
.rk-nearby-items { padding: var(--space-1) 0; }
|
||
.rk-nearby-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: var(--space-2);
|
||
padding: var(--space-2) var(--space-3);
|
||
border-bottom: 1px solid var(--c-border-light);
|
||
width: 100%;
|
||
background: none;
|
||
border-left: none;
|
||
border-right: none;
|
||
border-top: none;
|
||
text-align: left;
|
||
font: inherit;
|
||
}
|
||
.rk-nearby-item:last-child { border-bottom: none; }
|
||
.rk-nearby-item--link {
|
||
cursor: pointer;
|
||
-webkit-tap-highlight-color: transparent;
|
||
}
|
||
.rk-nearby-item--link:hover { background: var(--c-surface-2); }
|
||
.rk-nearby-name { font-size: var(--text-sm); color: var(--c-text); display: block; }
|
||
.rk-nearby-detail { font-size: var(--text-xs); color: var(--c-text-muted); display: block; margin-top: 1px; }
|
||
.rk-nearby-phone { color: var(--c-primary); text-decoration: none; }
|
||
|
||
/* Hundetauglichkeit-Auswahl im Formular */
|
||
.rk-paw-select {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--space-2);
|
||
margin-top: var(--space-1);
|
||
}
|
||
.rk-paw-btn {
|
||
padding: var(--space-2) var(--space-3);
|
||
border: 1.5px solid var(--c-border);
|
||
border-radius: var(--radius-full);
|
||
background: var(--c-bg);
|
||
color: var(--c-text-secondary);
|
||
font-size: var(--text-sm);
|
||
cursor: pointer;
|
||
transition: all 0.15s;
|
||
white-space: nowrap;
|
||
}
|
||
.rk-paw-btn.selected {
|
||
border-color: var(--c-primary);
|
||
background: var(--c-primary-subtle);
|
||
color: var(--c-primary-dark);
|
||
font-weight: var(--weight-medium);
|
||
}
|
||
|
||
/* Aufzeichnungs-FAB Zustand */
|
||
.map-fab--rec.recording {
|
||
background: #EF4444;
|
||
border-color: #EF4444;
|
||
color: #fff;
|
||
animation: rec-pulse 1.2s ease-in-out infinite;
|
||
}
|
||
@keyframes rec-pulse {
|
||
0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.5); }
|
||
50% { box-shadow: 0 0 0 8px rgba(239,68,68,0); }
|
||
}
|
||
|
||
/* ============================================================
|
||
ZENTRALE KARTE (map.js)
|
||
============================================================ */
|
||
.map-full-layout {
|
||
position: fixed;
|
||
top: calc(var(--header-height) + var(--safe-top));
|
||
left: 0;
|
||
right: 0;
|
||
bottom: calc(var(--nav-bottom-height) + var(--safe-bottom));
|
||
overflow: hidden;
|
||
z-index: 1;
|
||
}
|
||
@media (min-width: 768px) {
|
||
.map-full-layout { top: 0; left: var(--nav-sidebar-width); bottom: 0; }
|
||
}
|
||
.map-full { width: 100%; height: 100%; }
|
||
|
||
/* Legende: horizontaler Scroll-Strip oben */
|
||
.map-legend {
|
||
position: absolute;
|
||
top: var(--space-2);
|
||
left: 42px; /* Zoom-Control (+/-) freilassen */
|
||
right: 0;
|
||
z-index: 1000;
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
gap: var(--space-1);
|
||
padding: 0 var(--space-3) 0 var(--space-1);
|
||
overflow-x: auto;
|
||
overflow-y: hidden;
|
||
-webkit-overflow-scrolling: touch;
|
||
scrollbar-width: none;
|
||
pointer-events: auto;
|
||
}
|
||
.map-legend::-webkit-scrollbar { display: none; }
|
||
|
||
.map-legend-btn {
|
||
flex-shrink: 0;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
padding: 5px 10px;
|
||
border-radius: var(--radius-full);
|
||
background: rgba(255,255,255,0.93);
|
||
border: 1.5px solid var(--layer-color, var(--c-border));
|
||
color: var(--c-text-secondary);
|
||
font-size: 11px;
|
||
font-weight: var(--weight-semibold);
|
||
cursor: pointer;
|
||
backdrop-filter: blur(6px);
|
||
transition: all 0.15s;
|
||
box-shadow: 0 1px 4px rgba(0,0,0,0.15);
|
||
white-space: nowrap;
|
||
}
|
||
.map-legend-btn.active {
|
||
background: var(--layer-color, var(--c-primary));
|
||
color: #fff;
|
||
border-color: var(--layer-color, var(--c-primary));
|
||
}
|
||
.map-legend-label { font-size: 10px; }
|
||
.map-legend-all {
|
||
font-size: 1rem;
|
||
min-width: 32px;
|
||
padding: 0 var(--space-2);
|
||
background: var(--c-surface-2);
|
||
border-color: var(--c-border);
|
||
color: var(--c-text-secondary);
|
||
font-weight: var(--weight-bold);
|
||
}
|
||
.map-legend-all.all-off {
|
||
background: #1e293b;
|
||
border-color: #1e293b;
|
||
color: #fff;
|
||
}
|
||
|
||
/* FAB-Gruppe rechts unten */
|
||
.map-fabs {
|
||
position: absolute;
|
||
bottom: var(--space-4);
|
||
right: var(--space-3);
|
||
z-index: 1000;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-2);
|
||
align-items: center;
|
||
}
|
||
.map-fab {
|
||
width: 44px;
|
||
height: 44px;
|
||
border-radius: 50%;
|
||
background: #C4843A;
|
||
color: #fff;
|
||
border: none;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
|
||
cursor: pointer;
|
||
font-size: 1.25rem;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: background 0.15s;
|
||
-webkit-tap-highlight-color: transparent;
|
||
}
|
||
.map-fab:hover { background: #9E6520; }
|
||
.map-fab--pin.active {
|
||
background: var(--c-danger);
|
||
border-color: var(--c-danger);
|
||
color: #fff;
|
||
font-size: 1rem;
|
||
}
|
||
.map-fab:disabled { opacity: 0.5; cursor: default; }
|
||
.map-fab--offline.loading { animation: fab-spin 1.2s linear infinite; pointer-events: none; }
|
||
@keyframes fab-spin { to { transform: rotate(360deg); } }
|
||
|
||
/* Aufzeichnungs-Panel — schiebt sich von unten rein */
|
||
.map-rec-panel {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: rgba(15, 23, 42, 0.95);
|
||
backdrop-filter: blur(8px);
|
||
color: #fff;
|
||
padding: var(--space-4) var(--space-5) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
|
||
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
|
||
transform: translateY(100%);
|
||
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||
z-index: 420;
|
||
pointer-events: none;
|
||
}
|
||
.map-rec-panel.active {
|
||
transform: translateY(0);
|
||
pointer-events: all;
|
||
}
|
||
.map-rec-stats {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
margin-bottom: var(--space-4);
|
||
}
|
||
.map-rec-stat {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 2px;
|
||
}
|
||
.map-rec-stat--main .map-rec-val { font-size: 2.4rem; }
|
||
.map-rec-val {
|
||
font-size: 1.8rem;
|
||
font-weight: 800;
|
||
line-height: 1;
|
||
font-variant-numeric: tabular-nums;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
.map-rec-lbl {
|
||
font-size: 0.65rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
color: rgba(255,255,255,0.55);
|
||
}
|
||
.map-rec-actions {
|
||
display: flex;
|
||
gap: var(--space-3);
|
||
margin-bottom: var(--space-3);
|
||
}
|
||
.map-rec-action-btn { flex: 1; }
|
||
.map-rec-hint {
|
||
text-align: center;
|
||
font-size: var(--text-xs);
|
||
color: rgba(255,255,255,0.45);
|
||
}
|
||
.map-rec-panel.paused .map-rec-val { color: #F59E0B; }
|
||
.map-rec-panel.paused .map-rec-hint::before { content: '⏸ Pausiert — '; }
|
||
|
||
/* Fadenkreuz-Overlay */
|
||
.map-crosshair {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -100%);
|
||
z-index: 410;
|
||
pointer-events: none;
|
||
display: none;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
.map-crosshair.active { display: flex; }
|
||
.map-crosshair-pin {
|
||
font-size: 2.4rem;
|
||
line-height: 1;
|
||
filter: drop-shadow(0 3px 6px rgba(0,0,0,0.45));
|
||
transition: transform 0.15s cubic-bezier(0.34,1.56,0.64,1);
|
||
}
|
||
.map-crosshair.dragging .map-crosshair-pin {
|
||
transform: translateY(-10px) scale(1.15);
|
||
}
|
||
.map-crosshair-shadow {
|
||
width: 10px;
|
||
height: 4px;
|
||
background: rgba(0,0,0,0.25);
|
||
border-radius: 50%;
|
||
margin-top: 1px;
|
||
transition: all 0.15s;
|
||
}
|
||
.map-crosshair.dragging .map-crosshair-shadow {
|
||
width: 6px; opacity: 0.4;
|
||
}
|
||
|
||
/* Bestätigen-Leiste unten */
|
||
.map-place-bar {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: var(--c-surface);
|
||
border-top: 1px solid var(--c-border-light);
|
||
padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
|
||
display: none;
|
||
flex-direction: column;
|
||
gap: var(--space-2);
|
||
z-index: 410;
|
||
box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
|
||
}
|
||
.map-place-bar.active { display: flex; }
|
||
.map-place-hint {
|
||
text-align: center;
|
||
font-size: var(--text-sm);
|
||
color: var(--c-text-secondary);
|
||
}
|
||
.map-place-btns {
|
||
display: flex;
|
||
gap: var(--space-3);
|
||
}
|
||
.map-place-btns .btn { flex: 1; }
|
||
|
||
/* Statusleiste: nur Info, unten links */
|
||
.map-statusbar {
|
||
position: absolute;
|
||
bottom: var(--space-3);
|
||
left: var(--space-3);
|
||
z-index: 1000;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
background: rgba(255,255,255,0.88);
|
||
backdrop-filter: blur(4px);
|
||
border: 1px solid var(--c-border-light);
|
||
border-radius: var(--radius-full);
|
||
padding: 4px 12px;
|
||
font-size: 11px;
|
||
color: var(--c-text-secondary);
|
||
box-shadow: 0 1px 4px rgba(0,0,0,0.1);
|
||
max-width: calc(100% - 80px); /* Platz für FABs */
|
||
flex-wrap: nowrap;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* Wetter in Statusleiste */
|
||
.map-weather-chip--hidden { display: none; }
|
||
|
||
/* Giftköder-Marker — pulsierend, rot, sofort erkennbar */
|
||
.poison-marker {
|
||
position: relative;
|
||
width: 48px; height: 48px;
|
||
}
|
||
.poison-dot {
|
||
position: absolute;
|
||
top: 50%; left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 44px; height: 44px;
|
||
background: #DC2626;
|
||
border: 3px solid #fff;
|
||
border-radius: 50%;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 20px;
|
||
box-shadow: 0 2px 10px rgba(220,38,38,0.7);
|
||
z-index: 2;
|
||
}
|
||
.poison-ring {
|
||
position: absolute;
|
||
top: 50%; left: 50%;
|
||
width: 44px; height: 44px;
|
||
border-radius: 50%;
|
||
background: rgba(220,38,38,0.35);
|
||
animation: poison-pulse 1.8s ease-out infinite;
|
||
z-index: 1;
|
||
}
|
||
.poison-ring:nth-child(2) { animation-delay: 0.6s; }
|
||
@keyframes poison-pulse {
|
||
0% { transform: translate(-50%,-50%) scale(1); opacity: 0.8; }
|
||
100% { transform: translate(-50%,-50%) scale(2.8); opacity: 0; }
|
||
}
|
||
|
||
/* Pulsierender Standort-Marker */
|
||
.loc-icon { position: relative; }
|
||
.loc-dot {
|
||
width: 16px; height: 16px;
|
||
background: #3B82F6;
|
||
border: 3px solid #fff;
|
||
border-radius: 50%;
|
||
box-shadow: 0 1px 4px rgba(0,0,0,0.3);
|
||
position: absolute;
|
||
top: 4px; left: 4px;
|
||
}
|
||
.loc-ring {
|
||
width: 24px; height: 24px;
|
||
background: rgba(59,130,246,0.3);
|
||
border-radius: 50%;
|
||
position: absolute;
|
||
top: 0; left: 0;
|
||
animation: loc-pulse 2s ease-out infinite;
|
||
}
|
||
@keyframes loc-pulse {
|
||
0% { transform: scale(0.8); opacity: 1; }
|
||
100% { transform: scale(2.2); opacity: 0; }
|
||
}
|
||
|
||
/* Pin-Typ-Auswahl im Modal */
|
||
.poi-type-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: var(--space-2);
|
||
}
|
||
.poi-type-btn {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 4px;
|
||
padding: 10px 4px;
|
||
border: 2px solid var(--c-border);
|
||
border-radius: var(--radius-md);
|
||
background: var(--c-surface);
|
||
cursor: pointer;
|
||
transition: border-color 0.15s, background 0.15s;
|
||
-webkit-tap-highlight-color: transparent;
|
||
}
|
||
.poi-type-btn.selected {
|
||
border-color: var(--pt-color, var(--c-primary));
|
||
background: color-mix(in srgb, var(--pt-color, var(--c-primary)) 12%, transparent);
|
||
}
|
||
.poi-type-icon { font-size: 22px; line-height: 1; }
|
||
.poi-type-label { font-size: 10px; color: var(--c-text-secondary); text-align: center; line-height: 1.2; }
|
||
|
||
/* ------------------------------------------------------------
|
||
GASSI-TREFFEN (walks.js)
|
||
------------------------------------------------------------ */
|
||
.walks-layout {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
}
|
||
.walks-content {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
}
|
||
/* .walks-toolbar → now uses .by-toolbar */
|
||
.walks-view-toggle {
|
||
display: flex;
|
||
gap: var(--space-1);
|
||
background: var(--c-bg);
|
||
border-radius: var(--radius-md);
|
||
padding: 2px;
|
||
border: 1px solid var(--c-border);
|
||
}
|
||
.walks-view-btn {
|
||
padding: var(--space-1) var(--space-3);
|
||
border-radius: var(--radius-sm);
|
||
border: none;
|
||
background: transparent;
|
||
color: var(--c-text-secondary);
|
||
font-size: var(--text-sm);
|
||
cursor: pointer;
|
||
transition: all 0.15s;
|
||
}
|
||
.walks-view-btn.active {
|
||
background: var(--c-surface);
|
||
color: var(--c-text);
|
||
box-shadow: var(--shadow-xs);
|
||
}
|
||
.walks-list {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: var(--space-4);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-3);
|
||
}
|
||
/* .walks-section-label → now uses .by-section-label */
|
||
.walks-card {
|
||
background: var(--c-surface);
|
||
border-radius: var(--radius-lg);
|
||
border: 1px solid var(--c-border);
|
||
padding: var(--space-4);
|
||
display: grid;
|
||
grid-template-columns: 56px 1fr auto;
|
||
gap: var(--space-3);
|
||
cursor: pointer;
|
||
transition: box-shadow 0.15s;
|
||
box-shadow: var(--shadow-xs);
|
||
}
|
||
.walks-card:hover { box-shadow: var(--shadow-md); }
|
||
.walks-card.today { border-left: 3px solid var(--c-amber, #f59e0b); }
|
||
.walks-card.full { opacity: 0.6; }
|
||
.walks-date-badge {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: var(--c-bg);
|
||
border-radius: var(--radius-md);
|
||
padding: var(--space-1) var(--space-2);
|
||
min-width: 52px;
|
||
}
|
||
.walks-date-badge .day { font-size: var(--text-xs); color: var(--c-text-secondary); }
|
||
.walks-date-badge .num { font-size: 1.5rem; font-weight: var(--weight-bold); line-height: 1.1; }
|
||
.walks-date-badge .month { font-size: var(--text-xs); color: var(--c-text-secondary); }
|
||
.walks-date-badge.today-badge .num { color: var(--c-amber, #f59e0b); }
|
||
.walks-card-body { min-width: 0; }
|
||
.walks-card-title {
|
||
font-weight: var(--weight-semibold);
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.walks-card-meta {
|
||
font-size: var(--text-sm);
|
||
color: var(--c-text-secondary);
|
||
margin-top: var(--space-1);
|
||
}
|
||
.walks-card-side {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-end;
|
||
gap: var(--space-1);
|
||
}
|
||
.walks-spots {
|
||
font-size: var(--text-xs);
|
||
font-weight: var(--weight-semibold);
|
||
color: var(--c-success);
|
||
white-space: nowrap;
|
||
}
|
||
.walks-spots.full { color: var(--c-text-muted); }
|
||
.walks-spots.today { color: var(--c-amber, #f59e0b); }
|
||
.walks-map {
|
||
flex: 1;
|
||
position: relative;
|
||
}
|
||
.walks-participant {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
padding: var(--space-2) 0;
|
||
border-bottom: 1px solid var(--c-border);
|
||
font-size: var(--text-sm);
|
||
}
|
||
.walks-participant:last-child { border-bottom: none; }
|
||
.walks-participant-name { font-weight: var(--weight-semibold); }
|
||
.walks-participant-dogs { color: var(--c-text-secondary); }
|
||
|
||
/* Walk-Einladungen + RSVP */
|
||
.walks-invitation-row,
|
||
.walks-invite-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-3);
|
||
padding: var(--space-2) 0;
|
||
border-bottom: 1px solid var(--c-border);
|
||
font-size: var(--text-sm);
|
||
}
|
||
.walks-invitation-row:last-child,
|
||
.walks-invite-row:last-child { border-bottom: none; }
|
||
|
||
.walks-inv-avatar {
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: 50%;
|
||
background: var(--c-primary);
|
||
color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: var(--text-xs);
|
||
font-weight: var(--weight-semibold);
|
||
flex-shrink: 0;
|
||
}
|
||
.walks-inv-avatar--sm {
|
||
width: 28px;
|
||
height: 28px;
|
||
}
|
||
.walks-inv-info { flex: 1; min-width: 0; }
|
||
.walks-inv-name {
|
||
font-weight: var(--weight-semibold);
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.walks-inv-hunde {
|
||
color: var(--c-text-secondary);
|
||
font-size: var(--text-xs);
|
||
}
|
||
.walks-inv-badge { flex-shrink: 0; }
|
||
|
||
/* RSVP-Badges */
|
||
.walks-rsvp-badge {
|
||
display: inline-block;
|
||
padding: 2px 8px;
|
||
border-radius: var(--radius-full);
|
||
font-size: var(--text-xs);
|
||
font-weight: var(--weight-semibold);
|
||
}
|
||
.walks-rsvp--yes { background: #d1fae5; color: #065f46; }
|
||
.walks-rsvp--maybe { background: #fef3c7; color: #92400e; }
|
||
.walks-rsvp--no { background: #fee2e2; color: #991b1b; }
|
||
.walks-rsvp--invited { background: var(--c-surface-2); color: var(--c-text-secondary); }
|
||
|
||
/* RSVP-Section im Detail-Modal */
|
||
.walks-rsvp-section {
|
||
margin: var(--space-3) 0;
|
||
padding: var(--space-3);
|
||
background: var(--c-surface-2);
|
||
border-radius: var(--radius-md);
|
||
}
|
||
.walks-rsvp-buttons {
|
||
display: flex;
|
||
gap: var(--space-2);
|
||
flex-wrap: wrap;
|
||
margin-top: var(--space-2);
|
||
}
|
||
.walks-rsvp-btn {
|
||
flex: 1;
|
||
min-width: 80px;
|
||
padding: var(--space-2) var(--space-2);
|
||
border: 2px solid var(--c-border);
|
||
border-radius: var(--radius-md);
|
||
background: var(--c-surface);
|
||
color: var(--c-text);
|
||
font-size: var(--text-sm);
|
||
font-weight: var(--weight-semibold);
|
||
cursor: pointer;
|
||
transition: all 0.15s;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: var(--space-1);
|
||
}
|
||
.walks-rsvp-btn:hover {
|
||
border-color: var(--c-primary);
|
||
background: var(--c-primary-bg, rgba(196,132,58,0.08));
|
||
}
|
||
.walks-rsvp-btn.active[data-rsvp="yes"] {
|
||
border-color: #10b981;
|
||
background: #d1fae5;
|
||
color: #065f46;
|
||
}
|
||
.walks-rsvp-btn.active[data-rsvp="maybe"] {
|
||
border-color: #f59e0b;
|
||
background: #fef3c7;
|
||
color: #92400e;
|
||
}
|
||
.walks-rsvp-btn.active[data-rsvp="no"] {
|
||
border-color: #ef4444;
|
||
background: #fee2e2;
|
||
color: #991b1b;
|
||
}
|
||
|
||
/* ------------------------------------------------------------
|
||
EVENTS (events.js)
|
||
------------------------------------------------------------ */
|
||
/* .events-toolbar → now uses .by-toolbar */
|
||
.events-view-toggle {
|
||
display: flex;
|
||
gap: var(--space-1);
|
||
background: var(--c-bg);
|
||
border-radius: var(--radius-md);
|
||
padding: 2px;
|
||
border: 1px solid var(--c-border);
|
||
}
|
||
.events-view-btn {
|
||
padding: var(--space-1) var(--space-3);
|
||
border-radius: var(--radius-sm);
|
||
border: none;
|
||
background: transparent;
|
||
color: var(--c-text-secondary);
|
||
font-size: var(--text-sm);
|
||
cursor: pointer;
|
||
transition: all 0.15s;
|
||
}
|
||
.events-view-btn.active {
|
||
background: var(--c-surface);
|
||
color: var(--c-text);
|
||
box-shadow: var(--shadow-xs);
|
||
}
|
||
.events-filter-bar {
|
||
padding: var(--space-2) var(--space-4);
|
||
background: var(--c-surface);
|
||
border-bottom: 1px solid var(--c-border);
|
||
flex-shrink: 0;
|
||
}
|
||
/* .events-filter-btn → now uses .by-tab */
|
||
.events-list {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: var(--space-4);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-2);
|
||
}
|
||
.events-map {
|
||
flex: 1;
|
||
position: relative;
|
||
min-height: 400px;
|
||
max-height: calc(100vh - 200px);
|
||
}
|
||
.events-month-label {
|
||
font-size: var(--text-sm);
|
||
font-weight: var(--weight-semibold);
|
||
color: var(--c-text-secondary);
|
||
padding: var(--space-2) 0 var(--space-1);
|
||
}
|
||
.events-card {
|
||
background: var(--c-surface);
|
||
border-radius: var(--radius-lg);
|
||
border: 1px solid var(--c-border);
|
||
border-left: 3px solid var(--c-primary);
|
||
padding: var(--space-3) var(--space-4);
|
||
display: grid;
|
||
grid-template-columns: 52px 1fr auto;
|
||
gap: var(--space-3);
|
||
cursor: pointer;
|
||
transition: box-shadow 0.15s;
|
||
align-items: center;
|
||
box-shadow: var(--shadow-xs);
|
||
}
|
||
.events-card:hover { box-shadow: var(--shadow-md); }
|
||
.events-date-badge {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
background: var(--c-bg);
|
||
border-radius: var(--radius-md);
|
||
padding: var(--space-1);
|
||
}
|
||
.events-date-badge .day { font-size: var(--text-xs); color: var(--c-text-secondary); }
|
||
.events-date-badge .num { font-size: 1.5rem; font-weight: var(--weight-bold); line-height: 1.1; }
|
||
.events-date-badge .month { font-size: var(--text-xs); color: var(--c-text-secondary); }
|
||
.events-card-body { min-width: 0; }
|
||
.events-card-title {
|
||
font-weight: var(--weight-semibold);
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
margin-bottom: var(--space-1);
|
||
}
|
||
.events-card-meta {
|
||
font-size: var(--text-sm);
|
||
color: var(--c-text-secondary);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-1);
|
||
flex-wrap: wrap;
|
||
}
|
||
.events-badge {
|
||
display: inline-block;
|
||
padding: 2px var(--space-2);
|
||
border-radius: var(--radius-full);
|
||
font-size: var(--text-xs);
|
||
font-weight: var(--weight-semibold);
|
||
}
|
||
.events-detail-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-1);
|
||
flex-wrap: wrap;
|
||
margin-bottom: var(--space-2);
|
||
color: var(--c-text);
|
||
}
|
||
.events-detail-desc {
|
||
background: var(--c-bg);
|
||
border-radius: var(--radius-md);
|
||
padding: var(--space-3);
|
||
margin: var(--space-3) 0;
|
||
color: var(--c-text-secondary);
|
||
white-space: pre-wrap;
|
||
}
|
||
/* VDH-Badge */
|
||
.ev-vdh-badge {
|
||
display: inline-block;
|
||
padding: 1px 6px;
|
||
border-radius: var(--radius-sm);
|
||
background: #1a4fa0;
|
||
color: #fff;
|
||
font-size: 10px;
|
||
font-weight: var(--weight-bold);
|
||
letter-spacing: 0.04em;
|
||
vertical-align: middle;
|
||
margin-left: var(--space-1);
|
||
flex-shrink: 0;
|
||
}
|
||
/* Quelle-Filter-Leiste */
|
||
.events-source-bar {
|
||
padding: var(--space-2) var(--space-4);
|
||
background: var(--c-bg);
|
||
border-bottom: 1px solid var(--c-border);
|
||
flex-shrink: 0;
|
||
}
|
||
/* .events-source-btn → now uses .by-tab */
|
||
/* Events-Karten: Aktions-Zeile */
|
||
.events-card-actions {
|
||
margin-top: var(--space-1);
|
||
}
|
||
.ev-ext-link {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
font-size: var(--text-xs);
|
||
color: var(--c-primary);
|
||
text-decoration: none;
|
||
padding: 2px var(--space-2);
|
||
border-radius: var(--radius-sm);
|
||
border: 1px solid var(--c-border);
|
||
}
|
||
.ev-ext-link:hover {
|
||
background: var(--c-primary-soft, #e8f0fe);
|
||
border-color: var(--c-primary);
|
||
}
|
||
/* Phosphor-Icons in Events */
|
||
.events-card .ph-icon,
|
||
.events-detail-row .ph-icon {
|
||
width: 14px;
|
||
height: 14px;
|
||
vertical-align: middle;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* ------------------------------------------------------------
|
||
SITTING (sitting.js)
|
||
------------------------------------------------------------ */
|
||
.sitting-layout {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
}
|
||
.sitting-tabs {
|
||
padding: var(--space-3) var(--space-4) var(--space-2);
|
||
border-bottom: 1px solid var(--c-border);
|
||
background: var(--c-surface);
|
||
flex-shrink: 0;
|
||
}
|
||
/* .sitting-tab → now uses .by-tab */
|
||
.sitting-content {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: var(--space-4);
|
||
}
|
||
.sitting-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-3);
|
||
}
|
||
.sitting-card {
|
||
background: var(--c-surface);
|
||
border-radius: var(--radius-lg);
|
||
border: 1px solid var(--c-border);
|
||
padding: var(--space-4);
|
||
display: grid;
|
||
grid-template-columns: 48px 1fr auto;
|
||
gap: var(--space-3);
|
||
align-items: flex-start;
|
||
cursor: pointer;
|
||
transition: box-shadow 0.15s;
|
||
box-shadow: var(--shadow-xs);
|
||
}
|
||
.sitting-card:hover { box-shadow: var(--shadow-md); }
|
||
.sitting-card-avatar {
|
||
width: 48px;
|
||
height: 48px;
|
||
background: var(--c-bg);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1.5rem;
|
||
}
|
||
.sitting-card-name { font-weight: var(--weight-semibold); margin-bottom: var(--space-1); }
|
||
.sitting-card-dist { font-size: var(--text-xs); color: var(--c-text-muted); margin-bottom: var(--space-1); }
|
||
.sitting-card-desc { font-size: var(--text-sm); color: var(--c-text-secondary); margin-bottom: var(--space-2); }
|
||
.sitting-price { font-weight: var(--weight-bold); color: var(--c-primary); }
|
||
.sitting-dogs { font-size: var(--text-xs); color: var(--c-text-muted); margin-top: var(--space-1); }
|
||
.sitting-services {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--space-1);
|
||
}
|
||
.sit-service-badge {
|
||
background: var(--c-primary-light, #dbeafe);
|
||
color: var(--c-primary);
|
||
padding: 2px var(--space-2);
|
||
border-radius: var(--radius-full);
|
||
font-size: var(--text-xs);
|
||
font-weight: var(--weight-medium);
|
||
}
|
||
.sitting-empty-profil {
|
||
text-align: center;
|
||
padding: var(--space-8) var(--space-4);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: var(--space-3);
|
||
}
|
||
.sitting-my-profil { display: flex; flex-direction: column; gap: var(--space-3); }
|
||
.sitting-profil-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.sitting-profil-status {
|
||
padding: var(--space-1) var(--space-3);
|
||
border-radius: var(--radius-full);
|
||
font-size: var(--text-sm);
|
||
font-weight: var(--weight-semibold);
|
||
}
|
||
.sitting-profil-status.active { background: #d1fae5; color: #065f46; }
|
||
.sitting-profil-status.inactive { background: #f3f4f6; color: #6b7280; }
|
||
.sitting-profil-facts {
|
||
display: flex;
|
||
gap: var(--space-4);
|
||
}
|
||
.sitting-profil-fact { font-size: var(--text-sm); color: var(--c-text-secondary); }
|
||
/* .sitting-section-label → now uses .by-section-label */
|
||
.sitting-request-card {
|
||
background: var(--c-surface);
|
||
border-radius: var(--radius-lg);
|
||
border: 1px solid var(--c-border);
|
||
padding: var(--space-3) var(--space-4);
|
||
margin-bottom: var(--space-2);
|
||
box-shadow: var(--shadow-xs);
|
||
}
|
||
.sitting-req-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: var(--space-1);
|
||
}
|
||
.sitting-req-name { font-weight: var(--weight-semibold); }
|
||
.sitting-req-status { font-size: var(--text-sm); font-weight: var(--weight-semibold); text-transform: capitalize; }
|
||
.sitting-req-dates { font-size: var(--text-sm); color: var(--c-text-secondary); }
|
||
.sitting-req-msg { font-size: var(--text-sm); color: var(--c-text-secondary); margin-top: var(--space-1); }
|
||
.sitting-req-actions {
|
||
display: flex;
|
||
gap: var(--space-2);
|
||
margin-top: var(--space-2);
|
||
}
|
||
.sitting-detail-avatar {
|
||
font-size: 4rem;
|
||
text-align: center;
|
||
margin-bottom: var(--space-2);
|
||
}
|
||
|
||
/* ============================================================
|
||
Routen-Suchkarte
|
||
============================================================ */
|
||
.rk-view-toggle {
|
||
display: flex;
|
||
border: 1.5px solid var(--c-border);
|
||
border-radius: var(--radius-md);
|
||
overflow: hidden;
|
||
flex-shrink: 0;
|
||
}
|
||
.rk-view-btn {
|
||
padding: var(--space-1) var(--space-3);
|
||
background: transparent;
|
||
border: none;
|
||
cursor: pointer;
|
||
font-size: var(--text-sm);
|
||
color: var(--c-text-secondary);
|
||
transition: background var(--transition-fast), color var(--transition-fast);
|
||
line-height: 1;
|
||
}
|
||
.rk-view-btn.active {
|
||
background: var(--c-primary);
|
||
color: #fff;
|
||
}
|
||
.rk-map-bar {
|
||
display: flex;
|
||
gap: var(--space-2);
|
||
padding: var(--space-3) 0 var(--space-2);
|
||
}
|
||
.rk-map-loc-input {
|
||
flex: 1;
|
||
padding: var(--space-2) var(--space-3);
|
||
border: 1.5px solid var(--c-border);
|
||
border-radius: var(--radius-full);
|
||
font-size: var(--text-sm);
|
||
background: var(--c-surface);
|
||
color: var(--c-text);
|
||
}
|
||
.rk-map-loc-input:focus { outline: none; border-color: var(--c-primary); }
|
||
.rk-map-section {
|
||
position: fixed;
|
||
/* Unter dem App-Header, über der Bottom-Nav */
|
||
top: calc(var(--header-height) + var(--safe-top));
|
||
left: 0;
|
||
right: 0;
|
||
bottom: calc(var(--nav-bottom-height) + var(--safe-bottom));
|
||
z-index: 200;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: var(--c-bg);
|
||
padding: 0 var(--space-4) var(--space-2);
|
||
}
|
||
/* Desktop: Sidebar berücksichtigen */
|
||
@media (min-width: 768px) {
|
||
.rk-map-section {
|
||
left: var(--nav-sidebar-width);
|
||
bottom: 0;
|
||
top: 0;
|
||
}
|
||
}
|
||
#rk-search-map {
|
||
flex: 1;
|
||
min-height: 200px;
|
||
border-radius: var(--radius-lg);
|
||
overflow: hidden;
|
||
border: 1px solid var(--c-border);
|
||
}
|
||
.rk-map-hint {
|
||
font-size: var(--text-xs);
|
||
color: var(--c-text-muted);
|
||
text-align: center;
|
||
padding: var(--space-1) 0 var(--space-2);
|
||
}
|
||
.rk-map-tooltip {
|
||
background: var(--c-surface) !important;
|
||
border: 1px solid var(--c-border) !important;
|
||
border-radius: var(--radius-sm) !important;
|
||
color: var(--c-text) !important;
|
||
font-size: var(--text-xs) !important;
|
||
box-shadow: var(--shadow-sm) !important;
|
||
padding: 4px 8px !important;
|
||
}
|
||
|
||
/* ============================================================
|
||
FORUM
|
||
============================================================ */
|
||
.forum-layout {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-4);
|
||
}
|
||
|
||
.forum-toolbar {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: var(--space-3);
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.forum-tabs {
|
||
display: flex;
|
||
gap: var(--space-1);
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
/* .forum-tab → now uses .by-tab */
|
||
|
||
.forum-list-inner { display: flex; flex-direction: column; gap: var(--space-3); }
|
||
|
||
.forum-card {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-3);
|
||
background: var(--c-surface);
|
||
border: 1px solid var(--c-border-light);
|
||
border-radius: var(--radius-lg);
|
||
padding: var(--space-4);
|
||
cursor: pointer;
|
||
transition: box-shadow var(--transition-fast);
|
||
}
|
||
.forum-card:hover { box-shadow: var(--shadow-md); }
|
||
|
||
.forum-card-body { flex: 1; min-width: 0; }
|
||
.forum-card-arrow { color: var(--c-text-muted); font-size: 1.2rem; flex-shrink: 0; }
|
||
|
||
.forum-card-meta-top {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
margin-bottom: var(--space-1);
|
||
}
|
||
|
||
.forum-card-date {
|
||
font-size: var(--text-xs);
|
||
color: var(--c-text-muted);
|
||
margin-left: auto;
|
||
}
|
||
|
||
.forum-card-title {
|
||
font-size: var(--text-base);
|
||
font-weight: var(--weight-semibold);
|
||
color: var(--c-text);
|
||
margin-bottom: var(--space-1);
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.forum-card-preview {
|
||
font-size: var(--text-sm);
|
||
color: var(--c-text-secondary);
|
||
overflow: hidden;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
margin-bottom: var(--space-2);
|
||
}
|
||
|
||
.forum-card-footer {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-3);
|
||
font-size: var(--text-xs);
|
||
color: var(--c-text-muted);
|
||
}
|
||
.forum-card-replies { margin-left: auto; }
|
||
|
||
/* Kategorie-Badges */
|
||
.forum-kat-badge {
|
||
display: inline-block;
|
||
padding: 2px var(--space-2);
|
||
border-radius: var(--radius-full);
|
||
font-size: var(--text-xs);
|
||
font-weight: var(--weight-medium);
|
||
background: var(--c-surface-2);
|
||
color: var(--c-text-secondary);
|
||
text-transform: capitalize;
|
||
flex-shrink: 0;
|
||
}
|
||
.forum-kat-badge--allgemein { background: var(--c-primary-subtle); color: var(--c-primary-dark); }
|
||
.forum-kat-badge--rasse { background: #fef3c7; color: #92400e; }
|
||
.forum-kat-badge--region { background: #dcfce7; color: #166534; }
|
||
.forum-kat-badge--gesundheit{ background: #fee2e2; color: #991b1b; }
|
||
.forum-kat-badge--erziehung { background: #ede9fe; color: #5b21b6; }
|
||
|
||
/* Thread-Detail */
|
||
.forum-thread-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
margin-bottom: var(--space-2);
|
||
}
|
||
|
||
/* Posts */
|
||
.forum-post {
|
||
background: var(--c-surface-2);
|
||
border-radius: var(--radius-md);
|
||
padding: var(--space-3) var(--space-4);
|
||
margin-bottom: var(--space-3);
|
||
}
|
||
.forum-post-meta {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
margin-bottom: var(--space-2);
|
||
font-size: var(--text-xs);
|
||
color: var(--c-text-muted);
|
||
}
|
||
.forum-post-author { font-weight: var(--weight-medium); color: var(--c-text-secondary); }
|
||
.forum-post-date { margin-left: auto; }
|
||
.forum-post-text { font-size: var(--text-sm); color: var(--c-text); white-space: pre-wrap; word-break: break-word; }
|
||
|
||
/* ============================================================
|
||
FORUM Sprint 11 — Erweiterte Styles
|
||
============================================================ */
|
||
|
||
/* Header */
|
||
.forum-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: var(--space-3);
|
||
padding: var(--space-1) 0;
|
||
}
|
||
.forum-header-title {
|
||
font-size: var(--text-xl);
|
||
font-weight: var(--weight-bold);
|
||
margin: 0;
|
||
}
|
||
.forum-header-actions {
|
||
display: flex;
|
||
gap: var(--space-2);
|
||
align-items: center;
|
||
}
|
||
|
||
/* Category tabs — extends .by-tabs with extra bottom padding */
|
||
.forum-category-tabs {
|
||
padding-bottom: var(--space-1);
|
||
}
|
||
|
||
/* Category badge (colored pill) */
|
||
.forum-category-badge {
|
||
display: inline-block;
|
||
padding: 2px var(--space-2);
|
||
border-radius: var(--radius-full);
|
||
font-size: var(--text-xs);
|
||
font-weight: var(--weight-semibold);
|
||
background: var(--c-surface-2);
|
||
color: var(--c-text-secondary);
|
||
text-transform: capitalize;
|
||
flex-shrink: 0;
|
||
}
|
||
.forum-category-badge--allgemein { background: var(--c-primary-subtle); color: var(--c-primary-dark); }
|
||
.forum-category-badge--rasse { background: #fef3c7; color: #92400e; }
|
||
.forum-category-badge--region { background: #dcfce7; color: #166534; }
|
||
.forum-category-badge--gesundheit { background: #fee2e2; color: #991b1b; }
|
||
.forum-category-badge--erziehung { background: #ede9fe; color: #5b21b6; }
|
||
.forum-category-badge--tauschboerse { background: #fce7f3; color: #9d174d; }
|
||
|
||
/* Search */
|
||
.forum-search-wrap {
|
||
position: relative;
|
||
}
|
||
.forum-search {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: var(--space-2) var(--space-4);
|
||
border: 1.5px solid var(--c-border);
|
||
border-radius: var(--radius-full);
|
||
font-size: var(--text-sm);
|
||
background: var(--c-bg);
|
||
color: var(--c-text);
|
||
outline: none;
|
||
transition: border-color 0.15s;
|
||
}
|
||
.forum-search:focus { border-color: var(--c-primary); }
|
||
|
||
/* Thread card (modern) */
|
||
.forum-thread-card {
|
||
background: var(--c-surface);
|
||
border: 1px solid var(--c-border-light);
|
||
border-radius: var(--radius-xl);
|
||
padding: var(--space-4);
|
||
cursor: pointer;
|
||
transition: box-shadow 0.15s, transform 0.15s;
|
||
}
|
||
.forum-thread-card:hover {
|
||
box-shadow: 0 4px 16px rgba(0,0,0,0.08);
|
||
transform: translateY(-1px);
|
||
}
|
||
.forum-card-top {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
margin-bottom: var(--space-2);
|
||
}
|
||
.forum-pin-badge, .forum-lock-badge {
|
||
font-size: 0.85rem;
|
||
}
|
||
.forum-card-content {
|
||
display: flex;
|
||
gap: var(--space-3);
|
||
align-items: flex-start;
|
||
}
|
||
.forum-card-main { flex: 1; min-width: 0; }
|
||
.forum-card-thumb {
|
||
width: 72px;
|
||
height: 72px;
|
||
object-fit: cover;
|
||
border-radius: var(--radius-md);
|
||
flex-shrink: 0;
|
||
border: 1px solid var(--c-border-light);
|
||
}
|
||
.forum-card-title {
|
||
font-size: var(--text-base);
|
||
font-weight: var(--weight-semibold);
|
||
color: var(--c-text);
|
||
margin-bottom: var(--space-1);
|
||
overflow: hidden;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
.forum-card-preview {
|
||
font-size: var(--text-sm);
|
||
color: var(--c-text-secondary);
|
||
overflow: hidden;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
margin-bottom: var(--space-2);
|
||
}
|
||
.forum-card-meta {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--space-3);
|
||
font-size: var(--text-xs);
|
||
color: var(--c-text-muted);
|
||
}
|
||
.forum-liked { color: #ef4444; font-weight: var(--weight-medium); }
|
||
|
||
/* Thread detail */
|
||
.forum-thread-detail { display: flex; flex-direction: column; gap: var(--space-4); }
|
||
.forum-thread-header-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
flex-wrap: wrap;
|
||
}
|
||
.forum-thread-body {
|
||
font-size: var(--text-base);
|
||
color: var(--c-text);
|
||
line-height: 1.6;
|
||
}
|
||
.forum-thread-author-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
padding-top: var(--space-3);
|
||
border-top: 1px solid var(--c-border-light);
|
||
}
|
||
|
||
/* Avatar */
|
||
.forum-avatar {
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: 50%;
|
||
background: var(--c-primary-subtle);
|
||
color: var(--c-primary-dark);
|
||
font-weight: var(--weight-bold);
|
||
font-size: var(--text-base);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
.forum-avatar--sm {
|
||
width: 28px;
|
||
height: 28px;
|
||
font-size: var(--text-sm);
|
||
}
|
||
|
||
/* Like button */
|
||
.forum-like-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
padding: 4px 10px;
|
||
border: 1.5px solid var(--c-border);
|
||
border-radius: var(--radius-full);
|
||
background: var(--c-bg);
|
||
color: var(--c-text-secondary);
|
||
font-size: var(--text-sm);
|
||
cursor: pointer;
|
||
transition: all 0.15s;
|
||
line-height: 1;
|
||
}
|
||
.forum-like-btn:hover { border-color: #ef4444; color: #ef4444; }
|
||
.forum-like-btn.active {
|
||
background: #fef2f2;
|
||
border-color: #ef4444;
|
||
color: #ef4444;
|
||
font-weight: var(--weight-semibold);
|
||
}
|
||
|
||
/* Report button */
|
||
.forum-report-btn {
|
||
padding: 4px 8px;
|
||
border: none;
|
||
background: transparent;
|
||
color: var(--c-text-muted);
|
||
font-size: var(--text-sm);
|
||
cursor: pointer;
|
||
border-radius: var(--radius-sm);
|
||
opacity: 0.6;
|
||
transition: opacity 0.15s;
|
||
}
|
||
.forum-report-btn:hover { opacity: 1; }
|
||
|
||
/* Icon-only Action-Button (Bearbeiten, Löschen, Melden) */
|
||
.forum-icon-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 32px;
|
||
height: 32px;
|
||
padding: 0;
|
||
border: none;
|
||
border-radius: var(--radius-md);
|
||
background: transparent;
|
||
color: var(--c-text-muted);
|
||
cursor: pointer;
|
||
opacity: 0.65;
|
||
transition: opacity 0.15s, background 0.15s;
|
||
flex-shrink: 0;
|
||
}
|
||
.forum-icon-btn:hover { opacity: 1; background: var(--c-surface-2); }
|
||
.forum-icon-btn:active { background: var(--c-border); }
|
||
.forum-icon-btn--danger { color: var(--c-danger); }
|
||
.forum-icon-btn--danger:hover { background: rgba(239,68,68,0.08); }
|
||
|
||
/* Posts section */
|
||
.forum-posts-section { display: flex; flex-direction: column; gap: var(--space-1); }
|
||
.forum-posts-divider {
|
||
font-size: var(--text-sm);
|
||
font-weight: var(--weight-semibold);
|
||
color: var(--c-text-secondary);
|
||
padding: var(--space-2) 0;
|
||
border-top: 1px solid var(--c-border-light);
|
||
}
|
||
|
||
/* Post card */
|
||
.forum-post {
|
||
background: var(--c-bg);
|
||
border-left: 3px solid var(--c-primary-subtle);
|
||
border-radius: 0 var(--radius-md) var(--radius-md) 0;
|
||
padding: var(--space-3) var(--space-4);
|
||
margin-bottom: var(--space-2);
|
||
}
|
||
.forum-post--deleted {
|
||
background: var(--c-surface-2);
|
||
border-left-color: var(--c-border);
|
||
color: var(--c-text-muted);
|
||
font-style: italic;
|
||
font-size: var(--text-sm);
|
||
}
|
||
.forum-post-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
margin-bottom: var(--space-2);
|
||
font-size: var(--text-xs);
|
||
}
|
||
.forum-post-author { font-weight: var(--weight-semibold); color: var(--c-text); }
|
||
.forum-post-date { color: var(--c-text-muted); margin-left: auto; }
|
||
.forum-post-body { margin-bottom: var(--space-2); }
|
||
.forum-post-text { font-size: var(--text-sm); color: var(--c-text); white-space: pre-wrap; word-break: break-word; line-height: 1.5; }
|
||
.forum-post-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
margin-top: var(--space-2);
|
||
}
|
||
|
||
/* Foto grid */
|
||
.forum-foto-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: var(--space-2);
|
||
margin-top: var(--space-2);
|
||
}
|
||
.forum-foto-img {
|
||
width: 100%;
|
||
aspect-ratio: 4/3;
|
||
object-fit: cover;
|
||
border-radius: var(--radius-md);
|
||
cursor: pointer;
|
||
border: 1px solid var(--c-border-light);
|
||
transition: opacity 0.15s;
|
||
}
|
||
.forum-foto-img:hover { opacity: 0.85; }
|
||
|
||
.forum-pdf-card {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
padding: var(--space-2) var(--space-3);
|
||
border-radius: var(--radius-md);
|
||
background: var(--c-surface-2);
|
||
border: 1px solid var(--c-border);
|
||
color: var(--c-text);
|
||
text-decoration: none;
|
||
font-size: var(--text-sm);
|
||
transition: background var(--transition-fast);
|
||
}
|
||
.forum-pdf-card:hover { background: var(--c-surface); }
|
||
.forum-pdf-card .ph-icon { color: var(--c-danger); flex-shrink: 0; }
|
||
|
||
/* Upload */
|
||
.forum-upload-area { display: flex; gap: var(--space-2); align-items: center; }
|
||
.forum-upload-previews {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--space-2);
|
||
}
|
||
.forum-upload-thumb {
|
||
width: 56px;
|
||
height: 56px;
|
||
object-fit: cover;
|
||
border-radius: var(--radius-sm);
|
||
border: 1px solid var(--c-border-light);
|
||
}
|
||
|
||
/* Reply form */
|
||
.forum-reply-form {
|
||
border-top: 1px solid var(--c-border-light);
|
||
padding-top: var(--space-4);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-2);
|
||
}
|
||
.forum-reply-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
}
|
||
.forum-upload-label { cursor: pointer; }
|
||
|
||
/* Moderator toolbar */
|
||
.forum-mod-toolbar {
|
||
display: flex;
|
||
gap: var(--space-2);
|
||
padding: var(--space-2) 0;
|
||
border-bottom: 1px solid var(--c-border-light);
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
/* Moderator reports */
|
||
.forum-mod-reports { display: flex; flex-direction: column; gap: var(--space-4); }
|
||
.forum-mod-report-item {
|
||
background: var(--c-surface-2);
|
||
border-radius: var(--radius-md);
|
||
padding: var(--space-3) var(--space-4);
|
||
border-left: 3px solid var(--c-danger);
|
||
}
|
||
|
||
/* Members map */
|
||
.forum-members-section { display: flex; flex-direction: column; gap: var(--space-3); }
|
||
.forum-map-container {
|
||
height: 360px;
|
||
border-radius: var(--radius-xl);
|
||
overflow: hidden;
|
||
border: 1px solid var(--c-border-light);
|
||
}
|
||
.forum-location-toggle {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
font-size: var(--text-sm);
|
||
color: var(--c-text-secondary);
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* ============================================================
|
||
KNIGGE
|
||
============================================================ */
|
||
|
||
.knigge-accordion {
|
||
border-bottom: 1px solid var(--c-border-light);
|
||
}
|
||
.knigge-accordion:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.knigge-accordion-head {
|
||
width: 100%;
|
||
background: none;
|
||
border: none;
|
||
padding: var(--space-4);
|
||
text-align: left;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-size: var(--text-base);
|
||
color: var(--c-text);
|
||
min-height: 44px;
|
||
-webkit-tap-highlight-color: transparent;
|
||
}
|
||
.knigge-accordion-head:active {
|
||
background: var(--c-surface-2);
|
||
}
|
||
|
||
.knigge-accordion-arrow {
|
||
font-size: var(--text-lg);
|
||
color: var(--c-text-secondary);
|
||
flex-shrink: 0;
|
||
margin-left: var(--space-2);
|
||
transition: transform var(--transition-fast);
|
||
}
|
||
|
||
.knigge-accordion-body {
|
||
padding: var(--space-1) var(--space-4) var(--space-4);
|
||
}
|
||
|
||
.knigge-vote-btn {
|
||
text-align: left !important;
|
||
justify-content: flex-start !important;
|
||
white-space: normal;
|
||
height: auto;
|
||
line-height: 1.4;
|
||
padding: var(--space-3) var(--space-4);
|
||
}
|
||
|
||
.knigge-vote-btn:hover {
|
||
border-color: var(--c-primary);
|
||
color: var(--c-primary);
|
||
}
|
||
|
||
/* ============================================================
|
||
WIKI
|
||
============================================================ */
|
||
|
||
/* .wiki-tab-bar / .wiki-tab-btn → now use .by-tabs / .by-tab */
|
||
|
||
/* Search */
|
||
.wiki-search-wrap {
|
||
padding: var(--space-3) 0 var(--space-2);
|
||
}
|
||
|
||
/* Breed Grid */
|
||
.wiki-breed-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||
gap: var(--space-3);
|
||
padding: var(--space-2) 0 var(--space-6);
|
||
}
|
||
|
||
.wiki-breed-card {
|
||
background: var(--c-surface);
|
||
border: 1.5px solid var(--c-border-light);
|
||
border-radius: var(--radius-lg);
|
||
padding: var(--space-4);
|
||
cursor: pointer;
|
||
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
|
||
}
|
||
.wiki-breed-card:hover {
|
||
border-color: var(--c-primary);
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
.wiki-breed-card-name {
|
||
font-weight: var(--weight-semibold);
|
||
font-size: var(--text-sm);
|
||
color: var(--c-text);
|
||
margin-bottom: var(--space-1);
|
||
}
|
||
.wiki-breed-card-gruppe {
|
||
font-size: var(--text-xs);
|
||
color: var(--c-text-muted);
|
||
margin-bottom: var(--space-2);
|
||
}
|
||
.wiki-breed-badges {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--space-1);
|
||
}
|
||
|
||
/* Größen-Badges */
|
||
.wiki-badge-groesse,
|
||
.wiki-badge-aktivitaet {
|
||
display: inline-block;
|
||
padding: 2px 8px;
|
||
border-radius: var(--radius-full);
|
||
font-size: 0.65rem;
|
||
font-weight: var(--weight-medium);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.wiki-badge-groesse--klein { background: #e0f2fe; color: #0369a1; }
|
||
.wiki-badge-groesse--mittel { background: #fef9c3; color: #854d0e; }
|
||
.wiki-badge-groesse--gross { background: #fce7f3; color: #9d174d; }
|
||
.wiki-badge-groesse--sehr_gross { background: #f3e8ff; color: #6b21a8; }
|
||
|
||
.wiki-badge-aktivitaet--niedrig { background: #dcfce7; color: #166534; }
|
||
.wiki-badge-aktivitaet--mittel { background: #fef3c7; color: #92400e; }
|
||
.wiki-badge-aktivitaet--hoch { background: #fee2e2; color: #991b1b; }
|
||
.wiki-badge-aktivitaet--sehr_hoch { background: #ede9fe; color: #5b21b6; }
|
||
|
||
/* Detail Modal */
|
||
.wiki-detail-badges {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--space-1);
|
||
margin-bottom: var(--space-4);
|
||
}
|
||
.wiki-detail-section {
|
||
margin-bottom: var(--space-4);
|
||
}
|
||
.wiki-detail-label {
|
||
font-size: var(--text-xs);
|
||
font-weight: var(--weight-semibold);
|
||
color: var(--c-text-muted);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
margin-bottom: var(--space-1);
|
||
}
|
||
.wiki-detail-section p {
|
||
color: var(--c-text);
|
||
line-height: 1.6;
|
||
font-size: var(--text-sm);
|
||
}
|
||
|
||
/* Community-Berichte */
|
||
.wiki-bericht-item {
|
||
background: var(--c-surface-2);
|
||
border-radius: var(--radius-md);
|
||
padding: var(--space-3);
|
||
margin-bottom: var(--space-2);
|
||
}
|
||
.wiki-bericht-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
margin-bottom: var(--space-1);
|
||
font-size: var(--text-xs);
|
||
}
|
||
.wiki-bericht-autor {
|
||
font-weight: var(--weight-semibold);
|
||
color: var(--c-text);
|
||
}
|
||
.wiki-bericht-date {
|
||
color: var(--c-text-muted);
|
||
}
|
||
.wiki-bericht-titel {
|
||
font-weight: var(--weight-medium);
|
||
font-size: var(--text-sm);
|
||
color: var(--c-text);
|
||
margin-bottom: var(--space-1);
|
||
}
|
||
.wiki-bericht-text {
|
||
font-size: var(--text-sm);
|
||
color: var(--c-text-secondary);
|
||
white-space: pre-wrap;
|
||
word-break: break-word;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* Accordion (Gesundheit + Recht) */
|
||
.wiki-accordion {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-2);
|
||
padding: var(--space-2) 0 var(--space-6);
|
||
}
|
||
|
||
.wiki-section {
|
||
background: var(--c-surface);
|
||
border: 1.5px solid var(--c-border-light);
|
||
border-radius: var(--radius-lg);
|
||
overflow: hidden;
|
||
transition: border-color var(--transition-fast);
|
||
}
|
||
.wiki-section.open {
|
||
border-color: var(--c-primary);
|
||
}
|
||
|
||
.wiki-section-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-3);
|
||
padding: var(--space-4);
|
||
cursor: pointer;
|
||
user-select: none;
|
||
}
|
||
.wiki-section-icon { font-size: 1.25rem; }
|
||
.wiki-section-titel { flex: 1; font-weight: var(--weight-medium); color: var(--c-text); font-size: var(--text-sm); }
|
||
.wiki-section-arrow { color: var(--c-text-muted); font-size: var(--text-xs); transition: transform var(--transition-fast); }
|
||
|
||
.wiki-section-body {
|
||
padding: 0 var(--space-4) var(--space-4);
|
||
border-top: 1px solid var(--c-border-light);
|
||
}
|
||
.wiki-section-body p {
|
||
font-size: var(--text-sm);
|
||
color: var(--c-text);
|
||
line-height: 1.6;
|
||
padding-top: var(--space-3);
|
||
}
|
||
|
||
/* Recht-Zeilen */
|
||
.wiki-recht-row {
|
||
display: flex;
|
||
gap: var(--space-3);
|
||
padding: var(--space-2) 0;
|
||
border-bottom: 1px solid var(--c-border-light);
|
||
font-size: var(--text-sm);
|
||
}
|
||
.wiki-recht-row:last-child { border-bottom: none; }
|
||
.wiki-recht-label {
|
||
flex-shrink: 0;
|
||
width: 90px;
|
||
font-weight: var(--weight-medium);
|
||
color: var(--c-text-muted);
|
||
font-size: var(--text-xs);
|
||
padding-top: 2px;
|
||
}
|
||
.wiki-recht-row > span:last-child {
|
||
color: var(--c-text);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* Disclaimer */
|
||
.wiki-disclaimer {
|
||
font-size: var(--text-xs);
|
||
color: var(--c-text-muted);
|
||
padding: var(--space-3) 0 var(--space-6);
|
||
font-style: italic;
|
||
text-align: center;
|
||
}
|
||
|
||
/* Quiz */
|
||
.wiki-quiz-wrap {
|
||
padding: var(--space-2) 0;
|
||
}
|
||
.wiki-quiz-progress-bar {
|
||
height: 6px;
|
||
background: var(--c-border-light);
|
||
border-radius: var(--radius-full);
|
||
overflow: hidden;
|
||
margin-bottom: var(--space-3);
|
||
}
|
||
.wiki-quiz-progress {
|
||
height: 100%;
|
||
background: var(--c-primary);
|
||
border-radius: var(--radius-full);
|
||
transition: width 0.3s ease;
|
||
}
|
||
.wiki-quiz-step-info {
|
||
font-size: var(--text-xs);
|
||
color: var(--c-text-muted);
|
||
margin-bottom: var(--space-2);
|
||
text-align: center;
|
||
}
|
||
.wiki-quiz-frage {
|
||
font-size: var(--text-lg);
|
||
font-weight: var(--weight-semibold);
|
||
color: var(--c-text);
|
||
margin-bottom: var(--space-4);
|
||
text-align: center;
|
||
}
|
||
.wiki-quiz-options {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-2);
|
||
margin-bottom: var(--space-4);
|
||
}
|
||
.wiki-quiz-option {
|
||
padding: var(--space-3) var(--space-4);
|
||
border: 1.5px solid var(--c-border);
|
||
border-radius: var(--radius-lg);
|
||
background: var(--c-surface);
|
||
color: var(--c-text);
|
||
font-size: var(--text-base);
|
||
text-align: left;
|
||
cursor: pointer;
|
||
transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
|
||
}
|
||
.wiki-quiz-option:hover {
|
||
border-color: var(--c-primary);
|
||
color: var(--c-primary);
|
||
}
|
||
.wiki-quiz-option.selected {
|
||
border-color: var(--c-primary);
|
||
background: var(--c-primary-subtle);
|
||
color: var(--c-primary-dark);
|
||
font-weight: var(--weight-medium);
|
||
}
|
||
.wiki-quiz-nav {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
/* Quiz Results */
|
||
.wiki-quiz-results {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-3);
|
||
margin-top: var(--space-2);
|
||
}
|
||
.wiki-quiz-result-card {
|
||
background: var(--c-surface);
|
||
border: 1.5px solid var(--c-border-light);
|
||
border-radius: var(--radius-lg);
|
||
padding: var(--space-3);
|
||
display: flex;
|
||
gap: var(--space-3);
|
||
align-items: flex-start;
|
||
}
|
||
.wiki-quiz-result-card-body {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
.wiki-quiz-result-name {
|
||
font-size: var(--text-base);
|
||
font-weight: var(--weight-semibold);
|
||
color: var(--c-text);
|
||
margin-bottom: var(--space-1);
|
||
}
|
||
.wiki-quiz-result-gruppe {
|
||
font-size: var(--text-xs);
|
||
color: var(--c-text-muted);
|
||
margin-bottom: var(--space-1);
|
||
}
|
||
.wiki-quiz-result-char {
|
||
font-size: var(--text-sm);
|
||
color: var(--c-text-secondary);
|
||
line-height: 1.5;
|
||
margin-top: var(--space-2);
|
||
}
|
||
|
||
/* ============================================================
|
||
HUNDE-FILME
|
||
============================================================ */
|
||
|
||
/* Tab-Navigation */
|
||
.movies-tabs {
|
||
display: flex;
|
||
gap: var(--space-1);
|
||
overflow-x: auto;
|
||
padding: var(--space-3) 0 var(--space-2);
|
||
scrollbar-width: none;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
.movies-tabs::-webkit-scrollbar { display: none; }
|
||
|
||
.movies-tab {
|
||
flex-shrink: 0;
|
||
padding: var(--space-2) var(--space-4);
|
||
border-radius: var(--radius-full);
|
||
border: 1.5px solid var(--c-border);
|
||
background: var(--c-surface);
|
||
color: var(--c-text-secondary);
|
||
font-size: var(--text-sm);
|
||
font-weight: var(--weight-medium);
|
||
cursor: pointer;
|
||
transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
|
||
-webkit-tap-highlight-color: transparent;
|
||
white-space: nowrap;
|
||
min-height: 36px;
|
||
}
|
||
.movies-tab--active {
|
||
background: var(--c-primary);
|
||
color: var(--c-text-inverse);
|
||
border-color: var(--c-primary);
|
||
}
|
||
|
||
/* Filter-Row */
|
||
.movies-filter-row {
|
||
display: flex;
|
||
gap: var(--space-2);
|
||
overflow-x: auto;
|
||
padding: var(--space-3) 0;
|
||
scrollbar-width: none;
|
||
}
|
||
.movies-filter-row::-webkit-scrollbar { display: none; }
|
||
|
||
.movies-filter-btn {
|
||
flex-shrink: 0;
|
||
padding: var(--space-2) var(--space-3);
|
||
border-radius: var(--radius-full);
|
||
border: 1.5px solid var(--c-border);
|
||
background: var(--c-surface);
|
||
color: var(--c-text-secondary);
|
||
font-size: var(--text-sm);
|
||
cursor: pointer;
|
||
transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
|
||
-webkit-tap-highlight-color: transparent;
|
||
white-space: nowrap;
|
||
min-height: 36px;
|
||
}
|
||
.movies-filter-btn--active {
|
||
background: var(--c-primary-subtle);
|
||
color: var(--c-primary-dark);
|
||
border-color: var(--c-primary);
|
||
font-weight: var(--weight-semibold);
|
||
}
|
||
|
||
/* Film-Grid */
|
||
.movie-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: var(--space-3);
|
||
padding: var(--space-2) 0 var(--space-6);
|
||
}
|
||
|
||
/* Film-Card */
|
||
.movie-card {
|
||
background: var(--c-surface);
|
||
border-radius: var(--radius-lg);
|
||
border: 1.5px solid var(--c-border);
|
||
padding: var(--space-3);
|
||
cursor: pointer;
|
||
transition: box-shadow var(--transition-fast), transform var(--transition-fast);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-2);
|
||
}
|
||
.movie-card:hover,
|
||
.movie-card:active {
|
||
box-shadow: var(--shadow-md);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.movie-card-emoji {
|
||
font-size: 2.5rem;
|
||
line-height: 1;
|
||
text-align: center;
|
||
padding: var(--space-2) 0;
|
||
}
|
||
|
||
.movie-card-body {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-1);
|
||
}
|
||
|
||
.movie-card-title {
|
||
font-weight: var(--weight-bold);
|
||
font-size: var(--text-sm);
|
||
color: var(--c-text);
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.movie-card-year {
|
||
font-weight: var(--weight-normal);
|
||
color: var(--c-text-secondary);
|
||
font-size: var(--text-xs);
|
||
}
|
||
|
||
.movie-card-genre {
|
||
font-size: var(--text-xs);
|
||
color: var(--c-text-secondary);
|
||
}
|
||
|
||
.movie-card-rasse {
|
||
font-size: var(--text-xs);
|
||
color: var(--c-text-secondary);
|
||
}
|
||
|
||
/* "Stirbt der Hund?" Tags */
|
||
.movie-tag-stirbt {
|
||
background: #fef2f2;
|
||
color: #dc2626;
|
||
border: 1.5px solid #dc2626;
|
||
border-radius: var(--radius-md);
|
||
padding: var(--space-2) var(--space-3);
|
||
font-size: var(--text-xs);
|
||
font-weight: var(--weight-bold);
|
||
text-align: center;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.movie-tag-ueberlebt {
|
||
background: #f0fdf4;
|
||
color: #16a34a;
|
||
border: 1.5px solid #16a34a;
|
||
border-radius: var(--radius-md);
|
||
padding: var(--space-2) var(--space-3);
|
||
font-size: var(--text-xs);
|
||
font-weight: var(--weight-semibold);
|
||
text-align: center;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
/* Star-Rating */
|
||
.movie-card-stars {
|
||
margin-top: var(--space-1);
|
||
}
|
||
|
||
.movie-star-rating {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-1);
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.movie-star {
|
||
font-size: 1.4rem;
|
||
color: var(--c-border);
|
||
cursor: pointer;
|
||
transition: color var(--transition-fast), transform var(--transition-fast);
|
||
line-height: 1;
|
||
-webkit-tap-highlight-color: transparent;
|
||
}
|
||
|
||
.movie-star--active {
|
||
color: #f59e0b;
|
||
}
|
||
|
||
.movie-star:hover {
|
||
transform: scale(1.2);
|
||
}
|
||
|
||
.movie-star-avg {
|
||
font-size: var(--text-sm);
|
||
color: var(--c-text-secondary);
|
||
font-weight: var(--weight-medium);
|
||
}
|
||
|
||
/* Modal-Emoji */
|
||
.movie-modal-emoji {
|
||
font-size: 4rem;
|
||
text-align: center;
|
||
margin-bottom: var(--space-4);
|
||
line-height: 1;
|
||
}
|
||
|
||
/* Promi-Cards */
|
||
.movie-promi-card {
|
||
display: flex;
|
||
gap: var(--space-4);
|
||
align-items: flex-start;
|
||
background: var(--c-surface);
|
||
border-radius: var(--radius-lg);
|
||
border: 1.5px solid var(--c-border);
|
||
padding: var(--space-4);
|
||
margin-bottom: var(--space-3);
|
||
}
|
||
|
||
.movie-promi-emoji {
|
||
font-size: 2.5rem;
|
||
line-height: 1;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.movie-promi-body {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-1);
|
||
}
|
||
|
||
.movie-promi-name {
|
||
font-weight: var(--weight-bold);
|
||
font-size: var(--text-base);
|
||
color: var(--c-text);
|
||
}
|
||
|
||
.movie-promi-rasse {
|
||
font-size: var(--text-sm);
|
||
color: var(--c-primary);
|
||
font-weight: var(--weight-medium);
|
||
}
|
||
|
||
.movie-promi-text {
|
||
font-size: var(--text-sm);
|
||
color: var(--c-text-secondary);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* Hund des Monats */
|
||
.hdm-header {
|
||
text-align: center;
|
||
padding: var(--space-6) 0 var(--space-4);
|
||
}
|
||
|
||
.hdm-trophy {
|
||
font-size: 3.5rem;
|
||
line-height: 1;
|
||
margin-bottom: var(--space-2);
|
||
}
|
||
|
||
.hdm-title {
|
||
font-size: var(--text-xl);
|
||
font-weight: var(--weight-bold);
|
||
color: var(--c-text);
|
||
margin-bottom: var(--space-1);
|
||
}
|
||
|
||
.hdm-monat {
|
||
font-size: var(--text-base);
|
||
color: var(--c-text-secondary);
|
||
font-weight: var(--weight-medium);
|
||
}
|
||
|
||
.hdm-section {
|
||
margin-bottom: var(--space-6);
|
||
}
|
||
|
||
.hdm-section-title {
|
||
font-size: var(--text-base);
|
||
font-weight: var(--weight-bold);
|
||
color: var(--c-text);
|
||
margin-bottom: var(--space-3);
|
||
}
|
||
|
||
/* Vote-Grid */
|
||
.hdm-vote-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: var(--space-3);
|
||
}
|
||
|
||
.hdm-vote-card {
|
||
background: var(--c-surface);
|
||
border-radius: var(--radius-lg);
|
||
border: 1.5px solid var(--c-border);
|
||
padding: var(--space-4);
|
||
text-align: center;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
transition: border-color var(--transition-fast);
|
||
}
|
||
|
||
.hdm-vote-card--voted {
|
||
border-color: var(--c-primary);
|
||
background: var(--c-primary-subtle);
|
||
}
|
||
|
||
.hdm-vote-av {
|
||
width: 56px;
|
||
height: 56px;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
background: var(--c-surface-2);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 2px solid var(--c-border);
|
||
}
|
||
|
||
.hdm-vote-av-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.hdm-vote-av-placeholder {
|
||
font-size: 1.5rem;
|
||
font-weight: var(--weight-bold);
|
||
color: var(--c-primary);
|
||
}
|
||
|
||
.hdm-vote-name {
|
||
font-weight: var(--weight-bold);
|
||
font-size: var(--text-sm);
|
||
color: var(--c-text);
|
||
}
|
||
|
||
/* ============================================================
|
||
WIKI — Rassen-Datenbank (TheDogAPI)
|
||
============================================================ */
|
||
|
||
/* Filter-Bar */
|
||
.wiki-filter-bar {
|
||
display: flex;
|
||
gap: var(--space-2);
|
||
padding: var(--space-3) var(--space-4);
|
||
flex-wrap: wrap;
|
||
}
|
||
.wiki-search-input { flex: 1 1 160px; min-width: 0; }
|
||
.wiki-gruppe-select { flex: 0 1 180px; }
|
||
|
||
/* Breed Grid */
|
||
.wiki-breed-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: var(--space-3);
|
||
padding: 0 var(--space-4) var(--space-4);
|
||
}
|
||
@media (min-width: 640px) {
|
||
.wiki-breed-grid { grid-template-columns: repeat(3, 1fr); }
|
||
}
|
||
|
||
/* Breed Card */
|
||
.wiki-breed-card {
|
||
background: var(--c-surface);
|
||
border: 1px solid var(--c-border);
|
||
border-radius: var(--radius-lg);
|
||
overflow: hidden;
|
||
cursor: pointer;
|
||
transition: box-shadow var(--transition-fast), transform var(--transition-fast);
|
||
display: flex;
|
||
flex-direction:column;
|
||
}
|
||
.wiki-breed-card:active {
|
||
transform: scale(0.97);
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
/* Breed Photo */
|
||
.wiki-breed-photo-wrap {
|
||
width: 100%;
|
||
height: 100px;
|
||
overflow: hidden;
|
||
background: var(--c-bg);
|
||
display: flex;
|
||
align-items:center;
|
||
justify-content: center;
|
||
}
|
||
.wiki-breed-photo {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
display: block;
|
||
}
|
||
.wiki-breed-photo-fallback {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(135deg, var(--c-surface-2) 0%, var(--c-bg) 100%);
|
||
color: var(--c-text-muted);
|
||
font-size: 2.8rem;
|
||
line-height: 1;
|
||
}
|
||
.wiki-detail-photo-placeholder {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: var(--space-2);
|
||
width: 100%;
|
||
height: 220px;
|
||
background: linear-gradient(135deg, var(--c-surface-2) 0%, var(--c-bg) 100%);
|
||
border-radius: var(--radius-lg);
|
||
color: var(--c-text-muted);
|
||
font-size: 3.5rem;
|
||
}
|
||
.wiki-detail-photo-placeholder span {
|
||
font-size: var(--text-xs);
|
||
color: var(--c-text-muted);
|
||
font-weight: var(--weight-medium);
|
||
letter-spacing: 0.05em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
/* Card Body */
|
||
.wiki-breed-card-body {
|
||
padding: var(--space-2) var(--space-3) var(--space-3);
|
||
}
|
||
.wiki-breed-card-name {
|
||
font-weight: var(--weight-semibold);
|
||
font-size: var(--text-sm);
|
||
color: var(--c-text);
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
margin-bottom: var(--space-1);
|
||
}
|
||
.wiki-breed-card-gruppe {
|
||
font-size: var(--text-xs);
|
||
color: var(--c-text-secondary);
|
||
margin-bottom: var(--space-2);
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
/* Erfahrung Badge */
|
||
.wiki-badge-erfahrung {
|
||
display: inline-block;
|
||
padding: 2px 8px;
|
||
border-radius: var(--radius-full);
|
||
font-size: var(--text-xs);
|
||
font-weight: var(--weight-medium);
|
||
white-space: nowrap;
|
||
}
|
||
.wiki-badge-erfahrung--anfaenger { background: #d1fae5; color: #065f46; }
|
||
.wiki-badge-erfahrung--fortgeschritten { background: #fef3c7; color: #92400e; }
|
||
.wiki-badge-erfahrung--experte { background: #fee2e2; color: #991b1b; }
|
||
|
||
/* Trait Chips */
|
||
.wiki-trait-chips {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--space-1);
|
||
margin-top: var(--space-2);
|
||
}
|
||
.wiki-trait-chip {
|
||
background: var(--c-bg);
|
||
border: 1px solid var(--c-border);
|
||
border-radius: var(--radius-full);
|
||
padding: 2px 10px;
|
||
font-size: var(--text-xs);
|
||
color: var(--c-text-secondary);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* Stat Row */
|
||
.wiki-stat-row {
|
||
display: flex;
|
||
gap: var(--space-4);
|
||
padding: var(--space-3) 0;
|
||
border-top: 1px solid var(--c-border);
|
||
border-bottom: 1px solid var(--c-border);
|
||
margin: var(--space-3) 0;
|
||
flex-wrap: wrap;
|
||
}
|
||
.wiki-stat-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
}
|
||
.wiki-stat-label {
|
||
font-size: var(--text-xs);
|
||
color: var(--c-text-secondary);
|
||
font-weight: var(--weight-medium);
|
||
}
|
||
.wiki-stat-value {
|
||
font-size: var(--text-sm);
|
||
color: var(--c-text);
|
||
font-weight: var(--weight-semibold);
|
||
}
|
||
|
||
/* Fit Row */
|
||
.wiki-fit-row {
|
||
display: flex;
|
||
gap: var(--space-4);
|
||
font-size: var(--text-sm);
|
||
margin: var(--space-2) 0;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
/* Detail Photo (modal top) */
|
||
.wiki-detail-photo {
|
||
width: 100%;
|
||
max-height: 220px;
|
||
object-fit: cover;
|
||
border-radius: var(--radius-md);
|
||
margin-bottom: var(--space-3);
|
||
display: block;
|
||
}
|
||
|
||
/* Loading State */
|
||
.wiki-loading-state {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: var(--space-12) var(--space-6);
|
||
text-align: center;
|
||
gap: var(--space-3);
|
||
}
|
||
.wiki-loading-spinner {
|
||
width: 40px;
|
||
height: 40px;
|
||
border: 4px solid var(--c-border);
|
||
border-top: 4px solid var(--c-primary);
|
||
border-radius: 50%;
|
||
animation: wiki-spin 0.9s linear infinite;
|
||
}
|
||
@keyframes wiki-spin {
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
.wiki-loading-text {
|
||
font-size: var(--text-lg);
|
||
font-weight: var(--weight-semibold);
|
||
color: var(--c-text);
|
||
}
|
||
.wiki-loading-hint {
|
||
font-size: var(--text-sm);
|
||
color: var(--c-text-secondary);
|
||
}
|
||
|
||
/* Breeds loading placeholder */
|
||
.wiki-breeds-loading {
|
||
grid-column: 1 / -1;
|
||
padding: var(--space-6);
|
||
text-align: center;
|
||
color: var(--c-text-secondary);
|
||
font-size: var(--text-sm);
|
||
}
|
||
|
||
/* Quiz result photo */
|
||
.wiki-quiz-result-photo-wrap {
|
||
width: 100px;
|
||
height: 100px;
|
||
flex-shrink: 0;
|
||
overflow: hidden;
|
||
border-radius: var(--radius-md);
|
||
background: var(--c-surface-2);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.wiki-quiz-result-photo {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
object-position: center top;
|
||
display: block;
|
||
}
|
||
.wiki-quiz-result-photo-fallback {
|
||
font-size: 2.5rem;
|
||
color: var(--c-text-secondary);
|
||
}
|
||
|
||
/* Detail Hero (neues Layout) */
|
||
.wiki-detail-hero-photo-wrap {
|
||
width: 100%;
|
||
max-height: 240px;
|
||
overflow: hidden;
|
||
border-radius: var(--radius-lg);
|
||
margin-bottom: var(--space-3);
|
||
background: var(--c-surface-2);
|
||
}
|
||
.wiki-detail-hero-photo-wrap .wiki-detail-photo {
|
||
width: 100%;
|
||
height: 240px;
|
||
object-fit: cover;
|
||
object-position: center top;
|
||
margin-bottom: 0;
|
||
border-radius: 0;
|
||
}
|
||
|
||
/* Steckbrief-Grid */
|
||
.wiki-steckbrief-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 1px;
|
||
background: var(--c-border-light);
|
||
border: 1px solid var(--c-border-light);
|
||
border-radius: var(--radius-md);
|
||
overflow: hidden;
|
||
margin-bottom: var(--space-4);
|
||
}
|
||
.wiki-steckbrief-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
padding: var(--space-2) var(--space-3);
|
||
background: var(--c-surface);
|
||
}
|
||
.wiki-steckbrief-label {
|
||
font-size: var(--text-xs);
|
||
color: var(--c-text-muted);
|
||
font-weight: var(--weight-medium);
|
||
}
|
||
.wiki-steckbrief-value {
|
||
font-size: var(--text-sm);
|
||
color: var(--c-text);
|
||
font-weight: var(--weight-semibold);
|
||
}
|
||
|
||
/* Interesse-Section */
|
||
.wiki-interesse-section {
|
||
background: var(--c-surface-2);
|
||
border-radius: var(--radius-md);
|
||
padding: var(--space-3);
|
||
}
|
||
.wiki-interesse-btn {
|
||
border: 1px solid var(--c-border);
|
||
border-radius: var(--radius-md);
|
||
background: var(--c-surface);
|
||
color: var(--c-text);
|
||
font-size: var(--text-sm);
|
||
padding: var(--space-2) var(--space-3);
|
||
cursor: pointer;
|
||
transition: background 0.15s, color 0.15s, border-color 0.15s;
|
||
}
|
||
.wiki-interesse-btn:hover {
|
||
border-color: var(--c-primary);
|
||
color: var(--c-primary);
|
||
}
|
||
|
||
/* Züchter-Karten */
|
||
.wiki-zuchter-card {
|
||
transition: background 0.15s;
|
||
}
|
||
|
||
.hdm-vote-rasse {
|
||
font-size: var(--text-xs);
|
||
color: var(--c-text-secondary);
|
||
}
|
||
|
||
.hdm-vote-btn {
|
||
width: 100%;
|
||
font-size: var(--text-xs);
|
||
padding: var(--space-2) var(--space-3);
|
||
min-height: 36px;
|
||
}
|
||
|
||
/* Top-Liste */
|
||
.hdm-top-entry {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-3);
|
||
padding: var(--space-3) 0;
|
||
border-bottom: 1px solid var(--c-border-light);
|
||
}
|
||
.hdm-top-entry:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.hdm-top-medal {
|
||
font-size: 1.5rem;
|
||
flex-shrink: 0;
|
||
width: 2rem;
|
||
text-align: center;
|
||
}
|
||
|
||
.hdm-top-av {
|
||
width: 44px;
|
||
height: 44px;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
background: var(--c-surface-2);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 2px solid var(--c-border);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.hdm-top-av-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.hdm-top-av-placeholder {
|
||
font-size: 1.1rem;
|
||
font-weight: var(--weight-bold);
|
||
color: var(--c-primary);
|
||
}
|
||
|
||
.hdm-top-info {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.hdm-top-name {
|
||
font-weight: var(--weight-semibold);
|
||
font-size: var(--text-sm);
|
||
color: var(--c-text);
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.hdm-top-rasse,
|
||
.hdm-top-besitzer {
|
||
font-size: var(--text-xs);
|
||
color: var(--c-text-secondary);
|
||
}
|
||
|
||
.hdm-top-stimmen {
|
||
font-size: var(--text-sm);
|
||
font-weight: var(--weight-bold);
|
||
color: var(--c-primary);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* ============================================================
|
||
FRIENDS
|
||
============================================================ */
|
||
.friends-search-row {
|
||
display: flex;
|
||
gap: var(--space-2);
|
||
margin-bottom: var(--space-4);
|
||
}
|
||
|
||
.friends-search-results {
|
||
background: var(--c-surface);
|
||
border: 1px solid var(--c-border);
|
||
border-radius: var(--radius-md);
|
||
margin-bottom: var(--space-4);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.friend-result-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-3);
|
||
padding: var(--space-3) var(--space-4);
|
||
border-bottom: 1px solid var(--c-border-light);
|
||
}
|
||
.friend-result-item:last-child { border-bottom: none; }
|
||
|
||
.friend-avatar {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
background: var(--c-primary-subtle);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: var(--text-base);
|
||
font-weight: var(--weight-bold);
|
||
color: var(--c-primary);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.friend-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-3);
|
||
padding: var(--space-3) var(--space-4);
|
||
background: var(--c-surface);
|
||
border-radius: var(--radius-md);
|
||
margin-bottom: var(--space-2);
|
||
}
|
||
|
||
.friend-item-name {
|
||
flex: 1;
|
||
font-weight: var(--weight-medium);
|
||
color: var(--c-text);
|
||
}
|
||
|
||
.friend-item-actions {
|
||
display: flex;
|
||
gap: var(--space-2);
|
||
}
|
||
|
||
.friend-request-card {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-3);
|
||
padding: var(--space-3) var(--space-4);
|
||
background: var(--c-primary-subtle);
|
||
border-radius: var(--radius-md);
|
||
margin-bottom: var(--space-2);
|
||
border: 1px solid var(--c-primary-light, var(--c-border));
|
||
}
|
||
|
||
/* ============================================================
|
||
CHAT
|
||
============================================================ */
|
||
.page-container-chat {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
padding: 0;
|
||
}
|
||
|
||
/* Conversation list */
|
||
.chat-conv-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-3);
|
||
padding: var(--space-3) var(--space-4);
|
||
border-bottom: 1px solid var(--c-border-light);
|
||
cursor: pointer;
|
||
transition: background var(--transition-fast);
|
||
}
|
||
.chat-conv-item:hover,
|
||
.chat-conv-item:active { background: var(--c-surface-2); }
|
||
.chat-conv-item.active { background: var(--c-primary-subtle); border-left: 3px solid var(--c-primary); }
|
||
|
||
.chat-conv-avatar {
|
||
width: 44px;
|
||
height: 44px;
|
||
border-radius: 50%;
|
||
background: var(--c-primary-subtle);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: var(--text-lg);
|
||
font-weight: var(--weight-bold);
|
||
color: var(--c-primary);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.chat-conv-info {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.chat-conv-name {
|
||
font-weight: var(--weight-semibold);
|
||
font-size: var(--text-sm);
|
||
color: var(--c-text);
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
.chat-conv-preview {
|
||
font-size: var(--text-xs);
|
||
color: var(--c-text-secondary);
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.chat-conv-meta {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-end;
|
||
gap: 4px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.chat-conv-time {
|
||
font-size: var(--text-xs);
|
||
color: var(--c-text-muted);
|
||
}
|
||
|
||
.chat-unread-badge {
|
||
background: var(--c-primary);
|
||
color: #fff;
|
||
font-size: var(--text-xs);
|
||
font-weight: var(--weight-bold);
|
||
border-radius: var(--radius-full);
|
||
padding: 1px 6px;
|
||
min-width: 18px;
|
||
text-align: center;
|
||
}
|
||
|
||
/* Thread view */
|
||
.chat-thread {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.chat-thread-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-3);
|
||
padding: 0 var(--space-4);
|
||
height: 56px;
|
||
background: var(--c-surface);
|
||
border-bottom: 1px solid var(--c-border);
|
||
flex-shrink: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.chat-thread-partner {
|
||
flex: 1;
|
||
font-weight: var(--weight-semibold);
|
||
font-size: var(--text-base);
|
||
color: var(--c-text);
|
||
}
|
||
|
||
.chat-messages {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: var(--space-4);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-2);
|
||
}
|
||
|
||
.chat-bubble-row {
|
||
display: flex;
|
||
max-width: 80%;
|
||
}
|
||
.chat-bubble-row--mine { align-self: flex-end; flex-direction: row-reverse; }
|
||
.chat-bubble-row--theirs { align-self: flex-start; }
|
||
|
||
.chat-bubble {
|
||
padding: var(--space-2) var(--space-3);
|
||
border-radius: var(--radius-lg);
|
||
font-size: var(--text-sm);
|
||
line-height: var(--leading-relaxed);
|
||
word-break: break-word;
|
||
position: relative;
|
||
}
|
||
.chat-bubble--mine {
|
||
background: var(--c-primary);
|
||
color: #fff;
|
||
border-bottom-right-radius: 4px;
|
||
}
|
||
.chat-bubble--theirs {
|
||
background: var(--c-surface-2);
|
||
color: var(--c-text);
|
||
border-bottom-left-radius: 4px;
|
||
}
|
||
.chat-bubble--deleted {
|
||
font-style: italic;
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.chat-bubble-time {
|
||
font-size: var(--text-xs);
|
||
color: var(--c-text-muted);
|
||
margin-top: 2px;
|
||
text-align: right;
|
||
}
|
||
.chat-bubble-row--theirs .chat-bubble-time { text-align: left; }
|
||
|
||
.chat-date-divider {
|
||
text-align: center;
|
||
font-size: var(--text-xs);
|
||
color: var(--c-text-muted);
|
||
padding: var(--space-2) 0;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.chat-input-bar {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
gap: var(--space-2);
|
||
padding: var(--space-3) var(--space-4);
|
||
background: var(--c-surface);
|
||
border-top: 1px solid var(--c-border);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.chat-input {
|
||
flex: 1;
|
||
border: 1.5px solid var(--c-border);
|
||
border-radius: var(--radius-full);
|
||
padding: var(--space-2) var(--space-4);
|
||
font-size: var(--text-sm);
|
||
font-family: var(--font-sans);
|
||
background: var(--c-surface-2);
|
||
color: var(--c-text);
|
||
outline: none;
|
||
resize: none;
|
||
max-height: 100px;
|
||
overflow-y: auto;
|
||
line-height: var(--leading-normal);
|
||
transition: border-color var(--transition-fast);
|
||
}
|
||
.chat-input:focus { border-color: var(--c-primary); }
|
||
|
||
.chat-send-btn {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
background: var(--c-primary);
|
||
color: #fff;
|
||
border: none;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
flex-shrink: 0;
|
||
transition: background var(--transition-fast);
|
||
}
|
||
.chat-send-btn:hover { background: var(--c-primary-dark); }
|
||
.chat-send-btn:disabled { opacity: 0.5; cursor: default; }
|
||
|
||
/* Chat: Kamera-Button */
|
||
.chat-photo-btn {
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: 50%;
|
||
background: transparent;
|
||
color: var(--c-text-secondary);
|
||
border: none;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
flex-shrink: 0;
|
||
transition: color var(--transition-fast);
|
||
}
|
||
.chat-photo-btn:hover { color: var(--c-primary); }
|
||
|
||
/* Chat: Bild in Nachrichtenblase */
|
||
.chat-bubble-img {
|
||
max-width: 100%;
|
||
max-height: 260px;
|
||
border-radius: var(--radius-md);
|
||
display: block;
|
||
cursor: pointer;
|
||
object-fit: cover;
|
||
}
|
||
|
||
/* Chat: Online-Dot */
|
||
.online-dot {
|
||
width: 8px;
|
||
height: 8px;
|
||
background: #22C55E;
|
||
border-radius: 50%;
|
||
display: inline-block;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.chat-avatar-dot {
|
||
position: absolute;
|
||
bottom: 1px;
|
||
right: 1px;
|
||
border: 2px solid var(--c-surface);
|
||
}
|
||
|
||
/* --- Hundeprofil Avatar --- */
|
||
.dp-avatar-ring {
|
||
width: 120px; height: 120px;
|
||
border-radius: 50%;
|
||
border: 3px solid var(--c-primary);
|
||
overflow: hidden;
|
||
display: flex; align-items: center; justify-content: center;
|
||
}
|
||
.dp-avatar-img {
|
||
width: 100%; height: 100%;
|
||
object-fit: cover;
|
||
transform-origin: center;
|
||
pointer-events: none;
|
||
user-select: none;
|
||
}
|
||
.dp-avatar-empty {
|
||
background: var(--c-surface-2);
|
||
border-color: var(--c-border);
|
||
font-size: 3.5rem;
|
||
}
|
||
.dp-avatar-edit-btn {
|
||
position: absolute; bottom: 4px; right: 4px;
|
||
background: var(--c-primary); color: #fff;
|
||
border: none; border-radius: 50%;
|
||
width: 30px; height: 30px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* --- Foto-Editor Modal --- */
|
||
.photo-editor { display: flex; flex-direction: column; gap: var(--space-3); align-items: center; }
|
||
.photo-editor-preview {
|
||
width: 200px; height: 200px;
|
||
border-radius: 50%;
|
||
border: 3px solid var(--c-primary);
|
||
overflow: hidden;
|
||
cursor: grab;
|
||
display: flex; align-items: center; justify-content: center;
|
||
background: var(--c-surface-2);
|
||
}
|
||
.photo-editor-preview:active { cursor: grabbing; }
|
||
.photo-editor-preview img {
|
||
width: 100%; height: 100%;
|
||
object-fit: cover;
|
||
transform-origin: center;
|
||
pointer-events: all;
|
||
user-select: none;
|
||
-webkit-user-drag: none;
|
||
-webkit-touch-callout: none;
|
||
touch-action: none;
|
||
}
|
||
.photo-editor-empty { font-size: 5rem; color: var(--c-text-secondary); }
|
||
.photo-editor-controls { width: 100%; }
|
||
|
||
/* ------------------------------------------------------------
|
||
Admin-Seite — Mobile-Responsive Styles
|
||
------------------------------------------------------------ */
|
||
|
||
/* Tab-Leiste mit Abstand nach unten */
|
||
.adm-tabs {
|
||
margin-bottom: var(--space-5);
|
||
}
|
||
|
||
/* Filter-Zeile (Suche + Select / Suche + Checkbox) */
|
||
.adm-filter-row {
|
||
display: flex;
|
||
gap: var(--space-2);
|
||
margin-bottom: var(--space-4);
|
||
flex-wrap: wrap;
|
||
}
|
||
.adm-filter-input {
|
||
flex: 1 1 160px;
|
||
min-width: 0;
|
||
padding: var(--space-2) var(--space-3);
|
||
border: 1.5px solid var(--c-border);
|
||
border-radius: var(--radius-md);
|
||
font-size: var(--text-sm);
|
||
font-family: inherit;
|
||
background: var(--c-surface);
|
||
color: var(--c-text);
|
||
}
|
||
.adm-filter-select {
|
||
flex: 0 0 auto;
|
||
padding: var(--space-2) var(--space-3);
|
||
border: 1.5px solid var(--c-border);
|
||
border-radius: var(--radius-md);
|
||
font-size: var(--text-sm);
|
||
font-family: inherit;
|
||
background: var(--c-surface);
|
||
color: var(--c-text);
|
||
max-width: 140px;
|
||
}
|
||
.adm-filter-label {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
font-size: var(--text-sm);
|
||
color: var(--c-text-secondary);
|
||
white-space: nowrap;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* Forum-Unternavigation scrollbar auf Mobile */
|
||
.adm-subnav {
|
||
display: flex;
|
||
gap: var(--space-2);
|
||
margin-bottom: var(--space-4);
|
||
overflow-x: auto;
|
||
flex-wrap: nowrap;
|
||
scrollbar-width: none;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
.adm-subnav::-webkit-scrollbar { display: none; }
|
||
.adm-subnav .btn { flex-shrink: 0; }
|
||
|
||
/* Tabellen: scrollbarer Container + Card ohne overflow:hidden */
|
||
.adm-table-card {
|
||
overflow: visible; /* Card-Schatten bleibt, overflow wird im Scroll-Container geregelt */
|
||
}
|
||
.adm-table-scroll {
|
||
overflow-x: auto;
|
||
-webkit-overflow-scrolling: touch;
|
||
border-radius: var(--radius-lg); /* für abgerundete Ecken bei overflow */
|
||
}
|
||
.adm-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: var(--text-sm);
|
||
min-width: 480px; /* verhindert Quetschen unter diesem Wert */
|
||
}
|
||
.adm-th {
|
||
padding: var(--space-3) var(--space-4);
|
||
font-weight: var(--weight-semibold);
|
||
color: var(--c-text-secondary);
|
||
white-space: nowrap;
|
||
}
|
||
.adm-td {
|
||
padding: var(--space-3) var(--space-4);
|
||
}
|
||
|
||
/* Job-ID unter dem Job-Namen: kürzen wenn zu lang */
|
||
.adm-job-id {
|
||
font-size: var(--text-xs);
|
||
color: var(--c-text-muted);
|
||
font-weight: normal;
|
||
max-width: 180px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* Trigger-Spalte in Jobs-Tabelle */
|
||
.adm-td-trigger {
|
||
color: var(--c-text-muted);
|
||
font-size: var(--text-xs);
|
||
max-width: 160px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* Monospace-Badge (Audit-Log Aktion) */
|
||
.adm-badge-mono {
|
||
font-size: var(--text-xs);
|
||
padding: 2px 7px;
|
||
border-radius: 3px;
|
||
background: var(--c-surface-2);
|
||
color: var(--c-text-secondary);
|
||
font-family: monospace;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* Icon-only Buttons in Tabellen: 44px Touch-Target */
|
||
.adm-icon-btn {
|
||
min-width: 44px;
|
||
min-height: 44px;
|
||
padding: 0;
|
||
}
|
||
|
||
/* Auf sehr kleinen Screens: Select volle Breite */
|
||
@media (max-width: 360px) {
|
||
.adm-filter-select {
|
||
max-width: 100%;
|
||
flex-basis: 100%;
|
||
}
|
||
}
|
||
|
||
.adm-stats-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: var(--space-3);
|
||
margin-bottom: var(--space-5);
|
||
width: 100%;
|
||
min-width: 0;
|
||
}
|
||
@media (min-width: 480px) {
|
||
.adm-stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||
}
|
||
@media (min-width: 768px) {
|
||
.adm-stats-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
|
||
}
|
||
LOST DOG
|
||
============================================================ */
|
||
|
||
/* Karte für einen vermissten Hund */
|
||
.lost-card {
|
||
display: flex;
|
||
gap: var(--space-3);
|
||
align-items: flex-start;
|
||
background: var(--c-surface);
|
||
border: 1px solid var(--c-border);
|
||
border-left: 4px solid var(--c-danger, #e74c3c);
|
||
border-radius: var(--radius-md);
|
||
padding: var(--space-3);
|
||
margin-bottom: var(--space-3);
|
||
cursor: pointer;
|
||
transition: background var(--transition-fast), box-shadow var(--transition-fast);
|
||
}
|
||
.lost-card:hover {
|
||
background: var(--c-surface-2);
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
/* Foto links in der Karte */
|
||
.lost-card-foto {
|
||
width: 72px;
|
||
height: 72px;
|
||
border-radius: var(--radius-md);
|
||
object-fit: cover;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* Platzhalter wenn kein Foto */
|
||
.lost-card-foto-placeholder {
|
||
width: 72px;
|
||
height: 72px;
|
||
border-radius: var(--radius-md);
|
||
background: var(--c-surface-2);
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 2rem;
|
||
}
|
||
|
||
/* Text-Block rechts neben dem Foto */
|
||
.lost-card-body {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
/* Name des vermissten Hundes */
|
||
.lost-card-name {
|
||
font-weight: var(--weight-semibold);
|
||
font-size: var(--text-base);
|
||
margin-bottom: var(--space-1);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
/* Kurzbeschreibung */
|
||
.lost-card-desc {
|
||
font-size: var(--text-sm);
|
||
color: var(--c-text);
|
||
margin: 0 0 var(--space-1);
|
||
overflow: hidden;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
|
||
/* Metadaten-Zeile (Datum, Entfernung) */
|
||
.lost-card-meta {
|
||
font-size: var(--text-xs);
|
||
color: var(--c-text-secondary);
|
||
}
|
||
|
||
/* Badge "Gefunden!" — grüner Überlagerungsstreifen */
|
||
.lost-badge-gefunden {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: var(--space-1);
|
||
background: var(--c-success, #27ae60);
|
||
color: #fff;
|
||
font-size: var(--text-xs);
|
||
font-weight: var(--weight-semibold);
|
||
padding: 2px var(--space-2);
|
||
border-radius: var(--radius-full);
|
||
text-transform: uppercase;
|
||
letter-spacing: .04em;
|
||
}
|
||
|
||
/* Badge "Meine Meldung" */
|
||
.lost-badge-own {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
background: var(--c-warning-subtle, #fff3cd);
|
||
color: var(--c-warning-dark, #856404);
|
||
font-size: var(--text-xs);
|
||
font-weight: var(--weight-medium);
|
||
padding: 2px var(--space-2);
|
||
border-radius: var(--radius-full);
|
||
}
|
||
|
||
/* Entfernungs-Pill */
|
||
.lost-dist-pill {
|
||
margin-left: auto;
|
||
white-space: nowrap;
|
||
font-size: var(--text-sm);
|
||
color: var(--c-text-secondary);
|
||
}
|
||
|
||
/* Karten-Wrapper auf der Lost-Seite */
|
||
.lost-map-wrap {
|
||
height: 280px;
|
||
border-radius: var(--radius-md);
|
||
overflow: hidden;
|
||
background: var(--c-surface-2);
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
/* OSM-Attribution unter der Karte */
|
||
.lost-map-attribution {
|
||
font-size: 10px;
|
||
color: var(--c-text-secondary);
|
||
text-align: right;
|
||
padding: 2px var(--space-2) 0;
|
||
margin-bottom: var(--space-4);
|
||
}
|
||
|
||
/* Info-Zeile über der Liste ("X vermisste Hunde …") */
|
||
.lost-info-text {
|
||
font-size: var(--text-sm);
|
||
color: var(--c-text-secondary);
|
||
margin-bottom: var(--space-3);
|
||
}
|
||
FRIENDS ACTIVITY FEED
|
||
============================================================ */
|
||
.fr-activity-timeline {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-2);
|
||
}
|
||
|
||
.fr-activity-item {
|
||
display: flex;
|
||
gap: var(--space-3);
|
||
align-items: flex-start;
|
||
padding: var(--space-3) var(--space-4);
|
||
background: var(--c-surface);
|
||
border-radius: var(--radius-lg);
|
||
border: 1px solid var(--c-border);
|
||
width: 100%;
|
||
text-align: left;
|
||
font: inherit;
|
||
}
|
||
.fr-activity-item--link {
|
||
cursor: pointer;
|
||
transition: background var(--transition-fast);
|
||
-webkit-tap-highlight-color: transparent;
|
||
}
|
||
.fr-activity-item--link:hover,
|
||
.fr-activity-item--link:active {
|
||
background: var(--c-surface-2);
|
||
border-color: var(--c-primary-subtle);
|
||
}
|
||
|
||
.fr-activity-avatar-wrap {
|
||
position: relative;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.fr-activity-avatar {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
object-fit: cover;
|
||
border: 2px solid var(--c-primary);
|
||
display: block;
|
||
}
|
||
|
||
.fr-activity-avatar--initial {
|
||
background: var(--c-primary-subtle);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: var(--weight-bold);
|
||
color: var(--c-primary);
|
||
font-size: var(--text-sm);
|
||
}
|
||
|
||
.fr-activity-icon-badge {
|
||
position: absolute;
|
||
bottom: -3px;
|
||
right: -3px;
|
||
width: 18px;
|
||
height: 18px;
|
||
border-radius: 50%;
|
||
background: var(--c-primary);
|
||
color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 2px solid var(--c-surface);
|
||
}
|
||
|
||
.fr-activity-body {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.fr-activity-meta {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: baseline;
|
||
gap: var(--space-1);
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
.fr-activity-user {
|
||
font-size: var(--text-sm);
|
||
font-weight: var(--weight-semibold);
|
||
color: var(--c-text);
|
||
}
|
||
|
||
.fr-activity-dog {
|
||
font-size: var(--text-xs);
|
||
padding: 1px 6px;
|
||
border-radius: var(--radius-full);
|
||
background: var(--c-surface-2);
|
||
color: var(--c-text-secondary);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.fr-activity-text {
|
||
font-size: var(--text-sm);
|
||
color: var(--c-text-secondary);
|
||
line-height: 1.4;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
max-width: 100%;
|
||
}
|
||
|
||
.fr-activity-time {
|
||
font-size: var(--text-xs);
|
||
color: var(--c-text-muted);
|
||
margin-top: 2px;
|
||
}
|
||
|
||
/* health chart extras (weight chart) */
|
||
.health-chart-title { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--c-text); margin-bottom: var(--space-2); }
|
||
.health-chart-svg { width: 100%; height: auto; display: block; }
|
||
.health-chart-labels { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--c-text-secondary); margin-top: var(--space-1); }
|
||
.health-chart-empty { font-size: var(--text-sm); color: var(--c-text-muted); text-align: center; padding: var(--space-4) 0; }
|
||
|
||
/* ============================================================
|
||
RSVP — Event-Teilnahme
|
||
============================================================ */
|
||
.event-rsvp-bar { display:flex; gap:var(--space-2); align-items:center; margin:var(--space-3) 0 var(--space-2); flex-wrap:wrap; }
|
||
.event-rsvp-btn { display:inline-flex; align-items:center; gap:var(--space-1); padding:6px 14px; border-radius:var(--radius); border:1.5px solid var(--c-border); background:var(--c-surface); color:var(--c-text-secondary); font-size:var(--text-sm); font-weight:500; cursor:pointer; transition:background .15s,color .15s,border-color .15s; }
|
||
.event-rsvp-btn:hover { border-color:var(--c-primary); color:var(--c-primary); }
|
||
.event-rsvp-btn.active { background:var(--c-primary); border-color:var(--c-primary); color:#fff; }
|
||
.event-attendees { font-size:var(--text-sm); color:var(--c-text-secondary); cursor:pointer; display:inline-flex; align-items:center; gap:var(--space-1); }
|
||
.event-attendees:hover { color:var(--c-primary); }
|
||
.ev-attendees-list { display:flex; flex-wrap:wrap; gap:var(--space-1); margin-top:var(--space-2); }
|
||
.ev-attendee-chip { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:999px; background:var(--c-surface-2); font-size:var(--text-xs); color:var(--c-text-secondary); }
|
||
|
||
/* ============================================================
|
||
SERVICES / MATCHING (Sitting & Walks Anbieter-Suche)
|
||
============================================================ */
|
||
.svc-matching-layout { display:flex; flex-direction:column; gap:var(--space-4); padding:var(--space-3) 0; }
|
||
.svc-own-offer { padding:var(--space-4); }
|
||
.svc-own-offer-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-3); }
|
||
.svc-own-offer-title { font-weight:var(--weight-semibold); font-size:var(--text-base); }
|
||
.svc-login-hint { font-size:var(--text-sm); color:var(--c-text-muted); }
|
||
.svc-toggle { position:relative; display:inline-block; width:44px; height:24px; cursor:pointer; }
|
||
.svc-toggle input { opacity:0; width:0; height:0; }
|
||
.svc-toggle-slider { position:absolute; inset:0; background:var(--c-border); border-radius:var(--radius-full); transition:background var(--transition-fast); }
|
||
.svc-toggle-slider::before { content:''; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:transform var(--transition-fast); box-shadow:0 1px 3px rgba(0,0,0,.2); }
|
||
.svc-toggle input:checked + .svc-toggle-slider { background:var(--c-primary); }
|
||
.svc-toggle input:checked + .svc-toggle-slider::before { transform:translateX(20px); }
|
||
.svc-offer-form { display:flex; flex-direction:column; gap:var(--space-3); }
|
||
.svc-offer-form--hidden { display:none; }
|
||
.svc-hint { color:var(--c-text-secondary); font-size:var(--text-sm); text-align:center; padding:var(--space-6) 0; }
|
||
.svc-results-list { display:flex; flex-direction:column; gap:var(--space-3); }
|
||
.svc-card { display:flex; align-items:flex-start; gap:var(--space-3); padding:var(--space-4); background:var(--c-surface); border-radius:var(--radius-lg); border:1px solid var(--c-border-light); box-shadow:var(--shadow-xs); }
|
||
.svc-card-avatar { width:44px; height:44px; border-radius:var(--radius-full); background:var(--c-primary-subtle); color:var(--c-primary); display:flex; align-items:center; justify-content:center; font-size:1.4rem; flex-shrink:0; }
|
||
.svc-card-body { flex:1; min-width:0; }
|
||
.svc-card-name { font-weight:var(--weight-semibold); margin-bottom:var(--space-1); }
|
||
.svc-card-dist { font-size:var(--text-xs); color:var(--c-text-muted); margin-bottom:var(--space-1); }
|
||
.svc-card-desc { font-size:var(--text-sm); color:var(--c-text-secondary); overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
|
||
.svc-card-side { display:flex; flex-direction:column; align-items:flex-end; gap:var(--space-2); flex-shrink:0; }
|
||
.svc-card-price { font-weight:var(--weight-bold); color:var(--c-primary); font-size:var(--text-sm); }
|
||
|
||
/* ============================================================
|
||
HELP TOOLTIP
|
||
============================================================ */
|
||
.by-help-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 18px; height: 18px;
|
||
border-radius: 50%;
|
||
background: var(--c-surface-2);
|
||
color: var(--c-text-secondary);
|
||
border: none;
|
||
cursor: pointer;
|
||
vertical-align: middle;
|
||
margin-left: 4px;
|
||
flex-shrink: 0;
|
||
transition: background .15s;
|
||
}
|
||
.by-help-btn:hover { background: var(--c-primary-subtle, #e8f0fe); color: var(--c-primary); }
|
||
|
||
.by-help-tooltip {
|
||
position: absolute;
|
||
z-index: 9000;
|
||
background: var(--c-text);
|
||
color: var(--c-bg);
|
||
font-size: var(--text-xs);
|
||
line-height: 1.5;
|
||
padding: var(--space-2) var(--space-3);
|
||
border-radius: var(--radius-md);
|
||
max-width: 240px;
|
||
box-shadow: 0 4px 12px rgba(0,0,0,.15);
|
||
pointer-events: none;
|
||
}
|
||
/* SVG-Icon-Variante (Phosphor) */
|
||
.empty-state-icon > svg.ph-icon,
|
||
svg.empty-state-icon {
|
||
width: 56px;
|
||
height: 56px;
|
||
color: var(--c-text-muted);
|
||
opacity: .5;
|
||
}
|
||
.empty-state-cta {
|
||
margin-top: var(--space-2);
|
||
}
|
||
|
||
/* ============================================================
|
||
RATING STARS — Bewertungskomponente
|
||
============================================================ */
|
||
.rating-display {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: var(--space-2);
|
||
margin: var(--space-3) 0;
|
||
}
|
||
.rating-stars-avg {
|
||
display: flex;
|
||
gap: 2px;
|
||
}
|
||
.rating-star {
|
||
font-size: 1.25rem;
|
||
line-height: 1;
|
||
cursor: default;
|
||
user-select: none;
|
||
position: relative;
|
||
}
|
||
.rating-star--filled { color: #f59e0b; }
|
||
.rating-star--half {
|
||
color: #e5e7eb;
|
||
}
|
||
.rating-star--half::before {
|
||
content: '★';
|
||
color: #f59e0b;
|
||
position: absolute;
|
||
left: 0;
|
||
width: 50%;
|
||
overflow: hidden;
|
||
display: inline-block;
|
||
}
|
||
.rating-star--empty { color: #e5e7eb; }
|
||
.rating-star--pick {
|
||
cursor: pointer;
|
||
font-size: 1.6rem;
|
||
transition: transform .1s;
|
||
}
|
||
.rating-star--pick:hover,
|
||
.rating-star--pick:active { transform: scale(1.15); }
|
||
.rating-avg-label {
|
||
font-size: var(--text-sm);
|
||
color: var(--c-text-secondary);
|
||
}
|
||
.rating-rate-btn {
|
||
color: var(--c-primary);
|
||
padding: var(--space-1) var(--space-2);
|
||
}
|
||
.rating-widget {
|
||
background: var(--c-surface-2);
|
||
border-radius: var(--radius-md);
|
||
padding: var(--space-3);
|
||
margin-top: var(--space-2);
|
||
border: 1px solid var(--c-border-light);
|
||
}
|
||
.rating-pick-stars {
|
||
display: flex;
|
||
gap: var(--space-2);
|
||
margin-bottom: var(--space-3);
|
||
}
|
||
.rating-kommentar {
|
||
font-size: var(--text-sm);
|
||
}
|
||
|
||
/* ------------------------------------------------------------
|
||
OFFLINE-BANNER
|
||
------------------------------------------------------------ */
|
||
#offline-banner {
|
||
display: none;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 9999;
|
||
background: var(--c-text-secondary, #6b7280);
|
||
color: #fff;
|
||
font-size: var(--text-sm);
|
||
text-align: center;
|
||
padding: var(--space-2) var(--space-4);
|
||
pointer-events: none;
|
||
letter-spacing: 0.01em;
|
||
}
|