rene
79c66f2469
Aus der einzelnen Hymne wird ein Album (WELT-Welt): runder Button / Banner öffnen jetzt ein Album-Modal mit Liste (Play je Titel, aktiver Song orange, Auto-Next zum nächsten, zentrales Audio läuft über Welt-Wechsel weiter). Songs als Array (statischer Content), on-demand-Cache pro Datei. Songs — alle Suno Pro, kommerziell lizenziert: - Ban Yaro Blues (Hymne) — Pro-Version ersetzt die Free-Aufnahme (Cache-Bust ?v=2) - Ban Yaro Mobil — erste Anhänger-Fahrt durch die Prärie - Amy — Liebesromanze (Jack-Russell-Mädchen) audio-src in index.html geleert (Album setzt src dynamisch).
9230 lines
248 KiB
CSS
9230 lines
248 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);
|
||
}
|
||
|
||
/* ----- .by-tabs Modifier-Varianten ----------------------------- */
|
||
|
||
/* Grid-Layout (Admin/Health/Übungen — Desktop oft 2-3 Spalten) */
|
||
.by-tabs.grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(var(--tab-cols, 4), minmax(0, 1fr));
|
||
overflow: visible;
|
||
gap: var(--space-2);
|
||
}
|
||
|
||
/* Flex-Wrap (Zuchthunde — Buttons brechen um statt zu scrollen) */
|
||
.by-tabs.wrap {
|
||
flex-wrap: wrap;
|
||
overflow-x: visible;
|
||
}
|
||
|
||
/* Separated — eigener Hintergrund + Border (Sitting) */
|
||
.by-tabs.separated {
|
||
padding: var(--space-3) var(--space-4) var(--space-2);
|
||
border-bottom: 1px solid var(--c-border);
|
||
background: var(--c-surface);
|
||
}
|
||
|
||
/* Sticky (Admin Desktop vertikal) — nur ab 1024px */
|
||
@media (min-width: 1024px) {
|
||
.by-tabs.sticky {
|
||
position: sticky;
|
||
top: var(--space-3);
|
||
flex-direction: column;
|
||
width: 190px;
|
||
gap: var(--space-1);
|
||
}
|
||
.by-tabs.sticky .by-tab {
|
||
justify-content: flex-start;
|
||
text-align: left;
|
||
padding: var(--space-2) var(--space-3);
|
||
}
|
||
}
|
||
|
||
/* ------------------------------------------------------------
|
||
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);
|
||
}
|
||
|
||
/* 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;
|
||
}
|
||
|
||
/* ============================================================
|
||
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;
|
||
position: relative;
|
||
}
|
||
.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: var(--safe-top);
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
overflow: hidden;
|
||
z-index: 1;
|
||
}
|
||
@media (min-width: 768px) {
|
||
.map-full-layout { top: 0; left: var(--nav-sidebar-width); bottom: 0; }
|
||
/* Zoom-Control: mittig zu beiden Filter-Reihen */
|
||
.map-full-layout .leaflet-top { padding-top: 30px; }
|
||
}
|
||
.map-full { width: 100%; height: 100%; }
|
||
|
||
/* Karten-Overlays click-through: die Container der Buttons/Infos liegen über der
|
||
Karte und fingen Touch in ihrer GANZEN Bounding-Box ab → tote Zonen, in denen
|
||
sich die Karte nicht greifen/pannen ließ. Nur die echten Buttons fangen Touch. */
|
||
.map-statusbar,
|
||
.map-crosshair,
|
||
.map-speed-dial,
|
||
.map-search-wrap:not(.active),
|
||
.map-rec-panel:not(.active) { pointer-events: none; }
|
||
.map-sd-trigger { pointer-events: auto; }
|
||
|
||
/* Legende: horizontaler Scroll-Strip oben */
|
||
.map-legend {
|
||
position: absolute;
|
||
top: 28px; /* mind. Status-Leisten-Höhe auf Tablet/iPad */
|
||
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; }
|
||
|
||
/* Regenradar-Zeitleiste (RainViewer: ~2h Vergangenheit + ~30min Nowcast, Play/Pause + Slider) */
|
||
/* Optik + Maße wie die Status-Pill darunter: gleiche linke Kante (var(--space-3)); die Breite wird
|
||
per JS an die Pill angeglichen (gleiche rechte Kante). Höhe wie die Pill. */
|
||
.map-radar-timeline {
|
||
position: absolute;
|
||
left: var(--space-3);
|
||
width: min(320px, calc(100% - 100px)); /* Fallback; JS setzt = Pill-Breite */
|
||
bottom: calc(var(--space-3) + 34px); /* unmittelbar über der Status-Pill */
|
||
z-index: 900;
|
||
display: flex;
|
||
align-items:center;
|
||
gap: 7px;
|
||
padding: 3px 12px 3px 4px;
|
||
border-radius: var(--radius-full);
|
||
background: rgba(255, 255, 255, 0.88);
|
||
backdrop-filter: blur(4px);
|
||
-webkit-backdrop-filter: blur(4px);
|
||
border: 1px solid var(--c-border-light);
|
||
color: var(--c-text);
|
||
pointer-events: auto;
|
||
box-sizing: border-box;
|
||
}
|
||
:root[data-theme="dark"] .map-radar-timeline {
|
||
background: rgba(24, 20, 16, 0.92);
|
||
border-color: rgba(255, 255, 255, 0.1);
|
||
}
|
||
.rdr-play {
|
||
flex-shrink: 0;
|
||
width: 24px; height: 24px;
|
||
border: none; border-radius: 50%;
|
||
background: var(--c-surface-2);
|
||
color: var(--c-text); cursor: pointer;
|
||
display: flex; align-items: center; justify-content: center;
|
||
}
|
||
.rdr-play svg { width: 14px; height: 14px; }
|
||
.rdr-play:active { background: var(--c-border); }
|
||
.rdr-track-wrap { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
|
||
.rdr-slider { width: 100%; min-width: 0; height: 4px; accent-color: var(--c-primary); cursor: pointer; }
|
||
/* "Jetzt"-Markierung in der Mitte der Zeitleiste (Fangpunkt) */
|
||
.rdr-now-tick {
|
||
position: absolute; left: 50%; top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 2px; height: 13px;
|
||
background: var(--c-primary); opacity: 0.45;
|
||
border-radius: 1px; pointer-events: none; z-index: 1;
|
||
}
|
||
.rdr-time {
|
||
flex-shrink: 0;
|
||
font-size: 11px; font-weight: 600;
|
||
font-variant-numeric: tabular-nums;
|
||
width: 112px; /* FESTE Breite → Regler bleibt immer gleich lang */
|
||
white-space: nowrap; overflow: hidden;
|
||
text-align: right; color: var(--c-text-secondary);
|
||
}
|
||
.rdr-time.is-forecast { color: var(--c-primary); } /* Nowcast/Vorhersage-Frames hervorgehoben */
|
||
|
||
.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;
|
||
padding: 5px 10px;
|
||
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;
|
||
}
|
||
|
||
/* Dark-Mode: Karten-UI-Elemente (manuell + System) */
|
||
:root[data-theme="dark"] .map-legend-btn,
|
||
:root:not([data-theme="light"]) .map-legend-btn.dark-map {
|
||
background: rgba(24,20,16,0.88);
|
||
color: rgba(255,255,255,0.8);
|
||
border-color: rgba(255,255,255,0.15);
|
||
}
|
||
:root[data-theme="dark"] .map-legend-btn {
|
||
background: rgba(24,20,16,0.88);
|
||
color: rgba(255,255,255,0.8);
|
||
border-color: rgba(255,255,255,0.15);
|
||
}
|
||
:root[data-theme="dark"] .map-legend-btn.active {
|
||
background: var(--layer-color, var(--c-primary));
|
||
color: #fff;
|
||
border-color: var(--layer-color, var(--c-primary));
|
||
}
|
||
:root[data-theme="dark"] .map-legend-all {
|
||
background: rgba(36,28,20,0.92);
|
||
border-color: rgba(255,255,255,0.2);
|
||
color: rgba(255,255,255,0.7);
|
||
}
|
||
:root[data-theme="dark"] .map-legend-all.all-off {
|
||
background: rgba(10,8,6,0.92);
|
||
border-color: rgba(255,255,255,0.1);
|
||
color: rgba(255,255,255,0.9);
|
||
}
|
||
:root[data-theme="dark"] .map-statusbar {
|
||
background: rgba(24,20,16,0.92);
|
||
border-color: rgba(255,255,255,0.1);
|
||
color: rgba(255,255,255,0.7);
|
||
}
|
||
:root[data-theme="dark"] .leaflet-popup-content-wrapper,
|
||
:root[data-theme="dark"] .leaflet-popup-tip {
|
||
background: #241C14;
|
||
color: rgba(255,255,255,0.85);
|
||
box-shadow: 0 4px 16px rgba(0,0,0,0.5);
|
||
}
|
||
@media (prefers-color-scheme: dark) {
|
||
:root:not([data-theme="light"]) .map-legend-btn {
|
||
background: rgba(24,20,16,0.88);
|
||
color: rgba(255,255,255,0.8);
|
||
border-color: rgba(255,255,255,0.15);
|
||
}
|
||
:root:not([data-theme="light"]) .map-legend-btn.active {
|
||
background: var(--layer-color, var(--c-primary));
|
||
color: #fff;
|
||
border-color: var(--layer-color, var(--c-primary));
|
||
}
|
||
:root:not([data-theme="light"]) .map-legend-all {
|
||
background: rgba(36,28,20,0.92);
|
||
border-color: rgba(255,255,255,0.2);
|
||
color: rgba(255,255,255,0.7);
|
||
}
|
||
:root:not([data-theme="light"]) .map-statusbar {
|
||
background: rgba(24,20,16,0.92);
|
||
border-color: rgba(255,255,255,0.1);
|
||
color: rgba(255,255,255,0.7);
|
||
}
|
||
:root:not([data-theme="light"]) .leaflet-popup-content-wrapper,
|
||
:root:not([data-theme="light"]) .leaflet-popup-tip {
|
||
background: #241C14;
|
||
color: rgba(255,255,255,0.85);
|
||
box-shadow: 0 4px 16px rgba(0,0,0,0.5);
|
||
}
|
||
}
|
||
|
||
/* Orts-Suche — Panel schiebt von oben rein wenn aktiv */
|
||
.map-search-wrap {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 1002;
|
||
padding: 8px 12px 4px;
|
||
background: rgba(255,255,255,0.97);
|
||
backdrop-filter: blur(8px);
|
||
box-shadow: 0 3px 14px rgba(0,0,0,0.18);
|
||
transform: translateY(-110%);
|
||
transition: transform 0.22s ease;
|
||
pointer-events: none;
|
||
}
|
||
.map-search-wrap.active {
|
||
transform: translateY(0);
|
||
pointer-events: auto;
|
||
}
|
||
:root[data-theme="dark"] .map-search-wrap { background: rgba(22,22,24,0.97); }
|
||
.map-search-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
background: var(--c-bg, #fff);
|
||
border-radius: var(--radius-full);
|
||
border: 1px solid var(--c-border, #e5e7eb);
|
||
padding: 8px 12px;
|
||
}
|
||
.map-search-input {
|
||
flex: 1;
|
||
border: none;
|
||
outline: none;
|
||
font-size: 15px;
|
||
font-family: inherit;
|
||
background: transparent;
|
||
color: var(--c-text);
|
||
min-width: 0;
|
||
}
|
||
.map-search-input::placeholder { color: #aaa; }
|
||
.map-search-clear {
|
||
background: none;
|
||
border: none;
|
||
padding: 4px;
|
||
cursor: pointer;
|
||
color: #999;
|
||
line-height: 1;
|
||
flex-shrink: 0;
|
||
border-radius: 50%;
|
||
}
|
||
.map-search-clear:hover { color: var(--c-text); background: var(--c-bg-subtle); }
|
||
.map-search-results {
|
||
background: var(--c-bg, #fff);
|
||
border-radius: 12px;
|
||
border: 1px solid var(--c-border, #e5e7eb);
|
||
margin-top: 6px;
|
||
margin-bottom: 4px;
|
||
overflow: hidden;
|
||
max-height: 240px;
|
||
overflow-y: auto;
|
||
}
|
||
.map-search-item {
|
||
padding: 10px 14px;
|
||
cursor: pointer;
|
||
border-bottom: 1px solid var(--c-border-light, rgba(0,0,0,0.05));
|
||
}
|
||
.map-search-item:last-child { border-bottom: none; }
|
||
.map-search-item:hover,
|
||
.map-search-item:active { background: var(--c-primary-subtle, #fef3c7); }
|
||
.map-search-item-name {
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
color: var(--c-text);
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.map-search-item-sub {
|
||
font-size: 11px;
|
||
color: var(--c-text-secondary);
|
||
margin-top: 1px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.map-search-loading,
|
||
.map-search-empty {
|
||
padding: 12px 14px;
|
||
font-size: 13px;
|
||
color: var(--c-text-secondary);
|
||
text-align: center;
|
||
}
|
||
|
||
/* Speed Dial — Ein Trigger-Button, Sub-Buttons fächern nach oben auf */
|
||
.map-speed-dial {
|
||
position: absolute;
|
||
bottom: calc(var(--safe-bottom) + 82px);
|
||
right: 20px;
|
||
z-index: 1000;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-end;
|
||
gap: var(--space-2);
|
||
}
|
||
.map-sd-items {
|
||
display: flex;
|
||
flex-direction: column-reverse; /* unterste Item = erstes im DOM */
|
||
align-items: flex-end;
|
||
gap: var(--space-2);
|
||
pointer-events: none;
|
||
}
|
||
.map-speed-dial.open .map-sd-items { pointer-events: auto; }
|
||
|
||
.map-sd-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
opacity: 0;
|
||
transform: translateY(8px) scale(0.88);
|
||
transition: opacity 0.16s ease, transform 0.16s ease;
|
||
}
|
||
.map-speed-dial.open .map-sd-item { opacity: 1; transform: translateY(0) scale(1); }
|
||
.map-speed-dial.open .map-sd-item:nth-child(1) { transition-delay: 0ms; }
|
||
.map-speed-dial.open .map-sd-item:nth-child(2) { transition-delay: 50ms; }
|
||
.map-speed-dial.open .map-sd-item:nth-child(3) { transition-delay: 100ms; }
|
||
.map-speed-dial.open .map-sd-item:nth-child(4) { transition-delay: 150ms; }
|
||
.map-speed-dial.open .map-sd-item:nth-child(5) { transition-delay: 200ms; }
|
||
|
||
.map-sd-label {
|
||
background: rgba(20,20,20,0.72);
|
||
color: #fff;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
padding: 5px 11px;
|
||
border-radius: var(--radius-full);
|
||
white-space: nowrap;
|
||
backdrop-filter: blur(4px);
|
||
pointer-events: none;
|
||
letter-spacing: 0.01em;
|
||
}
|
||
.map-sd-btn {
|
||
width: 46px;
|
||
height: 46px;
|
||
border-radius: 50%;
|
||
background: #fff;
|
||
color: #C4843A;
|
||
border: 2px solid rgba(196,132,58,0.25);
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.22);
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1.1rem;
|
||
flex-shrink: 0;
|
||
transition: background 0.12s, color 0.12s;
|
||
-webkit-tap-highlight-color: transparent;
|
||
}
|
||
.map-sd-btn:hover,
|
||
.map-sd-btn:active { background: #fef3c7; }
|
||
.map-sd-btn.active { background: #C4843A; color: #fff; border-color: #C4843A; }
|
||
.map-sd-btn.map-fab--pin.active { background: var(--c-danger); border-color: var(--c-danger); color: #fff; }
|
||
#map-radar-btn.active { background: #1d4ed8; color: #fff; border-color: #1d4ed8; }
|
||
#map-temp-btn.active { background: #dc2626; color: #fff; border-color: #dc2626; }
|
||
|
||
.map-sd-trigger {
|
||
transition: background 0.15s, transform 0.2s ease;
|
||
}
|
||
.map-speed-dial.open .map-sd-trigger {
|
||
background: #6b4a20;
|
||
transform: rotate(90deg);
|
||
}
|
||
.map-sd-icon-open { display: block; }
|
||
.map-sd-icon-close { display: none; }
|
||
.map-speed-dial.open .map-sd-icon-open { display: none; }
|
||
.map-speed-dial.open .map-sd-icon-close { display: block; }
|
||
|
||
/* FAB-Gruppe rechts unten — direkt über dem Zurück-Button */
|
||
.map-fabs {
|
||
position: absolute;
|
||
bottom: calc(var(--safe-bottom) + 82px); /* 54px back + 20px bottom + 8px gap */
|
||
right: 20px;
|
||
z-index: 1000;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-2);
|
||
align-items: center;
|
||
}
|
||
.map-fab {
|
||
width: 54px;
|
||
height: 54px;
|
||
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-radar-btn.active {
|
||
background: #1d4ed8;
|
||
border-color: #1d4ed8;
|
||
color: #fff;
|
||
}
|
||
#map-temp-btn.active {
|
||
background: #dc2626;
|
||
border-color: #dc2626;
|
||
color: #fff;
|
||
}
|
||
.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;
|
||
}
|
||
/* Blickrichtungs-Kegel (Kompass): JS rotiert .loc-heading um die Marker-Mitte;
|
||
sichtbar erst mit Kompass-Daten (René 2026-06-06: „weiß nicht, wo es hinschaut"). */
|
||
.loc-heading {
|
||
position: absolute;
|
||
left: 12px; top: 12px; /* Mitte des 24×24-Icons = Rotationsachse */
|
||
width: 0; height: 0;
|
||
display: none;
|
||
pointer-events: none;
|
||
}
|
||
.loc-heading::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: -11px;
|
||
top: -28px; /* Kegel ragt von der Mitte nach oben */
|
||
width: 22px;
|
||
height: 24px;
|
||
background: linear-gradient(to top, rgba(59,130,246,0.55), rgba(59,130,246,0.05));
|
||
clip-path: polygon(50% 100%, 0 0, 100% 0); /* Spitze unten (Mitte), öffnet nach oben */
|
||
}
|
||
@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 {
|
||
height: 100%;
|
||
min-height: 300px;
|
||
position: relative;
|
||
}
|
||
/* Map-View darf nicht scrollen — Map füllt die gesamte Fläche */
|
||
#walks-map-view {
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* ── Desktop ≥1024px: Liste links, Karte rechts nebeneinander ── */
|
||
@media (min-width: 1024px) {
|
||
/* Tab-Treffen: horizontal splitten */
|
||
#walks-tab-treffen {
|
||
flex-direction: row;
|
||
overflow: hidden;
|
||
}
|
||
/* Toolbar über beiden Spalten → eigene Zeile */
|
||
#walks-tab-treffen .by-toolbar {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 10;
|
||
background: var(--c-bg);
|
||
border-bottom: 1px solid var(--c-border);
|
||
padding: var(--space-2) var(--space-4);
|
||
}
|
||
/* Platz für die fixe Toolbar oben */
|
||
#walks-tab-treffen {
|
||
padding-top: 52px;
|
||
position: relative;
|
||
}
|
||
/* Liste: feste Breite links, scrollbar unsichtbar */
|
||
#walks-list-view {
|
||
display: block !important;
|
||
width: 380px;
|
||
min-width: 320px;
|
||
flex-shrink: 0;
|
||
border-right: 1px solid var(--c-border);
|
||
overflow-y: auto;
|
||
scrollbar-width: none; /* Firefox */
|
||
}
|
||
#walks-list-view::-webkit-scrollbar {
|
||
display: none; /* Chrome / Safari / macOS */
|
||
}
|
||
/* Karte: Rest des Platzes, sticky */
|
||
#walks-map-view {
|
||
display: block !important;
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
/* Liste/Karte-Toggle auf Desktop ausblenden */
|
||
.walks-view-toggle {
|
||
display: none;
|
||
}
|
||
}
|
||
.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;
|
||
top: var(--safe-top);
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
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);
|
||
}
|
||
.forum-category-tabs .by-tab {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
max-width: 10rem; /* prevents single pill from being wider than ~160px on mobile */
|
||
}
|
||
.by-tab-text {
|
||
display: inline-block;
|
||
white-space: nowrap;
|
||
transition: transform 0.3s ease;
|
||
}
|
||
.by-tab-text.scrolling {
|
||
animation: forum-tab-scroll 1.8s ease-in-out 0.3s infinite alternate;
|
||
transition: none;
|
||
}
|
||
@keyframes forum-tab-scroll {
|
||
from { transform: translateX(0); }
|
||
to { transform: translateX(var(--tab-scroll-px, 0)); }
|
||
}
|
||
|
||
/* 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 */
|
||
/* Hund des Monats — kompakte Forum-Kachel */
|
||
.forum-hdm-tile {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-3);
|
||
padding: var(--space-3) var(--space-4);
|
||
background: linear-gradient(135deg, var(--c-surface-2) 0%, var(--c-bg) 100%);
|
||
border: 1.5px solid var(--c-border-light);
|
||
border-radius: var(--radius-lg);
|
||
cursor: pointer;
|
||
margin-bottom: var(--space-3);
|
||
min-width: 0;
|
||
transition: border-color .15s, box-shadow .15s;
|
||
}
|
||
.forum-hdm-tile:hover { border-color: var(--c-primary); box-shadow: var(--shadow-sm); }
|
||
.forum-hdm-tile-trophy { font-size: 1.5rem; flex-shrink: 0; }
|
||
.forum-hdm-tile-body {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
.forum-hdm-tile-title {
|
||
font-size: var(--text-xs);
|
||
font-weight: var(--weight-semibold);
|
||
color: var(--c-text-muted);
|
||
text-transform: uppercase;
|
||
letter-spacing: .04em;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.forum-hdm-tile-winner {
|
||
font-size: var(--text-sm);
|
||
font-weight: var(--weight-semibold);
|
||
color: var(--c-text);
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.forum-hdm-tile-meta {
|
||
font-size: var(--text-xs);
|
||
color: var(--c-text-muted);
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.forum-hdm-tile-cta {
|
||
flex-shrink: 0;
|
||
font-size: var(--text-xs);
|
||
font-weight: var(--weight-semibold);
|
||
color: var(--c-primary);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.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-search-row {
|
||
position: relative;
|
||
padding: var(--space-3) 0 var(--space-1);
|
||
}
|
||
.movies-search-icon {
|
||
position: absolute;
|
||
left: var(--space-3);
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 16px;
|
||
height: 16px;
|
||
color: var(--c-text-muted);
|
||
pointer-events: none;
|
||
}
|
||
.movies-search-input {
|
||
padding-left: calc(var(--space-3) + 16px + var(--space-2)) !important;
|
||
font-size: var(--text-sm);
|
||
}
|
||
|
||
.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: var(--c-danger-subtle);
|
||
color: var(--c-danger);
|
||
border: 1.5px solid var(--c-danger-border);
|
||
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: var(--c-success-subtle);
|
||
color: var(--c-success);
|
||
border: 1.5px solid color-mix(in srgb, var(--c-success) 30%, transparent);
|
||
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);
|
||
}
|
||
|
||
/* Kandidaten-Suche */
|
||
.hdm-kandidaten-search {
|
||
margin-bottom: var(--space-3);
|
||
}
|
||
|
||
/* Vote-Grid */
|
||
.hdm-vote-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: var(--space-3);
|
||
max-height: 340px;
|
||
overflow-y: auto;
|
||
padding-right: var(--space-1);
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
/* ── Wiki Gallery ────────────────────────────────────────── */
|
||
.wiki-gallery-wrap {
|
||
position: relative;
|
||
margin-bottom: var(--space-3);
|
||
}
|
||
.wiki-gallery-main {
|
||
width: 100%;
|
||
height: 240px;
|
||
object-fit: cover;
|
||
object-position: center top;
|
||
border-radius: var(--radius-lg);
|
||
display: block;
|
||
}
|
||
.wiki-gallery-strip {
|
||
display: flex;
|
||
gap: var(--space-2);
|
||
overflow-x: auto;
|
||
padding: var(--space-2) 0 0;
|
||
scrollbar-width: none;
|
||
}
|
||
.wiki-gallery-strip::-webkit-scrollbar { display: none; }
|
||
.wiki-gallery-thumb {
|
||
flex-shrink: 0;
|
||
width: 64px; height: 64px;
|
||
border-radius: var(--radius-md);
|
||
overflow: hidden;
|
||
border: 2px solid transparent;
|
||
padding: 0;
|
||
background: none;
|
||
cursor: pointer;
|
||
position: relative;
|
||
transition: border-color .15s;
|
||
}
|
||
.wiki-gallery-thumb.active { border-color: var(--c-primary); }
|
||
.wiki-gallery-thumb img {
|
||
width: 100%; height: 100%; object-fit: cover;
|
||
}
|
||
.wiki-gallery-thumb-label {
|
||
position: absolute;
|
||
bottom: 0; left: 0; right: 0;
|
||
background: rgba(0,0,0,.55);
|
||
color: #fff;
|
||
font-size: 8px;
|
||
padding: 2px 4px;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.wiki-gallery-expand {
|
||
position: absolute;
|
||
top: var(--space-2);
|
||
right: var(--space-2);
|
||
width: 34px; height: 34px;
|
||
border-radius: 50%;
|
||
background: rgba(0,0,0,.45);
|
||
border: none;
|
||
color: #fff;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
backdrop-filter: blur(4px);
|
||
transition: background .15s;
|
||
}
|
||
.wiki-gallery-expand:hover { background: rgba(0,0,0,.65); }
|
||
|
||
/* ── Wiki Lightbox ───────────────────────────────────────── */
|
||
#wiki-lightbox {
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 2000;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.wlb-backdrop {
|
||
position: absolute;
|
||
inset: 0;
|
||
background: rgba(0,0,0,.88);
|
||
backdrop-filter: blur(6px);
|
||
}
|
||
.wlb-content {
|
||
position: relative;
|
||
z-index: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
max-width: min(92vw, 680px);
|
||
width: 100%;
|
||
gap: var(--space-2);
|
||
}
|
||
.wlb-img {
|
||
width: 100%;
|
||
max-height: 72vh;
|
||
object-fit: contain;
|
||
border-radius: var(--radius-lg);
|
||
}
|
||
.wlb-close {
|
||
position: absolute;
|
||
top: -44px;
|
||
right: 0;
|
||
background: rgba(255,255,255,.12);
|
||
border: none;
|
||
color: #fff;
|
||
width: 36px; height: 36px;
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.wlb-prev, .wlb-next {
|
||
position: absolute;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
background: rgba(255,255,255,.12);
|
||
border: none;
|
||
color: #fff;
|
||
width: 40px; height: 40px;
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1.4rem;
|
||
transition: background .15s;
|
||
}
|
||
.wlb-prev { left: -48px; }
|
||
.wlb-next { right: -48px; }
|
||
.wlb-prev:hover, .wlb-next:hover { background: rgba(255,255,255,.25); }
|
||
.wlb-caption { color: rgba(255,255,255,.75); font-size: var(--text-sm); }
|
||
.wlb-counter { color: rgba(255,255,255,.45); font-size: var(--text-xs); }
|
||
|
||
/* 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;
|
||
}
|
||
|
||
/* Hund des Monats — Profil-Badge */
|
||
.dp-hdm-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: var(--space-1);
|
||
padding: var(--space-1) var(--space-3);
|
||
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
|
||
color: #78350f;
|
||
border-radius: var(--radius-full);
|
||
font-size: var(--text-xs);
|
||
font-weight: var(--weight-semibold);
|
||
letter-spacing: .02em;
|
||
box-shadow: 0 1px 3px rgba(0,0,0,.15);
|
||
}
|
||
|
||
/* --- 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;
|
||
}
|
||
|
||
/* 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
|
||
============================================================ */
|
||
/* ============================================================
|
||
PAGE INFO — generische Seiten-Hilfe (UI.pageInfo)
|
||
============================================================ */
|
||
.pinfo-trigger-inline {
|
||
width: 26px; height: 26px;
|
||
border-radius: 50%;
|
||
background: var(--c-surface-2);
|
||
border: 1px solid var(--c-border-light);
|
||
color: var(--c-text-secondary);
|
||
cursor: pointer;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
transition: background .15s, color .15s;
|
||
}
|
||
.pinfo-trigger-inline:hover { background: var(--c-primary-subtle, rgba(196,132,58,.1)); color: var(--c-primary); }
|
||
|
||
.pinfo-banner {
|
||
margin: var(--space-3) var(--space-4) 0;
|
||
padding: var(--space-3) var(--space-4);
|
||
border-radius: var(--radius-lg);
|
||
background: var(--c-surface-2);
|
||
border-left: 3px solid var(--c-primary);
|
||
font-size: var(--text-sm);
|
||
}
|
||
.pinfo-banner-head {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
margin-bottom: var(--space-2);
|
||
}
|
||
.pinfo-banner-icon { color: var(--c-primary); flex-shrink: 0; }
|
||
.pinfo-banner-title {
|
||
flex: 1;
|
||
font-weight: var(--weight-semibold);
|
||
color: var(--c-text);
|
||
}
|
||
.pinfo-banner-close {
|
||
background: none; border: none; cursor: pointer;
|
||
color: var(--c-text-muted); padding: 2px;
|
||
}
|
||
.pinfo-banner-intro { color: var(--c-text-secondary); margin-bottom: var(--space-2); line-height: 1.5; }
|
||
.pinfo-banner-more {
|
||
background: none; border: none; cursor: pointer;
|
||
color: var(--c-primary);
|
||
font-size: var(--text-xs);
|
||
font-weight: var(--weight-medium);
|
||
padding: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
margin-top: var(--space-2);
|
||
}
|
||
|
||
/* MODAL BODY */
|
||
.pinfo-modal { display: flex; flex-direction: column; gap: var(--space-3); }
|
||
.pinfo-intro { color: var(--c-text-secondary); line-height: 1.6; margin: 0; }
|
||
.pinfo-steps { display: flex; flex-direction: column; gap: var(--space-3); }
|
||
.pinfo-steps--compact { gap: var(--space-2); margin-top: var(--space-2); }
|
||
.pinfo-step {
|
||
display: flex;
|
||
gap: var(--space-3);
|
||
align-items: flex-start;
|
||
}
|
||
.pinfo-step-icon {
|
||
width: 32px; height: 32px;
|
||
border-radius: var(--radius-md);
|
||
background: var(--c-primary-subtle, rgba(196,132,58,.12));
|
||
color: var(--c-primary);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
.pinfo-step-title { font-weight: var(--weight-semibold); color: var(--c-text); font-size: var(--text-sm); margin-bottom: 2px; }
|
||
.pinfo-step-text { color: var(--c-text-secondary); font-size: var(--text-sm); line-height: 1.5; }
|
||
.pinfo-tip {
|
||
display: flex;
|
||
gap: var(--space-2);
|
||
align-items: flex-start;
|
||
padding: var(--space-3);
|
||
background: rgba(196,132,58,.08);
|
||
border-radius: var(--radius-md);
|
||
color: var(--c-text-secondary);
|
||
font-size: var(--text-sm);
|
||
line-height: 1.5;
|
||
}
|
||
.pinfo-tip .ph-icon { color: var(--c-primary); flex-shrink: 0; margin-top: 1px; }
|
||
|
||
|
||
.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);
|
||
}
|
||
|
||
/* ------------------------------------------------------------
|
||
WURFBÖRSE
|
||
------------------------------------------------------------ */
|
||
.wb-layout {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-4);
|
||
}
|
||
|
||
.wb-filter-bar {
|
||
display: flex;
|
||
gap: var(--space-2);
|
||
align-items: flex-end;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.wb-filter-fields {
|
||
display: flex;
|
||
gap: var(--space-2);
|
||
flex: 1;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.wb-filter-rasse { flex: 2; min-width: 160px; }
|
||
.wb-filter-status { flex: 1; min-width: 130px; }
|
||
|
||
.wb-filter-btn { white-space: nowrap; }
|
||
|
||
.wb-cards {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
|
||
gap: var(--space-4);
|
||
}
|
||
|
||
.wb-card {
|
||
background: var(--c-surface);
|
||
border: 1px solid var(--c-border-light);
|
||
border-radius: var(--radius-lg);
|
||
padding: var(--space-4);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-2);
|
||
transition: box-shadow .15s;
|
||
}
|
||
|
||
.wb-card:hover { box-shadow: var(--shadow-md); }
|
||
|
||
.wb-card-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
gap: var(--space-2);
|
||
}
|
||
|
||
.wb-card-zuechter {
|
||
font-weight: var(--weight-semibold);
|
||
font-size: var(--text-sm);
|
||
color: var(--c-text);
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.wb-card-rasse {
|
||
font-size: var(--text-base);
|
||
font-weight: var(--weight-semibold);
|
||
color: var(--c-primary);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-1);
|
||
}
|
||
|
||
.wb-card-details {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-1);
|
||
font-size: var(--text-sm);
|
||
color: var(--c-text-secondary);
|
||
flex: 1;
|
||
}
|
||
|
||
.wb-card-eltern,
|
||
.wb-card-datum,
|
||
.wb-card-welpen,
|
||
.wb-card-preis,
|
||
.wb-card-gesundheit {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-1);
|
||
}
|
||
|
||
.wb-card-beschreibung {
|
||
margin-top: var(--space-1);
|
||
line-height: 1.4;
|
||
color: var(--c-text-secondary);
|
||
}
|
||
|
||
.wb-card-footer {
|
||
margin-top: var(--space-2);
|
||
padding-top: var(--space-2);
|
||
border-top: 1px solid var(--c-border-light);
|
||
}
|
||
|
||
/* Status-Badges */
|
||
.wb-badge {
|
||
display: inline-block;
|
||
padding: 2px 10px;
|
||
border-radius: var(--radius-full);
|
||
font-size: var(--text-xs);
|
||
font-weight: var(--weight-semibold);
|
||
color: #fff;
|
||
white-space: nowrap;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.wb-badge--geplant { background: #6B7280; }
|
||
.wb-badge--geboren { background: #3B82F6; }
|
||
.wb-badge--verfuegbar { background: #22C55E; }
|
||
.wb-badge--abgeschlossen { background: #374151; }
|
||
|
||
/* ------------------------------------------------------------
|
||
OFFLINE-BANNER
|
||
------------------------------------------------------------ */
|
||
#offline-banner {
|
||
display: none;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 9999;
|
||
background: #1f2937;
|
||
color: #f3f4f6;
|
||
font-size: 0.78rem;
|
||
font-weight: 500;
|
||
text-align: center;
|
||
padding: calc(env(safe-area-inset-top, 0px) + 7px) 16px 7px;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,.3);
|
||
pointer-events: none;
|
||
letter-spacing: 0.01em;
|
||
}
|
||
/* Eingeklappt (5s nach Offline-Gang, boot.js): kleines pulsierendes Icon LINKS unterhalb
|
||
der Karten-Zoom-Regler (+/−) — rechts verdeckte es die Legenden-Chips, die volle Leiste
|
||
davor Nav-Elemente (Gerätetests René 2026-06-07/08). */
|
||
#offline-banner.collapsed {
|
||
top: calc(env(safe-area-inset-top, 0px) + 110px);
|
||
left: 10px;
|
||
right: auto;
|
||
width: 32px;
|
||
height: 32px;
|
||
padding: 0;
|
||
border-radius: 50%;
|
||
box-shadow: 0 2px 10px rgba(0,0,0,.35);
|
||
animation: by-offline-pulse 2s ease-in-out infinite;
|
||
}
|
||
#offline-banner.collapsed #offline-banner-text { display: none; }
|
||
#offline-banner.collapsed #offline-queue-badge { display: none !important; }
|
||
@keyframes by-offline-pulse {
|
||
0%, 100% { opacity: 0.55; transform: scale(1); }
|
||
50% { opacity: 1; transform: scale(1.1); }
|
||
}
|
||
|
||
/* ------------------------------------------------------------
|
||
STREAK-WIDGET (Welcome-Seite)
|
||
------------------------------------------------------------ */
|
||
.wc-streak-card {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-3);
|
||
margin-top: var(--space-5);
|
||
padding: var(--space-3) var(--space-4);
|
||
border-radius: var(--radius-lg, 14px);
|
||
background: linear-gradient(135deg, #ff6b00 0%, #c0392b 100%);
|
||
color: #fff;
|
||
box-shadow: 0 4px 18px rgba(196, 63, 0, 0.35);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.wc-streak-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background: radial-gradient(ellipse at 10% 50%, rgba(255,255,255,0.15) 0%, transparent 60%);
|
||
pointer-events: none;
|
||
}
|
||
.wc-streak-flame-wrap {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
flex-shrink: 0;
|
||
}
|
||
.wc-streak-flame {
|
||
font-size: 2.2rem;
|
||
line-height: 1;
|
||
filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));
|
||
}
|
||
.wc-streak-number {
|
||
font-size: 2.6rem;
|
||
font-weight: 800;
|
||
line-height: 1;
|
||
letter-spacing: -0.03em;
|
||
text-shadow: 0 2px 8px rgba(0,0,0,0.2);
|
||
}
|
||
.wc-streak-info {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
.wc-streak-label {
|
||
font-size: var(--text-sm);
|
||
font-weight: var(--weight-semibold);
|
||
opacity: 0.95;
|
||
}
|
||
.wc-streak-best {
|
||
font-size: var(--text-xs);
|
||
opacity: 0.75;
|
||
margin-top: 2px;
|
||
}
|
||
.wc-streak-lb-btn {
|
||
background: rgba(255,255,255,0.2);
|
||
border: 1.5px solid rgba(255,255,255,0.45);
|
||
border-radius: 50%;
|
||
width: 38px;
|
||
height: 38px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
color: #fff;
|
||
transition: background 0.15s;
|
||
}
|
||
.wc-streak-lb-btn:active { background: rgba(255,255,255,0.35); }
|
||
|
||
/* ------------------------------------------------------------
|
||
KI RASSEN-ERKENNUNG — Ergebnis-Block
|
||
------------------------------------------------------------ */
|
||
.rasse-result-card {
|
||
background: var(--c-surface);
|
||
border: 1px solid var(--c-border);
|
||
border-radius: var(--radius-lg);
|
||
padding: var(--space-4);
|
||
margin-bottom: var(--space-3);
|
||
}
|
||
.rasse-result-card--top {
|
||
border-color: var(--c-primary);
|
||
background: var(--c-primary-subtle, #f0f9ff);
|
||
}
|
||
.rasse-result-name {
|
||
font-size: var(--text-base);
|
||
font-weight: var(--weight-semibold);
|
||
color: var(--c-text);
|
||
margin-bottom: var(--space-1);
|
||
}
|
||
.rasse-result-bar-wrap {
|
||
background: var(--c-surface-2);
|
||
border-radius: 999px;
|
||
height: 8px;
|
||
overflow: hidden;
|
||
margin: var(--space-2) 0;
|
||
}
|
||
.rasse-result-bar {
|
||
height: 8px;
|
||
border-radius: 999px;
|
||
background: var(--c-primary);
|
||
transition: width 0.6s ease;
|
||
}
|
||
.rasse-result-bar--dim {
|
||
background: var(--c-text-muted, #9ca3af);
|
||
}
|
||
.rasse-result-pct {
|
||
font-size: var(--text-sm);
|
||
font-weight: var(--weight-semibold);
|
||
color: var(--c-primary);
|
||
}
|
||
.rasse-result-pct--dim {
|
||
color: var(--c-text-muted);
|
||
}
|
||
.rasse-result-desc {
|
||
font-size: var(--text-xs);
|
||
color: var(--c-text-secondary);
|
||
margin-top: var(--space-1);
|
||
line-height: 1.4;
|
||
}
|
||
|
||
/* Rückrufe — Warnbanner (Dark-Mode-sicher) */
|
||
.recalls-warning-banner {
|
||
background: var(--c-danger-subtle);
|
||
border: 1px solid var(--c-danger);
|
||
border-radius: var(--radius-md);
|
||
padding: var(--space-3) var(--space-4);
|
||
margin-bottom: var(--space-4);
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: var(--space-2);
|
||
}
|
||
.recalls-warning-icon {
|
||
color: var(--c-danger);
|
||
flex-shrink: 0;
|
||
margin-top: 2px;
|
||
}
|
||
.recalls-warning-text {
|
||
margin: 0;
|
||
font-size: var(--text-sm);
|
||
color: var(--c-text);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* ============================================================
|
||
Ausgaben-Tracker (expenses.js)
|
||
============================================================ */
|
||
|
||
/* FAB */
|
||
.exp-fab {
|
||
position: fixed;
|
||
bottom: calc(var(--nav-bottom-height) + var(--safe-bottom) + var(--space-2));
|
||
right: var(--space-4);
|
||
z-index: 100;
|
||
width: 52px;
|
||
height: 52px;
|
||
border-radius: 50%;
|
||
background: var(--c-primary);
|
||
color: #fff;
|
||
border: none;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 4px 14px rgba(0,0,0,.25);
|
||
cursor: pointer;
|
||
font-size: 1.35rem;
|
||
transition: transform .15s, box-shadow .15s;
|
||
}
|
||
.exp-fab:active {
|
||
transform: scale(.93);
|
||
box-shadow: 0 2px 8px rgba(0,0,0,.2);
|
||
}
|
||
|
||
/* Lade-/Fehler-Zustände */
|
||
.exp-loading { padding: var(--space-4); }
|
||
.exp-error {
|
||
padding: var(--space-4);
|
||
color: var(--c-danger);
|
||
font-size: var(--text-sm);
|
||
text-align: center;
|
||
}
|
||
.exp-empty-hint {
|
||
color: var(--c-text-secondary);
|
||
font-size: var(--text-sm);
|
||
padding: var(--space-3) 0;
|
||
text-align: center;
|
||
}
|
||
|
||
/* ---- Hero-Card (Übersicht & Statistik oben) ---- */
|
||
.exp-hero-card {
|
||
background: linear-gradient(135deg, var(--c-primary) 0%, color-mix(in srgb, var(--c-primary) 75%, #000) 100%);
|
||
color: #fff;
|
||
border-radius: var(--radius-xl, 16px);
|
||
padding: var(--space-5) var(--space-4);
|
||
margin: var(--space-3) var(--space-3) var(--space-4);
|
||
text-align: center;
|
||
box-shadow: 0 6px 20px rgba(0,0,0,.15);
|
||
}
|
||
.exp-hero-card--sm {
|
||
padding: var(--space-4) var(--space-4);
|
||
}
|
||
.exp-hero-label {
|
||
font-size: var(--text-sm);
|
||
font-weight: var(--weight-medium);
|
||
opacity: .85;
|
||
margin-bottom: var(--space-1);
|
||
text-transform: uppercase;
|
||
letter-spacing: .04em;
|
||
}
|
||
.exp-hero-betrag {
|
||
font-size: clamp(1.9rem, 7vw, 2.8rem);
|
||
font-weight: var(--weight-bold);
|
||
line-height: 1.1;
|
||
letter-spacing: -.02em;
|
||
}
|
||
.exp-hero-meta {
|
||
margin-top: var(--space-2);
|
||
font-size: var(--text-sm);
|
||
opacity: .85;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
gap: var(--space-2);
|
||
}
|
||
|
||
/* Trend-Badge */
|
||
.exp-trend {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 2px;
|
||
font-size: var(--text-xs);
|
||
font-weight: var(--weight-semibold);
|
||
padding: 2px 8px;
|
||
border-radius: 999px;
|
||
}
|
||
.exp-trend--up { background: rgba(239,68,68,.25); }
|
||
.exp-trend--down { background: rgba(16,185,129,.25); }
|
||
|
||
/* ---- Kachel-Grid (Übersicht) ---- */
|
||
.exp-kachel-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: var(--space-2);
|
||
padding: 0 var(--space-3) var(--space-3);
|
||
}
|
||
.exp-kachel {
|
||
background: var(--c-surface);
|
||
border: 1px solid var(--c-border);
|
||
border-radius: var(--radius-lg);
|
||
padding: var(--space-3) var(--space-2);
|
||
text-align: center;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: var(--space-1);
|
||
}
|
||
.exp-kachel-icon {
|
||
width: 44px;
|
||
height: 44px;
|
||
border-radius: var(--radius-md);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1.3rem;
|
||
margin-bottom: var(--space-1);
|
||
}
|
||
.exp-kachel-betrag {
|
||
font-size: var(--text-sm);
|
||
font-weight: var(--weight-bold);
|
||
line-height: 1.1;
|
||
}
|
||
.exp-kachel-label {
|
||
font-size: var(--text-xs);
|
||
color: var(--c-text-secondary);
|
||
line-height: 1.2;
|
||
}
|
||
.exp-kachel-jahr {
|
||
font-size: 9px;
|
||
color: var(--c-text-muted);
|
||
margin-top: 2px;
|
||
line-height: 1.2;
|
||
}
|
||
.exp-kachel-add {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 2px;
|
||
font-size: 10px;
|
||
color: var(--c-text-muted);
|
||
margin-top: 3px;
|
||
}
|
||
|
||
/* ---- Sektion-Block (Verlauf etc.) ---- */
|
||
.exp-section {
|
||
margin: 0 var(--space-3) var(--space-4);
|
||
background: var(--c-surface);
|
||
border: 1px solid var(--c-border);
|
||
border-radius: var(--radius-lg);
|
||
padding: var(--space-4);
|
||
}
|
||
.exp-section-title {
|
||
font-size: var(--text-sm);
|
||
font-weight: var(--weight-semibold);
|
||
color: var(--c-text-secondary);
|
||
margin-bottom: var(--space-3);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-1);
|
||
text-transform: uppercase;
|
||
letter-spacing: .04em;
|
||
}
|
||
|
||
/* ---- Balkendiagramm (Verlauf) ---- */
|
||
.exp-bar-chart {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
gap: var(--space-1);
|
||
height: 80px;
|
||
}
|
||
.exp-bar-chart--12 {
|
||
height: 90px;
|
||
gap: 4px;
|
||
}
|
||
.exp-bar-item {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 3px;
|
||
}
|
||
.exp-bar-item--aktiv .exp-bar-label {
|
||
color: var(--c-primary);
|
||
font-weight: var(--weight-semibold);
|
||
}
|
||
.exp-bar-track {
|
||
width: 100%;
|
||
height: 60px;
|
||
background: var(--c-surface-2, #f3f4f6);
|
||
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-end;
|
||
overflow: hidden;
|
||
}
|
||
.exp-bar-track--stack {
|
||
height: 70px;
|
||
}
|
||
.exp-bar-fill {
|
||
width: 100%;
|
||
background: var(--c-primary);
|
||
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
|
||
transition: height .4s ease;
|
||
}
|
||
.exp-bar-fill--aktiv { background: var(--c-primary); }
|
||
.exp-stack-seg {
|
||
width: 100%;
|
||
min-height: 2px;
|
||
transition: height .4s ease;
|
||
}
|
||
.exp-bar-label {
|
||
font-size: var(--text-xs);
|
||
color: var(--c-text-muted, #9ca3af);
|
||
white-space: nowrap;
|
||
}
|
||
.exp-bar-val {
|
||
font-size: var(--text-xs);
|
||
color: var(--c-text-secondary);
|
||
}
|
||
|
||
/* ---- Einträge-Liste ---- */
|
||
.exp-list {
|
||
padding: 0 var(--space-3);
|
||
}
|
||
.exp-month-group {
|
||
margin-bottom: var(--space-3);
|
||
}
|
||
.exp-month-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: var(--space-2) var(--space-3);
|
||
background: var(--c-surface-2, #f3f4f6);
|
||
border-radius: var(--radius-md);
|
||
margin-bottom: var(--space-2);
|
||
}
|
||
.exp-month-title {
|
||
font-size: var(--text-sm);
|
||
font-weight: var(--weight-semibold);
|
||
color: var(--c-text-secondary);
|
||
text-transform: uppercase;
|
||
letter-spacing: .04em;
|
||
}
|
||
.exp-month-summe {
|
||
font-size: var(--text-sm);
|
||
font-weight: var(--weight-bold);
|
||
color: var(--c-primary);
|
||
}
|
||
|
||
/* Einzelner Eintrag */
|
||
.exp-entry {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-3);
|
||
background: var(--c-surface);
|
||
border: 1px solid var(--c-border);
|
||
border-radius: var(--radius-md);
|
||
padding: var(--space-3);
|
||
margin-bottom: var(--space-2);
|
||
cursor: pointer;
|
||
transition: background .15s;
|
||
}
|
||
.exp-entry:active { background: var(--c-surface-2, #f3f4f6); }
|
||
|
||
/* Icon-Badge mit Kategorie-Farbe */
|
||
.exp-entry-icon-badge {
|
||
flex-shrink: 0;
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: var(--radius-md);
|
||
background: color-mix(in srgb, var(--kat-color) 15%, transparent);
|
||
color: var(--kat-color);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
.exp-entry-body {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
.exp-entry-head {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: var(--space-1);
|
||
margin-bottom: 2px;
|
||
}
|
||
.exp-entry-datum {
|
||
font-size: var(--text-xs);
|
||
color: var(--c-text-muted, #9ca3af);
|
||
flex-shrink: 0;
|
||
}
|
||
.exp-entry-kat {
|
||
font-size: var(--text-sm);
|
||
font-weight: var(--weight-medium);
|
||
color: var(--c-text);
|
||
}
|
||
.exp-entry-notiz {
|
||
display: block;
|
||
font-size: var(--text-xs);
|
||
color: var(--c-text-secondary);
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.exp-dog-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 2px;
|
||
font-size: var(--text-xs);
|
||
color: var(--c-text-secondary);
|
||
background: var(--c-surface-2, #f3f4f6);
|
||
border-radius: 999px;
|
||
padding: 1px 6px;
|
||
}
|
||
.exp-dog-selector {
|
||
display: flex;
|
||
gap: 8px;
|
||
padding: 10px 16px 4px;
|
||
overflow-x: auto;
|
||
-webkit-overflow-scrolling: touch;
|
||
scrollbar-width: none;
|
||
}
|
||
.exp-dog-selector::-webkit-scrollbar { display: none; }
|
||
.exp-dog-pill {
|
||
flex-shrink: 0;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
padding: 5px 14px;
|
||
border-radius: 999px;
|
||
border: 1px solid var(--c-border);
|
||
background: var(--c-bg-card);
|
||
color: var(--c-text-secondary);
|
||
font-size: var(--text-sm);
|
||
font-weight: var(--weight-medium);
|
||
cursor: pointer;
|
||
white-space: nowrap;
|
||
transition: background .15s, color .15s, border-color .15s;
|
||
}
|
||
.exp-dog-pill.active {
|
||
background: var(--c-primary);
|
||
color: #fff;
|
||
border-color: var(--c-primary);
|
||
}
|
||
|
||
/* Rechte Spalte: Betrag + Löschen-Icon */
|
||
.exp-entry-right {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-end;
|
||
gap: var(--space-1);
|
||
flex-shrink: 0;
|
||
}
|
||
.exp-entry-betrag {
|
||
font-size: var(--text-base);
|
||
font-weight: var(--weight-bold);
|
||
color: var(--c-text);
|
||
white-space: nowrap;
|
||
}
|
||
.exp-entry-del {
|
||
background: transparent;
|
||
border: none;
|
||
color: var(--c-text-muted, #9ca3af);
|
||
cursor: pointer;
|
||
padding: 2px 4px;
|
||
border-radius: var(--radius-sm);
|
||
font-size: 1rem;
|
||
line-height: 1;
|
||
transition: color .15s;
|
||
}
|
||
.exp-entry-del:hover { color: var(--c-danger); }
|
||
|
||
/* ---- Statistik: Kategorie-Balken-Reihen ---- */
|
||
.exp-stat-rows {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-2);
|
||
}
|
||
.exp-stat-row {
|
||
display: grid;
|
||
grid-template-columns: 120px 1fr 36px 80px;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
}
|
||
.exp-stat-label {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-1);
|
||
font-size: var(--text-sm);
|
||
color: var(--c-text);
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.exp-stat-icon { flex-shrink: 0; }
|
||
.exp-stat-bar-wrap {
|
||
height: 8px;
|
||
background: var(--c-surface-2, #f3f4f6);
|
||
border-radius: 999px;
|
||
overflow: hidden;
|
||
}
|
||
.exp-stat-bar {
|
||
height: 8px;
|
||
border-radius: 999px;
|
||
transition: width .5s ease;
|
||
}
|
||
.exp-stat-pct {
|
||
font-size: var(--text-xs);
|
||
font-weight: var(--weight-semibold);
|
||
color: var(--c-text-secondary);
|
||
text-align: right;
|
||
}
|
||
.exp-stat-val {
|
||
font-size: var(--text-sm);
|
||
font-weight: var(--weight-semibold);
|
||
color: var(--c-text);
|
||
text-align: right;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* ---- Donut-Diagramm (CSS conic-gradient) ---- */
|
||
.exp-donut-wrap {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-5);
|
||
flex-wrap: wrap;
|
||
}
|
||
.exp-donut {
|
||
position: relative;
|
||
width: 120px;
|
||
height: 120px;
|
||
border-radius: 50%;
|
||
flex-shrink: 0;
|
||
}
|
||
.exp-donut-hole {
|
||
position: absolute;
|
||
inset: 28px;
|
||
background: var(--c-surface);
|
||
border-radius: 50%;
|
||
}
|
||
.exp-donut-legend {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-2);
|
||
min-width: 130px;
|
||
}
|
||
.exp-donut-legend-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
font-size: var(--text-sm);
|
||
}
|
||
.exp-donut-dot {
|
||
width: 10px;
|
||
height: 10px;
|
||
border-radius: 50%;
|
||
flex-shrink: 0;
|
||
}
|
||
.exp-donut-legend-label {
|
||
flex: 1;
|
||
color: var(--c-text);
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.exp-donut-legend-pct {
|
||
font-weight: var(--weight-semibold);
|
||
color: var(--c-text-secondary);
|
||
}
|
||
|
||
/* Daueraufträge */
|
||
.exp-recurring-card {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-3);
|
||
padding: var(--space-3) var(--space-4);
|
||
background: var(--c-surface);
|
||
border: 1.5px solid var(--c-border);
|
||
border-radius: var(--radius-lg);
|
||
margin-bottom: var(--space-2);
|
||
transition: opacity .2s;
|
||
}
|
||
.exp-recurring-card--inaktiv { opacity: .55; }
|
||
.exp-recurring-freq {
|
||
font-size: var(--text-xs);
|
||
color: var(--c-primary);
|
||
font-weight: var(--weight-semibold);
|
||
background: var(--c-primary-subtle);
|
||
padding: 1px var(--space-2);
|
||
border-radius: var(--radius-full);
|
||
}
|
||
.exp-recurring-next {
|
||
font-size: var(--text-xs);
|
||
color: var(--c-text-muted);
|
||
margin-top: var(--space-1);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-1);
|
||
flex-wrap: wrap;
|
||
}
|
||
.exp-badge-inaktiv {
|
||
background: var(--c-surface-2);
|
||
color: var(--c-text-muted);
|
||
padding: 1px var(--space-2);
|
||
border-radius: var(--radius-full);
|
||
font-size: var(--text-xs);
|
||
}
|
||
.exp-icon-btn {
|
||
width: 28px;
|
||
height: 28px;
|
||
border: 1.5px solid var(--c-border);
|
||
border-radius: var(--radius-sm);
|
||
background: var(--c-surface);
|
||
color: var(--c-text-secondary);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
transition: color .15s, border-color .15s;
|
||
}
|
||
.exp-icon-btn:hover { color: var(--c-text); border-color: var(--c-text-muted); }
|
||
.exp-icon-btn--danger:hover { color: var(--c-danger); border-color: var(--c-danger); }
|
||
|
||
/* Ausgaben-Formular — Kategorie-Kacheln */
|
||
.exp-kat-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: var(--space-2);
|
||
}
|
||
.exp-kat-tile {
|
||
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);
|
||
cursor: pointer;
|
||
transition: border-color .15s, background .15s;
|
||
background: var(--c-surface);
|
||
user-select: none;
|
||
}
|
||
.exp-kat-tile:hover { border-color: var(--c-primary); }
|
||
.exp-kat-tile--sel {
|
||
border-color: var(--c-primary);
|
||
background: var(--c-primary-subtle);
|
||
}
|
||
.exp-kat-tile-icon { font-size: 1.4rem; line-height: 1; }
|
||
.exp-kat-tile-label {
|
||
font-size: var(--text-xs);
|
||
font-weight: var(--weight-medium);
|
||
color: var(--c-text-secondary);
|
||
text-align: center;
|
||
}
|
||
.exp-kat-tile--sel .exp-kat-tile-label { color: var(--c-primary); }
|
||
|
||
/* Betrag-Feld mit €-Prefix */
|
||
.exp-betrag-wrap {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.exp-betrag-prefix {
|
||
position: absolute;
|
||
left: var(--space-3);
|
||
color: var(--c-text-muted);
|
||
font-weight: var(--weight-semibold);
|
||
pointer-events: none;
|
||
}
|
||
.exp-betrag-input { padding-left: calc(var(--space-3) + 14px + var(--space-2)) !important; }
|
||
|
||
/* Form-Label Hint */
|
||
.form-label-hint { color: var(--c-text-muted); font-weight: normal; font-size: var(--text-xs); }
|
||
|
||
/* Wiederholungs-Sektion */
|
||
.exp-repeat-section {
|
||
margin-top: var(--space-4);
|
||
padding-top: var(--space-4);
|
||
border-top: 1px solid var(--c-border-light);
|
||
}
|
||
.exp-repeat-toggle {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
cursor: pointer;
|
||
font-size: var(--text-sm);
|
||
font-weight: var(--weight-medium);
|
||
color: var(--c-text);
|
||
user-select: none;
|
||
}
|
||
.exp-repeat-toggle-box {
|
||
width: 18px;
|
||
height: 18px;
|
||
border: 1.5px solid var(--c-border);
|
||
border-radius: var(--radius-sm);
|
||
background: var(--c-surface);
|
||
flex-shrink: 0;
|
||
transition: background .15s, border-color .15s;
|
||
}
|
||
.exp-repeat-toggle input:checked ~ .exp-repeat-toggle-box {
|
||
background: var(--c-primary);
|
||
border-color: var(--c-primary);
|
||
}
|
||
|
||
/* ================================================================
|
||
DREI WELTEN NAVIGATION — JETZT | HUND | WELT
|
||
================================================================ */
|
||
|
||
/* Overlay */
|
||
#worlds-overlay {
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 450;
|
||
overflow: hidden;
|
||
background: var(--c-bg);
|
||
display: none;
|
||
opacity: 0;
|
||
transition: opacity 0.2s;
|
||
}
|
||
#worlds-overlay.worlds-visible { opacity: 1; }
|
||
|
||
/* Track */
|
||
#worlds-track {
|
||
display: flex;
|
||
width: 300%;
|
||
height: 100%;
|
||
will-change: transform;
|
||
transform: translateX(-33.333%);
|
||
}
|
||
.world-panel {
|
||
width: 33.333%;
|
||
height: 100%;
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
-webkit-overflow-scrolling: touch;
|
||
overscroll-behavior-y: contain;
|
||
}
|
||
#wp-welt { overflow: hidden; position: relative; }
|
||
|
||
/* Navigation-Punkte — auf Mobile ausgeblendet, Labels übernehmen */
|
||
#world-dots {
|
||
display: none;
|
||
}
|
||
|
||
/* Welt-Labels — jetzt unten als Tab-Bar */
|
||
#world-labels {
|
||
position: fixed;
|
||
bottom: calc(env(safe-area-inset-bottom, 0px) + 33px);
|
||
top: auto;
|
||
left: 0; right: 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
z-index: 59;
|
||
pointer-events: none;
|
||
}
|
||
.wlabel {
|
||
font-size: 10px;
|
||
font-weight: 800;
|
||
letter-spacing: 0.1em;
|
||
color: white;
|
||
opacity: 0.45;
|
||
text-transform: uppercase;
|
||
transition: opacity 0.18s, background 0.18s;
|
||
padding: 6px 16px;
|
||
border-radius: 20px;
|
||
}
|
||
.wlabel.active {
|
||
opacity: 1;
|
||
background: rgba(255, 255, 255, 0.18);
|
||
backdrop-filter: blur(8px);
|
||
-webkit-backdrop-filter: blur(8px);
|
||
}
|
||
|
||
@media (min-width: 768px) {
|
||
/* Desktop: Nav bleibt unten — nur Abstände anpassen */
|
||
.world-panel {
|
||
padding-top: calc(env(safe-area-inset-top, 0px) + 48px);
|
||
}
|
||
/* Top-Bereich (Greeting + Wetter/Route/Übung) zentriert und begrenzt */
|
||
.world-top {
|
||
max-width: 860px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
width: 100%;
|
||
}
|
||
/* Alle Chips in einer Zeile, zentriert, egal wie viele aktiv */
|
||
.world-chips-grid {
|
||
display: flex !important;
|
||
flex-direction: row !important;
|
||
flex-wrap: nowrap !important;
|
||
justify-content: center !important;
|
||
grid-template-columns: unset !important;
|
||
max-width: none !important;
|
||
margin: 0 !important;
|
||
gap: 7px !important;
|
||
}
|
||
.world-chip {
|
||
flex: 0 1 80px !important;
|
||
min-width: 60px !important;
|
||
width: 80px !important;
|
||
height: 74px !important;
|
||
}
|
||
/* Nav vertikal zentriert zwischen Chips und Footer */
|
||
#world-labels {
|
||
gap: 24px;
|
||
bottom: calc(env(safe-area-inset-bottom, 0px) + 33px);
|
||
}
|
||
.wlabel {
|
||
font-size: 12px;
|
||
letter-spacing: 0.14em;
|
||
padding: 7px 18px;
|
||
}
|
||
.wlabel:hover {
|
||
opacity: 0.85;
|
||
background: rgba(255, 255, 255, 0.12);
|
||
}
|
||
}
|
||
|
||
/* Settings-Button */
|
||
#worlds-settings {
|
||
position: fixed;
|
||
top: calc(env(safe-area-inset-top, 0px) + 6px);
|
||
right: 10px;
|
||
width: 38px; height: 38px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
z-index: 61;
|
||
color: var(--c-text-secondary);
|
||
border: none;
|
||
background: none;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
/* FAB */
|
||
#worlds-fab {
|
||
position: fixed;
|
||
bottom: calc(env(safe-area-inset-bottom, 16px) + 16px);
|
||
right: 20px;
|
||
width: 54px; height: 54px;
|
||
border-radius: 50%;
|
||
background: var(--c-primary);
|
||
color: white;
|
||
border: none;
|
||
cursor: pointer;
|
||
z-index: 60;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 4px 20px rgba(196,132,58,0.45);
|
||
transition: transform 0.12s, box-shadow 0.12s;
|
||
}
|
||
#worlds-fab:active { transform: scale(0.92); box-shadow: 0 2px 10px rgba(196,132,58,0.3); }
|
||
|
||
/* Hymne-Button — Gegenspieler zum FAB, unten links, nur WELT + nach erstem Hören */
|
||
#worlds-anthem {
|
||
position: fixed;
|
||
bottom: calc(env(safe-area-inset-bottom, 16px) + 16px);
|
||
left: 20px;
|
||
width: 54px; height: 54px;
|
||
border-radius: 50%;
|
||
background: rgba(22,26,30,0.66);
|
||
-webkit-backdrop-filter: blur(8px);
|
||
backdrop-filter: blur(8px);
|
||
color: #fff;
|
||
border: 1px solid rgba(255,255,255,0.20);
|
||
cursor: pointer;
|
||
z-index: 60;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 4px 18px rgba(0,0,0,0.40);
|
||
transition: transform 0.12s, background 0.2s;
|
||
}
|
||
#worlds-anthem:active { transform: scale(0.92); }
|
||
#worlds-anthem.playing { background: var(--c-primary); border-color: transparent; }
|
||
|
||
/* Album-Modal — Ban Yaro Songs (Bottom-Sheet) */
|
||
#album-modal {
|
||
position: fixed; inset: 0; z-index: 2000;
|
||
background: rgba(0,0,0,.55);
|
||
display: flex; align-items: flex-end; justify-content: center;
|
||
}
|
||
.album-sheet {
|
||
background: var(--c-surface);
|
||
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
|
||
width: 100%; max-width: 480px;
|
||
padding: var(--space-5) var(--space-4) calc(env(safe-area-inset-bottom,0px) + var(--space-5));
|
||
box-shadow: 0 -4px 24px rgba(0,0,0,.2);
|
||
}
|
||
.album-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--space-4); }
|
||
.album-title { font-size: var(--text-base); font-weight: 700; color: var(--c-text); }
|
||
.album-subtitle { font-size: var(--text-xs); color: var(--c-text-muted); margin-top: 2px; }
|
||
.album-close { background: none; border: none; font-size: 1.5rem; line-height: 1; color: var(--c-text-muted); cursor: pointer; padding: 0 4px; }
|
||
.album-list { display: flex; flex-direction: column; gap: var(--space-2); }
|
||
.album-song { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); background: var(--c-surface-2); cursor: pointer; transition: background .15s; }
|
||
.album-song:active { background: var(--c-border); }
|
||
.album-song--active { background: var(--c-primary-subtle); }
|
||
.album-song-play { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; background: var(--c-primary); color: #fff; display: flex; align-items: center; justify-content: center; }
|
||
.album-song-play svg { width: 18px; height: 18px; }
|
||
.album-song-meta { display: flex; flex-direction: column; min-width: 0; }
|
||
.album-song-title { font-size: var(--text-sm); font-weight: 600; color: var(--c-text); }
|
||
.album-song-sub { font-size: var(--text-xs); color: var(--c-text-muted); margin-top: 1px; }
|
||
|
||
/* Header + Bottom-Nav: vollständig entfernt — Welten übernehmen Navigation */
|
||
#app-header { display: none !important; }
|
||
#bottom-nav { display: none !important; }
|
||
|
||
/* Zurück-FAB — gleiche Farbe und Größe wie Seiten-FABs */
|
||
#worlds-back {
|
||
position: fixed;
|
||
bottom: calc(var(--safe-bottom) + 20px);
|
||
right: 20px;
|
||
width: 54px;
|
||
height: 54px;
|
||
border-radius: 50%;
|
||
background: var(--c-primary);
|
||
border: none;
|
||
color: #fff;
|
||
cursor: pointer;
|
||
z-index: 200;
|
||
display: none;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 4px 18px rgba(196, 132, 58, 0.45);
|
||
transition: transform 0.12s, box-shadow 0.12s;
|
||
-webkit-tap-highlight-color: transparent;
|
||
}
|
||
#worlds-back.worlds-back-visible { display: flex; }
|
||
#worlds-back:active { transform: scale(0.92); box-shadow: 0 2px 8px rgba(196,132,58,0.3); }
|
||
|
||
/* worlds-hidden bleibt für eventuelle andere Verwendung */
|
||
.worlds-hidden { display: none !important; }
|
||
|
||
/* ── JETZT WORLD ─────────────────────────────────────────── */
|
||
|
||
/* ═══════════════════════════════════════════════════════════════
|
||
DREI WELTEN — PANORAMA-BILD + FROSTED GLASS CHIPS
|
||
═══════════════════════════════════════════════════════════════ */
|
||
|
||
/* Bild auf dem Track: alle 3 Panels teilen dasselbe Panorama */
|
||
#worlds-track {
|
||
background-size: 100% auto;
|
||
background-position: 0 40%;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
/* World Panel: Gradient-Overlay — Mitte leuchtet, oben/unten gedämpft für Lesbarkeit */
|
||
.world-panel {
|
||
background: linear-gradient(
|
||
to bottom,
|
||
rgba(0,0,0,0.52) 0%,
|
||
rgba(0,0,0,0.18) 28%,
|
||
rgba(0,0,0,0.14) 55%,
|
||
rgba(0,0,0,0.52) 100%
|
||
);
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between; /* Info oben, Chips unten */
|
||
padding: calc(env(safe-area-inset-top, 0px) + 14px) 14px
|
||
calc(env(safe-area-inset-bottom, 0px) + 76px);
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
-webkit-overflow-scrolling: touch;
|
||
overscroll-behavior-y: contain;
|
||
position: relative; /* Anker für absolut positionierte Footer-Links */
|
||
}
|
||
|
||
/* Content-Divs füllen den Panel und verteilen Top/Bottom */
|
||
#wj-content, #wh-content, #ww-content {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
min-height: 100%;
|
||
}
|
||
|
||
/* Oberer Bereich: Info + Reminders */
|
||
.world-top { display: flex; flex-direction: column; gap: 10px; }
|
||
|
||
/* Unterer Bereich: Chips (Daumen-Zone) — kompakt, ganz unten */
|
||
.world-bottom { display: flex; flex-direction: column; gap: 5px; }
|
||
|
||
/* Frosted-Glass Info-Card (oben in jeder Welt) */
|
||
.world-info-card {
|
||
background: rgba(0, 0, 0, var(--wbg-dim-top, 0.38));
|
||
backdrop-filter: blur(var(--wbg-blur, 18px)) saturate(1.6);
|
||
-webkit-backdrop-filter: blur(var(--wbg-blur, 18px)) saturate(1.6);
|
||
border: 1px solid var(--wborder, rgba(99, 130, 220, 0.55));
|
||
border-radius: 20px;
|
||
padding: 16px 18px;
|
||
color: white;
|
||
flex-shrink: 0;
|
||
}
|
||
.world-info-title {
|
||
font-size: var(--text-xl);
|
||
font-weight: 800;
|
||
line-height: 1.1;
|
||
color: white;
|
||
}
|
||
.world-info-sub {
|
||
font-size: var(--text-xs);
|
||
color: rgba(255, 255, 255, 0.65);
|
||
margin-top: 4px;
|
||
}
|
||
|
||
/* Frosted-Glass Reminder-Card (für Streak, Alerts) */
|
||
.world-reminder {
|
||
background: rgba(0, 0, 0, var(--wbg-dim-top, 0.32));
|
||
backdrop-filter: blur(var(--wbg-blur, 12px));
|
||
-webkit-backdrop-filter: blur(var(--wbg-blur, 12px));
|
||
border: 1px solid var(--wborder, rgba(99, 130, 220, 0.55));
|
||
border-radius: 16px;
|
||
padding: 12px 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
cursor: pointer;
|
||
color: white;
|
||
flex-shrink: 0;
|
||
}
|
||
.world-reminder:active { background: rgba(0,0,0,0.55); }
|
||
|
||
/* Chip-Grid: GLEICH auf allen drei Welten */
|
||
.world-chips-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
grid-auto-rows: 74px;
|
||
gap: 7px;
|
||
}
|
||
|
||
/* Handy: Flexbox statt Grid, damit eine unvollständige letzte Zeile
|
||
horizontal zentriert wird (volle Zeilen bleiben randbündig).
|
||
Chip-Breite exakt wie im 4er-Raster (3 Gaps × 7px = 21px),
|
||
1px Puffer gegen Subpixel-Umbruch. */
|
||
@media (max-width: 767px) {
|
||
.world-chips-grid {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
}
|
||
.world-chips-grid .world-chip {
|
||
width: calc((100% - 22px) / 4);
|
||
}
|
||
}
|
||
|
||
/* Einzelner Chip: Frosted Glass */
|
||
.world-chip {
|
||
background: rgba(0, 0, 0, var(--wbg-dim-bottom, 0.35));
|
||
backdrop-filter: blur(var(--wbg-blur, 12px));
|
||
-webkit-backdrop-filter: blur(var(--wbg-blur, 12px));
|
||
border-radius: 16px;
|
||
padding: 12px 6px;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 6px;
|
||
color: white;
|
||
transition: background 0.12s, transform 0.1s;
|
||
-webkit-tap-highlight-color: transparent;
|
||
user-select: none;
|
||
height: 74px;
|
||
overflow: hidden;
|
||
}
|
||
.world-chip:active {
|
||
background: rgba(0, 0, 0, 0.6);
|
||
transform: scale(0.93);
|
||
}
|
||
.world-chip svg { color: white; flex-shrink: 0; }
|
||
.world-chip-label {
|
||
font-size: 10px;
|
||
font-weight: 600;
|
||
color: rgba(255, 255, 255, 0.9);
|
||
line-height: 1.2;
|
||
max-height: 24px; /* 2 Zeilen bei 10px — px statt em, damit iOS-Schriftgröße nicht skaliert */
|
||
overflow: hidden;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
|
||
/* Chip/Banner-Abdunklung + Blur. --wbg-dim-top/-bottom werden in worlds.js
|
||
adaptiv je nach Bildhelligkeit der oberen/unteren Bildhälfte gesetzt;
|
||
hier nur die Fallback-Defaults (falls JS nicht misst). */
|
||
.world-panel { --wbg-dim-top: 0.14; --wbg-dim-bottom: 0.14; --wbg-blur: 3px; }
|
||
|
||
/* Rahmenfarbe je Welt (Alpha einheitlich 0.55) — gilt für Chips + Banner oben
|
||
Gedämpfte Erdtöne: JETZT orange, HUND naturgrün, WELT blaugrau */
|
||
#wp-jetzt { --wborder: rgba(196, 132, 58, 0.55); } /* #C4843A Bernstein */
|
||
#wp-hund { --wborder: rgba(107, 128, 85, 0.55); } /* #6B8055 Naturgrün */
|
||
#wp-welt { --wborder: rgba(74, 122, 155, 0.55); } /* #4A7A9B Blaugrau */
|
||
.world-chip { border: 1px solid var(--wborder, rgba(99, 130, 220, 0.55)); }
|
||
|
||
/* Sektion-Label über Chip-Gruppen */
|
||
.world-section-label {
|
||
font-size: 9px;
|
||
font-weight: 800;
|
||
letter-spacing: 0.10em;
|
||
text-transform: uppercase;
|
||
color: rgba(255, 255, 255, 0.45);
|
||
padding: 4px 2px 0;
|
||
}
|
||
|
||
/* JETZT-Chip-Reihe: Streak | Gassirunde | Übung */
|
||
.wj-chip-row {
|
||
display: flex;
|
||
gap: 8px;
|
||
}
|
||
.wj-chip {
|
||
flex: 1;
|
||
min-width: 0;
|
||
background: rgba(0, 0, 0, var(--wbg-dim-top, 0.32));
|
||
backdrop-filter: blur(var(--wbg-blur, 12px));
|
||
-webkit-backdrop-filter: blur(var(--wbg-blur, 12px));
|
||
border: 1px solid var(--wborder, rgba(99, 130, 220, 0.55));
|
||
border-radius: 14px;
|
||
padding: 10px 6px 9px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 4px;
|
||
cursor: pointer;
|
||
-webkit-tap-highlight-color: transparent;
|
||
transition: background 0.12s;
|
||
}
|
||
.wj-chip:active { background: rgba(0, 0, 0, 0.52); }
|
||
.wj-chip-label {
|
||
font-size: 8px;
|
||
font-weight: 700;
|
||
letter-spacing: .08em;
|
||
text-transform: uppercase;
|
||
color: rgba(255, 255, 255, 0.45);
|
||
line-height: 1;
|
||
}
|
||
.wj-chip-val {
|
||
font-size: 10px;
|
||
font-weight: 700;
|
||
color: white;
|
||
line-height: 1.25;
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
max-width: 100%;
|
||
}
|
||
|
||
/* Footer-Links (Impressum / Die 100 / Datenschutz) */
|
||
.world-footer-links {
|
||
position: absolute;
|
||
bottom: calc(env(safe-area-inset-bottom, 0px) + 4px);
|
||
left: 0; right: 0;
|
||
text-align: center;
|
||
padding: 0;
|
||
}
|
||
.world-footer-links span {
|
||
font-size: 10px;
|
||
color: rgba(255, 255, 255, 0.6);
|
||
cursor: pointer;
|
||
letter-spacing: 0.05em;
|
||
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
|
||
text-decoration: underline;
|
||
text-underline-offset: 3px;
|
||
text-decoration-color: rgba(255, 255, 255, 0.3);
|
||
transition: color 0.15s;
|
||
}
|
||
.world-footer-links span:hover,
|
||
.world-footer-links span:active {
|
||
color: rgba(255, 255, 255, 0.9);
|
||
}
|
||
|
||
/* Desktop-Sidebar + Zahnrad entfernt — Welten übernehmen Navigation */
|
||
@media (min-width: 768px) {
|
||
#sidebar { display: none !important; }
|
||
#worlds-settings { display: none !important; }
|
||
#page-content { padding-left: 0 !important; }
|
||
.map-full-layout { left: 0 !important; }
|
||
.rk-map-section { left: 0 !important; }
|
||
}
|
||
|
||
/* ── KEYFRAMES ───────────────────────────────────────────── */
|
||
@keyframes pulse {
|
||
0%, 100% { opacity: 0.5; }
|
||
50% { opacity: 0.25; }
|
||
}
|
||
|
||
/* ── COMMUNITY-FEATURES ──────────────────────────────────── */
|
||
|
||
/* Walks-Tab-Bar */
|
||
.walks-tab-panel { display: flex; flex-direction: column; min-height: 0; flex: 1; }
|
||
|
||
/* Foto-Challenge */
|
||
.challenge-banner {
|
||
background: linear-gradient(135deg, var(--c-amber, #f59e0b), var(--c-primary, #C4843A));
|
||
border-radius: var(--radius-lg);
|
||
margin: var(--space-4);
|
||
overflow: hidden;
|
||
}
|
||
.challenge-banner-inner {
|
||
padding: var(--space-5) var(--space-4);
|
||
color: #fff;
|
||
}
|
||
.challenge-thema {
|
||
font-size: var(--text-xl);
|
||
font-weight: var(--weight-bold);
|
||
line-height: 1.2;
|
||
margin-bottom: var(--space-2);
|
||
}
|
||
.challenge-meta {
|
||
font-size: var(--text-sm);
|
||
opacity: 0.88;
|
||
}
|
||
.challenge-gallery {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
||
gap: var(--space-3);
|
||
padding: 0 var(--space-4) var(--space-6);
|
||
}
|
||
.challenge-sub-card {
|
||
background: var(--c-surface);
|
||
border-radius: var(--radius-md);
|
||
overflow: hidden;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
.challenge-sub-card img {
|
||
width: 100%;
|
||
aspect-ratio: 1;
|
||
object-fit: cover;
|
||
display: block;
|
||
cursor: pointer;
|
||
}
|
||
.challenge-sub-info {
|
||
padding: var(--space-2);
|
||
}
|
||
.challenge-sub-user {
|
||
font-size: var(--text-xs);
|
||
color: var(--c-text-secondary);
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
margin-bottom: 2px;
|
||
}
|
||
.challenge-sub-caption {
|
||
font-size: var(--text-xs);
|
||
color: var(--c-text);
|
||
margin-bottom: var(--space-1);
|
||
overflow: hidden;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
.challenge-vote-btn {
|
||
border: none;
|
||
background: transparent;
|
||
color: var(--c-text-secondary);
|
||
font-size: var(--text-xs);
|
||
cursor: pointer;
|
||
padding: 2px 6px;
|
||
border-radius: var(--radius-sm);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 3px;
|
||
}
|
||
.challenge-vote-btn.voted {
|
||
color: var(--c-danger, #ef4444);
|
||
}
|
||
.challenge-winners { border-top: 1px solid var(--c-border); }
|
||
.challenge-winners-row {
|
||
display: flex;
|
||
gap: var(--space-3);
|
||
overflow-x: auto;
|
||
padding: var(--space-2) var(--space-4) var(--space-3);
|
||
scroll-snap-type: x mandatory;
|
||
}
|
||
.challenge-winner-chip {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
background: var(--c-surface-alt, #fdf6ef);
|
||
border-radius: var(--radius-md);
|
||
padding: var(--space-2) var(--space-3);
|
||
min-width: 160px;
|
||
flex-shrink: 0;
|
||
scroll-snap-align: start;
|
||
}
|
||
.challenge-winner-chip img {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: var(--radius-full);
|
||
object-fit: cover;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* Wochentag-Selector */
|
||
.wd-selector {
|
||
display: flex;
|
||
gap: var(--space-2);
|
||
flex-wrap: wrap;
|
||
}
|
||
.wd-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
cursor: pointer;
|
||
padding: 4px 10px;
|
||
border: 1.5px solid var(--c-border);
|
||
border-radius: var(--radius-full);
|
||
font-size: var(--text-sm);
|
||
user-select: none;
|
||
transition: background .15s, border-color .15s;
|
||
}
|
||
.wd-btn input { display: none; }
|
||
.wd-btn:has(input:checked) {
|
||
background: var(--c-primary, #C4843A);
|
||
border-color: var(--c-primary, #C4843A);
|
||
color: #fff;
|
||
}
|
||
|
||
/* Gassi-Zeit-Karten */
|
||
.gassi-zeit-card {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-3);
|
||
padding: var(--space-3) var(--space-4);
|
||
border-bottom: 1px solid var(--c-border);
|
||
background: var(--c-surface);
|
||
}
|
||
.gz-avatar {
|
||
width: 48px;
|
||
height: 48px;
|
||
border-radius: var(--radius-full);
|
||
overflow: hidden;
|
||
flex-shrink: 0;
|
||
background: var(--c-surface-alt);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.gz-avatar img { width: 100%; height: 100%; object-fit: cover; }
|
||
.gz-avatar-placeholder { font-size: 1.5rem; color: var(--c-text-secondary); }
|
||
.gz-body { flex: 1; min-width: 0; }
|
||
.gz-name {
|
||
font-weight: var(--weight-semibold);
|
||
font-size: var(--text-sm);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-1);
|
||
flex-wrap: wrap;
|
||
}
|
||
.gz-meta { font-size: var(--text-xs); color: var(--c-text-secondary); margin-top: 2px; }
|
||
.gz-notiz { font-size: var(--text-xs); color: var(--c-text-secondary); margin-top: 2px; font-style: italic; }
|
||
.gz-actions { display: flex; gap: var(--space-1); flex-shrink: 0; }
|
||
|
||
/* Rassen-Community-Chip */
|
||
.breed-community-chip {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: var(--space-1);
|
||
background: var(--c-surface-alt, #fdf6ef);
|
||
border: 1.5px solid var(--c-amber, #f59e0b);
|
||
border-radius: var(--radius-full);
|
||
padding: 6px 16px;
|
||
font-size: var(--text-sm);
|
||
font-weight: var(--weight-medium);
|
||
color: var(--c-text);
|
||
cursor: pointer;
|
||
transition: background .15s;
|
||
}
|
||
.breed-community-chip:hover, .breed-community-chip:active {
|
||
background: #fff3e0;
|
||
}
|
||
|
||
/* ============================================================
|
||
REFACTORING: Extrahierte Inline-Styles aus worlds.js,
|
||
dog-profile.js und settings.js
|
||
============================================================ */
|
||
|
||
/* ----------------------------------------------------------
|
||
Bottom-Sheet Overlay (position:fixed, flex-column, flex-end)
|
||
Verwendet in: _openFab, _openAllChips, _openQuickGassi,
|
||
_openConfigModal (worlds.js)
|
||
---------------------------------------------------------- */
|
||
.w3-sheet-overlay {
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 460;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
/* Backdrop (halbtransparent + blur) */
|
||
.w3-backdrop {
|
||
position: absolute;
|
||
inset: 0;
|
||
background: rgba(0, 0, 0, 0.55);
|
||
backdrop-filter: blur(2px);
|
||
}
|
||
|
||
/* Sheet-Panel (weißer Boden, abgerundete Oberkante) */
|
||
.w3-sheet-panel {
|
||
position: relative;
|
||
z-index: 1;
|
||
background: var(--c-bg);
|
||
border-radius: 24px 24px 0 0;
|
||
padding: 20px 16px calc(env(safe-area-inset-bottom, 16px) + 16px);
|
||
box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
/* Sheet-Panel mit Scroll (für lange Inhalte) */
|
||
.w3-sheet-panel--scroll {
|
||
max-height: 82vh;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
/* Sheet-Header-Zeile (Titel links, Button rechts) */
|
||
.w3-sheet-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.w3-sheet-header--mb20 {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
/* Sheet-Titel */
|
||
.w3-sheet-title {
|
||
font-size: var(--text-base);
|
||
font-weight: 700;
|
||
}
|
||
|
||
/* Runder Schließen-Button (28px) */
|
||
.w3-close-btn {
|
||
background: var(--c-border);
|
||
border: none;
|
||
border-radius: 50%;
|
||
width: 28px;
|
||
height: 28px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* Runder Schließen-Button (32px — größere Variante) */
|
||
.w3-close-btn--lg {
|
||
background: var(--c-border);
|
||
border: none;
|
||
border-radius: 50%;
|
||
width: 32px;
|
||
height: 32px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* FAB-Options-Button (Zeilen-Stil, flex, card-bg) */
|
||
.w3-fab-option {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14px;
|
||
width: 100%;
|
||
background: var(--c-bg-card, var(--c-surface));
|
||
border: 1px solid var(--c-border);
|
||
border-radius: 14px;
|
||
padding: 14px 16px;
|
||
cursor: pointer;
|
||
text-align: left;
|
||
transition: background 0.12s;
|
||
}
|
||
|
||
/* Icon-Dot (runder farbiger Container für ph-icons) */
|
||
.w3-icon-dot {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* Icon-Dot groß (44px) */
|
||
.w3-icon-dot--lg {
|
||
width: 44px;
|
||
height: 44px;
|
||
border-radius: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* Chip-Button (Grid-Spalten, vertikal gestapelt) */
|
||
.w3-chip-btn {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 6px;
|
||
background: var(--c-bg-card, var(--c-surface));
|
||
border: 1px solid var(--c-border);
|
||
border-radius: 14px;
|
||
padding: 12px 6px;
|
||
cursor: pointer;
|
||
transition: background 0.12s;
|
||
}
|
||
|
||
/* Chip-Button Label */
|
||
.w3-chip-label {
|
||
font-size: 10px;
|
||
font-weight: 600;
|
||
color: var(--c-text);
|
||
text-align: center;
|
||
line-height: 1.2;
|
||
word-break: break-word;
|
||
}
|
||
|
||
/* Vertikal gestapelte Button-Gruppe (Modal-Footer) */
|
||
.w3-btn-stack {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-2);
|
||
width: 100%;
|
||
}
|
||
|
||
/* Sektion-Label (uppercase, klein, gedämpft) */
|
||
.w3-section-label {
|
||
font-size: var(--text-xs);
|
||
font-weight: 700;
|
||
color: var(--c-text-secondary);
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
/* Schnell-Gassi Dauer-Button */
|
||
.w3-dur-btn {
|
||
padding: 12px 6px;
|
||
border-radius: 12px;
|
||
border: 2px solid var(--c-border);
|
||
background: var(--c-bg-card, var(--c-surface));
|
||
cursor: pointer;
|
||
font-weight: 700;
|
||
font-size: var(--text-sm);
|
||
color: var(--c-text);
|
||
}
|
||
.w3-dur-btn.active {
|
||
border-color: var(--c-primary);
|
||
background: var(--c-primary-subtle);
|
||
color: var(--c-primary);
|
||
}
|
||
|
||
/* Submit-Button (volle Breite, primary, flex-center) */
|
||
.w3-submit-btn {
|
||
width: 100%;
|
||
padding: 16px;
|
||
border-radius: 14px;
|
||
background: var(--c-primary);
|
||
color: white;
|
||
border: none;
|
||
cursor: pointer;
|
||
font-size: var(--text-base);
|
||
font-weight: 700;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
/* "Weitere Funktionen"-Link-Button */
|
||
.w3-all-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
width: 100%;
|
||
padding: 12px;
|
||
border: none;
|
||
background: none;
|
||
cursor: pointer;
|
||
color: var(--c-primary);
|
||
font-size: var(--text-sm);
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* ----------------------------------------------------------
|
||
W3-Overlays Desktop: zentrierte Dialogs statt Bottom-Sheets
|
||
---------------------------------------------------------- */
|
||
@media (min-width: 768px) {
|
||
.w3-sheet-overlay {
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.w3-backdrop {
|
||
backdrop-filter: blur(4px);
|
||
}
|
||
.w3-sheet-panel {
|
||
border-radius: 20px;
|
||
width: 90%;
|
||
max-width: 480px;
|
||
padding: 24px;
|
||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
|
||
}
|
||
.w3-sheet-panel--scroll {
|
||
max-width: 680px;
|
||
max-height: 80vh;
|
||
}
|
||
/* all-chips Grid auf Desktop: auto-fill statt repeat(4,1fr) */
|
||
.w3-sheet-panel--scroll [style*="grid-template-columns:repeat(4,1fr)"] {
|
||
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
|
||
}
|
||
}
|
||
|
||
/* ----------------------------------------------------------
|
||
Settings / Dog-Profile: Card-Sektion-Header
|
||
(uppercase Label mit Border-Bottom)
|
||
---------------------------------------------------------- */
|
||
.by-card-section-header {
|
||
padding: var(--space-3) var(--space-4);
|
||
font-size: var(--text-xs);
|
||
font-weight: 600;
|
||
color: var(--c-text-secondary);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
border-bottom: 1px solid var(--c-border);
|
||
}
|
||
|
||
/* ----------------------------------------------------------
|
||
Dog-Profile: Info-Card-Zeile (xs-Label + Wert)
|
||
---------------------------------------------------------- */
|
||
.dp-info-label {
|
||
font-size: var(--text-xs);
|
||
color: var(--c-text-secondary);
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
/* Passport: Datensatz-Zeile */
|
||
.pp-data-row {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: var(--space-3);
|
||
padding: var(--space-3) 0;
|
||
border-bottom: 1px solid var(--c-border);
|
||
}
|
||
|
||
/* Settings: Sidebar-Item mit Padding */
|
||
.settings-sidebar-item {
|
||
padding: var(--space-4);
|
||
border-radius: 0;
|
||
border-bottom: 1px solid var(--c-border);
|
||
}
|
||
|
||
/* Settings: Toggle-Zeile (flex, icon + label + toggle) */
|
||
.settings-toggle-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-3);
|
||
padding: var(--space-4);
|
||
border-bottom: 1px solid var(--c-border);
|
||
}
|
||
|
||
/* Settings: Toggle-Label-Block */
|
||
.settings-toggle-label {
|
||
flex: 1;
|
||
}
|
||
|
||
/* Settings: Inline-Toggle (44×24px) */
|
||
.by-toggle-wrap {
|
||
position: relative;
|
||
display: inline-block;
|
||
width: 44px;
|
||
height: 24px;
|
||
flex-shrink: 0;
|
||
}
|
||
.by-toggle-wrap input {
|
||
opacity: 0;
|
||
width: 0;
|
||
height: 0;
|
||
position: absolute;
|
||
}
|
||
.by-toggle-track {
|
||
position: absolute;
|
||
cursor: pointer;
|
||
inset: 0;
|
||
border-radius: 12px;
|
||
background: var(--c-border);
|
||
transition: background 0.2s;
|
||
}
|
||
.by-toggle-thumb {
|
||
position: absolute;
|
||
top: 2px;
|
||
width: 20px;
|
||
height: 20px;
|
||
border-radius: 50%;
|
||
background: #fff;
|
||
transition: left 0.2s;
|
||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
/* Settings: Version-Badge */
|
||
.by-version-badge {
|
||
background: var(--c-surface-2);
|
||
border: 1px solid var(--c-border);
|
||
border-radius: 100px;
|
||
padding: 2px 10px;
|
||
font-family: monospace;
|
||
font-size: 10px;
|
||
color: var(--c-text-muted);
|
||
}
|
||
|
||
/* Avatar-Kreis (56px, primary bg) */
|
||
.by-avatar-circle {
|
||
width: 56px;
|
||
height: 56px;
|
||
border-radius: 50%;
|
||
background: var(--c-primary);
|
||
color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1.5rem;
|
||
font-weight: 700;
|
||
flex-shrink: 0;
|
||
cursor: pointer;
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
|
||
/* ============================================================
|
||
Offline-Bereitschafts-Anzeige IM Welten-FAB
|
||
Die 5 Pfoten-Pfade werden je nach Score grün gefärbt
|
||
(Default = weiß auf orange, filled = grün auf orange)
|
||
============================================================ */
|
||
#worlds-fab .offline-paw .paw-elem {
|
||
color: #fff; /* stroke via currentColor — fill bleibt 'none' aus HTML */
|
||
transition: stroke 0.4s ease;
|
||
}
|
||
#worlds-fab .offline-paw .paw-elem.filled {
|
||
color: #5C3517; /* dunkles Ban Yaro Braun — klar auf orangem FAB */
|
||
}
|
||
|
||
.offline-status-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-3);
|
||
padding: var(--space-2) var(--space-3);
|
||
border-radius: var(--radius-md);
|
||
border: 1px solid var(--c-border-light);
|
||
font-size: var(--text-sm);
|
||
margin-bottom: var(--space-2);
|
||
}
|
||
.offline-status-row .osr-check {
|
||
width: 24px;
|
||
height: 24px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
}
|
||
.offline-status-row.ok .osr-check { background: var(--c-success); color: #fff; }
|
||
.offline-status-row.miss .osr-check { background: var(--c-surface-2); color: var(--c-text-muted); border: 1px dashed var(--c-border); }
|
||
.offline-status-row .osr-text { flex: 1; min-width: 0; }
|
||
.offline-status-row .osr-title { font-weight: 600; }
|
||
.offline-status-row .osr-detail { font-size: var(--text-xs); color: var(--c-text-muted); margin-top: 2px; }
|
||
|
||
/* ============================================================
|
||
.map-list-toggle — vereinheitlichter Karten/Listen-Umschalter
|
||
Verwendet von walks.js, events.js, routes.js, etc.
|
||
|
||
<div class="map-list-toggle">
|
||
<button class="active" data-view="list">Liste</button>
|
||
<button data-view="map">Karte</button>
|
||
</div>
|
||
============================================================ */
|
||
.map-list-toggle {
|
||
display: flex;
|
||
border: 1.5px solid var(--c-border);
|
||
border-radius: var(--radius-md);
|
||
overflow: hidden;
|
||
background: var(--c-surface);
|
||
}
|
||
.map-list-toggle button {
|
||
flex: 1;
|
||
height: 44px;
|
||
border: none;
|
||
background: transparent;
|
||
color: var(--c-text-secondary);
|
||
cursor: pointer;
|
||
font-size: var(--text-sm);
|
||
font-weight: var(--weight-medium);
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: var(--space-1);
|
||
transition: background 0.15s, color 0.15s;
|
||
-webkit-tap-highlight-color: transparent;
|
||
}
|
||
.map-list-toggle button.active {
|
||
background: var(--c-primary);
|
||
color: #fff;
|
||
}
|
||
.map-list-toggle button:not(.active):hover {
|
||
background: var(--c-surface-2);
|
||
color: var(--c-text);
|
||
}
|