/* ============================================================
   BAN YARO — Komponenten
   Alle wiederverwendbaren UI-Bausteine an einem Ort.
   Kein Baustein wird zweimal definiert.
   ============================================================ */

/* ------------------------------------------------------------
   1. BUTTONS
   ------------------------------------------------------------ */
.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-2);
  padding:         var(--space-3) var(--space-5);
  font-size:       var(--text-base);
  font-weight:     var(--weight-semibold);
  line-height:     1;
  border-radius:   var(--radius-md);
  border:          2px solid transparent;
  transition:      background var(--transition-fast),
                   color var(--transition-fast),
                   border-color var(--transition-fast),
                   transform var(--transition-fast),
                   box-shadow var(--transition-fast);
  cursor:          pointer;
  white-space:     nowrap;
  -webkit-tap-highlight-color: transparent;
  touch-action:    manipulation;
  min-height:      44px; /* Touch-Target Minimum */
}

.btn:active { transform: scale(0.97); }

.btn-primary {
  background:  var(--c-primary);
  color:       var(--c-text-inverse);
  border-color:var(--c-primary);
}
.btn-primary:hover {
  background:   var(--c-primary-dark);
  border-color: var(--c-primary-dark);
}

.btn-secondary {
  background:   var(--c-surface);
  color:        var(--c-text);
  border-color: var(--c-border);
  box-shadow:   var(--shadow-xs);
}
.btn-secondary:hover {
  background:   var(--c-surface-2);
  border-color: var(--c-surface-3);
}

.btn-active {
  background:   color-mix(in srgb, var(--c-primary) 15%, var(--c-surface)) !important;
  border-color: var(--c-primary) !important;
  color:        var(--c-primary-dark) !important;
}

/* Meilenstein-Toggle im Formular */
.diary-milestone-toggle {
  display:       flex;
  align-items:   center;
  gap:           var(--space-2);
  width:         100%;
  padding:       var(--space-3) var(--space-4);
  border:        1.5px dashed var(--c-border);
  border-radius: var(--radius-md);
  background:    transparent;
  color:         var(--c-text-secondary);
  font-size:     var(--text-sm);
  font-weight:   var(--weight-medium);
  cursor:        pointer;
  transition:    all var(--transition-fast);
}
.diary-milestone-toggle:hover {
  border-color: #d4a017;
  color:        #8a6400;
}
.diary-milestone-toggle--active {
  border-style:  solid;
  border-color:  #d4a017;
  background:    color-mix(in srgb, #d4a017 10%, transparent);
  color:         #8a6400;
  font-weight:   var(--weight-semibold);
}
.diary-milestone-toggle .ph-icon { font-size: 1.2rem; }

.btn-ghost {
  background:   transparent;
  color:        var(--c-text-secondary);
  border-color: transparent;
}
.btn-ghost:hover {
  background:   var(--c-surface-2);
  color:        var(--c-text);
}

.btn-danger {
  background:   var(--c-danger);
  color:        #fff;
  border-color: var(--c-danger);
}
.btn-danger:hover {
  background:   var(--c-danger-dark);
  border-color: var(--c-danger-dark);
}

.btn-nature {
  background:   var(--c-nature);
  color:        #fff;
  border-color: var(--c-nature);
}

/* Größen */
.btn-sm {
  padding:     var(--space-2) var(--space-3);
  font-size:   var(--text-sm);
  min-height:  36px;
  border-radius: var(--radius-sm);
}
.btn-lg {
  padding:     var(--space-4) var(--space-8);
  font-size:   var(--text-md);
  min-height:  52px;
  border-radius: var(--radius-lg);
}
.btn-full { width: 100%; }

.btn:disabled {
  opacity: 0.45;
  cursor:  not-allowed;
  transform: none;
}

/* Icon-only Button */
.btn-icon {
  padding:       var(--space-2);
  border-radius: var(--radius-md);
  min-height:    44px;
  min-width:     44px;
}

/* ------------------------------------------------------------
   2. CARDS
   ------------------------------------------------------------ */
.card {
  background:    var(--c-surface);
  border:        1px solid var(--c-border-light);
  border-radius: var(--radius-lg);
  box-shadow:    var(--shadow-sm);
  overflow:      hidden;
}

.card-body {
  padding: var(--space-4);
}

.card-header {
  padding:       var(--space-4);
  border-bottom: 1px solid var(--c-border-light);
  font-weight:   var(--weight-semibold);
  font-size:     var(--text-md);
}

.card-footer {
  padding:    var(--space-3) var(--space-4);
  border-top: 1px solid var(--c-border-light);
  background: var(--c-bg);
}

/* Klickbare Card */
.card-clickable {
  cursor:     pointer;
  transition: box-shadow var(--transition-fast),
              transform  var(--transition-fast);
}
.card-clickable:hover {
  box-shadow: var(--shadow-md);
  transform:  translateY(-1px);
}
.card-clickable:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

/* Horizontale Card (Bild links + Inhalt rechts) */
.card-horizontal {
  display: flex;
  align-items: stretch;
}
.card-horizontal .card-image {
  width:      88px;
  flex-shrink: 0;
  object-fit: cover;
}

/* ------------------------------------------------------------
   3. BY-TABS — Einheitliche Tab/Filter-Navigation (app-weit)
   ------------------------------------------------------------ */
.by-tabs {
  display:    flex;
  gap:        var(--space-2);
  overflow-x: auto;
  flex-wrap:  nowrap;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.by-tabs::-webkit-scrollbar { display: none; }


.by-tab {
  flex-shrink:   0;
  padding:       var(--space-2) var(--space-3);
  border:        1.5px solid var(--c-border);
  border-radius: var(--radius-full);
  background:    var(--c-surface);
  color:         var(--c-text-secondary);
  font-size:     var(--text-sm);
  font-weight:   var(--weight-medium);
  cursor:        pointer;
  white-space:   nowrap;
  transition:    all var(--transition-fast);
  touch-action:  manipulation;
}
.by-tab.active {
  background:   var(--c-primary);
  border-color: var(--c-primary);
  color:        var(--c-text-inverse);
}
.by-tab:hover:not(.active) {
  border-color: var(--c-primary);
  color:        var(--c-primary);
}

/* ------------------------------------------------------------
   4. BY-SECTION-LABEL + BY-TOOLBAR — weitere gemeinsame Elemente
   ------------------------------------------------------------ */

/* Kleines Überschriften-Label über Gruppen ("Aktuelle Medikamente" etc.) */
.by-section-label {
  font-size:      var(--text-sm);
  font-weight:    var(--weight-semibold);
  color:          var(--c-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding:        var(--space-3) 0 var(--space-1);
}

/* Toolbar-Leiste oben auf einer Seite (Background + Border + Flex) */
.by-toolbar {
  display:       flex;
  align-items:   center;
  gap:           var(--space-2);
  padding:       var(--space-3) var(--space-4);
  background:    var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  flex-shrink:   0;
}

/* Health: Transponder-Zeile */
.health-transponder {
  display:        flex;
  align-items:    center;
  gap:            var(--space-2);
  padding:        var(--space-2) var(--space-4);
  background:     var(--c-surface);
  border-bottom:  1px solid var(--c-border);
  font-size:      var(--text-sm);
  color:          var(--c-text-secondary);
  flex-shrink:    0;
}
.health-transponder-label { color: var(--c-text-muted); }
.health-transponder-edit  { margin-left: auto; }

/* Diary: Suchleiste */
.diary-search-wrap {
  position:      relative;
  flex:          1;
  min-width:     0;
}
.diary-search-icon {
  position:      absolute;
  left:          var(--space-3);
  top:           50%;
  transform:     translateY(-50%);
  color:         var(--c-text-muted);
  pointer-events: none;
}
.diary-search-input {
  width:         100%;
  padding:       var(--space-2) var(--space-3) var(--space-2) 2.2rem;
  border:        1.5px solid var(--c-border);
  border-radius: var(--radius-md);
  font-size:     var(--text-sm);
  font-family:   var(--font-sans);
  background:    var(--c-bg);
  color:         var(--c-text);
  outline:       none;
  transition:    border-color var(--transition-fast);
}
.diary-search-input:focus { border-color: var(--c-primary); }

/* Widget-Karte */
.widget-card {
  background:    var(--c-surface);
  border-radius: var(--radius-xl);
  overflow:      hidden;
  box-shadow:    var(--shadow-sm);
}
.widget-dog-row {
  display:       flex;
  align-items:   center;
  gap:           var(--space-3);
  padding:       var(--space-4);
}
.widget-dog-av {
  width: 48px; height: 48px; border-radius: 50%;
  object-fit: cover; border: 2px solid var(--c-primary-light);
  flex-shrink: 0;
}
.widget-dog-av--placeholder {
  display: flex; align-items: center; justify-content: center;
  background: var(--c-surface-2); font-size: 1.5rem;
}
.widget-reminder {
  display:       flex;
  align-items:   center;
  gap:           var(--space-3);
  padding:       var(--space-3) var(--space-4);
  background:    var(--c-primary-subtle);
  color:         var(--c-primary-dark);
  border-top:    1px solid var(--c-border-light);
}
.widget-reminder--overdue { background: var(--c-danger-subtle); color: var(--c-danger); }
.widget-reminder--ok      { background: var(--c-success-subtle); color: var(--c-success); }
.widget-photo-wrap {
  position:   relative;
  aspect-ratio: 4/3;
  overflow:   hidden;
  border-top: 1px solid var(--c-border-light);
  display:    flex; align-items: center; justify-content: center;
  background: var(--c-surface-2);
}
.widget-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.widget-photo-placeholder { flex-direction: column; gap: var(--space-2); }
.widget-photo-caption {
  position:   absolute;
  bottom:     0; left: 0; right: 0;
  padding:    var(--space-2) var(--space-3);
  background: linear-gradient(transparent, rgba(0,0,0,.55));
  color:      #fff;
  font-size:  var(--text-sm);
  display:    flex;
  justify-content: space-between;
  align-items: flex-end;
}
.widget-photo-date { font-size: var(--text-xs); opacity: .8; }

/* Import: Format-Auswahl-Karten */
.import-format-card {
  display:        flex;
  align-items:    center;
  gap:            var(--space-3);
  padding:        var(--space-3) var(--space-4);
  border:         2px solid var(--c-border);
  border-radius:  var(--radius-md);
  cursor:         pointer;
  transition:     border-color var(--transition-fast), background var(--transition-fast);
}
.import-format-card:hover               { border-color: var(--c-primary-light); }
.import-format-card--active             { border-color: var(--c-primary); background: var(--c-primary-subtle); }
.import-format-icon {
  font-size:    1.5rem;
  color:        var(--c-primary);
  flex-shrink:  0;
}

/* ------------------------------------------------------------
   5. BADGES & STATUS-PILLS
   ------------------------------------------------------------ */
.badge {
  display:       inline-flex;
  align-items:   center;
  gap:           var(--space-1);
  padding:       var(--space-1) var(--space-2);
  font-size:     var(--text-xs);
  font-weight:   var(--weight-semibold);
  border-radius: var(--radius-full);
  white-space:   nowrap;
}

.badge-primary  { background: var(--c-primary-subtle); color: var(--c-primary-dark); }
.badge-success  { background: var(--c-success-subtle); color: var(--c-success); }
.badge-danger   { background: var(--c-danger-subtle);  color: var(--c-danger); }
.badge-warning  { background: var(--c-warning-subtle); color: var(--c-primary-dark); }
.badge-info     { background: var(--c-info-subtle);    color: var(--c-info); }
.badge-nature   { background: var(--c-nature-subtle);  color: var(--c-nature); }
.badge-muted    { background: var(--c-surface-2);      color: var(--c-text-secondary); }

/* Dot-Indicator */
.badge-dot::before {
  content:       '';
  display:       inline-block;
  width:         6px;
  height:        6px;
  border-radius: var(--radius-full);
  background:    currentColor;
}

/* Giftköder-spezifisch — besonders auffällig */
.badge-alarm {
  background:  var(--c-danger);
  color:       #fff;
  font-size:   var(--text-xs);
  font-weight: var(--weight-bold);
  animation:   pulse-alarm 2s ease-in-out infinite;
}
@keyframes pulse-alarm {
  0%, 100% { box-shadow: 0 0 0 0 rgba(196, 57, 26, 0.4); }
  50%       { box-shadow: 0 0 0 6px rgba(196, 57, 26, 0); }
}

/* ------------------------------------------------------------
   4. FORMULARE
   ------------------------------------------------------------ */
.form-group {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
}

.form-label {
  font-size:   var(--text-sm);
  font-weight: var(--weight-medium);
  color:       var(--c-text-secondary);
}

/* iOS Safari: font-size < 16px triggert Auto-Zoom beim Fokus — muss alle Klassen überschreiben */
input, select, textarea {
  font-size: var(--text-base) !important;
}

.form-control {
  width:         100%;
  padding:       var(--space-3) var(--space-4);
  font-size:     var(--text-base);
  color:         var(--c-text);
  background:    var(--c-surface);
  border:        1.5px solid var(--c-border);
  border-radius: var(--radius-md);
  transition:    border-color var(--transition-fast),
                 box-shadow   var(--transition-fast);
  min-height:    44px;
  appearance:    none;
  -webkit-appearance: none;
}

.form-control::placeholder { color: var(--c-text-muted); }

/* Kalender-Icon in Datumseingaben: Amber statt schwarz
   color-scheme: light → schwarzes Icon
   invert(0.55) → mittleres Grau (vermeidet Clipping bei sepia auf Weiß)
   → sepia → saturate → brightness auf ~#C4843A bringen */
input[type="date"],
input[type="time"] {
  color-scheme: light;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  cursor:  pointer;
  filter:  brightness(0) invert(0.55) sepia(1) saturate(4) brightness(0.77);
}

.form-control:focus {
  outline:      none;
  border-color: var(--c-primary);
  box-shadow:   0 0 0 3px rgba(196, 132, 58, 0.15);
}

.form-control:invalid:not(:placeholder-shown) {
  border-color: var(--c-danger);
}

textarea.form-control {
  resize:     vertical;
  min-height: 100px;
}

.form-control-icon {
  position: relative;
}
.form-control-icon .form-control {
  padding-left: var(--space-10);
}
.form-control-icon .icon {
  position:  absolute;
  left:      var(--space-3);
  top:       50%;
  transform: translateY(-50%);
  color:     var(--c-text-muted);
  pointer-events: none;
}

.form-hint {
  font-size: var(--text-xs);
  color:     var(--c-text-muted);
}
.form-error {
  font-size: var(--text-xs);
  color:     var(--c-danger);
}

/* Toggle / Checkbox */
.toggle {
  position: relative;
  display:  inline-block;
  width:    48px;
  height:   28px;
  flex-shrink: 0;
}
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position:      absolute;
  inset:         0;
  background:    var(--c-border);
  border-radius: var(--radius-full);
  transition:    background var(--transition-normal);
  cursor:        pointer;
}
.toggle-slider::before {
  content:       '';
  position:      absolute;
  width:         22px;
  height:        22px;
  left:          3px;
  top:           3px;
  background:    #fff;
  border-radius: var(--radius-full);
  transition:    transform var(--transition-normal);
  box-shadow:    var(--shadow-sm);
}
.toggle input:checked + .toggle-slider {
  background: var(--c-primary);
}
.toggle input:checked + .toggle-slider::before {
  transform: translateX(20px);
}

/* ------------------------------------------------------------
   5. AVATAR
   ------------------------------------------------------------ */
.avatar {
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  border-radius: var(--radius-full);
  overflow:      hidden;
  background:    var(--c-surface-2);
  color:         var(--c-text-secondary);
  font-weight:   var(--weight-semibold);
  flex-shrink:   0;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

.avatar-sm  { width: 32px;  height: 32px;  font-size: var(--text-xs); }
.avatar-md  { width: 44px;  height: 44px;  font-size: var(--text-sm); }
.avatar-lg  { width: 64px;  height: 64px;  font-size: var(--text-lg); }
.avatar-xl  { width: 96px;  height: 96px;  font-size: var(--text-2xl); }
.avatar-2xl { width: 128px; height: 128px; font-size: var(--text-3xl); }

/* Hunde-Avatar mit Rahmen in Primärfarbe */
.avatar-dog {
  border: 3px solid var(--c-primary-light);
  box-shadow: 0 0 0 1px var(--c-primary);
}

/* ------------------------------------------------------------
   6. LISTE (Einstellungen, Menüs)
   ------------------------------------------------------------ */
.list {
  background:    var(--c-surface);
  border:        1px solid var(--c-border-light);
  border-radius: var(--radius-lg);
  overflow:      hidden;
}

.list-item {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  padding:     var(--space-4);
  border-bottom: 1px solid var(--c-border-light);
  transition:  background var(--transition-fast);
  min-height:  52px;
}
.list-item:last-child { border-bottom: none; }
.list-item.clickable  { cursor: pointer; }
.list-item.clickable:hover { background: var(--c-bg); }

.list-item-icon {
  width:         40px;
  height:        40px;
  border-radius: var(--radius-md);
  display:       flex;
  align-items:   center;
  justify-content: center;
  flex-shrink:   0;
  font-size:     20px;
}

.list-item-content { flex: 1; min-width: 0; }
.list-item-title   { font-weight: var(--weight-medium); }
.list-item-desc    { font-size: var(--text-sm); color: var(--c-text-secondary); }

/* ------------------------------------------------------------
   7. TOAST / BENACHRICHTIGUNGEN
   ------------------------------------------------------------ */
.toast-container {
  position:       fixed;
  top:            calc(var(--safe-top) + var(--space-4));
  left:           50%;
  transform:      translateX(-50%);
  z-index:        1000;
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
  pointer-events: none;
  width:          calc(100% - var(--space-8));
  max-width:      400px;
}

.toast {
  display:       flex;
  align-items:   center;
  gap:           var(--space-3);
  padding:       var(--space-3) var(--space-4);
  background:    var(--c-text);
  color:         var(--c-text-inverse);
  border-radius: var(--radius-lg);
  box-shadow:    var(--shadow-lg);
  font-size:     var(--text-sm);
  font-weight:   var(--weight-medium);
  pointer-events: auto;
  animation:     toast-in 200ms ease forwards;
}

.toast-success { background: var(--c-success); }
.toast-danger  { background: var(--c-danger); }
.toast-warning { background: var(--c-warning); color: var(--c-text); }
.toast-info    { background: var(--c-info); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateY(0)    scale(1); }
  to   { opacity: 0; transform: translateY(-8px) scale(0.96); }
}
.toast.removing { animation: toast-out 200ms ease forwards; }

/* ------------------------------------------------------------
   8. MODAL
   ------------------------------------------------------------ */
/* Verhindert Body-Scroll wenn Modal offen — kein Layout-Sprung */
html.modal-open {
  overflow: hidden;
  overscroll-behavior: none;
}

.modal-overlay {
  position:   fixed;
  inset:      0;
  background: rgba(42, 31, 20, 0.5);
  z-index:    900;
  display:    flex;
  align-items: flex-end;
  justify-content: center;
  padding:    var(--space-4);
  backdrop-filter: blur(2px);
  animation:  overlay-in var(--transition-normal) ease;
  touch-action: none;
  overscroll-behavior: none;
}
@media (min-width: 768px) {
  .modal-overlay { align-items: center; }
}

.modal {
  background:    var(--c-surface);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  border:        2px solid var(--c-primary);
  width:         100%;
  max-width:     480px;
  max-height:    90vh;
  max-height:    90svh;
  overflow:      hidden;          /* Modal selbst scrollt NICHT */
  display:       flex;
  flex-direction: column;
  box-shadow:    var(--shadow-xl);
  animation:     modal-in var(--transition-slow) cubic-bezier(0.34, 1.56, 0.64, 1);
}
@media (min-width: 768px) {
  .modal {
    border-radius: var(--radius-xl);
    animation:     overlay-in var(--transition-normal) ease;
  }
}

.modal-handle {
  width:         40px;
  height:        4px;
  background:    var(--c-border);
  border-radius: var(--radius-full);
  margin:        var(--space-3) auto;
}
@media (min-width: 768px) { .modal-handle { display: none; } }

.modal-overlay--fullscreen {
  padding: 0;
}
.modal-overlay--fullscreen .modal {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  border-radius: 0;
  border: none;
}
.modal-overlay--fullscreen .modal-handle { display: none; }

.ausweis-frame {
  width:  100%;
  height: 100%;
  border: none;
  flex:   1 1 auto;
}

.modal-header {
  padding:        var(--space-4) var(--space-6);
  border-bottom:  1px solid var(--c-border-light);
  display:        flex;
  align-items:    center;
  justify-content:space-between;
}
.modal-title {
  font-size:   var(--text-lg);
  font-weight: var(--weight-semibold);
}
.modal-body {
  padding:              var(--space-6);
  overflow-y:           auto;
  flex:                 1;
  overscroll-behavior:  contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--c-primary) var(--c-surface);
}
.modal-body::-webkit-scrollbar       { width: 6px; }
.modal-body::-webkit-scrollbar-track { background: var(--c-surface); }
.modal-body::-webkit-scrollbar-thumb {
  background:    var(--c-primary);
  border-radius: var(--radius-full);
}
.modal-body::-webkit-scrollbar-thumb:hover { background: var(--c-primary-dark); }
.modal-footer {
  padding:    var(--space-4) var(--space-6);
  border-top: 1px solid var(--c-border-light);
  display:    flex;
  gap:        var(--space-3);
  justify-content: flex-end;
}

@keyframes overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes modal-in {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* ------------------------------------------------------------
   9. LADEINDIKATOR
   ------------------------------------------------------------ */
.spinner {
  width:         24px;
  height:        24px;
  border:        2.5px solid var(--c-border);
  border-top-color: var(--c-primary);
  border-radius: var(--radius-full);
  animation:     spin 0.7s linear infinite;
  flex-shrink:   0;
}
.spinner-sm { width: 16px; height: 16px; border-width: 2px; }
.spinner-lg { width: 36px; height: 36px; border-width: 3px; }

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-overlay {
  position:        absolute;
  inset:           0;
  background:      rgba(250, 247, 242, 0.7);
  display:         flex;
  align-items:     center;
  justify-content: center;
  z-index:         10;
  border-radius:   inherit;
}

/* ------------------------------------------------------------
   10. LEERER ZUSTAND (Empty State)
   ------------------------------------------------------------ */
.empty-state {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  text-align:      center;
  padding:         var(--space-12) var(--space-8);
  gap:             var(--space-4);
}
.empty-state-icon {
  font-size:     48px;
  line-height:   1;
  margin-bottom: var(--space-2);
}
.empty-state-title {
  font-size:   var(--text-lg);
  font-weight: var(--weight-semibold);
  color:       var(--c-text);
}
.empty-state-text {
  font-size: var(--text-sm);
  color:     var(--c-text-secondary);
  max-width: 280px;
  line-height: var(--leading-relaxed);
}

/* ------------------------------------------------------------
   11. FOTO-UPLOAD
   ------------------------------------------------------------ */
.photo-upload {
  position:       relative;
  border:         2px dashed var(--c-border);
  border-radius:  var(--radius-lg);
  background:     var(--c-bg);
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content:center;
  gap:            var(--space-2);
  padding:        var(--space-8);
  cursor:         pointer;
  transition:     border-color var(--transition-fast),
                  background   var(--transition-fast);
  min-height:     140px;
}
.photo-upload:hover {
  border-color: var(--c-primary);
  background:   var(--c-primary-subtle);
}
.photo-upload input[type="file"] {
  position: absolute;
  inset:    0;
  opacity:  0;
  cursor:   pointer;
}
.photo-upload-icon  { font-size: 32px; color: var(--c-text-muted); }
.photo-upload-text  { font-size: var(--text-sm); color: var(--c-text-secondary); }
.photo-upload-hint  { font-size: var(--text-xs); color: var(--c-text-muted); }

/* Vorschau nach Upload */
.photo-preview {
  position:      relative;
  border-radius: var(--radius-lg);
  overflow:      hidden;
}
.photo-preview img { width: 100%; object-fit: cover; }
.photo-preview-remove {
  position:      absolute;
  top:           var(--space-2);
  right:         var(--space-2);
  width:         32px;
  height:        32px;
  border-radius: var(--radius-full);
  background:    rgba(42, 31, 20, 0.6);
  color:         #fff;
  display:       flex;
  align-items:   center;
  justify-content: center;
  cursor:        pointer;
  font-size:     16px;
}

/* ------------------------------------------------------------
   12. TRENNLINIEN & ABSCHNITTE
   ------------------------------------------------------------ */
.divider {
  height:     1px;
  background: var(--c-border-light);
  margin:     var(--space-4) 0;
}

.section-title {
  font-size:     var(--text-xs);
  font-weight:   var(--weight-semibold);
  color:         var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding:       var(--space-4) var(--space-4) var(--space-2);
}

/* ------------------------------------------------------------
   13. FAB — Floating Action Button (der + Button)
   ------------------------------------------------------------ */
.fab {
  position:      fixed;
  z-index:       200;
  width:         56px;
  height:        56px;
  border-radius: var(--radius-full);
  background:    var(--c-primary);
  color:         #fff;
  box-shadow:    var(--shadow-lg);
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     28px;
  cursor:        pointer;
  transition:    transform var(--transition-fast),
                 box-shadow var(--transition-fast);
  -webkit-tap-highlight-color: transparent;

  /* Mobile: über der Bottom-Nav zentriert */
  bottom: calc(var(--nav-bottom-height) + var(--safe-bottom) + var(--space-4));
  left:   50%;
  transform: translateX(-50%);
}
.fab:hover {
  transform:  translateX(-50%) scale(1.05);
  box-shadow: var(--shadow-xl);
}
.fab:active {
  transform:  translateX(-50%) scale(0.95);
}

/* Desktop: FAB positioniert sich neu */
@media (min-width: 768px) {
  .fab {
    bottom:    var(--space-8);
    left:      auto;
    right:     var(--space-8);
    transform: none;
  }
  .fab:hover  { transform: scale(1.05); }
  .fab:active { transform: scale(0.95); }
}

/* ------------------------------------------------------------
   12. TAGEBUCH — Day One Style
   ------------------------------------------------------------ */

/* Stats-Leiste */
.diary-stats-bar {
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  gap:              0;
  padding:          8px 12px;
  border-bottom:    1px solid var(--c-divider, var(--c-border));
  background:       var(--c-surface);
  flex-shrink:      0;
}
.diary-stats-numbers {
  display:    flex;
  gap:        0;
  overflow-x: auto;
  scrollbar-width: none;
  flex:       1;
  min-width:  0;
}
.diary-stats-numbers::-webkit-scrollbar { display: none; }
.diary-stat {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  min-width:      0;
  padding:        0 8px;
  border-right:   1px solid var(--c-border);
}
.diary-stat:last-child { border-right: none; }
.diary-stat-num {
  font-size:   18px;
  font-weight: 700;
  color:       var(--c-text);
  line-height: 1.2;
  white-space: nowrap;
}
.diary-stat-label {
  font-size:   9px;
  color:       var(--c-text-muted);
  margin-top:  2px;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* View-Switcher */
.diary-view-switcher {
  display:     flex;
  gap:         0;
  flex-shrink: 0;
  margin-left: 8px;
}
.diary-view-btn {
  background: none;
  border:     none;
  cursor:     pointer;
  padding:    5px 6px;
  border-radius: 8px;
  color:      var(--c-text-secondary);
  display:    flex;
  align-items: center;
  transition: background .15s, color .15s;
}
.diary-view-btn:hover { background: var(--c-surface-2); color: var(--c-text); }
.diary-view-btn.active { color: var(--c-primary); background: var(--c-primary-subtle); }
.diary-view-btn .ph-icon { width: 18px; height: 18px; }
@media (min-width: 640px) {
  .diary-stat       { padding: 0 12px; }
  .diary-stat-num   { font-size: 20px; }
  .diary-view-btn   { padding: 6px 8px; }
  .diary-view-btn .ph-icon { width: 20px; height: 20px; }
}

/* Meta-Zeile in der Karte */
.diary-meta-loc {
  display:     inline-flex;
  align-items: center;
  gap:         2px;
  max-width:   140px;
  overflow:    hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diary-meta-dot { color: var(--c-text-muted); opacity: .5; }

/* Medien-Mosaic */
.diary-media-mosaic {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   2px;
  padding:               2px;
}
.diary-mosaic-item {
  aspect-ratio: 1;
  overflow:     hidden;
  cursor:       pointer;
  position:     relative;
}
.diary-mosaic-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display:    block;
  transition: opacity .2s;
}
.diary-mosaic-item:hover img { opacity: .85; }

/* Kalender-Ansicht */
.diary-calendar { padding: 0 0 80px; }
.diary-cal-nav {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         16px 16px 8px;
}
.diary-cal-nav button {
  background: none; border: none; cursor: pointer;
  padding: 6px; border-radius: 8px; color: var(--c-text-muted);
  display: flex; align-items: center;
}
.diary-cal-nav button:hover { background: var(--c-surface-2); }
.diary-cal-nav button .ph-icon { width: 20px; height: 20px; }
.diary-cal-month { font-size: 16px; font-weight: 600; color: var(--c-text); }
.diary-cal-weekdays {
  display:               grid;
  grid-template-columns: repeat(7, 1fr);
  padding:               0 8px 4px;
  text-align:            center;
  font-size:             11px;
  color:                 var(--c-text-muted);
  font-weight:           500;
}
.diary-cal-grid {
  display:               grid;
  grid-template-columns: repeat(7, 1fr);
  gap:                   3px;
  padding:               0 8px;
}
.diary-cal-cell {
  aspect-ratio:    1;
  border-radius:   8px;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             3px;
  position:        relative;
  overflow:        hidden;
  font-size:       13px;
  color:           var(--c-text-secondary);
}
.diary-cal-cell.has-entry {
  cursor:     pointer;
  color:      var(--c-text);
  font-weight: 600;
}
.diary-cal-cell.has-entry:active { opacity: .7; }
/* Oranger Punkt unter der Tageszahl — sichtbar auch ohne Foto */
.diary-cal-cell.has-entry::after {
  content:       '';
  display:       block;
  width:         5px;
  height:        5px;
  border-radius: 50%;
  background:    var(--c-primary);
  flex-shrink:   0;
}
/* Foto als Hintergrund */
.diary-cal-cell.has-entry img {
  position:   absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity:    .4;
  border-radius: 8px;
}
.diary-cal-cell.has-entry:hover img,
.diary-cal-cell.has-entry:active img { opacity: .6; }
/* Punkt ausblenden wenn Foto vorhanden (Foto reicht als Indikator) */
.diary-cal-cell.has-entry:has(img)::after { display: none; }
.diary-cal-cell.today .diary-cal-day {
  background:    var(--c-primary);
  color:         var(--c-text-inverse);
  border-radius: 50%;
  width:         26px; height: 26px;
  display:       flex; align-items: center; justify-content: center;
  font-weight:   700;
}
.diary-cal-day { position: relative; z-index: 1; font-size: 13px; }

/* Monats-Section */
.diary-month-header {
  font-size:      22px;
  font-weight:    700;
  color:          var(--c-text);
  padding:        12px 16px;
  background:     var(--c-surface-2, #f5f5f5);
  margin:         0;
  border-top:     1px solid var(--c-border);
  border-bottom:  none;
  letter-spacing: -0.01em;
}
.diary-month-header:first-child {
  border-top: none;
  margin-top: 0;
}
@media (prefers-color-scheme: dark) {
  .diary-month-header { background: var(--c-surface-2); }
}
[data-theme="dark"] .diary-month-header { background: var(--c-surface-2); }

/* Monats-Eintrags-Container (umschließt alle Karten einer Section) */
.diary-month-entries {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
}

/* Eintragskarte — Day One Row-Style */
.diary-card {
  display:        flex;
  align-items:    flex-start;
  gap:            12px;
  padding:        14px 16px;
  background:     transparent;
  border:         none;
  border-bottom:  1px solid var(--c-divider, var(--c-border));
  border-radius:  0;
  margin-bottom:  0;
  overflow:       visible;
  cursor:         pointer;
  transition:     background var(--transition-fast);
  box-shadow:     none;
  -webkit-tap-highlight-color: transparent;
}
.diary-card:last-child {
  border-bottom: none;
}
.diary-card:hover {
  background: rgba(0,0,0,0.025);
  box-shadow: none;
  transform:  none;
}
.diary-card:active {
  background: rgba(0,0,0,0.05);
  transform:  none;
}
[data-theme="dark"] .diary-card:hover  { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .diary-card:active { background: rgba(255,255,255,0.07); }

/* Datum-Spalte links */
.diary-card-date-col {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  width:          44px;
  flex-shrink:    0;
  padding-top:    1px;
}
.diary-card-weekday {
  font-size:      10px;
  font-weight:    600;
  color:          var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height:    1;
  margin-bottom:  2px;
}
.diary-card-daynum {
  font-size:      28px;
  font-weight:    700;
  color:          var(--c-text);
  line-height:    1;
}

/* Meilenstein-Icon auf der Datum-Spalte */
.diary-card-date-col .diary-milestone-icon {
  font-size:  14px;
  color:      #c4a000;
  margin-top: 4px;
}

/* Meilenstein-Hervorhebung */
.diary-card--milestone {
  background:  color-mix(in srgb, #d4a017 4%, transparent);
}
.diary-card--milestone .diary-card-daynum {
  color: #b8860b;
}

/* Meilenstein-Badge innerhalb der Karte */
.diary-card-milestone-badge {
  display:        inline-flex;
  align-items:    center;
  gap:            4px;
  background:     color-mix(in srgb, #d4a017 15%, transparent);
  color:          #8a6400;
  font-weight:    600;
  font-size:      var(--text-xs);
  padding:        2px var(--space-2);
  border-radius:  var(--radius-full);
  margin-bottom:  4px;
  letter-spacing: 0.03em;
}

/* Foto / Thumbnail rechts — 72×72px */
.diary-card-photo {
  width:         72px;
  height:        72px;
  flex-shrink:   0;
  border-radius: 8px;
  overflow:      hidden;
  position:      relative;
  margin-top:    2px;
}
.diary-card-photo img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}
.diary-media-picker {
  display:     flex;
  gap:         var(--space-2);
  margin-top:  var(--space-1);
}
.diary-media-pick-btn {
  flex:            1;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             var(--space-1);
  padding:         var(--space-3) var(--space-2);
  border:          1.5px solid var(--c-border);
  border-radius:   var(--radius-md);
  background:      var(--c-surface);
  color:           var(--c-text-secondary);
  font-size:       var(--text-sm);
  cursor:          pointer;
  transition:      border-color var(--transition-fast), color var(--transition-fast);
}
.diary-media-pick-btn:hover,
.diary-media-pick-btn:active {
  border-color: var(--c-primary);
  color:        var(--c-primary);
}
.diary-media-pick-btn .ph-icon { font-size: 1.5rem; }

/* Multi-Medien: Formular-Grid (Thumbnails beim Erstellen/Bearbeiten) */
.diary-media-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap:                   var(--space-2);
  margin-bottom:         var(--space-2);
}
.diary-media-thumb-wrap {
  position:      relative;
  aspect-ratio:  1;
  border-radius: var(--radius-md);
  overflow:      hidden;
  background:    var(--c-surface-2);
}
.diary-media-thumb {
  width:       100%;
  height:      100%;
  object-fit:  cover;
  display:     block;
}
.diary-media-thumb-del {
  position:         absolute;
  top:              var(--space-1);
  right:            var(--space-1);
  width:            24px;
  height:           24px;
  border-radius:    50%;
  border:           none;
  background:       rgba(0,0,0,.55);
  color:            #fff;
  cursor:           pointer;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  padding:          0;
  line-height:      1;
}
.diary-media-thumb-del .ph-icon { font-size: .9rem; }

/* Medien-Zähler-Badge auf der Karte */
.diary-card-photo { position: relative; }
.diary-card-media-count {
  position:      absolute;
  bottom:        var(--space-1);
  right:         var(--space-1);
  background:    rgba(0,0,0,.55);
  color:         #fff;
  font-size:     var(--text-xs);
  font-weight:   var(--weight-semibold);
  padding:       2px 6px;
  border-radius: 12px;
  pointer-events: none;
}

/* Detail-Ansicht: horizontale Scroll-Galerie */
.diary-gallery {
  display:          flex;
  gap:              var(--space-2);
  overflow-x:       auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  border-radius:    var(--radius-md);
}
.diary-gallery-item {
  flex:           0 0 auto;
  width:          min(80vw, 320px);
  max-height:     260px;
  object-fit:     cover;
  border-radius:  var(--radius-md);
  scroll-snap-align: start;
  display:        block;
}

.diary-card-video-thumb {
  width:            100%;
  height:           100%;
  background:       var(--c-surface-2);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  color:            var(--c-primary);
  font-size:        3rem;
}

/* Cover-Stern-Button auf Gallery- und Thumbnail-Items */
.diary-gallery-wrap {
  position: relative;
  display:  inline-block;
}
.diary-cover-btn {
  position:         absolute;
  bottom:           var(--space-1);
  left:             var(--space-1);
  width:            28px;
  height:           28px;
  border-radius:    50%;
  border:           none;
  background:       rgba(0,0,0,.50);
  color:            rgba(255,255,255,.55);
  font-size:        14px;
  cursor:           pointer;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  padding:          0;
  line-height:      1;
  z-index:          2;
  transition:       color .15s, background .15s;
}
.diary-cover-btn--active {
  color:      var(--c-amber);
  background: rgba(0,0,0,.65);
}
.diary-cover-btn--form {
  bottom: var(--space-1);
  left:   var(--space-1);
}

/* Card Body — mittlere Spalte */
.diary-card-body {
  flex:     1;
  min-width: 0;
  padding:  0;
}

/* Titel in Karte */
.diary-card-title {
  font-size:      15px;
  font-weight:    700;
  color:          var(--c-text);
  margin:         0 0 3px;
  line-height:    1.3;
  display:        -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:       hidden;
}

/* Meta-Zeile: nur noch für Compat — im neuen Design nicht als flex-row genutzt */
.diary-card-meta {
  display:  none;
}
.diary-card-type  { display: none; }
.diary-card-date  { display: none; }

/* Ort-Zeile in Karte */
.diary-card-location {
  display:     flex;
  align-items: center;
  gap:         4px;
  font-size:   12px;
  color:       var(--c-text-muted);
  margin:      0 0 2px;
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}
.diary-card-location .ph-icon { flex-shrink: 0; width: 12px; height: 12px; }

/* Ort in Detail-Ansicht */
.diary-detail-location {
  display:       flex;
  align-items:   center;
  gap:           var(--space-2);
  font-size:     var(--text-sm);
  color:         var(--c-primary);
  margin-bottom: var(--space-3);
}

/* Koordinaten-Zeile im Formular */
.diary-coords-row {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  padding:     var(--space-2) var(--space-3);
  background:  var(--c-surface-2);
  border-radius: var(--radius-md);
  font-size:   var(--text-sm);
  color:       var(--c-text-secondary);
  font-variant-numeric: tabular-nums;
}
.diary-coords-row .ph-icon { flex-shrink: 0; }

/* Location-Chip im Formular */
.diary-location-chip {
  display:       flex;
  align-items:   center;
  gap:           var(--space-2);
  padding:       var(--space-2) var(--space-3);
  background:    color-mix(in srgb, var(--c-primary) 10%, transparent);
  border:        1.5px solid var(--c-primary);
  border-radius: var(--radius-full);
  font-size:     var(--text-sm);
  color:         var(--c-primary-dark);
}
.diary-location-chip span { flex: 1; }
.diary-location-chip button {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--c-primary); display: flex;
}

/* Vorschlagsliste */
.diary-location-suggestion {
  display:       flex;
  align-items:   center;
  gap:           var(--space-2);
  width:         100%;
  padding:       var(--space-2) var(--space-3);
  background:    var(--c-surface);
  border:        1px solid var(--c-border-light);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-1);
  cursor:        pointer;
  text-align:    left;
  font-size:     var(--text-sm);
  color:         var(--c-text);
}
.diary-location-suggestion span { flex: 1; }
.diary-location-suggestion small { color: var(--c-text-muted); flex-shrink: 0; }
.diary-location-suggestion:hover { border-color: var(--c-primary); color: var(--c-primary); }

/* Text-Vorschau */
.diary-card-text {
  font-size:   13px;
  color:       var(--c-text-secondary);
  line-height: 1.45;
  margin:      0 0 4px;
  display:     -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:    hidden;
}

/* Tags */
.diary-card-tags {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--space-1);
  margin-top: var(--space-1);
}

/* Meta-Zeile unten in der Karte: Zeit · Ort · Wetter */
.diary-card-meta-row {
  font-size:   12px;
  color:       var(--c-text-muted);
  line-height: 1.4;
  margin-top:  4px;
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}

/* Wetter-Badge in Karten-Meta */
.diary-weather-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           2px;
  font-size:     var(--text-xs);
  color:         var(--c-text-secondary);
  white-space:   nowrap;
}

/* FAB — Floating Action Button */
.diary-fab {
  position:       fixed;
  bottom:         calc(var(--nav-bottom-height, 64px) + env(safe-area-inset-bottom, 0px) + 16px);
  right:          20px;
  width:          56px;
  height:         56px;
  border-radius:  50%;
  background:     var(--c-primary);
  color:          #fff;
  border:         none;
  cursor:         pointer;
  box-shadow:     0 4px 16px rgba(196,132,58,.4);
  display:        flex;
  align-items:    center;
  justify-content: center;
  z-index:        100;
  transition:     transform .15s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
}
.diary-fab:hover  { transform: scale(1.06); box-shadow: 0 6px 20px rgba(196,132,58,.5); }
.diary-fab:active { transform: scale(0.94); }

/* POI-Chips in Karte und Detail */
.diary-poi-chips,
.diary-detail-poi-chips {
  font-size:   var(--text-xs);
  color:       var(--c-text-muted);
  line-height: 1.5;
  margin:      var(--space-1) 0 var(--space-1);
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}

/* Detail-Ansicht */
.diary-detail-milestone-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           var(--space-1);
  background:    color-mix(in srgb, var(--c-primary) 12%, transparent);
  color:         var(--c-primary-dark);
  font-weight:   var(--weight-semibold);
  font-size:     var(--text-sm);
  padding:       var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-3);
}

/* Detail-View: Hero-Bild */
.diary-detail-hero {
  width:        100%;
  max-height:   80vh;
  background:   #000;
  flex-shrink:  0;
  position:     relative;
  display:      flex;
  align-items:  center;
  justify-content: center;
  overflow:     hidden;
}
@media (min-width: 768px) {
  .diary-detail-hero {
    max-width:     1100px;
    margin:        0 auto;
    border-radius: 0 0 12px 12px;
    max-height:    60vh;
  }
}
@media (min-width: 1200px) {
  .diary-detail-hero { max-width: 1300px; }
}
.diary-detail-hero img {
  width:        100%;
  height:       auto;
  max-height:   80vh;
  object-fit:   contain;
  display:      block;
  cursor:       zoom-in;
}
.diary-detail-hero video {
  width:        100%;
  height:       auto;
  max-height:   80vh;
  object-fit:   contain;
  display:      block;
  background:   #000;
}

/* Detail-View: inline im Content-Bereich (kein Overlay mehr) */
.diary-detail-view-inner {
  display:        flex;
  flex-direction: column;
  min-height:     calc(100vh - 120px);
  background:     var(--c-bg);
}

/* Detail-View: Header-Bar */
.diary-detail-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         12px 16px;
  background:      var(--c-surface);
  border-bottom:   1px solid var(--c-border);
  flex-shrink:     0;
  min-height:      48px;
}
.diary-detail-back {
  display:     flex;
  align-items: center;
  gap:         6px;
  background:  none;
  border:      none;
  color:       var(--c-primary);
  font-size:   16px;
  cursor:      pointer;
  padding:     4px 0;
  font-weight: 500;
}
.diary-detail-date-center {
  font-size:   14px;
  font-weight: 600;
  color:       var(--c-text);
  text-align:  center;
  flex:        1;
  padding:     0 8px;
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}
.diary-detail-edit {
  background: none;
  border:     none;
  color:      var(--c-primary);
  cursor:     pointer;
  padding:    4px 0;
  display:    flex;
  align-items: center;
  gap:         4px;
  font-size:  14px;
  font-weight: 500;
}

/* Detail-View: Body-Wrapper (text links, Karte rechts auf Desktop) */
.diary-detail-body-wrap {
  display:   flex;
  flex-direction: column;
  flex:      1;
  width:     100%;
}
@media (min-width: 768px) {
  .diary-detail-body-wrap {
    flex-direction: row;
    align-items:    flex-start;
    max-width:      1100px;
    margin:         0 auto;
    padding:        0 24px;
    box-sizing:     border-box;
  }
}
@media (min-width: 1200px) {
  .diary-detail-body-wrap { max-width: 1300px; }
}

/* Detail-View: Inhalt */
.diary-detail-content {
  padding:   24px 24px 60px;
  flex:      1;
  min-width: 0;
}
@media (max-width: 767px) {
  .diary-detail-content { padding: 20px 16px 40px; }
}

/* Detail-View: Karte + POI-Sektion */
.diary-detail-map-wrap {
  padding:    16px 16px 40px;
  flex-shrink: 0;
  width:      100%;
}
@media (min-width: 768px) {
  .diary-detail-map-wrap {
    width:      380px;
    min-width:  300px;
    max-width:  420px;
    flex-shrink: 0;
    padding:    24px 0 40px 32px;
    position:   sticky;
    top:        60px;
    align-self: flex-start;
  }
}
.diary-detail-map {
  width:         100%;
  height:        200px;
  border-radius: 12px;
  overflow:      hidden;
  border:        1px solid var(--c-border);
  margin-bottom: 12px;
}
@media (min-width: 768px) {
  .diary-detail-map { height: 280px; }
}

/* POI-Liste */
.diary-detail-poi-list {
  background:    var(--c-surface);
  border:        1px solid var(--c-border);
  border-radius: 12px;
  overflow:      hidden;
}
.diary-detail-poi-heading {
  display:     flex;
  align-items: center;
  gap:         6px;
  font-size:   11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color:       var(--c-text-muted);
  padding:     10px 14px 8px;
  border-bottom: 1px solid var(--c-border);
}
.diary-detail-poi-heading .ph-icon { width:14px;height:14px; }
.diary-detail-poi-row {
  display:     flex;
  align-items: center;
  gap:         10px;
  padding:     9px 14px;
  border-bottom: 1px solid var(--c-border);
  font-size:   13px;
}
.diary-detail-poi-row:last-child { border-bottom: none; }
.diary-detail-poi-icon { width:16px;height:16px;color:var(--c-primary);flex-shrink:0; }
.diary-detail-poi-name { flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--c-text); }
.diary-detail-poi-dist { font-size:12px;color:var(--c-text-muted);flex-shrink:0; }
.diary-detail-title {
  font-size:     22px;
  font-weight:   700;
  color:         var(--c-text);
  margin:        0 0 16px;
  line-height:   1.3;
}
.diary-detail-body {
  font-size:   16px;
  line-height: 1.7;
  color:       var(--c-text);
  white-space: pre-wrap;
  margin:      0 0 20px;
}
.diary-detail-divider {
  border:     none;
  border-top: 1px solid var(--c-border);
  margin:     20px 0;
}

/* Detail-View: Meta-Bar unten */
.diary-detail-meta-bar {
  display:   flex;
  flex-wrap: wrap;
  gap:       8px 16px;
  font-size: 13px;
  color:     var(--c-text-muted);
  margin-bottom: 16px;
  align-items: center;
}
.diary-detail-meta-bar .ph-icon {
  width:  14px;
  height: 14px;
  flex-shrink: 0;
}
.diary-detail-meta-item {
  display:     flex;
  align-items: center;
  gap:         5px;
}

/* Detail-View: Thumbnail-Strip */
.diary-detail-thumbs {
  display:          flex;
  gap:              4px;
  padding:          6px 16px;
  overflow-x:       auto;
  background:       rgba(0,0,0,.6);
  flex-shrink:      0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width:  none;
}
@media (min-width: 768px) {
  .diary-detail-thumbs {
    max-width:     1100px;
    margin:        0 auto;
    border-radius: 0 0 8px 8px;
    padding-left:  16px;
    padding-right: 16px;
    background:    rgba(0,0,0,.75);
    width:         100%;
    box-sizing:    border-box;
  }
}
@media (min-width: 1200px) {
  .diary-detail-thumbs { max-width: 1300px; }
}
.diary-detail-thumbs::-webkit-scrollbar { display: none; }
.diary-detail-thumb {
  flex-shrink:   0;
  width:         56px;
  height:        56px;
  border-radius: 6px;
  overflow:      hidden;
  cursor:        pointer;
  border:        2px solid transparent;
  box-sizing:    border-box;
  transition:    border-color .15s, opacity .15s;
  opacity:       .7;
}
.diary-detail-thumb:hover { opacity: 1; }
.diary-detail-thumb--active {
  border-color: var(--c-primary);
  opacity:      1;
}
@media (min-width: 768px) {
  .diary-detail-thumb { width: 72px; height: 72px; }
}

/* Detail-View: Foto-Galerie horizontal */
.diary-detail-gallery {
  display:           flex;
  gap:               8px;
  overflow-x:        auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type:  x mandatory;
  margin:            0 -20px 20px;
  padding:           0 20px;
  scrollbar-width:   none;
}
.diary-detail-gallery::-webkit-scrollbar { display: none; }
.diary-detail-gallery-item {
  flex:              0 0 auto;
  width:             min(75vw, 280px);
  height:            200px;
  border-radius:     var(--radius-md);
  overflow:          hidden;
  scroll-snap-align: start;
  cursor:            zoom-in;
}
.diary-detail-gallery-item img,
.diary-detail-gallery-item video {
  width:       100%;
  height:      100%;
  object-fit:  cover;
  display:     block;
}

/* Leaflet-Attribution ausblenden */
.leaflet-control-attribution { display: none !important; }

/* ============================================================
   GESUNDHEIT
   ============================================================ */

/* .health-header → by-toolbar with flex-end override */
.health-header { justify-content: flex-end; padding: var(--space-3) 0 var(--space-2); background: none; border-bottom: none; }

/* Tab-Leiste — Mobile: horizontal scrollbar, Desktop: umbrechen */
.health-tabs {
  display:        flex;
  flex-wrap:      wrap;
  gap:            var(--space-1) var(--space-1);
  padding-bottom: var(--space-2);
  margin-bottom:  var(--space-3);
}
/* .health-tabs / .health-tab → now use .by-tabs / .by-tab */

/* Karten-Liste */
.health-list {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
}

/* Einzelne Karte */
.health-card {
  background:    var(--c-surface);
  border:        1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding:       var(--space-4);
  cursor:        pointer;
  display:       flex;
  gap:           var(--space-3);
  align-items:   flex-start;
  transition:    box-shadow var(--transition-fast), transform var(--transition-fast);
}
.health-card:active { transform: scale(0.985); }
.health-card--inactive { opacity: 0.55; }

.health-card-body   { flex: 1; min-width: 0; }
.health-card-title  { font-weight: var(--weight-semibold); margin-bottom: var(--space-1); }
.health-card-meta   { font-size: var(--text-sm); color: var(--c-text-secondary); }
.health-card-next   { font-size: var(--text-sm); font-weight: var(--weight-medium); margin-top: var(--space-1); }
.health-card-note   { font-size: var(--text-sm); color: var(--c-text-secondary); margin-top: var(--space-1); }

/* Ampel-Punkt (links an der Karte) */
.health-card-ampel {
  width:         10px;
  height:        10px;
  border-radius: 50%;
  flex-shrink:   0;
  margin-top:    5px;
}
.ampel-green  { background: #22c55e; }
.ampel-yellow { background: #f59e0b; }
.ampel-red    { background: #ef4444; }
.ampel-grey   { background: var(--c-border); }

.ampel-text-green  { color: #16a34a; }
.ampel-text-yellow { color: #d97706; }
.ampel-text-red    { color: #dc2626; }

/* .health-group-label → now uses .by-section-label */

/* Gewicht-Diagramm-Wrapper */
.health-chart-wrap {
  background:    var(--c-surface);
  border:        1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding:       var(--space-4);
  margin-bottom: var(--space-4);
  overflow:      hidden;
}

/* Dokument-Thumbnail und Icon */
.health-doc-thumb {
  width:         56px;
  height:        56px;
  object-fit:    cover;
  border-radius: var(--radius-sm);
  flex-shrink:   0;
}
.health-doc-icon {
  width:         56px;
  height:        56px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     2rem;
  background:    var(--c-surface-2);
  border-radius: var(--radius-sm);
  flex-shrink:   0;
}

/* Health Multi-Media — Upload-Grid im Formular */
.health-media-grid {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--space-2);
  margin-bottom: var(--space-1);
}
.health-media-thumb {
  position:      relative;
  width:         72px;
  height:        72px;
  border-radius: var(--radius-md);
  overflow:      hidden;
  background:    var(--c-surface-2);
  flex-shrink:   0;
  border:        1px solid var(--c-border-light);
}
.health-media-thumb img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}
.health-media-thumb-pdf {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content: center;
  width:          100%;
  height:         100%;
  gap:            var(--space-1);
  font-size:      1.4rem;
  color:          var(--c-text-secondary);
}
.health-media-thumb-pdf span {
  font-size:   var(--text-xs);
  font-weight: var(--weight-semibold);
}
.health-media-remove {
  position:    absolute;
  top:         2px;
  right:       2px;
  width:       20px;
  height:      20px;
  border-radius: 50%;
  background:  rgba(0,0,0,0.55);
  color:       #fff;
  border:      none;
  font-size:   14px;
  line-height: 1;
  cursor:      pointer;
  display:     flex;
  align-items: center;
  justify-content: center;
  padding:     0;
}
.health-media-thumb--pending {
  opacity: 0.75;
  border-style: dashed;
}
.health-media-thumb--pending small {
  position:   absolute;
  bottom:     2px;
  left:       2px;
  right:      2px;
  font-size:  9px;
  text-align: center;
  color:      var(--c-text-muted);
  overflow:   hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Health Media-Galerie in Detail-Modal */
.health-media-gallery {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--space-2);
}
.health-media-gallery-img {
  display:       block;
  width:         calc(50% - var(--space-1));
  max-width:     160px;
  border-radius: var(--radius-md);
  overflow:      hidden;
  flex-shrink:   0;
}
.health-media-gallery-img img {
  width:      100%;
  height:     100px;
  object-fit: cover;
  display:    block;
  border-radius: var(--radius-md);
}
.health-media-gallery-pdf {
  align-self: flex-start;
}

/* Detail-Dialog DL */
.health-detail-dl {
  display:               grid;
  grid-template-columns: auto 1fr;
  gap:                   var(--space-1) var(--space-4);
  font-size:             var(--text-sm);
}
.health-detail-dl dt {
  color:       var(--c-text-secondary);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}
.health-detail-dl dd { margin: 0; }

/* ------------------------------------------------------------
   DOG SWITCHER
   Avatar-Leiste in Header (Mobile) + Sidebar-Logo (Desktop)
   ------------------------------------------------------------ */

/* Aktiver (linker) Hund — primärer Ring */
.dog-sw-active {
  width:         34px;
  height:        34px;
  border-radius: var(--radius-full);
  overflow:      hidden;
  background:    var(--c-surface-2);
  flex-shrink:   0;
  cursor:        pointer;
  border:        2.5px solid var(--c-primary);
  transition:    transform var(--transition-fast),
                 box-shadow var(--transition-fast);
}
.dog-sw-active:hover {
  transform:  scale(1.06);
  box-shadow: 0 0 0 3px var(--c-primary-subtle);
}
.dog-sw-active img  { width:100%; height:100%; object-fit:cover; display:block; }
.dog-sw-active span {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           100%;
  height:          100%;
  font-size:       17px;
}

/* "Ban Yaro" Label — füllt den Zwischenraum */
.dog-sw-title {
  flex:        1;
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}

/* Gruppe der inaktiven Hunde (rechts) */
.dog-sw-others {
  display:     flex;
  align-items: center;
  position:    relative; /* Anker für Quickpicker-Dropdown */
  flex-shrink: 0;
}

/* Inaktiver Hund-Avatar */
.dog-sw-other {
  width:         28px;
  height:        28px;
  border-radius: var(--radius-full);
  overflow:      hidden;
  background:    var(--c-surface-2);
  border:        2px solid var(--c-surface);
  cursor:        pointer;
  flex-shrink:   0;
  transition:    transform var(--transition-fast);
  position:      relative;
}
.dog-sw-other:hover { transform: scale(1.12); }
.dog-sw-other img  { width:100%; height:100%; object-fit:cover; display:block; }
.dog-sw-other span {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           100%;
  height:          100%;
  font-size:       14px;
}

/* Gestapelter Avatar-Stack (3+ Hunde) */
.dog-sw-stack {
  display:     flex;
  align-items: center;
  cursor:      pointer;
}
.dog-sw-stack .dog-sw-other           { margin-left: -9px; }
.dog-sw-stack .dog-sw-other:first-child { margin-left: 0; }
.dog-sw-stack .dog-sw-other--0 { z-index: 3; }
.dog-sw-stack .dog-sw-other--1 { z-index: 2; }
.dog-sw-stack .dog-sw-other--2 { z-index: 1; }
.dog-sw-stack:hover .dog-sw-other { filter: brightness(1.05); }

/* +N Überlauf-Badge */
.dog-sw-more {
  width:         28px;
  height:        28px;
  border-radius: var(--radius-full);
  background:    var(--c-surface-2);
  border:        2px solid var(--c-surface);
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     9px;
  font-weight:   var(--weight-bold);
  color:         var(--c-text-secondary);
  margin-left:   -9px;
  position:      relative;
  z-index:       0;
}

/* Quickpicker-Dropdown */
.dog-quickpick {
  position:      absolute;
  top:           calc(100% + 10px);
  right:         0;
  background:    var(--c-surface);
  border:        1px solid var(--c-border-light);
  border-radius: var(--radius-lg);
  box-shadow:    var(--shadow-lg);
  padding:       var(--space-2);
  min-width:     170px;
  z-index:       600;
}
.dog-quickpick.hidden { display: none; }

.dog-qp-item {
  display:       flex;
  align-items:   center;
  gap:           var(--space-3);
  padding:       var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  cursor:        pointer;
  font-size:     var(--text-sm);
  font-weight:   var(--weight-medium);
  color:         var(--c-text);
  transition:    background var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}
.dog-qp-item:hover { background: var(--c-bg); }

.dog-qp-av {
  width:         32px;
  height:        32px;
  border-radius: var(--radius-full);
  overflow:      hidden;
  background:    var(--c-surface-2);
  flex-shrink:   0;
}
.dog-qp-av img  { width:100%; height:100%; object-fit:cover; display:block; }
.dog-qp-av span {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           100%;
  height:          100%;
  font-size:       16px;
}

/* Sidebar: größerer aktiver Avatar */
#sidebar-dog-switcher .dog-sw-active {
  width:  36px;
  height: 36px;
}

/* ------------------------------------------------------------
   DIARY — Multi-Dog (Hunde-Auswahl im Formular + Karten-Anzeige)
   ------------------------------------------------------------ */

/* Avatar-Reihe in der Tagebuch-Karte */
.diary-dog-row {
  display:    flex;
  align-items: center;
  gap:        -4px; /* überlappend via margin */
  margin-top: var(--space-2);
  flex-wrap:  wrap;
  gap:        var(--space-1);
}

.diary-dog-av {
  width:         22px;
  height:        22px;
  border-radius: var(--radius-full);
  overflow:      hidden;
  background:    var(--c-surface-2);
  border:        1.5px solid var(--c-surface);
  flex-shrink:   0;
}
.diary-dog-av img  { width:100%; height:100%; object-fit:cover; display:block; }
.diary-dog-av span {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           100%;
  height:          100%;
  font-size:       12px;
}

/* Hunde-Chip in der Detail-Ansicht */
.diary-detail-dogs {
  display:    flex;
  flex-wrap:  wrap;
  gap:        var(--space-2);
  margin-bottom: var(--space-3);
}

.diary-dog-chip {
  display:       flex;
  align-items:   center;
  gap:           var(--space-1);
  padding:       3px 8px 3px 4px;
  background:    var(--c-surface-2);
  border-radius: var(--radius-full);
  font-size:     var(--text-xs);
  font-weight:   var(--weight-medium);
  color:         var(--c-text-secondary);
}
.diary-dog-chip .diary-dog-av {
  width:  20px;
  height: 20px;
}

/* Hunde-Picker im Formular */
.diary-dog-picker {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--space-2);
}

.diary-dog-pick-item {
  display:       flex;
  align-items:   center;
  gap:           var(--space-2);
  padding:       var(--space-2) var(--space-3);
  border:        1.5px solid var(--c-border-light);
  border-radius: var(--radius-full);
  cursor:        pointer;
  font-size:     var(--text-sm);
  font-weight:   var(--weight-medium);
  color:         var(--c-text-secondary);
  transition:    border-color var(--transition-fast),
                 background   var(--transition-fast),
                 color        var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
  user-select:   none;
}
.diary-dog-pick-item input { display: none; }

.diary-dog-pick-item .diary-dog-av {
  width:  26px;
  height: 26px;
}

.diary-dog-pick-item:hover {
  border-color: var(--c-primary);
  color:        var(--c-text);
}

.diary-dog-pick-item.checked {
  border-color: var(--c-primary);
  background:   var(--c-primary-subtle);
  color:        var(--c-primary-dark);
  font-weight:  var(--weight-semibold);
}

/* ============================================================
   TAGEBUCH — HUNDE-PICKER (Einstiegsseite bei mehreren Hunden)
   ============================================================ */

.diary-picker-wrap {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  padding:         var(--space-8) var(--space-4) var(--space-4);
  gap:             var(--space-5);
}

.diary-picker-hint {
  font-size:   var(--text-lg);
  font-weight: var(--weight-semibold);
  color:       var(--c-text-secondary);
  margin:      0;
}

.diary-picker-grid {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--space-4);
  justify-content: center;
}

.diary-picker-card {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--space-2);
  padding:        var(--space-4);
  width:          140px;
  background:     var(--c-surface);
  border:         2px solid var(--c-border);
  border-radius:  var(--radius-lg);
  cursor:         pointer;
  transition:     transform var(--transition-fast), box-shadow var(--transition-fast),
                  border-color var(--transition-fast);
  touch-action:   manipulation;
}
.diary-picker-card:active {
  transform: scale(0.96);
}
.diary-picker-card--active {
  border-color: var(--c-primary);
  box-shadow:   0 0 0 3px var(--c-primary-subtle);
}

.diary-picker-av {
  width:         88px;
  height:        88px;
  border-radius: 50%;
  overflow:      hidden;
  background:    var(--c-surface-2);
  display:       flex;
  align-items:   center;
  justify-content: center;
  border:        3px solid var(--c-border);
}
.diary-picker-card--active .diary-picker-av {
  border-color: var(--c-primary);
}
.diary-picker-av img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

.diary-picker-name {
  font-weight: var(--weight-semibold);
  font-size:   var(--text-base);
  color:       var(--c-text);
  text-align:  center;
}
.diary-picker-rasse {
  font-size:  var(--text-xs);
  color:      var(--c-text-secondary);
  text-align: center;
}

/* ============================================================
   ORTE (places.js)
   ============================================================ */
.places-layout {
  display:        flex;
  flex-direction: column;
  height:         100%;
  overflow:       hidden;
}
.places-toolbar {
  display:        flex;
  align-items:    center;
  gap:            var(--space-3);
  padding:        var(--space-3) var(--space-4);
  background:     var(--c-surface);
  border-bottom:  1px solid var(--c-border-light);
  flex-shrink:    0;
  overflow-x:     auto;
  scrollbar-width: none;
}
.places-toolbar::-webkit-scrollbar { display: none; }
.places-filter {
  display:  flex;
  gap:      var(--space-2);
  flex:     1;
  overflow-x: auto;
  scrollbar-width: none;
}
.places-filter::-webkit-scrollbar { display: none; }
.places-filter-btn {
  padding:       var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  border:        1.5px solid var(--c-border);
  background:    var(--c-surface);
  color:         var(--c-text-secondary);
  font-size:     var(--text-sm);
  cursor:        pointer;
  white-space:   nowrap;
  transition:    all 0.15s;
  flex-shrink:   0;
}
.places-filter-btn.active {
  background:  var(--c-primary);
  border-color: var(--c-primary);
  color:       #fff;
}
.places-map {
  height:     42%;
  flex-shrink: 0;
  min-height:  180px;
}
.places-list {
  flex:       1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--c-primary) var(--c-surface);
}
.places-list-inner {
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap:     var(--space-2);
}
.places-card {
  display:       flex;
  align-items:   center;
  gap:           var(--space-3);
  padding:       var(--space-3);
  background:    var(--c-surface);
  border:        1.5px solid var(--c-border-light);
  border-left:   4px solid var(--typ-color, var(--c-primary));
  border-radius: var(--radius-lg);
  cursor:        pointer;
  transition:    box-shadow 0.15s;
}
.places-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.places-card-icon  { font-size: 1.6rem; flex-shrink: 0; }
.places-card-body  { flex: 1; min-width: 0; }
.places-card-name  { font-weight: var(--weight-semibold); color: var(--c-text); }
.places-card-meta  { font-size: var(--text-sm); color: var(--c-text-secondary); margin-top: 2px; }
.places-card-flags { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-1); }
.places-card-arrow { color: var(--c-text-muted); font-size: 1.2rem; }
.places-flag {
  font-size:     var(--text-xs);
  padding:       2px 7px;
  border-radius: var(--radius-full);
  background:    var(--c-surface-2);
  color:         var(--c-text-secondary);
}
.places-flag--detail {
  font-size: var(--text-sm);
  padding:   var(--space-1) var(--space-3);
}
.places-locate-btn {
  width:            40px;
  height:           40px;
  border-radius:    50%;
  background:       #C4843A;
  color:            #fff;
  border:           none;
  box-shadow:       0 2px 8px rgba(0,0,0,0.3);
  cursor:           pointer;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  margin:           10px;
}
.places-locate-btn:hover { background: #9E6520; }

/* ============================================================
   ROUTEN — Komoot-Stil (routes.js)
   ============================================================ */
.rk-layout {
  display:        flex;
  flex-direction: column;
  height:         100%;
  overflow:       hidden;
  background:     var(--c-bg);
}
.rk-header {
  background:    var(--c-surface);
  border-bottom: 1px solid var(--c-border-light);
  padding:       var(--space-3) var(--space-4);
  flex-shrink:   0;
  position:      relative;
  z-index:       10;
}
.rk-search-row {
  display:     flex;
  flex-wrap:   wrap;
  gap:         var(--space-2);
  margin-bottom: var(--space-3);
  align-items: center;
}
.rk-search-row .rk-search {
  min-width: 0;
  flex-basis: 160px;
}
.rk-search-row .rk-view-toggle {
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .rk-search-row .rk-search { flex: 1 1 100%; order: -1; }
  .rk-search-row .rk-view-toggle { margin-left: auto; }
}
/* Import-Label als Button */
.rk-imp-btn {
  cursor:      pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
/* Import Modal */
.rk-import-preview {
  height:        160px;
  border-radius: var(--radius-lg);
  overflow:      hidden;
  background:    var(--c-surface-2);
  margin-bottom: var(--space-3);
}
.rk-import-stats {
  display:       flex;
  gap:           var(--space-3);
  flex-wrap:     wrap;
  align-items:   center;
  font-size:     var(--text-sm);
  color:         var(--c-text-secondary);
  margin-bottom: var(--space-2);
}
.rk-search {
  flex:          1;
  padding:       var(--space-2) var(--space-3);
  border:        1.5px solid var(--c-border);
  border-radius: var(--radius-full);
  font-size:     var(--text-sm);
  background:    var(--c-bg);
  color:         var(--c-text);
  outline:       none;
}
.rk-search:focus { border-color: var(--c-primary); }
.rk-rec-btn--active {
  animation: rec-pulse 1.2s ease-in-out infinite;
}

/* Einheitliche Aktions-Buttons (Filter / Import / Aufzeichnen) */
.rk-action-btn {
  flex:            1;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-2);
  padding:         var(--space-2) var(--space-3);
  min-height:      40px;
  font-size:       var(--text-sm);
  font-weight:     var(--weight-semibold);
  border:          1.5px solid var(--c-border);
  border-radius:   var(--radius-md);
  background:      var(--c-surface);
  color:           var(--c-text);
  cursor:          pointer;
  white-space:     nowrap;
  transition:      background var(--transition-fast), border-color var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}
.rk-action-btn:hover  { background: var(--c-surface-2); }
.rk-action-btn:active { background: var(--c-border); }
.rk-action-btn--primary {
  background:   var(--c-primary);
  border-color: var(--c-primary);
  color:        #fff;
}
.rk-action-btn--primary:hover  { background: var(--c-primary-dark); }
.rk-action-btn--danger {
  background:   var(--c-danger);
  border-color: var(--c-danger);
  color:        #fff;
}

/* Filter-Panel (aufklappbar) */
.rk-filter-toggle-btn.active {
  background:   var(--c-primary-subtle);
  border-color: var(--c-primary);
  color:        var(--c-primary);
}
.rk-filter-badge {
  position:     absolute;
  top:          2px;
  right:        2px;
  width:        8px;
  height:       8px;
  border-radius: 50%;
  background:   var(--c-danger, #EF4444);
  border:       1.5px solid var(--c-surface);
  pointer-events: none;
}
.rk-filter-panel {
  border-top: 1px solid var(--c-border-light);
  padding:    var(--space-3) var(--space-3) var(--space-2);
  background: var(--c-surface);
}
.rk-filters {
  display:    flex;
  flex-direction: column;
  gap:        var(--space-2);
}
.rk-filter-group {
  display:    flex;
  flex-direction: column;
  gap:        var(--space-1);
}
.rk-filter-label {
  font-size:   var(--text-xs);
  font-weight: 600;
  color:       var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-left: 2px;
}
.rk-chips-row {
  display:    flex;
  gap:        var(--space-1);
  overflow-x: auto;
  scrollbar-width: none;
  flex-wrap:  nowrap;
}
.rk-chips-row::-webkit-scrollbar { display: none; }
.rk-chip {
  padding:       4px 10px;
  border-radius: var(--radius-full);
  border:        1.5px solid var(--c-border);
  background:    var(--c-bg);
  color:         var(--c-text-secondary);
  font-size:     var(--text-xs);
  white-space:   nowrap;
  cursor:        pointer;
  transition:    all 0.15s;
}
.rk-chip.active {
  background:   var(--c-primary);
  border-color: var(--c-primary);
  color:        #fff;
}
.rk-grid {
  flex:       1;
  overflow-y: auto;
  padding:    var(--space-3) var(--space-4);
  display:    flex;
  flex-direction: column;
  gap:        var(--space-3);
  scrollbar-width: thin;
}
.rk-loading, .rk-empty {
  text-align:  center;
  padding:     var(--space-10) var(--space-4);
  color:       var(--c-text-secondary);
}
.rk-empty-icon { font-size: 3rem; margin-bottom: var(--space-3); }
.rk-empty--onboarding { padding: var(--space-6) var(--space-4); }
.rk-empty-title { font-size: var(--text-xl); font-weight: 700; color: var(--c-text-primary); margin: 0 0 var(--space-2); }
.rk-empty-text  { color: var(--c-text-secondary); margin-bottom: var(--space-5); max-width: 320px; margin-left: auto; margin-right: auto; }
.rk-empty-features {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-4);
  max-width: 320px; margin: 0 auto var(--space-6); text-align: left;
}
.rk-empty-feature { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--c-text-secondary); }
.rk-empty-feature span:first-child { font-size: 1.1rem; flex-shrink: 0; }
.rk-card {
  display:       flex;
  flex-direction: column;
  background:    var(--c-surface);
  border:        1.5px solid var(--c-border-light);
  border-radius: var(--radius-xl);
  overflow:      hidden;
  cursor:        pointer;
  transition:    box-shadow 0.15s, transform 0.15s;
}
.rk-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  transform:  translateY(-1px);
}
.rk-card-preview {
  height:      140px;
  overflow:    hidden;
  background:  #e8f0e8;
  flex-shrink: 0;
}
.rk-preview-empty {
  display:         flex;
  align-items:     center;
  justify-content: center;
  height:          100%;
  font-size:       2.5rem;
  color:           var(--c-text-muted);
  opacity:         0.4;
}
.rk-card-body {
  padding: var(--space-3) var(--space-4) var(--space-4);
}
.rk-card-name {
  font-weight:   var(--weight-semibold);
  font-size:     var(--text-base);
  margin-bottom: var(--space-1);
}
.rk-card-stats {
  display:     flex;
  gap:         var(--space-3);
  font-size:   var(--text-sm);
  color:       var(--c-text-secondary);
  margin-bottom: var(--space-2);
}
.rk-card-tags {
  display:     flex;
  flex-wrap:   wrap;
  gap:         var(--space-1);
  margin-bottom: var(--space-3);
}
.rk-badge {
  font-size:     var(--text-xs);
  padding:       2px 8px;
  border-radius: var(--radius-full);
  background:    var(--c-surface-2);
  color:         var(--c-text-secondary);
}

/* Text-only Pills für Route-Detail */
.rk-pill {
  display:       inline-flex;
  align-items:   center;
  font-size:     10px;
  font-weight:   var(--weight-semibold);
  padding:       2px 8px;
  border-radius: var(--radius-full);
  white-space:   nowrap;
  border:        1px solid transparent;
  line-height:   1.4;
}
.rk-pill--neutral { background: var(--c-surface-2);  color: var(--c-text-secondary); border-color: var(--c-border); }
.rk-pill--dog     { background: #fef3c7;              color: #92400e;  border-color: #fde68a; }
.rk-pill--private { background: #dbeafe;              color: #1d4ed8;  border-color: #bfdbfe; }
.rk-pill--public  { background: #dcfce7;              color: #15803d;  border-color: #bbf7d0; }
.rk-badge--leicht       { background: #dcfce7; color: #15803d; }
.rk-badge--mittel       { background: #fef9c3; color: #a16207; }
.rk-badge--anspruchsvoll{ background: #fee2e2; color: #b91c1c; }
.rk-badge--info         { background: var(--c-primary-subtle); color: var(--c-primary-dark); }
.rk-card-footer {
  display:     flex;
  align-items: center;
  justify-content: space-between;
  gap:         var(--space-2);
}
.rk-stars {
  display:     flex;
  align-items: center;
  gap:         2px;
}
.rk-star {
  font-size:  1.1rem;
  cursor:     pointer;
  color:      var(--c-border);
  transition: color 0.1s, transform 0.1s;
  line-height: 1;
}
.rk-star.filled { color: #F59E0B; }
.rk-star:hover  { color: #F59E0B; transform: scale(1.2); }
.rk-star-count  { font-size: var(--text-xs); color: var(--c-text-muted); margin-left: 4px; }
.rk-card-actions {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
}
.rk-card-author { font-size: var(--text-xs); color: var(--c-text-muted); }
.rk-card-creator {
  display:       flex;
  align-items:   center;
  gap:           4px;
  font-size:     var(--text-xs);
  font-weight:   600;
  color:         var(--c-primary);
  margin-bottom: 2px;
}
/* Mode-Toggle: Meine Routen / Entdecken */
.rk-mode-toggle {
  display:       flex;
  gap:           0;
  margin-bottom: var(--space-3);
  border:        1px solid var(--c-border);
  border-radius: var(--radius-lg);
  overflow:      hidden;
  align-self:    flex-start;
}
.rk-mode-btn {
  flex:          1;
  padding:       6px 16px;
  font-size:     var(--text-sm);
  font-weight:   500;
  background:    var(--c-bg);
  color:         var(--c-text-secondary);
  border:        none;
  cursor:        pointer;
  transition:    background 0.15s, color 0.15s;
  white-space:   nowrap;
}
.rk-mode-btn.active {
  background: var(--c-primary);
  color:      #fff;
}
.rk-mode-btn:first-child { border-right: 1px solid var(--c-border); }
.rk-dl-btn {
  font-size:     var(--text-xs);
  padding:       4px 8px;
  border-radius: var(--radius-md);
  border:        1px solid var(--c-border);
  background:    var(--c-bg);
  color:         var(--c-text-secondary);
  cursor:        pointer;
  white-space:   nowrap;
}
.rk-dl-btn:hover { background: var(--c-surface-2); }

/* Hundetauglichkeit-Badge */
.rk-badge--dog    { background: #fef3c7; color: #92400e; font-size: 1rem; }
.rk-badge--private { background: #dbeafe; color: #1d4ed8; }  /* blau = privat */
.rk-badge--public  { background: #dcfce7; color: #15803d; }  /* grün = öffentlich */

/* Foto-Galerie in Route-Detail */
.rk-photo-gallery {
  display:    flex;
  gap:        var(--space-2);
  overflow-x: auto;
  margin:     var(--space-2) 0;
  scrollbar-width: thin;
}
.rk-photo-thumb {
  width:         80px;
  height:        80px;
  object-fit:    cover;
  border-radius: var(--radius-md);
  cursor:        pointer;
  flex-shrink:   0;
  border:        2px solid var(--c-border-light);
}
.rk-photo-add {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           80px;
  height:          80px;
  border:          2px dashed var(--c-border);
  border-radius:   var(--radius-md);
  cursor:          pointer;
  flex-shrink:     0;
  font-size:       1.5rem;
  color:           var(--c-text-muted);
}
.rk-photo-add-empty {
  display:         flex;
  align-items:     center;
  gap:             var(--space-2);
  padding:         var(--space-3);
  border:          2px dashed var(--c-border);
  border-radius:   var(--radius-md);
  cursor:          pointer;
  color:           var(--c-text-secondary);
  font-size:       var(--text-sm);
  margin:          var(--space-2) 0;
}

/* Nearby POIs */
.rk-nearby-section { margin-top: var(--space-3); }
.rk-nearby-title {
  font-weight:   var(--weight-semibold);
  margin-bottom: var(--space-2);
  color:         var(--c-text);
}
.rk-nearby-group {
  margin-bottom: var(--space-3);
  border:        1px solid var(--c-border-light);
  border-radius: var(--radius-md);
  overflow:      hidden;
}
.rk-nearby-group-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  width:           100%;
  padding:         var(--space-2) var(--space-3);
  background:      var(--c-surface-2);
  border:          none;
  cursor:          pointer;
  font-size:       var(--text-sm);
  font-weight:     var(--weight-semibold);
  color:           var(--c-text);
  text-align:      left;
  -webkit-tap-highlight-color: transparent;
}
.rk-nearby-group-header:hover { background: var(--c-border-light); }
.rk-nearby-items { padding: var(--space-1) 0; }
.rk-nearby-item {
  display:     flex;
  align-items: center;
  justify-content: space-between;
  gap:         var(--space-2);
  padding:     var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--c-border-light);
  width:       100%;
  background:  none;
  border-left: none;
  border-right: none;
  border-top:  none;
  text-align:  left;
  font:        inherit;
}
.rk-nearby-item:last-child { border-bottom: none; }
.rk-nearby-item--link {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rk-nearby-item--link:hover { background: var(--c-surface-2); }
.rk-nearby-name   { font-size: var(--text-sm); color: var(--c-text); display: block; }
.rk-nearby-detail { font-size: var(--text-xs); color: var(--c-text-muted); display: block; margin-top: 1px; }
.rk-nearby-phone  { color: var(--c-primary); text-decoration: none; }

/* Hundetauglichkeit-Auswahl im Formular */
.rk-paw-select {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--space-2);
  margin-top: var(--space-1);
}
.rk-paw-btn {
  padding:       var(--space-2) var(--space-3);
  border:        1.5px solid var(--c-border);
  border-radius: var(--radius-full);
  background:    var(--c-bg);
  color:         var(--c-text-secondary);
  font-size:     var(--text-sm);
  cursor:        pointer;
  transition:    all 0.15s;
  white-space:   nowrap;
}
.rk-paw-btn.selected {
  border-color: var(--c-primary);
  background:   var(--c-primary-subtle);
  color:        var(--c-primary-dark);
  font-weight:  var(--weight-medium);
}

/* Aufzeichnungs-FAB Zustand */
.map-fab--rec.recording {
  background:   #EF4444;
  border-color: #EF4444;
  color:        #fff;
  animation:    rec-pulse 1.2s ease-in-out infinite;
}
@keyframes rec-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.5); }
  50%       { box-shadow: 0 0 0 8px rgba(239,68,68,0); }
}

/* ============================================================
   ZENTRALE KARTE (map.js)
   ============================================================ */
.map-full-layout {
  position: fixed;
  top:      calc(var(--header-height) + var(--safe-top));
  left:     0;
  right:    0;
  bottom:   calc(var(--nav-bottom-height) + var(--safe-bottom));
  overflow: hidden;
  z-index:  1;
}
@media (min-width: 768px) {
  .map-full-layout { top: 0; left: var(--nav-sidebar-width); bottom: 0; }
}
.map-full { width: 100%; height: 100%; }

/* Legende: horizontaler Scroll-Strip oben */
.map-legend {
  position:   absolute;
  top:        var(--space-2);
  left:       42px;   /* Zoom-Control (+/-) freilassen */
  right:      0;
  z-index:    1000;
  display:    flex;
  flex-wrap:  nowrap;
  gap:        var(--space-1);
  padding:    0 var(--space-3) 0 var(--space-1);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  pointer-events: auto;
}
.map-legend::-webkit-scrollbar { display: none; }

.map-legend-btn {
  flex-shrink:   0;
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  padding:       5px 10px;
  border-radius: var(--radius-full);
  background:    rgba(255,255,255,0.93);
  border:        1.5px solid var(--layer-color, var(--c-border));
  color:         var(--c-text-secondary);
  font-size:     11px;
  font-weight:   var(--weight-semibold);
  cursor:        pointer;
  backdrop-filter: blur(6px);
  transition:    all 0.15s;
  box-shadow:    0 1px 4px rgba(0,0,0,0.15);
  white-space:   nowrap;
}
.map-legend-btn.active {
  background:   var(--layer-color, var(--c-primary));
  color:        #fff;
  border-color: var(--layer-color, var(--c-primary));
}
.map-legend-label { font-size: 10px; }
.map-legend-all {
  font-size:   1rem;
  min-width:   32px;
  padding:     0 var(--space-2);
  background:  var(--c-surface-2);
  border-color: var(--c-border);
  color:        var(--c-text-secondary);
  font-weight: var(--weight-bold);
}
.map-legend-all.all-off {
  background:  #1e293b;
  border-color: #1e293b;
  color:        #fff;
}

/* FAB-Gruppe rechts unten */
.map-fabs {
  position:        absolute;
  bottom:          var(--space-4);
  right:           var(--space-3);
  z-index:         1000;
  display:         flex;
  flex-direction:  column;
  gap:             var(--space-2);
  align-items:     center;
}
.map-fab {
  width:         44px;
  height:        44px;
  border-radius: 50%;
  background:    #C4843A;
  color:         #fff;
  border:        none;
  box-shadow:    0 2px 8px rgba(0,0,0,0.3);
  cursor:        pointer;
  font-size:     1.25rem;
  display:       flex;
  align-items:   center;
  justify-content: center;
  transition:    background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.map-fab:hover { background: #9E6520; }
.map-fab--pin.active {
  background:   var(--c-danger);
  border-color: var(--c-danger);
  color:        #fff;
  font-size:    1rem;
}
.map-fab:disabled { opacity: 0.5; cursor: default; }
.map-fab--offline.loading { animation: fab-spin 1.2s linear infinite; pointer-events: none; }
@keyframes fab-spin { to { transform: rotate(360deg); } }

/* Aufzeichnungs-Panel — schiebt sich von unten rein */
.map-rec-panel {
  position:       absolute;
  bottom:         0;
  left:           0;
  right:          0;
  background:     rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(8px);
  color:          #fff;
  padding:        var(--space-4) var(--space-5) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  border-radius:  var(--radius-xl) var(--radius-xl) 0 0;
  transform:      translateY(100%);
  transition:     transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index:        420;
  pointer-events: none;
}
.map-rec-panel.active {
  transform:    translateY(0);
  pointer-events: all;
}
.map-rec-stats {
  display:         flex;
  justify-content: space-around;
  margin-bottom:   var(--space-4);
}
.map-rec-stat {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            2px;
}
.map-rec-stat--main .map-rec-val { font-size: 2.4rem; }
.map-rec-val {
  font-size:   1.8rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.map-rec-lbl {
  font-size:   0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:       rgba(255,255,255,0.55);
}
.map-rec-actions {
  display:    flex;
  gap:        var(--space-3);
  margin-bottom: var(--space-3);
}
.map-rec-action-btn { flex: 1; }
.map-rec-hint {
  text-align:  center;
  font-size:   var(--text-xs);
  color:       rgba(255,255,255,0.45);
}
.map-rec-panel.paused .map-rec-val { color: #F59E0B; }
.map-rec-panel.paused .map-rec-hint::before { content: '⏸ Pausiert — '; }

/* Fadenkreuz-Overlay */
.map-crosshair {
  position:        absolute;
  top:             50%;
  left:            50%;
  transform:       translate(-50%, -100%);
  z-index:         410;
  pointer-events:  none;
  display:         none;
  flex-direction:  column;
  align-items:     center;
}
.map-crosshair.active { display: flex; }
.map-crosshair-pin {
  font-size:   2.4rem;
  line-height: 1;
  filter:      drop-shadow(0 3px 6px rgba(0,0,0,0.45));
  transition:  transform 0.15s cubic-bezier(0.34,1.56,0.64,1);
}
.map-crosshair.dragging .map-crosshair-pin {
  transform: translateY(-10px) scale(1.15);
}
.map-crosshair-shadow {
  width:         10px;
  height:        4px;
  background:    rgba(0,0,0,0.25);
  border-radius: 50%;
  margin-top:    1px;
  transition:    all 0.15s;
}
.map-crosshair.dragging .map-crosshair-shadow {
  width: 6px; opacity: 0.4;
}

/* Bestätigen-Leiste unten */
.map-place-bar {
  position:       absolute;
  bottom:         0;
  left:           0;
  right:          0;
  background:     var(--c-surface);
  border-top:     1px solid var(--c-border-light);
  padding:        var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  display:        none;
  flex-direction: column;
  gap:            var(--space-2);
  z-index:        410;
  box-shadow:     0 -4px 20px rgba(0,0,0,0.08);
}
.map-place-bar.active { display: flex; }
.map-place-hint {
  text-align:  center;
  font-size:   var(--text-sm);
  color:       var(--c-text-secondary);
}
.map-place-btns {
  display: flex;
  gap:     var(--space-3);
}
.map-place-btns .btn { flex: 1; }

/* Statusleiste: nur Info, unten links */
.map-statusbar {
  position:      absolute;
  bottom:        var(--space-3);
  left:          var(--space-3);
  z-index:       1000;
  display:       flex;
  align-items:   center;
  gap:           var(--space-2);
  background:    rgba(255,255,255,0.88);
  backdrop-filter: blur(4px);
  border:        1px solid var(--c-border-light);
  border-radius: var(--radius-full);
  padding:       4px 12px;
  font-size:     11px;
  color:         var(--c-text-secondary);
  box-shadow:    0 1px 4px rgba(0,0,0,0.1);
  max-width:      calc(100% - 80px); /* Platz für FABs */
  flex-wrap:      nowrap;
  white-space:    nowrap;
  overflow:       hidden;
  pointer-events: none;
}

/* Wetter in Statusleiste */
.map-weather-chip--hidden { display: none; }

/* Giftköder-Marker — pulsierend, rot, sofort erkennbar */
.poison-marker {
  position: relative;
  width: 48px; height: 48px;
}
.poison-dot {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  background: #DC2626;
  border: 3px solid #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  box-shadow: 0 2px 10px rgba(220,38,38,0.7);
  z-index: 2;
}
.poison-ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(220,38,38,0.35);
  animation: poison-pulse 1.8s ease-out infinite;
  z-index: 1;
}
.poison-ring:nth-child(2) { animation-delay: 0.6s; }
@keyframes poison-pulse {
  0%   { transform: translate(-50%,-50%) scale(1);   opacity: 0.8; }
  100% { transform: translate(-50%,-50%) scale(2.8); opacity: 0;   }
}

/* Pulsierender Standort-Marker */
.loc-icon { position: relative; }
.loc-dot {
  width: 16px; height: 16px;
  background: #3B82F6;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
  position: absolute;
  top: 4px; left: 4px;
}
.loc-ring {
  width: 24px; height: 24px;
  background: rgba(59,130,246,0.3);
  border-radius: 50%;
  position: absolute;
  top: 0; left: 0;
  animation: loc-pulse 2s ease-out infinite;
}
@keyframes loc-pulse {
  0%   { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* Pin-Typ-Auswahl im Modal */
.poi-type-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   var(--space-2);
}
.poi-type-btn {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            4px;
  padding:        10px 4px;
  border:         2px solid var(--c-border);
  border-radius:  var(--radius-md);
  background:     var(--c-surface);
  cursor:         pointer;
  transition:     border-color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.poi-type-btn.selected {
  border-color: var(--pt-color, var(--c-primary));
  background:   color-mix(in srgb, var(--pt-color, var(--c-primary)) 12%, transparent);
}
.poi-type-icon { font-size: 22px; line-height: 1; }
.poi-type-label { font-size: 10px; color: var(--c-text-secondary); text-align: center; line-height: 1.2; }

/* ------------------------------------------------------------
   GASSI-TREFFEN (walks.js)
   ------------------------------------------------------------ */
.walks-layout {
  display:        flex;
  flex-direction: column;
  height:         100%;
  overflow:       hidden;
}
.walks-content {
  flex:       1;
  overflow-y: auto;
  overflow-x: hidden;
}
/* .walks-toolbar → now uses .by-toolbar */
.walks-view-toggle {
  display:       flex;
  gap:           var(--space-1);
  background:    var(--c-bg);
  border-radius: var(--radius-md);
  padding:       2px;
  border:        1px solid var(--c-border);
}
.walks-view-btn {
  padding:       var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  border:        none;
  background:    transparent;
  color:         var(--c-text-secondary);
  font-size:     var(--text-sm);
  cursor:        pointer;
  transition:    all 0.15s;
}
.walks-view-btn.active {
  background: var(--c-surface);
  color:      var(--c-text);
  box-shadow: var(--shadow-xs);
}
.walks-list {
  flex:       1;
  overflow-y: auto;
  padding:    var(--space-4);
  display:    flex;
  flex-direction: column;
  gap:        var(--space-3);
}
/* .walks-section-label → now uses .by-section-label */
.walks-card {
  background:    var(--c-surface);
  border-radius: var(--radius-lg);
  border:        1px solid var(--c-border);
  padding:       var(--space-4);
  display:       grid;
  grid-template-columns: 56px 1fr auto;
  gap:           var(--space-3);
  cursor:        pointer;
  transition:    box-shadow 0.15s;
  box-shadow:    var(--shadow-xs);
}
.walks-card:hover { box-shadow: var(--shadow-md); }
.walks-card.today  { border-left: 3px solid var(--c-amber,  #f59e0b); }
.walks-card.full   { opacity: 0.6; }
.walks-date-badge {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  background:      var(--c-bg);
  border-radius:   var(--radius-md);
  padding:         var(--space-1) var(--space-2);
  min-width:       52px;
}
.walks-date-badge .day   { font-size: var(--text-xs); color: var(--c-text-secondary); }
.walks-date-badge .num   { font-size: 1.5rem; font-weight: var(--weight-bold); line-height: 1.1; }
.walks-date-badge .month { font-size: var(--text-xs); color: var(--c-text-secondary); }
.walks-date-badge.today-badge .num { color: var(--c-amber, #f59e0b); }
.walks-card-body { min-width: 0; }
.walks-card-title {
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}
.walks-card-meta {
  font-size: var(--text-sm);
  color:     var(--c-text-secondary);
  margin-top: var(--space-1);
}
.walks-card-side {
  display:        flex;
  flex-direction: column;
  align-items:    flex-end;
  gap:            var(--space-1);
}
.walks-spots {
  font-size:   var(--text-xs);
  font-weight: var(--weight-semibold);
  color:       var(--c-success);
  white-space: nowrap;
}
.walks-spots.full  { color: var(--c-text-muted); }
.walks-spots.today { color: var(--c-amber, #f59e0b); }
.walks-map {
  flex:     1;
  position: relative;
}
.walks-participant {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  padding:     var(--space-2) 0;
  border-bottom: 1px solid var(--c-border);
  font-size:   var(--text-sm);
}
.walks-participant:last-child { border-bottom: none; }
.walks-participant-name { font-weight: var(--weight-semibold); }
.walks-participant-dogs { color: var(--c-text-secondary); }

/* Walk-Einladungen + RSVP */
.walks-invitation-row,
.walks-invite-row {
  display:       flex;
  align-items:   center;
  gap:           var(--space-3);
  padding:       var(--space-2) 0;
  border-bottom: 1px solid var(--c-border);
  font-size:     var(--text-sm);
}
.walks-invitation-row:last-child,
.walks-invite-row:last-child { border-bottom: none; }

.walks-inv-avatar {
  width:           36px;
  height:          36px;
  border-radius:   50%;
  background:      var(--c-primary);
  color:           #fff;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       var(--text-xs);
  font-weight:     var(--weight-semibold);
  flex-shrink:     0;
}
.walks-inv-avatar--sm {
  width:  28px;
  height: 28px;
}
.walks-inv-info { flex: 1; min-width: 0; }
.walks-inv-name {
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}
.walks-inv-hunde {
  color:     var(--c-text-secondary);
  font-size: var(--text-xs);
}
.walks-inv-badge { flex-shrink: 0; }

/* RSVP-Badges */
.walks-rsvp-badge {
  display:       inline-block;
  padding:       2px 8px;
  border-radius: var(--radius-full);
  font-size:     var(--text-xs);
  font-weight:   var(--weight-semibold);
}
.walks-rsvp--yes     { background: #d1fae5; color: #065f46; }
.walks-rsvp--maybe   { background: #fef3c7; color: #92400e; }
.walks-rsvp--no      { background: #fee2e2; color: #991b1b; }
.walks-rsvp--invited { background: var(--c-surface-2); color: var(--c-text-secondary); }

/* RSVP-Section im Detail-Modal */
.walks-rsvp-section {
  margin:        var(--space-3) 0;
  padding:       var(--space-3);
  background:    var(--c-surface-2);
  border-radius: var(--radius-md);
}
.walks-rsvp-buttons {
  display:   flex;
  gap:       var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}
.walks-rsvp-btn {
  flex:          1;
  min-width:     80px;
  padding:       var(--space-2) var(--space-2);
  border:        2px solid var(--c-border);
  border-radius: var(--radius-md);
  background:    var(--c-surface);
  color:         var(--c-text);
  font-size:     var(--text-sm);
  font-weight:   var(--weight-semibold);
  cursor:        pointer;
  transition:    all 0.15s;
  display:       flex;
  align-items:   center;
  justify-content: center;
  gap:           var(--space-1);
}
.walks-rsvp-btn:hover {
  border-color: var(--c-primary);
  background:   var(--c-primary-bg, rgba(196,132,58,0.08));
}
.walks-rsvp-btn.active[data-rsvp="yes"] {
  border-color: #10b981;
  background:   #d1fae5;
  color:        #065f46;
}
.walks-rsvp-btn.active[data-rsvp="maybe"] {
  border-color: #f59e0b;
  background:   #fef3c7;
  color:        #92400e;
}
.walks-rsvp-btn.active[data-rsvp="no"] {
  border-color: #ef4444;
  background:   #fee2e2;
  color:        #991b1b;
}

/* ------------------------------------------------------------
   EVENTS (events.js)
   ------------------------------------------------------------ */
/* .events-toolbar → now uses .by-toolbar */
.events-view-toggle {
  display:       flex;
  gap:           var(--space-1);
  background:    var(--c-bg);
  border-radius: var(--radius-md);
  padding:       2px;
  border:        1px solid var(--c-border);
}
.events-view-btn {
  padding:       var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  border:        none;
  background:    transparent;
  color:         var(--c-text-secondary);
  font-size:     var(--text-sm);
  cursor:        pointer;
  transition:    all 0.15s;
}
.events-view-btn.active {
  background: var(--c-surface);
  color:      var(--c-text);
  box-shadow: var(--shadow-xs);
}
.events-filter-bar {
  padding:       var(--space-2) var(--space-4);
  background:    var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  flex-shrink:   0;
}
/* .events-filter-btn → now uses .by-tab */
.events-list {
  flex:       1;
  overflow-y: auto;
  padding:    var(--space-4);
  display:    flex;
  flex-direction: column;
  gap:        var(--space-2);
}
.events-map {
  flex:       1;
  position:   relative;
  min-height: 400px;
  max-height: calc(100vh - 200px);
}
.events-month-label {
  font-size:   var(--text-sm);
  font-weight: var(--weight-semibold);
  color:       var(--c-text-secondary);
  padding:     var(--space-2) 0 var(--space-1);
}
.events-card {
  background:    var(--c-surface);
  border-radius: var(--radius-lg);
  border:        1px solid var(--c-border);
  border-left:   3px solid var(--c-primary);
  padding:       var(--space-3) var(--space-4);
  display:       grid;
  grid-template-columns: 52px 1fr auto;
  gap:           var(--space-3);
  cursor:        pointer;
  transition:    box-shadow 0.15s;
  align-items:   center;
  box-shadow:    var(--shadow-xs);
}
.events-card:hover { box-shadow: var(--shadow-md); }
.events-date-badge {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  background:     var(--c-bg);
  border-radius:  var(--radius-md);
  padding:        var(--space-1);
}
.events-date-badge .day   { font-size: var(--text-xs); color: var(--c-text-secondary); }
.events-date-badge .num   { font-size: 1.5rem; font-weight: var(--weight-bold); line-height: 1.1; }
.events-date-badge .month { font-size: var(--text-xs); color: var(--c-text-secondary); }
.events-card-body { min-width: 0; }
.events-card-title {
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
  margin-bottom: var(--space-1);
}
.events-card-meta {
  font-size: var(--text-sm);
  color:     var(--c-text-secondary);
  display:   flex;
  align-items: center;
  gap:       var(--space-1);
  flex-wrap: wrap;
}
.events-badge {
  display:       inline-block;
  padding:       2px var(--space-2);
  border-radius: var(--radius-full);
  font-size:     var(--text-xs);
  font-weight:   var(--weight-semibold);
}
.events-detail-row {
  display:       flex;
  align-items:   center;
  gap:           var(--space-1);
  flex-wrap:     wrap;
  margin-bottom: var(--space-2);
  color:         var(--c-text);
}
.events-detail-desc {
  background:    var(--c-bg);
  border-radius: var(--radius-md);
  padding:       var(--space-3);
  margin:        var(--space-3) 0;
  color:         var(--c-text-secondary);
  white-space:   pre-wrap;
}
/* VDH-Badge */
.ev-vdh-badge {
  display:       inline-block;
  padding:       1px 6px;
  border-radius: var(--radius-sm);
  background:    #1a4fa0;
  color:         #fff;
  font-size:     10px;
  font-weight:   var(--weight-bold);
  letter-spacing: 0.04em;
  vertical-align: middle;
  margin-left:   var(--space-1);
  flex-shrink:   0;
}
/* Quelle-Filter-Leiste */
.events-source-bar {
  padding:       var(--space-2) var(--space-4);
  background:    var(--c-bg);
  border-bottom: 1px solid var(--c-border);
  flex-shrink:   0;
}
/* .events-source-btn → now uses .by-tab */
/* Events-Karten: Aktions-Zeile */
.events-card-actions {
  margin-top: var(--space-1);
}
.ev-ext-link {
  display:        inline-flex;
  align-items:    center;
  gap:            4px;
  font-size:      var(--text-xs);
  color:          var(--c-primary);
  text-decoration: none;
  padding:        2px var(--space-2);
  border-radius:  var(--radius-sm);
  border:         1px solid var(--c-border);
}
.ev-ext-link:hover {
  background:   var(--c-primary-soft, #e8f0fe);
  border-color: var(--c-primary);
}
/* Phosphor-Icons in Events */
.events-card .ph-icon,
.events-detail-row .ph-icon {
  width:          14px;
  height:         14px;
  vertical-align: middle;
  flex-shrink:    0;
}

/* ------------------------------------------------------------
   SITTING (sitting.js)
   ------------------------------------------------------------ */
.sitting-layout {
  display:        flex;
  flex-direction: column;
  height:         100%;
  overflow:       hidden;
}
.sitting-tabs {
  padding:       var(--space-3) var(--space-4) var(--space-2);
  border-bottom: 1px solid var(--c-border);
  background:    var(--c-surface);
  flex-shrink:   0;
}
/* .sitting-tab → now uses .by-tab */
.sitting-content {
  flex:       1;
  overflow-y: auto;
  padding:    var(--space-4);
}
.sitting-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.sitting-card {
  background:    var(--c-surface);
  border-radius: var(--radius-lg);
  border:        1px solid var(--c-border);
  padding:       var(--space-4);
  display:       grid;
  grid-template-columns: 48px 1fr auto;
  gap:           var(--space-3);
  align-items:   flex-start;
  cursor:        pointer;
  transition:    box-shadow 0.15s;
  box-shadow:    var(--shadow-xs);
}
.sitting-card:hover { box-shadow: var(--shadow-md); }
.sitting-card-avatar {
  width:           48px;
  height:          48px;
  background:      var(--c-bg);
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       1.5rem;
}
.sitting-card-name  { font-weight: var(--weight-semibold); margin-bottom: var(--space-1); }
.sitting-card-dist  { font-size: var(--text-xs); color: var(--c-text-muted); margin-bottom: var(--space-1); }
.sitting-card-desc  { font-size: var(--text-sm); color: var(--c-text-secondary); margin-bottom: var(--space-2); }
.sitting-price      { font-weight: var(--weight-bold); color: var(--c-primary); }
.sitting-dogs       { font-size: var(--text-xs); color: var(--c-text-muted); margin-top: var(--space-1); }
.sitting-services {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--space-1);
}
.sit-service-badge {
  background:    var(--c-primary-light, #dbeafe);
  color:         var(--c-primary);
  padding:       2px var(--space-2);
  border-radius: var(--radius-full);
  font-size:     var(--text-xs);
  font-weight:   var(--weight-medium);
}
.sitting-empty-profil {
  text-align:    center;
  padding:       var(--space-8) var(--space-4);
  display:       flex;
  flex-direction: column;
  align-items:   center;
  gap:           var(--space-3);
}
.sitting-my-profil { display: flex; flex-direction: column; gap: var(--space-3); }
.sitting-profil-header {
  display:     flex;
  align-items: center;
  justify-content: space-between;
}
.sitting-profil-status {
  padding:       var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size:     var(--text-sm);
  font-weight:   var(--weight-semibold);
}
.sitting-profil-status.active   { background: #d1fae5; color: #065f46; }
.sitting-profil-status.inactive { background: #f3f4f6; color: #6b7280; }
.sitting-profil-facts {
  display: flex;
  gap:     var(--space-4);
}
.sitting-profil-fact { font-size: var(--text-sm); color: var(--c-text-secondary); }
/* .sitting-section-label → now uses .by-section-label */
.sitting-request-card {
  background:    var(--c-surface);
  border-radius: var(--radius-lg);
  border:        1px solid var(--c-border);
  padding:       var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
  box-shadow:    var(--shadow-xs);
}
.sitting-req-header {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-bottom:   var(--space-1);
}
.sitting-req-name   { font-weight: var(--weight-semibold); }
.sitting-req-status { font-size: var(--text-sm); font-weight: var(--weight-semibold); text-transform: capitalize; }
.sitting-req-dates  { font-size: var(--text-sm); color: var(--c-text-secondary); }
.sitting-req-msg    { font-size: var(--text-sm); color: var(--c-text-secondary); margin-top: var(--space-1); }
.sitting-req-actions {
  display:    flex;
  gap:        var(--space-2);
  margin-top: var(--space-2);
}
.sitting-detail-avatar {
  font-size:       4rem;
  text-align:      center;
  margin-bottom:   var(--space-2);
}

/* ============================================================
   Routen-Suchkarte
   ============================================================ */
.rk-view-toggle {
  display:       flex;
  border:        1.5px solid var(--c-border);
  border-radius: var(--radius-md);
  overflow:      hidden;
  flex-shrink:   0;
}
.rk-view-btn {
  padding:       var(--space-1) var(--space-3);
  background:    transparent;
  border:        none;
  cursor:        pointer;
  font-size:     var(--text-sm);
  color:         var(--c-text-secondary);
  transition:    background var(--transition-fast), color var(--transition-fast);
  line-height:   1;
}
.rk-view-btn.active {
  background: var(--c-primary);
  color:      #fff;
}
.rk-map-bar {
  display:    flex;
  gap:        var(--space-2);
  padding:    var(--space-3) 0 var(--space-2);
}
.rk-map-loc-input {
  flex:          1;
  padding:       var(--space-2) var(--space-3);
  border:        1.5px solid var(--c-border);
  border-radius: var(--radius-full);
  font-size:     var(--text-sm);
  background:    var(--c-surface);
  color:         var(--c-text);
}
.rk-map-loc-input:focus { outline: none; border-color: var(--c-primary); }
.rk-map-section {
  position:       fixed;
  /* Unter dem App-Header, über der Bottom-Nav */
  top:            calc(var(--header-height) + var(--safe-top));
  left:           0;
  right:          0;
  bottom:         calc(var(--nav-bottom-height) + var(--safe-bottom));
  z-index:        200;
  display:        flex;
  flex-direction: column;
  background:     var(--c-bg);
  padding:        0 var(--space-4) var(--space-2);
}
/* Desktop: Sidebar berücksichtigen */
@media (min-width: 768px) {
  .rk-map-section {
    left:   var(--nav-sidebar-width);
    bottom: 0;
    top:    0;
  }
}
#rk-search-map {
  flex:          1;
  min-height:    200px;
  border-radius: var(--radius-lg);
  overflow:      hidden;
  border:        1px solid var(--c-border);
}
.rk-map-hint {
  font-size:   var(--text-xs);
  color:       var(--c-text-muted);
  text-align:  center;
  padding:     var(--space-1) 0 var(--space-2);
}
.rk-map-tooltip {
  background:    var(--c-surface) !important;
  border:        1px solid var(--c-border) !important;
  border-radius: var(--radius-sm) !important;
  color:         var(--c-text) !important;
  font-size:     var(--text-xs) !important;
  box-shadow:    var(--shadow-sm) !important;
  padding:       4px 8px !important;
}

/* ============================================================
   FORUM
   ============================================================ */
.forum-layout {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-4);
}

.forum-toolbar {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  gap:             var(--space-3);
  flex-wrap:       wrap;
}

.forum-tabs {
  display:   flex;
  gap:       var(--space-1);
  flex-wrap: wrap;
}

/* .forum-tab → now uses .by-tab */

.forum-list-inner { display: flex; flex-direction: column; gap: var(--space-3); }

.forum-card {
  display:       flex;
  align-items:   center;
  gap:           var(--space-3);
  background:    var(--c-surface);
  border:        1px solid var(--c-border-light);
  border-radius: var(--radius-lg);
  padding:       var(--space-4);
  cursor:        pointer;
  transition:    box-shadow var(--transition-fast);
}
.forum-card:hover { box-shadow: var(--shadow-md); }

.forum-card-body  { flex: 1; min-width: 0; }
.forum-card-arrow { color: var(--c-text-muted); font-size: 1.2rem; flex-shrink: 0; }

.forum-card-meta-top {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  margin-bottom: var(--space-1);
}

.forum-card-date {
  font-size: var(--text-xs);
  color:     var(--c-text-muted);
  margin-left: auto;
}

.forum-card-title {
  font-size:   var(--text-base);
  font-weight: var(--weight-semibold);
  color:       var(--c-text);
  margin-bottom: var(--space-1);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.forum-card-preview {
  font-size: var(--text-sm);
  color:     var(--c-text-secondary);
  overflow:  hidden;
  display:   -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: var(--space-2);
}

.forum-card-footer {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  font-size:   var(--text-xs);
  color:       var(--c-text-muted);
}
.forum-card-replies { margin-left: auto; }

/* Kategorie-Badges */
.forum-kat-badge {
  display:       inline-block;
  padding:       2px var(--space-2);
  border-radius: var(--radius-full);
  font-size:     var(--text-xs);
  font-weight:   var(--weight-medium);
  background:    var(--c-surface-2);
  color:         var(--c-text-secondary);
  text-transform: capitalize;
  flex-shrink: 0;
}
.forum-kat-badge--allgemein { background: var(--c-primary-subtle); color: var(--c-primary-dark); }
.forum-kat-badge--rasse     { background: #fef3c7; color: #92400e; }
.forum-kat-badge--region    { background: #dcfce7; color: #166534; }
.forum-kat-badge--gesundheit{ background: #fee2e2; color: #991b1b; }
.forum-kat-badge--erziehung { background: #ede9fe; color: #5b21b6; }

/* Thread-Detail */
.forum-thread-header {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  margin-bottom: var(--space-2);
}

/* Posts */
.forum-post {
  background:    var(--c-surface-2);
  border-radius: var(--radius-md);
  padding:       var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
}
.forum-post-meta {
  display:       flex;
  align-items:   center;
  gap:           var(--space-2);
  margin-bottom: var(--space-2);
  font-size:     var(--text-xs);
  color:         var(--c-text-muted);
}
.forum-post-author { font-weight: var(--weight-medium); color: var(--c-text-secondary); }
.forum-post-date   { margin-left: auto; }
.forum-post-text   { font-size: var(--text-sm); color: var(--c-text); white-space: pre-wrap; word-break: break-word; }

/* ============================================================
   FORUM Sprint 11 — Erweiterte Styles
   ============================================================ */

/* Header */
.forum-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-3);
  padding:         var(--space-1) 0;
}
.forum-header-title {
  font-size:   var(--text-xl);
  font-weight: var(--weight-bold);
  margin:      0;
}
.forum-header-actions {
  display: flex;
  gap:     var(--space-2);
  align-items: center;
}

/* Category tabs — extends .by-tabs with extra bottom padding */
.forum-category-tabs {
  padding-bottom: var(--space-1);
}
.forum-category-tabs .by-tab {
  overflow:      hidden;
  text-overflow: ellipsis;
  max-width:     10rem;  /* prevents single pill from being wider than ~160px on mobile */
}

/* Category badge (colored pill) */
.forum-category-badge {
  display:        inline-block;
  padding:        2px var(--space-2);
  border-radius:  var(--radius-full);
  font-size:      var(--text-xs);
  font-weight:    var(--weight-semibold);
  background:     var(--c-surface-2);
  color:          var(--c-text-secondary);
  text-transform: capitalize;
  flex-shrink:    0;
}
.forum-category-badge--allgemein  { background: var(--c-primary-subtle); color: var(--c-primary-dark); }
.forum-category-badge--rasse      { background: #fef3c7; color: #92400e; }
.forum-category-badge--region     { background: #dcfce7; color: #166534; }
.forum-category-badge--gesundheit { background: #fee2e2; color: #991b1b; }
.forum-category-badge--erziehung  { background: #ede9fe; color: #5b21b6; }
.forum-category-badge--tauschboerse { background: #fce7f3; color: #9d174d; }

/* Search */
.forum-search-wrap {
  position: relative;
}
.forum-search {
  width:         100%;
  box-sizing:    border-box;
  padding:       var(--space-2) var(--space-4);
  border:        1.5px solid var(--c-border);
  border-radius: var(--radius-full);
  font-size:     var(--text-sm);
  background:    var(--c-bg);
  color:         var(--c-text);
  outline:       none;
  transition:    border-color 0.15s;
}
.forum-search:focus { border-color: var(--c-primary); }

/* Thread card (modern) */
.forum-thread-card {
  background:    var(--c-surface);
  border:        1px solid var(--c-border-light);
  border-radius: var(--radius-xl);
  padding:       var(--space-4);
  cursor:        pointer;
  transition:    box-shadow 0.15s, transform 0.15s;
}
.forum-thread-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  transform:  translateY(-1px);
}
.forum-card-top {
  display:       flex;
  align-items:   center;
  gap:           var(--space-2);
  margin-bottom: var(--space-2);
}
.forum-pin-badge, .forum-lock-badge {
  font-size: 0.85rem;
}
.forum-card-content {
  display: flex;
  gap:     var(--space-3);
  align-items: flex-start;
}
.forum-card-main { flex: 1; min-width: 0; }
.forum-card-thumb {
  width:         72px;
  height:        72px;
  object-fit:    cover;
  border-radius: var(--radius-md);
  flex-shrink:   0;
  border:        1px solid var(--c-border-light);
}
.forum-card-title {
  font-size:     var(--text-base);
  font-weight:   var(--weight-semibold);
  color:         var(--c-text);
  margin-bottom: var(--space-1);
  overflow:      hidden;
  display:       -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.forum-card-preview {
  font-size:   var(--text-sm);
  color:       var(--c-text-secondary);
  overflow:    hidden;
  display:     -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: var(--space-2);
}
.forum-card-meta {
  display:     flex;
  flex-wrap:   wrap;
  gap:         var(--space-3);
  font-size:   var(--text-xs);
  color:       var(--c-text-muted);
}
.forum-liked { color: #ef4444; font-weight: var(--weight-medium); }

/* Thread detail */
.forum-thread-detail { display: flex; flex-direction: column; gap: var(--space-4); }
.forum-thread-header-row {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  flex-wrap:   wrap;
}
.forum-thread-body {
  font-size: var(--text-base);
  color:     var(--c-text);
  line-height: 1.6;
}
.forum-thread-author-row {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  padding-top: var(--space-3);
  border-top:  1px solid var(--c-border-light);
}

/* Avatar */
.forum-avatar {
  width:           36px;
  height:          36px;
  border-radius:   50%;
  background:      var(--c-primary-subtle);
  color:           var(--c-primary-dark);
  font-weight:     var(--weight-bold);
  font-size:       var(--text-base);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}
.forum-avatar--sm {
  width:     28px;
  height:    28px;
  font-size: var(--text-sm);
}

/* Like button */
.forum-like-btn {
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  padding:       4px 10px;
  border:        1.5px solid var(--c-border);
  border-radius: var(--radius-full);
  background:    var(--c-bg);
  color:         var(--c-text-secondary);
  font-size:     var(--text-sm);
  cursor:        pointer;
  transition:    all 0.15s;
  line-height:   1;
}
.forum-like-btn:hover { border-color: #ef4444; color: #ef4444; }
.forum-like-btn.active {
  background:   #fef2f2;
  border-color: #ef4444;
  color:        #ef4444;
  font-weight:  var(--weight-semibold);
}

/* Report button */
.forum-report-btn {
  padding:    4px 8px;
  border:     none;
  background: transparent;
  color:      var(--c-text-muted);
  font-size:  var(--text-sm);
  cursor:     pointer;
  border-radius: var(--radius-sm);
  opacity:    0.6;
  transition: opacity 0.15s;
}
.forum-report-btn:hover { opacity: 1; }

/* Icon-only Action-Button (Bearbeiten, Löschen, Melden) */
.forum-icon-btn {
  display:       flex;
  align-items:   center;
  justify-content: center;
  width:         32px;
  height:        32px;
  padding:       0;
  border:        none;
  border-radius: var(--radius-md);
  background:    transparent;
  color:         var(--c-text-muted);
  cursor:        pointer;
  opacity:       0.65;
  transition:    opacity 0.15s, background 0.15s;
  flex-shrink:   0;
}
.forum-icon-btn:hover  { opacity: 1; background: var(--c-surface-2); }
.forum-icon-btn:active { background: var(--c-border); }
.forum-icon-btn--danger       { color: var(--c-danger); }
.forum-icon-btn--danger:hover { background: rgba(239,68,68,0.08); }

/* Posts section */
.forum-posts-section { display: flex; flex-direction: column; gap: var(--space-1); }
.forum-posts-divider {
  font-size:   var(--text-sm);
  font-weight: var(--weight-semibold);
  color:       var(--c-text-secondary);
  padding:     var(--space-2) 0;
  border-top:  1px solid var(--c-border-light);
}

/* Post card */
.forum-post {
  background:    var(--c-bg);
  border-left:   3px solid var(--c-primary-subtle);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding:       var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
}
.forum-post--deleted {
  background:  var(--c-surface-2);
  border-left-color: var(--c-border);
  color:       var(--c-text-muted);
  font-style:  italic;
  font-size:   var(--text-sm);
}
.forum-post-header {
  display:       flex;
  align-items:   center;
  gap:           var(--space-2);
  margin-bottom: var(--space-2);
  font-size:     var(--text-xs);
}
.forum-post-author { font-weight: var(--weight-semibold); color: var(--c-text); }
.forum-post-date   { color: var(--c-text-muted); margin-left: auto; }
.forum-post-body   { margin-bottom: var(--space-2); }
.forum-post-text   { font-size: var(--text-sm); color: var(--c-text); white-space: pre-wrap; word-break: break-word; line-height: 1.5; }
.forum-post-actions {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  margin-top:  var(--space-2);
}

/* Foto grid */
.forum-foto-grid {
  display:   grid;
  grid-template-columns: repeat(2, 1fr);
  gap:       var(--space-2);
  margin-top: var(--space-2);
}
.forum-foto-img {
  width:         100%;
  aspect-ratio:  4/3;
  object-fit:    cover;
  border-radius: var(--radius-md);
  cursor:        pointer;
  border:        1px solid var(--c-border-light);
  transition:    opacity 0.15s;
}
.forum-foto-img:hover { opacity: 0.85; }

.forum-pdf-card {
  display:       inline-flex;
  align-items:   center;
  gap:           var(--space-2);
  padding:       var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background:    var(--c-surface-2);
  border:        1px solid var(--c-border);
  color:         var(--c-text);
  text-decoration: none;
  font-size:     var(--text-sm);
  transition:    background var(--transition-fast);
}
.forum-pdf-card:hover { background: var(--c-surface); }
.forum-pdf-card .ph-icon { color: var(--c-danger); flex-shrink: 0; }

/* Upload */
.forum-upload-area { display: flex; gap: var(--space-2); align-items: center; }
.forum-upload-previews {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--space-2);
}
.forum-upload-thumb {
  width:         56px;
  height:        56px;
  object-fit:    cover;
  border-radius: var(--radius-sm);
  border:        1px solid var(--c-border-light);
}

/* Reply form */
.forum-reply-form {
  border-top:  1px solid var(--c-border-light);
  padding-top: var(--space-4);
  display:     flex;
  flex-direction: column;
  gap:         var(--space-2);
}
.forum-reply-actions {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
}
.forum-upload-label { cursor: pointer; }

/* Moderator toolbar */
.forum-mod-toolbar {
  display:       flex;
  gap:           var(--space-2);
  padding:       var(--space-2) 0;
  border-bottom: 1px solid var(--c-border-light);
  flex-wrap:     wrap;
}

/* Moderator reports */
.forum-mod-reports { display: flex; flex-direction: column; gap: var(--space-4); }
.forum-mod-report-item {
  background:    var(--c-surface-2);
  border-radius: var(--radius-md);
  padding:       var(--space-3) var(--space-4);
  border-left:   3px solid var(--c-danger);
}

/* Members map */
.forum-members-section { display: flex; flex-direction: column; gap: var(--space-3); }
.forum-map-container {
  height:        360px;
  border-radius: var(--radius-xl);
  overflow:      hidden;
  border:        1px solid var(--c-border-light);
}
.forum-location-toggle {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  font-size:   var(--text-sm);
  color:       var(--c-text-secondary);
  cursor:      pointer;
}

/* ============================================================
   KNIGGE
   ============================================================ */

.knigge-accordion {
  border-bottom: 1px solid var(--c-border-light);
}
.knigge-accordion:last-child {
  border-bottom: none;
}

.knigge-accordion-head {
  width:           100%;
  background:      none;
  border:          none;
  padding:         var(--space-4);
  text-align:      left;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  font-size:       var(--text-base);
  color:           var(--c-text);
  min-height:      44px;
  -webkit-tap-highlight-color: transparent;
}
.knigge-accordion-head:active {
  background: var(--c-surface-2);
}

.knigge-accordion-arrow {
  font-size:    var(--text-lg);
  color:        var(--c-text-secondary);
  flex-shrink:  0;
  margin-left:  var(--space-2);
  transition:   transform var(--transition-fast);
}

.knigge-accordion-body {
  padding: var(--space-1) var(--space-4) var(--space-4);
}

.knigge-vote-btn {
  text-align:     left !important;
  justify-content: flex-start !important;
  white-space:    normal;
  height:         auto;
  line-height:    1.4;
  padding:        var(--space-3) var(--space-4);
}

.knigge-vote-btn:hover {
  border-color: var(--c-primary);
  color:        var(--c-primary);
}

/* ============================================================
   WIKI
   ============================================================ */

/* .wiki-tab-bar / .wiki-tab-btn → now use .by-tabs / .by-tab */

/* Search */
.wiki-search-wrap {
  padding: var(--space-3) 0 var(--space-2);
}

/* Breed Grid */
.wiki-breed-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap:                   var(--space-3);
  padding:               var(--space-2) 0 var(--space-6);
}

.wiki-breed-card {
  background:    var(--c-surface);
  border:        1.5px solid var(--c-border-light);
  border-radius: var(--radius-lg);
  padding:       var(--space-4);
  cursor:        pointer;
  transition:    border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.wiki-breed-card:hover {
  border-color: var(--c-primary);
  box-shadow:   var(--shadow-sm);
}
.wiki-breed-card-name {
  font-weight:   var(--weight-semibold);
  font-size:     var(--text-sm);
  color:         var(--c-text);
  margin-bottom: var(--space-1);
}
.wiki-breed-card-gruppe {
  font-size:     var(--text-xs);
  color:         var(--c-text-muted);
  margin-bottom: var(--space-2);
}
.wiki-breed-badges {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--space-1);
}

/* Größen-Badges */
.wiki-badge-groesse,
.wiki-badge-aktivitaet {
  display:       inline-block;
  padding:       2px 8px;
  border-radius: var(--radius-full);
  font-size:     0.65rem;
  font-weight:   var(--weight-medium);
  white-space:   nowrap;
}

.wiki-badge-groesse--klein      { background: #e0f2fe; color: #0369a1; }
.wiki-badge-groesse--mittel     { background: #fef9c3; color: #854d0e; }
.wiki-badge-groesse--gross      { background: #fce7f3; color: #9d174d; }
.wiki-badge-groesse--sehr_gross { background: #f3e8ff; color: #6b21a8; }

.wiki-badge-aktivitaet--niedrig   { background: #dcfce7; color: #166534; }
.wiki-badge-aktivitaet--mittel    { background: #fef3c7; color: #92400e; }
.wiki-badge-aktivitaet--hoch      { background: #fee2e2; color: #991b1b; }
.wiki-badge-aktivitaet--sehr_hoch { background: #ede9fe; color: #5b21b6; }

/* Detail Modal */
.wiki-detail-badges {
  display:       flex;
  flex-wrap:     wrap;
  gap:           var(--space-1);
  margin-bottom: var(--space-4);
}
.wiki-detail-section {
  margin-bottom: var(--space-4);
}
.wiki-detail-label {
  font-size:     var(--text-xs);
  font-weight:   var(--weight-semibold);
  color:         var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-1);
}
.wiki-detail-section p {
  color:       var(--c-text);
  line-height: 1.6;
  font-size:   var(--text-sm);
}

/* Community-Berichte */
.wiki-bericht-item {
  background:    var(--c-surface-2);
  border-radius: var(--radius-md);
  padding:       var(--space-3);
  margin-bottom: var(--space-2);
}
.wiki-bericht-header {
  display:       flex;
  align-items:   center;
  gap:           var(--space-2);
  margin-bottom: var(--space-1);
  font-size:     var(--text-xs);
}
.wiki-bericht-autor {
  font-weight: var(--weight-semibold);
  color:       var(--c-text);
}
.wiki-bericht-date {
  color: var(--c-text-muted);
}
.wiki-bericht-titel {
  font-weight:   var(--weight-medium);
  font-size:     var(--text-sm);
  color:         var(--c-text);
  margin-bottom: var(--space-1);
}
.wiki-bericht-text {
  font-size:   var(--text-sm);
  color:       var(--c-text-secondary);
  white-space: pre-wrap;
  word-break:  break-word;
  line-height: 1.5;
}

/* Accordion (Gesundheit + Recht) */
.wiki-accordion {
  display:       flex;
  flex-direction: column;
  gap:           var(--space-2);
  padding:       var(--space-2) 0 var(--space-6);
}

.wiki-section {
  background:    var(--c-surface);
  border:        1.5px solid var(--c-border-light);
  border-radius: var(--radius-lg);
  overflow:      hidden;
  transition:    border-color var(--transition-fast);
}
.wiki-section.open {
  border-color: var(--c-primary);
}

.wiki-section-header {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  padding:     var(--space-4);
  cursor:      pointer;
  user-select: none;
}
.wiki-section-icon   { font-size: 1.25rem; }
.wiki-section-titel  { flex: 1; font-weight: var(--weight-medium); color: var(--c-text); font-size: var(--text-sm); }
.wiki-section-arrow  { color: var(--c-text-muted); font-size: var(--text-xs); transition: transform var(--transition-fast); }

.wiki-section-body {
  padding:     0 var(--space-4) var(--space-4);
  border-top:  1px solid var(--c-border-light);
}
.wiki-section-body p {
  font-size:   var(--text-sm);
  color:       var(--c-text);
  line-height: 1.6;
  padding-top: var(--space-3);
}

/* Recht-Zeilen */
.wiki-recht-row {
  display:       flex;
  gap:           var(--space-3);
  padding:       var(--space-2) 0;
  border-bottom: 1px solid var(--c-border-light);
  font-size:     var(--text-sm);
}
.wiki-recht-row:last-child { border-bottom: none; }
.wiki-recht-label {
  flex-shrink:   0;
  width:         90px;
  font-weight:   var(--weight-medium);
  color:         var(--c-text-muted);
  font-size:     var(--text-xs);
  padding-top:   2px;
}
.wiki-recht-row > span:last-child {
  color:      var(--c-text);
  line-height: 1.5;
}

/* Disclaimer */
.wiki-disclaimer {
  font-size:  var(--text-xs);
  color:      var(--c-text-muted);
  padding:    var(--space-3) 0 var(--space-6);
  font-style: italic;
  text-align: center;
}

/* Quiz */
.wiki-quiz-wrap {
  padding: var(--space-2) 0;
}
.wiki-quiz-progress-bar {
  height:        6px;
  background:    var(--c-border-light);
  border-radius: var(--radius-full);
  overflow:      hidden;
  margin-bottom: var(--space-3);
}
.wiki-quiz-progress {
  height:           100%;
  background:       var(--c-primary);
  border-radius:    var(--radius-full);
  transition:       width 0.3s ease;
}
.wiki-quiz-step-info {
  font-size:     var(--text-xs);
  color:         var(--c-text-muted);
  margin-bottom: var(--space-2);
  text-align:    center;
}
.wiki-quiz-frage {
  font-size:     var(--text-lg);
  font-weight:   var(--weight-semibold);
  color:         var(--c-text);
  margin-bottom: var(--space-4);
  text-align:    center;
}
.wiki-quiz-options {
  display:       flex;
  flex-direction: column;
  gap:           var(--space-2);
  margin-bottom: var(--space-4);
}
.wiki-quiz-option {
  padding:       var(--space-3) var(--space-4);
  border:        1.5px solid var(--c-border);
  border-radius: var(--radius-lg);
  background:    var(--c-surface);
  color:         var(--c-text);
  font-size:     var(--text-base);
  text-align:    left;
  cursor:        pointer;
  transition:    border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.wiki-quiz-option:hover {
  border-color: var(--c-primary);
  color:        var(--c-primary);
}
.wiki-quiz-option.selected {
  border-color: var(--c-primary);
  background:   var(--c-primary-subtle);
  color:        var(--c-primary-dark);
  font-weight:  var(--weight-medium);
}
.wiki-quiz-nav {
  display:     flex;
  justify-content: space-between;
  align-items: center;
}

/* Quiz Results */
.wiki-quiz-results {
  display:       flex;
  flex-direction: column;
  gap:           var(--space-3);
  margin-top:    var(--space-2);
}
.wiki-quiz-result-card {
  background:    var(--c-surface);
  border:        1.5px solid var(--c-border-light);
  border-radius: var(--radius-lg);
  padding:       var(--space-3);
  display:       flex;
  gap:           var(--space-3);
  align-items:   flex-start;
}
.wiki-quiz-result-card-body {
  flex: 1;
  min-width: 0;
}
.wiki-quiz-result-name {
  font-size:     var(--text-base);
  font-weight:   var(--weight-semibold);
  color:         var(--c-text);
  margin-bottom: var(--space-1);
}
.wiki-quiz-result-gruppe {
  font-size:     var(--text-xs);
  color:         var(--c-text-muted);
  margin-bottom: var(--space-1);
}
.wiki-quiz-result-char {
  font-size:     var(--text-sm);
  color:         var(--c-text-secondary);
  line-height:   1.5;
  margin-top:    var(--space-2);
}

/* ============================================================
   HUNDE-FILME
   ============================================================ */

/* Tab-Navigation */
.movies-tabs {
  display:    flex;
  gap:        var(--space-1);
  overflow-x: auto;
  padding:    var(--space-3) 0 var(--space-2);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.movies-tabs::-webkit-scrollbar { display: none; }

.movies-tab {
  flex-shrink:   0;
  padding:       var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  border:        1.5px solid var(--c-border);
  background:    var(--c-surface);
  color:         var(--c-text-secondary);
  font-size:     var(--text-sm);
  font-weight:   var(--weight-medium);
  cursor:        pointer;
  transition:    background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
  white-space:   nowrap;
  min-height:    36px;
}
.movies-tab--active {
  background:    var(--c-primary);
  color:         var(--c-text-inverse);
  border-color:  var(--c-primary);
}

/* Filter-Row */
.movies-filter-row {
  display:    flex;
  gap:        var(--space-2);
  overflow-x: auto;
  padding:    var(--space-3) 0;
  scrollbar-width: none;
}
.movies-filter-row::-webkit-scrollbar { display: none; }

.movies-filter-btn {
  flex-shrink:   0;
  padding:       var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  border:        1.5px solid var(--c-border);
  background:    var(--c-surface);
  color:         var(--c-text-secondary);
  font-size:     var(--text-sm);
  cursor:        pointer;
  transition:    background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
  white-space:   nowrap;
  min-height:    36px;
}
.movies-filter-btn--active {
  background:    var(--c-primary-subtle);
  color:         var(--c-primary-dark);
  border-color:  var(--c-primary);
  font-weight:   var(--weight-semibold);
}

/* Film-Grid */
.movie-grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   var(--space-3);
  padding:               var(--space-2) 0 var(--space-6);
}

/* Film-Card */
.movie-card {
  background:    var(--c-surface);
  border-radius: var(--radius-lg);
  border:        1.5px solid var(--c-border);
  padding:       var(--space-3);
  cursor:        pointer;
  transition:    box-shadow var(--transition-fast), transform var(--transition-fast);
  display:       flex;
  flex-direction: column;
  gap:           var(--space-2);
}
.movie-card:hover,
.movie-card:active {
  box-shadow: var(--shadow-md);
  transform:  translateY(-2px);
}

.movie-card-emoji {
  font-size:   2.5rem;
  line-height: 1;
  text-align:  center;
  padding:     var(--space-2) 0;
}

.movie-card-body {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-1);
}

.movie-card-title {
  font-weight:  var(--weight-bold);
  font-size:    var(--text-sm);
  color:        var(--c-text);
  line-height:  1.3;
}

.movie-card-year {
  font-weight: var(--weight-normal);
  color:       var(--c-text-secondary);
  font-size:   var(--text-xs);
}

.movie-card-genre {
  font-size: var(--text-xs);
  color:     var(--c-text-secondary);
}

.movie-card-rasse {
  font-size: var(--text-xs);
  color:     var(--c-text-secondary);
}

/* "Stirbt der Hund?" Tags */
.movie-tag-stirbt {
  background:    #fef2f2;
  color:         #dc2626;
  border:        1.5px solid #dc2626;
  border-radius: var(--radius-md);
  padding:       var(--space-2) var(--space-3);
  font-size:     var(--text-xs);
  font-weight:   var(--weight-bold);
  text-align:    center;
  line-height:   1.3;
}

.movie-tag-ueberlebt {
  background:    #f0fdf4;
  color:         #16a34a;
  border:        1.5px solid #16a34a;
  border-radius: var(--radius-md);
  padding:       var(--space-2) var(--space-3);
  font-size:     var(--text-xs);
  font-weight:   var(--weight-semibold);
  text-align:    center;
  line-height:   1.3;
}

/* Star-Rating */
.movie-card-stars {
  margin-top: var(--space-1);
}

.movie-star-rating {
  display:     flex;
  align-items: center;
  gap:         var(--space-1);
  flex-wrap:   wrap;
}

.movie-star {
  font-size:   1.4rem;
  color:       var(--c-border);
  cursor:      pointer;
  transition:  color var(--transition-fast), transform var(--transition-fast);
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}

.movie-star--active {
  color: #f59e0b;
}

.movie-star:hover {
  transform: scale(1.2);
}

.movie-star-avg {
  font-size:   var(--text-sm);
  color:       var(--c-text-secondary);
  font-weight: var(--weight-medium);
}

/* Modal-Emoji */
.movie-modal-emoji {
  font-size:     4rem;
  text-align:    center;
  margin-bottom: var(--space-4);
  line-height:   1;
}

/* Promi-Cards */
.movie-promi-card {
  display:       flex;
  gap:           var(--space-4);
  align-items:   flex-start;
  background:    var(--c-surface);
  border-radius: var(--radius-lg);
  border:        1.5px solid var(--c-border);
  padding:       var(--space-4);
  margin-bottom: var(--space-3);
}

.movie-promi-emoji {
  font-size:   2.5rem;
  line-height: 1;
  flex-shrink: 0;
}

.movie-promi-body {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-1);
}

.movie-promi-name {
  font-weight: var(--weight-bold);
  font-size:   var(--text-base);
  color:       var(--c-text);
}

.movie-promi-rasse {
  font-size:   var(--text-sm);
  color:       var(--c-primary);
  font-weight: var(--weight-medium);
}

.movie-promi-text {
  font-size:   var(--text-sm);
  color:       var(--c-text-secondary);
  line-height: 1.5;
}

/* Hund des Monats */
.hdm-header {
  text-align:    center;
  padding:       var(--space-6) 0 var(--space-4);
}

.hdm-trophy {
  font-size:     3.5rem;
  line-height:   1;
  margin-bottom: var(--space-2);
}

.hdm-title {
  font-size:     var(--text-xl);
  font-weight:   var(--weight-bold);
  color:         var(--c-text);
  margin-bottom: var(--space-1);
}

.hdm-monat {
  font-size:   var(--text-base);
  color:       var(--c-text-secondary);
  font-weight: var(--weight-medium);
}

.hdm-section {
  margin-bottom: var(--space-6);
}

.hdm-section-title {
  font-size:     var(--text-base);
  font-weight:   var(--weight-bold);
  color:         var(--c-text);
  margin-bottom: var(--space-3);
}

/* Vote-Grid */
.hdm-vote-grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   var(--space-3);
}

.hdm-vote-card {
  background:     var(--c-surface);
  border-radius:  var(--radius-lg);
  border:         1.5px solid var(--c-border);
  padding:        var(--space-4);
  text-align:     center;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--space-2);
  transition:     border-color var(--transition-fast);
}

.hdm-vote-card--voted {
  border-color: var(--c-primary);
  background:   var(--c-primary-subtle);
}

.hdm-vote-av {
  width:           56px;
  height:          56px;
  border-radius:   50%;
  overflow:        hidden;
  background:      var(--c-surface-2);
  display:         flex;
  align-items:     center;
  justify-content: center;
  border:          2px solid var(--c-border);
}

.hdm-vote-av-img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

.hdm-vote-av-placeholder {
  font-size:   1.5rem;
  font-weight: var(--weight-bold);
  color:       var(--c-primary);
}

.hdm-vote-name {
  font-weight: var(--weight-bold);
  font-size:   var(--text-sm);
  color:       var(--c-text);
}

/* ============================================================
   WIKI — Rassen-Datenbank (TheDogAPI)
   ============================================================ */

/* Filter-Bar */
.wiki-filter-bar {
  display:   flex;
  gap:       var(--space-2);
  padding:   var(--space-3) var(--space-4);
  flex-wrap: wrap;
}
.wiki-search-input { flex: 1 1 160px; min-width: 0; }
.wiki-gruppe-select { flex: 0 1 180px; }

/* Breed Grid */
.wiki-breed-grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   var(--space-3);
  padding:               0 var(--space-4) var(--space-4);
}
@media (min-width: 640px) {
  .wiki-breed-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Breed Card */
.wiki-breed-card {
  background:    var(--c-surface);
  border:        1px solid var(--c-border);
  border-radius: var(--radius-lg);
  overflow:      hidden;
  cursor:        pointer;
  transition:    box-shadow var(--transition-fast), transform var(--transition-fast);
  display:       flex;
  flex-direction:column;
}
.wiki-breed-card:active {
  transform:  scale(0.97);
  box-shadow: var(--shadow-sm);
}

/* Breed Photo */
.wiki-breed-photo-wrap {
  width:      100%;
  height:     100px;
  overflow:   hidden;
  background: var(--c-bg);
  display:    flex;
  align-items:center;
  justify-content: center;
}
.wiki-breed-photo {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}
.wiki-breed-photo-fallback {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           100%;
  height:          100%;
  background:      linear-gradient(135deg, var(--c-surface-2) 0%, var(--c-bg) 100%);
  color:           var(--c-text-muted);
  font-size:       2.8rem;
  line-height:     1;
}
.wiki-detail-photo-placeholder {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-2);
  width:           100%;
  height:          220px;
  background:      linear-gradient(135deg, var(--c-surface-2) 0%, var(--c-bg) 100%);
  border-radius:   var(--radius-lg);
  color:           var(--c-text-muted);
  font-size:       3.5rem;
}
.wiki-detail-photo-placeholder span {
  font-size:      var(--text-xs);
  color:          var(--c-text-muted);
  font-weight:    var(--weight-medium);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Card Body */
.wiki-breed-card-body {
  padding: var(--space-2) var(--space-3) var(--space-3);
}
.wiki-breed-card-name {
  font-weight:   var(--weight-semibold);
  font-size:     var(--text-sm);
  color:         var(--c-text);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  margin-bottom: var(--space-1);
}
.wiki-breed-card-gruppe {
  font-size:     var(--text-xs);
  color:         var(--c-text-secondary);
  margin-bottom: var(--space-2);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

/* Erfahrung Badge */
.wiki-badge-erfahrung {
  display:       inline-block;
  padding:       2px 8px;
  border-radius: var(--radius-full);
  font-size:     var(--text-xs);
  font-weight:   var(--weight-medium);
  white-space:   nowrap;
}
.wiki-badge-erfahrung--anfaenger   { background: #d1fae5; color: #065f46; }
.wiki-badge-erfahrung--fortgeschritten { background: #fef3c7; color: #92400e; }
.wiki-badge-erfahrung--experte     { background: #fee2e2; color: #991b1b; }

/* Trait Chips */
.wiki-trait-chips {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--space-1);
  margin-top: var(--space-2);
}
.wiki-trait-chip {
  background:    var(--c-bg);
  border:        1px solid var(--c-border);
  border-radius: var(--radius-full);
  padding:       2px 10px;
  font-size:     var(--text-xs);
  color:         var(--c-text-secondary);
  white-space:   nowrap;
}

/* Stat Row */
.wiki-stat-row {
  display:       flex;
  gap:           var(--space-4);
  padding:       var(--space-3) 0;
  border-top:    1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  margin:        var(--space-3) 0;
  flex-wrap:     wrap;
}
.wiki-stat-item {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}
.wiki-stat-label {
  font-size:   var(--text-xs);
  color:       var(--c-text-secondary);
  font-weight: var(--weight-medium);
}
.wiki-stat-value {
  font-size:   var(--text-sm);
  color:       var(--c-text);
  font-weight: var(--weight-semibold);
}

/* Fit Row */
.wiki-fit-row {
  display:     flex;
  gap:         var(--space-4);
  font-size:   var(--text-sm);
  margin:      var(--space-2) 0;
  flex-wrap:   wrap;
}

/* Detail Photo (modal top) */
.wiki-detail-photo {
  width:         100%;
  max-height:    220px;
  object-fit:    cover;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  display:       block;
}

/* Loading State */
.wiki-loading-state {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  padding:         var(--space-12) var(--space-6);
  text-align:      center;
  gap:             var(--space-3);
}
.wiki-loading-spinner {
  width:         40px;
  height:        40px;
  border:        4px solid var(--c-border);
  border-top:    4px solid var(--c-primary);
  border-radius: 50%;
  animation:     wiki-spin 0.9s linear infinite;
}
@keyframes wiki-spin {
  to { transform: rotate(360deg); }
}
.wiki-loading-text {
  font-size:   var(--text-lg);
  font-weight: var(--weight-semibold);
  color:       var(--c-text);
}
.wiki-loading-hint {
  font-size: var(--text-sm);
  color:     var(--c-text-secondary);
}

/* Breeds loading placeholder */
.wiki-breeds-loading {
  grid-column: 1 / -1;
  padding:     var(--space-6);
  text-align:  center;
  color:       var(--c-text-secondary);
  font-size:   var(--text-sm);
}

/* Quiz result photo */
.wiki-quiz-result-photo-wrap {
  width:         100px;
  height:        100px;
  flex-shrink:   0;
  overflow:      hidden;
  border-radius: var(--radius-md);
  background:    var(--c-surface-2);
  display:       flex;
  align-items:   center;
  justify-content: center;
}
.wiki-quiz-result-photo {
  width:          100%;
  height:         100%;
  object-fit:     cover;
  object-position: center top;
  display:        block;
}
.wiki-quiz-result-photo-fallback {
  font-size: 2.5rem;
  color:     var(--c-text-secondary);
}

/* Detail Hero (neues Layout) */
.wiki-detail-hero-photo-wrap {
  width:         100%;
  max-height:    240px;
  overflow:      hidden;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-3);
  background:    var(--c-surface-2);
}
.wiki-detail-hero-photo-wrap .wiki-detail-photo {
  width:         100%;
  height:        240px;
  object-fit:    cover;
  object-position: center top;
  margin-bottom: 0;
  border-radius: 0;
}

/* Steckbrief-Grid */
.wiki-steckbrief-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1px;
  background:            var(--c-border-light);
  border:                1px solid var(--c-border-light);
  border-radius:         var(--radius-md);
  overflow:              hidden;
  margin-bottom:         var(--space-4);
}
.wiki-steckbrief-item {
  display:        flex;
  flex-direction: column;
  gap:            2px;
  padding:        var(--space-2) var(--space-3);
  background:     var(--c-surface);
}
.wiki-steckbrief-label {
  font-size:   var(--text-xs);
  color:       var(--c-text-muted);
  font-weight: var(--weight-medium);
}
.wiki-steckbrief-value {
  font-size:   var(--text-sm);
  color:       var(--c-text);
  font-weight: var(--weight-semibold);
}

/* Interesse-Section */
.wiki-interesse-section {
  background:    var(--c-surface-2);
  border-radius: var(--radius-md);
  padding:       var(--space-3);
}
.wiki-interesse-btn {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background:    var(--c-surface);
  color:         var(--c-text);
  font-size:     var(--text-sm);
  padding:       var(--space-2) var(--space-3);
  cursor:        pointer;
  transition:    background 0.15s, color 0.15s, border-color 0.15s;
}
.wiki-interesse-btn:hover {
  border-color: var(--c-primary);
  color:        var(--c-primary);
}

/* Züchter-Karten */
.wiki-zuchter-card {
  transition: background 0.15s;
}

.hdm-vote-rasse {
  font-size: var(--text-xs);
  color:     var(--c-text-secondary);
}

.hdm-vote-btn {
  width:      100%;
  font-size:  var(--text-xs);
  padding:    var(--space-2) var(--space-3);
  min-height: 36px;
}

/* Top-Liste */
.hdm-top-entry {
  display:       flex;
  align-items:   center;
  gap:           var(--space-3);
  padding:       var(--space-3) 0;
  border-bottom: 1px solid var(--c-border-light);
}
.hdm-top-entry:last-child {
  border-bottom: none;
}

.hdm-top-medal {
  font-size:  1.5rem;
  flex-shrink: 0;
  width:      2rem;
  text-align: center;
}

.hdm-top-av {
  width:           44px;
  height:          44px;
  border-radius:   50%;
  overflow:        hidden;
  background:      var(--c-surface-2);
  display:         flex;
  align-items:     center;
  justify-content: center;
  border:          2px solid var(--c-border);
  flex-shrink:     0;
}

.hdm-top-av-img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

.hdm-top-av-placeholder {
  font-size:   1.1rem;
  font-weight: var(--weight-bold);
  color:       var(--c-primary);
}

.hdm-top-info {
  flex:      1;
  min-width: 0;
}

.hdm-top-name {
  font-weight:   var(--weight-semibold);
  font-size:     var(--text-sm);
  color:         var(--c-text);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.hdm-top-rasse,
.hdm-top-besitzer {
  font-size: var(--text-xs);
  color:     var(--c-text-secondary);
}

.hdm-top-stimmen {
  font-size:   var(--text-sm);
  font-weight: var(--weight-bold);
  color:       var(--c-primary);
  flex-shrink: 0;
}

/* ============================================================
   FRIENDS
   ============================================================ */
.friends-search-row {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.friends-search-results {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  overflow: hidden;
}

.friend-result-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--c-border-light);
}
.friend-result-item:last-child { border-bottom: none; }

.friend-avatar {
  width:           40px;
  height:          40px;
  border-radius:   50%;
  background:      var(--c-primary-subtle);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       var(--text-base);
  font-weight:     var(--weight-bold);
  color:           var(--c-primary);
  flex-shrink:     0;
}

.friend-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--c-surface);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
}

.friend-item-name {
  flex: 1;
  font-weight: var(--weight-medium);
  color: var(--c-text);
}

.friend-item-actions {
  display: flex;
  gap: var(--space-2);
}

.friend-request-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--c-primary-subtle);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
  border: 1px solid var(--c-primary-light, var(--c-border));
}

/* ============================================================
   CHAT
   ============================================================ */
.page-container-chat {
  display:        flex;
  flex-direction: column;
  height:         100%;
  overflow:       hidden;
  padding:        0;
}

/* Conversation list */
.chat-conv-item {
  display:       flex;
  align-items:   center;
  gap:           var(--space-3);
  padding:       var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--c-border-light);
  cursor:        pointer;
  transition:    background var(--transition-fast);
}
.chat-conv-item:hover,
.chat-conv-item:active { background: var(--c-surface-2); }
.chat-conv-item.active  { background: var(--c-primary-subtle); border-left: 3px solid var(--c-primary); }

.chat-conv-avatar {
  width:           44px;
  height:          44px;
  border-radius:   50%;
  background:      var(--c-primary-subtle);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       var(--text-lg);
  font-weight:     var(--weight-bold);
  color:           var(--c-primary);
  flex-shrink:     0;
}

.chat-conv-info {
  flex:      1;
  min-width: 0;
}

.chat-conv-name {
  font-weight:   var(--weight-semibold);
  font-size:     var(--text-sm);
  color:         var(--c-text);
  margin-bottom: 2px;
}

.chat-conv-preview {
  font-size:     var(--text-xs);
  color:         var(--c-text-secondary);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.chat-conv-meta {
  display:        flex;
  flex-direction: column;
  align-items:    flex-end;
  gap:            4px;
  flex-shrink:    0;
}

.chat-conv-time {
  font-size: var(--text-xs);
  color:     var(--c-text-muted);
}

.chat-unread-badge {
  background:    var(--c-primary);
  color:         #fff;
  font-size:     var(--text-xs);
  font-weight:   var(--weight-bold);
  border-radius: var(--radius-full);
  padding:       1px 6px;
  min-width:     18px;
  text-align:    center;
}

/* Thread view */
.chat-thread {
  display:        flex;
  flex-direction: column;
  height:         100%;
  overflow:       hidden;
}

.chat-thread-header {
  display:       flex;
  align-items:   center;
  gap:           var(--space-3);
  padding:       0 var(--space-4);
  height:        56px;
  background:    var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  flex-shrink:   0;
  box-sizing:    border-box;
}

.chat-thread-partner {
  flex:        1;
  font-weight: var(--weight-semibold);
  font-size:   var(--text-base);
  color:       var(--c-text);
}

.chat-messages {
  flex:       1;
  overflow-y: auto;
  padding:    var(--space-4);
  display:    flex;
  flex-direction: column;
  gap:        var(--space-2);
}

.chat-bubble-row {
  display:   flex;
  max-width: 80%;
}
.chat-bubble-row--mine   { align-self: flex-end; flex-direction: row-reverse; }
.chat-bubble-row--theirs { align-self: flex-start; }

.chat-bubble {
  padding:       var(--space-2) var(--space-3);
  border-radius: var(--radius-lg);
  font-size:     var(--text-sm);
  line-height:   var(--leading-relaxed);
  word-break:    break-word;
  position:      relative;
}
.chat-bubble--mine {
  background:         var(--c-primary);
  color:              #fff;
  border-bottom-right-radius: 4px;
}
.chat-bubble--theirs {
  background:      var(--c-surface-2);
  color:           var(--c-text);
  border-bottom-left-radius: 4px;
}
.chat-bubble--deleted {
  font-style: italic;
  opacity:    0.6;
}

.chat-bubble-time {
  font-size: var(--text-xs);
  color:     var(--c-text-muted);
  margin-top: 2px;
  text-align: right;
}
.chat-bubble-row--theirs .chat-bubble-time { text-align: left; }

.chat-date-divider {
  text-align:  center;
  font-size:   var(--text-xs);
  color:       var(--c-text-muted);
  padding:     var(--space-2) 0;
  flex-shrink: 0;
}

.chat-input-bar {
  display:       flex;
  align-items:   flex-end;
  gap:           var(--space-2);
  padding:       var(--space-3) var(--space-4);
  background:    var(--c-surface);
  border-top:    1px solid var(--c-border);
  flex-shrink:   0;
}

.chat-input {
  flex:          1;
  border:        1.5px solid var(--c-border);
  border-radius: var(--radius-full);
  padding:       var(--space-2) var(--space-4);
  font-size:     var(--text-sm);
  font-family:   var(--font-sans);
  background:    var(--c-surface-2);
  color:         var(--c-text);
  outline:       none;
  resize:        none;
  max-height:    100px;
  overflow-y:    auto;
  line-height:   var(--leading-normal);
  transition:    border-color var(--transition-fast);
}
.chat-input:focus { border-color: var(--c-primary); }

.chat-send-btn {
  width:           40px;
  height:          40px;
  border-radius:   50%;
  background:      var(--c-primary);
  color:           #fff;
  border:          none;
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  flex-shrink:     0;
  transition:      background var(--transition-fast);
}
.chat-send-btn:hover   { background: var(--c-primary-dark); }
.chat-send-btn:disabled { opacity: 0.5; cursor: default; }

/* Chat: Kamera-Button */
.chat-photo-btn {
  width:           36px;
  height:          36px;
  border-radius:   50%;
  background:      transparent;
  color:           var(--c-text-secondary);
  border:          none;
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  flex-shrink:     0;
  transition:      color var(--transition-fast);
}
.chat-photo-btn:hover { color: var(--c-primary); }

/* Chat: Bild in Nachrichtenblase */
.chat-bubble-img {
  max-width:    100%;
  max-height:   260px;
  border-radius: var(--radius-md);
  display:      block;
  cursor:       pointer;
  object-fit:   cover;
}

/* Chat: Online-Dot */
.online-dot {
  width:         8px;
  height:        8px;
  background:    #22C55E;
  border-radius: 50%;
  display:       inline-block;
  flex-shrink:   0;
}

.chat-avatar-dot {
  position: absolute;
  bottom:   1px;
  right:    1px;
  border:   2px solid var(--c-surface);
}

/* --- Hundeprofil Avatar --- */
.dp-avatar-ring {
  width: 120px; height: 120px;
  border-radius: 50%;
  border: 3px solid var(--c-primary);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.dp-avatar-img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform-origin: center;
  pointer-events: none;
  user-select: none;
}
.dp-avatar-empty {
  background: var(--c-surface-2);
  border-color: var(--c-border);
  font-size: 3.5rem;
}
.dp-avatar-edit-btn {
  position: absolute; bottom: 4px; right: 4px;
  background: var(--c-primary); color: #fff;
  border: none; border-radius: 50%;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}

/* --- Foto-Editor Modal --- */
.photo-editor { display: flex; flex-direction: column; gap: var(--space-3); align-items: center; }
.photo-editor-preview {
  width: 200px; height: 200px;
  border-radius: 50%;
  border: 3px solid var(--c-primary);
  overflow: hidden;
  cursor: grab;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-surface-2);
}
.photo-editor-preview:active { cursor: grabbing; }
.photo-editor-preview img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform-origin: center;
  pointer-events: all;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  touch-action: none;
}
.photo-editor-empty { font-size: 5rem; color: var(--c-text-secondary); }
.photo-editor-controls { width: 100%; }

/* ------------------------------------------------------------
   Admin-Seite — Mobile-Responsive Styles
   ------------------------------------------------------------ */

/* Tab-Leiste mit Abstand nach unten */
.adm-tabs {
  margin-bottom: var(--space-5);
}

/* Filter-Zeile (Suche + Select / Suche + Checkbox) */
.adm-filter-row {
  display:         flex;
  gap:             var(--space-2);
  margin-bottom:   var(--space-4);
  flex-wrap:       wrap;
}
.adm-filter-input {
  flex:            1 1 160px;
  min-width:       0;
  padding:         var(--space-2) var(--space-3);
  border:          1.5px solid var(--c-border);
  border-radius:   var(--radius-md);
  font-size:       var(--text-sm);
  font-family:     inherit;
  background:      var(--c-surface);
  color:           var(--c-text);
}
.adm-filter-select {
  flex:            0 0 auto;
  padding:         var(--space-2) var(--space-3);
  border:          1.5px solid var(--c-border);
  border-radius:   var(--radius-md);
  font-size:       var(--text-sm);
  font-family:     inherit;
  background:      var(--c-surface);
  color:           var(--c-text);
  max-width:       140px;
}
.adm-filter-label {
  display:         flex;
  align-items:     center;
  gap:             var(--space-2);
  font-size:       var(--text-sm);
  color:           var(--c-text-secondary);
  white-space:     nowrap;
  flex-shrink:     0;
}

/* Forum-Unternavigation scrollbar auf Mobile */
.adm-subnav {
  display:                    flex;
  gap:                        var(--space-2);
  margin-bottom:              var(--space-4);
  overflow-x:                 auto;
  flex-wrap:                  nowrap;
  scrollbar-width:            none;
  -webkit-overflow-scrolling: touch;
}
.adm-subnav::-webkit-scrollbar { display: none; }
.adm-subnav .btn { flex-shrink: 0; }

/* Tabellen: scrollbarer Container + Card ohne overflow:hidden */
.adm-table-card {
  overflow: visible; /* Card-Schatten bleibt, overflow wird im Scroll-Container geregelt */
}
.adm-table-scroll {
  overflow-x:                 auto;
  -webkit-overflow-scrolling: touch;
  border-radius:              var(--radius-lg); /* für abgerundete Ecken bei overflow */
}
.adm-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       var(--text-sm);
  min-width:       480px; /* verhindert Quetschen unter diesem Wert */
}
.adm-th {
  padding:      var(--space-3) var(--space-4);
  font-weight:  var(--weight-semibold);
  color:        var(--c-text-secondary);
  white-space:  nowrap;
}
.adm-td {
  padding: var(--space-3) var(--space-4);
}

/* Job-ID unter dem Job-Namen: kürzen wenn zu lang */
.adm-job-id {
  font-size:     var(--text-xs);
  color:         var(--c-text-muted);
  font-weight:   normal;
  max-width:     180px;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

/* Trigger-Spalte in Jobs-Tabelle */
.adm-td-trigger {
  color:         var(--c-text-muted);
  font-size:     var(--text-xs);
  max-width:     160px;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

/* Monospace-Badge (Audit-Log Aktion) */
.adm-badge-mono {
  font-size:     var(--text-xs);
  padding:       2px 7px;
  border-radius: 3px;
  background:    var(--c-surface-2);
  color:         var(--c-text-secondary);
  font-family:   monospace;
  white-space:   nowrap;
}

/* Icon-only Buttons in Tabellen: 44px Touch-Target */
.adm-icon-btn {
  min-width:  44px;
  min-height: 44px;
  padding:    0;
}

/* Auf sehr kleinen Screens: Select volle Breite */
@media (max-width: 360px) {
  .adm-filter-select {
    max-width: 100%;
    flex-basis: 100%;
  }
}

.adm-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  width: 100%;
  min-width: 0;
}
@media (min-width: 480px) {
  .adm-stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .adm-stats-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}
   LOST DOG
   ============================================================ */

/* Karte für einen vermissten Hund */
.lost-card {
  display:          flex;
  gap:              var(--space-3);
  align-items:      flex-start;
  background:       var(--c-surface);
  border:           1px solid var(--c-border);
  border-left:      4px solid var(--c-danger, #e74c3c);
  border-radius:    var(--radius-md);
  padding:          var(--space-3);
  margin-bottom:    var(--space-3);
  cursor:           pointer;
  transition:       background var(--transition-fast), box-shadow var(--transition-fast);
}
.lost-card:hover {
  background:    var(--c-surface-2);
  box-shadow:    var(--shadow-sm);
}

/* Foto links in der Karte */
.lost-card-foto {
  width:         72px;
  height:        72px;
  border-radius: var(--radius-md);
  object-fit:    cover;
  flex-shrink:   0;
}

/* Platzhalter wenn kein Foto */
.lost-card-foto-placeholder {
  width:           72px;
  height:          72px;
  border-radius:   var(--radius-md);
  background:      var(--c-surface-2);
  flex-shrink:     0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       2rem;
}

/* Text-Block rechts neben dem Foto */
.lost-card-body {
  flex: 1;
  min-width: 0;
}

/* Name des vermissten Hundes */
.lost-card-name {
  font-weight:   var(--weight-semibold);
  font-size:     var(--text-base);
  margin-bottom: var(--space-1);
  display:       flex;
  align-items:   center;
  gap:           var(--space-2);
  flex-wrap:     wrap;
}

/* Kurzbeschreibung */
.lost-card-desc {
  font-size:     var(--text-sm);
  color:         var(--c-text);
  margin:        0 0 var(--space-1);
  overflow:      hidden;
  display:       -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Metadaten-Zeile (Datum, Entfernung) */
.lost-card-meta {
  font-size: var(--text-xs);
  color:     var(--c-text-secondary);
}

/* Badge "Gefunden!" — grüner Überlagerungsstreifen */
.lost-badge-gefunden {
  display:          inline-flex;
  align-items:      center;
  gap:              var(--space-1);
  background:       var(--c-success, #27ae60);
  color:            #fff;
  font-size:        var(--text-xs);
  font-weight:      var(--weight-semibold);
  padding:          2px var(--space-2);
  border-radius:    var(--radius-full);
  text-transform:   uppercase;
  letter-spacing:   .04em;
}

/* Badge "Meine Meldung" */
.lost-badge-own {
  display:       inline-flex;
  align-items:   center;
  background:    var(--c-warning-subtle, #fff3cd);
  color:         var(--c-warning-dark, #856404);
  font-size:     var(--text-xs);
  font-weight:   var(--weight-medium);
  padding:       2px var(--space-2);
  border-radius: var(--radius-full);
}

/* Entfernungs-Pill */
.lost-dist-pill {
  margin-left:   auto;
  white-space:   nowrap;
  font-size:     var(--text-sm);
  color:         var(--c-text-secondary);
}

/* Karten-Wrapper auf der Lost-Seite */
.lost-map-wrap {
  height:          280px;
  border-radius:   var(--radius-md);
  overflow:        hidden;
  background:      var(--c-surface-2);
  margin-bottom:   2px;
}

/* OSM-Attribution unter der Karte */
.lost-map-attribution {
  font-size:     10px;
  color:         var(--c-text-secondary);
  text-align:    right;
  padding:       2px var(--space-2) 0;
  margin-bottom: var(--space-4);
}

/* Info-Zeile über der Liste ("X vermisste Hunde …") */
.lost-info-text {
  font-size:     var(--text-sm);
  color:         var(--c-text-secondary);
  margin-bottom: var(--space-3);
}
   FRIENDS ACTIVITY FEED
   ============================================================ */
.fr-activity-timeline {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
}

.fr-activity-item {
  display:       flex;
  gap:           var(--space-3);
  align-items:   flex-start;
  padding:       var(--space-3) var(--space-4);
  background:    var(--c-surface);
  border-radius: var(--radius-lg);
  border:        1px solid var(--c-border);
  width:         100%;
  text-align:    left;
  font:          inherit;
}
.fr-activity-item--link {
  cursor:        pointer;
  transition:    background var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}
.fr-activity-item--link:hover,
.fr-activity-item--link:active {
  background: var(--c-surface-2);
  border-color: var(--c-primary-subtle);
}

.fr-activity-avatar-wrap {
  position:    relative;
  flex-shrink: 0;
}

.fr-activity-avatar {
  width:         40px;
  height:        40px;
  border-radius: 50%;
  object-fit:    cover;
  border:        2px solid var(--c-primary);
  display:       block;
}

.fr-activity-avatar--initial {
  background:      var(--c-primary-subtle);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-weight:     var(--weight-bold);
  color:           var(--c-primary);
  font-size:       var(--text-sm);
}

.fr-activity-icon-badge {
  position:        absolute;
  bottom:          -3px;
  right:           -3px;
  width:           18px;
  height:          18px;
  border-radius:   50%;
  background:      var(--c-primary);
  color:           #fff;
  display:         flex;
  align-items:     center;
  justify-content: center;
  border:          2px solid var(--c-surface);
}

.fr-activity-body {
  flex:       1;
  min-width:  0;
}

.fr-activity-meta {
  display:     flex;
  flex-wrap:   wrap;
  align-items: baseline;
  gap:         var(--space-1);
  margin-bottom: 2px;
}

.fr-activity-user {
  font-size:   var(--text-sm);
  font-weight: var(--weight-semibold);
  color:       var(--c-text);
}

.fr-activity-dog {
  font-size:        var(--text-xs);
  padding:          1px 6px;
  border-radius:    var(--radius-full);
  background:       var(--c-surface-2);
  color:            var(--c-text-secondary);
  white-space:      nowrap;
}

.fr-activity-text {
  font-size:     var(--text-sm);
  color:         var(--c-text-secondary);
  line-height:   1.4;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
  max-width:     100%;
}

.fr-activity-time {
  font-size:  var(--text-xs);
  color:      var(--c-text-muted);
  margin-top: 2px;
}

/* health chart extras (weight chart) */
.health-chart-title  { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--c-text); margin-bottom: var(--space-2); }
.health-chart-svg    { width: 100%; height: auto; display: block; }
.health-chart-labels { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--c-text-secondary); margin-top: var(--space-1); }
.health-chart-empty  { font-size: var(--text-sm); color: var(--c-text-muted); text-align: center; padding: var(--space-4) 0; }

/* ============================================================
   RSVP — Event-Teilnahme
   ============================================================ */
.event-rsvp-bar { display:flex; gap:var(--space-2); align-items:center; margin:var(--space-3) 0 var(--space-2); flex-wrap:wrap; }
.event-rsvp-btn { display:inline-flex; align-items:center; gap:var(--space-1); padding:6px 14px; border-radius:var(--radius); border:1.5px solid var(--c-border); background:var(--c-surface); color:var(--c-text-secondary); font-size:var(--text-sm); font-weight:500; cursor:pointer; transition:background .15s,color .15s,border-color .15s; }
.event-rsvp-btn:hover { border-color:var(--c-primary); color:var(--c-primary); }
.event-rsvp-btn.active { background:var(--c-primary); border-color:var(--c-primary); color:#fff; }
.event-attendees { font-size:var(--text-sm); color:var(--c-text-secondary); cursor:pointer; display:inline-flex; align-items:center; gap:var(--space-1); }
.event-attendees:hover { color:var(--c-primary); }
.ev-attendees-list { display:flex; flex-wrap:wrap; gap:var(--space-1); margin-top:var(--space-2); }
.ev-attendee-chip { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:999px; background:var(--c-surface-2); font-size:var(--text-xs); color:var(--c-text-secondary); }

/* ============================================================
   SERVICES / MATCHING  (Sitting & Walks Anbieter-Suche)
   ============================================================ */
.svc-matching-layout { display:flex; flex-direction:column; gap:var(--space-4); padding:var(--space-3) 0; }
.svc-own-offer { padding:var(--space-4); }
.svc-own-offer-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-3); }
.svc-own-offer-title { font-weight:var(--weight-semibold); font-size:var(--text-base); }
.svc-login-hint { font-size:var(--text-sm); color:var(--c-text-muted); }
.svc-toggle { position:relative; display:inline-block; width:44px; height:24px; cursor:pointer; }
.svc-toggle input { opacity:0; width:0; height:0; }
.svc-toggle-slider { position:absolute; inset:0; background:var(--c-border); border-radius:var(--radius-full); transition:background var(--transition-fast); }
.svc-toggle-slider::before { content:''; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:transform var(--transition-fast); box-shadow:0 1px 3px rgba(0,0,0,.2); }
.svc-toggle input:checked + .svc-toggle-slider { background:var(--c-primary); }
.svc-toggle input:checked + .svc-toggle-slider::before { transform:translateX(20px); }
.svc-offer-form { display:flex; flex-direction:column; gap:var(--space-3); }
.svc-offer-form--hidden { display:none; }
.svc-hint { color:var(--c-text-secondary); font-size:var(--text-sm); text-align:center; padding:var(--space-6) 0; }
.svc-results-list { display:flex; flex-direction:column; gap:var(--space-3); }
.svc-card { display:flex; align-items:flex-start; gap:var(--space-3); padding:var(--space-4); background:var(--c-surface); border-radius:var(--radius-lg); border:1px solid var(--c-border-light); box-shadow:var(--shadow-xs); }
.svc-card-avatar { width:44px; height:44px; border-radius:var(--radius-full); background:var(--c-primary-subtle); color:var(--c-primary); display:flex; align-items:center; justify-content:center; font-size:1.4rem; flex-shrink:0; }
.svc-card-body { flex:1; min-width:0; }
.svc-card-name { font-weight:var(--weight-semibold); margin-bottom:var(--space-1); }
.svc-card-dist { font-size:var(--text-xs); color:var(--c-text-muted); margin-bottom:var(--space-1); }
.svc-card-desc { font-size:var(--text-sm); color:var(--c-text-secondary); overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.svc-card-side { display:flex; flex-direction:column; align-items:flex-end; gap:var(--space-2); flex-shrink:0; }
.svc-card-price { font-weight:var(--weight-bold); color:var(--c-primary); font-size:var(--text-sm); }

/* ============================================================
   HELP TOOLTIP
   ============================================================ */
.by-help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--c-surface-2);
  color: var(--c-text-secondary);
  border: none;
  cursor: pointer;
  vertical-align: middle;
  margin-left: 4px;
  flex-shrink: 0;
  transition: background .15s;
}
.by-help-btn:hover { background: var(--c-primary-subtle, #e8f0fe); color: var(--c-primary); }

.by-help-tooltip {
  position: absolute;
  z-index: 9000;
  background: var(--c-text);
  color: var(--c-bg);
  font-size: var(--text-xs);
  line-height: 1.5;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  max-width: 240px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  pointer-events: none;
}
/* SVG-Icon-Variante (Phosphor) */
.empty-state-icon > svg.ph-icon,
svg.empty-state-icon {
  width:   56px;
  height:  56px;
  color:   var(--c-text-muted);
  opacity: .5;
}
.empty-state-cta {
  margin-top: var(--space-2);
}

/* ============================================================
   RATING STARS — Bewertungskomponente
   ============================================================ */
.rating-display {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}
.rating-stars-avg {
  display: flex;
  gap: 2px;
}
.rating-star {
  font-size: 1.25rem;
  line-height: 1;
  cursor: default;
  user-select: none;
  position: relative;
}
.rating-star--filled { color: #f59e0b; }
.rating-star--half {
  color: #e5e7eb;
}
.rating-star--half::before {
  content: '★';
  color: #f59e0b;
  position: absolute;
  left: 0;
  width: 50%;
  overflow: hidden;
  display: inline-block;
}
.rating-star--empty { color: #e5e7eb; }
.rating-star--pick {
  cursor: pointer;
  font-size: 1.6rem;
  transition: transform .1s;
}
.rating-star--pick:hover,
.rating-star--pick:active { transform: scale(1.15); }
.rating-avg-label {
  font-size: var(--text-sm);
  color: var(--c-text-secondary);
}
.rating-rate-btn {
  color: var(--c-primary);
  padding: var(--space-1) var(--space-2);
}
.rating-widget {
  background: var(--c-surface-2);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-top: var(--space-2);
  border: 1px solid var(--c-border-light);
}
.rating-pick-stars {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.rating-kommentar {
  font-size: var(--text-sm);
}

/* ------------------------------------------------------------
   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: 1fr;
  gap:                   var(--space-4);
}

@media (min-width: 768px) {
  .wb-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1200px) {
  .wb-cards { grid-template-columns: repeat(3, 1fr); }
}

.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:      var(--c-text-secondary, #6b7280);
  color:           #fff;
  font-size:       var(--text-sm);
  text-align:      center;
  padding:         var(--space-2) var(--space-4);
  pointer-events:  none;
  letter-spacing:  0.01em;
}