/* ============================================================
   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); }

/* 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);
}