/* ux.css – letzte CSS-Datei, überschreibt gezielt */
:root{
  --space-1:8px; --space-2:16px; --space-3:24px; --space-4:32px;
  --text-muted:#55657a;               /* ≥ 4.5:1 auf Weiß und #f1f5f9 */
  --focus-ring:0 0 0 3px rgba(2,132,199,.45);
}
body{ font-variant-numeric:tabular-nums; }
.num{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }

/* Raster 8/16/24 */
.card{ padding:var(--space-3); }
.card-grid{ gap:var(--space-3); margin-top:var(--space-3); }
.row{ gap:var(--space-2); margin-top:var(--space-2); }
.mt-12{ margin-top:var(--space-2); }

/* Utilities (ersetzen Inline-Styles) */
.flex{display:flex}.flex-between{display:flex;justify-content:space-between;align-items:center}
.flex-wrap{flex-wrap:wrap}.gap-1{gap:var(--space-1)}.gap-2{gap:var(--space-2)}
.mt-1{margin-top:var(--space-1)}.mt-2{margin-top:var(--space-2)}.mt-3{margin-top:var(--space-3)}
.text-right{text-align:right}.text-mono{font-family:var(--font-mono)}

/* Fokus */
:where(a,button,summary,[tabindex]):focus-visible{ outline:3px solid var(--color-info); outline-offset:2px; border-radius:6px; }
:where(input,select,textarea):focus-visible{ box-shadow:var(--focus-ring); }

/* Solider Danger-Button für Lösch-Dialoge */
.btn--danger-solid{ background:var(--color-danger)!important; border:1px solid var(--color-danger)!important; color:#fff!important; }
.btn--danger-solid:hover{ background:#b91c1c!important; }

/* Skeleton */
.skeleton{ background:linear-gradient(90deg,#e2e8f0 25%,#f1f5f9 37%,#e2e8f0 63%); background-size:400% 100%; animation:skeleton 1.4s ease infinite; border-radius:8px; }
.skeleton--row{height:44px}.skeleton--tile{height:120px}
.skeleton-stack{ display:grid; gap:var(--space-1); }
@keyframes skeleton{ 0%{background-position:100% 50%} 100%{background-position:0 50%} }

/* Breadcrumbs */
.breadcrumbs{ margin:0 0 var(--space-2); font-size:.85rem; }
.breadcrumbs ol{ display:flex; flex-wrap:wrap; gap:var(--space-1); list-style:none; margin:0; padding:0; color:var(--text-muted); }
.breadcrumbs li+li::before{ content:"/"; margin-right:var(--space-1); opacity:.6; }
.breadcrumbs a{ color:var(--text-secondary); text-decoration:none; }
.breadcrumbs a:hover{ color:var(--color-info); text-decoration:underline; }
.breadcrumbs [aria-current]{ font-weight:700; color:var(--text-primary); }

/* Glocke */
.header-bell{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; color:var(--text-secondary); text-decoration:none; }
.header-bell__badge{ position:absolute; top:4px; right:2px; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--color-danger); color:#fff; font-size:.7rem; font-weight:800; display:flex; align-items:center; justify-content:center; }

/* Untere Tab-Leiste (nur mobil) */
.tabbar{ display:none; }
@media (max-width:900px){
  .tabbar{ display:grid; grid-template-columns:repeat(4,1fr); position:fixed; left:0; right:0; bottom:0; z-index:1000; background:rgba(255,255,255,.96); backdrop-filter:blur(10px); border-top:1px solid var(--tech-border); padding-bottom:env(safe-area-inset-bottom); }
  .tabbar__item{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:56px; font-size:.72rem; font-weight:600; color:var(--text-secondary); text-decoration:none; background:transparent; border:0; border-radius:0; box-shadow:none; }
  .tabbar__item:hover{ background:#f1f5f9; }
  .tabbar__item i{ font-size:1.15rem; }
  .tabbar__item[aria-current="page"]{ color:var(--color-info); }
  body:has(.tabbar){ padding-bottom:calc(72px + env(safe-area-inset-bottom)); }
  .app-header__burger{ display:none; }
  .cookie-banner{ bottom:72px; }
}

/* Tabellen mobil als Karten (data-cards setzt app.js) */
@media (max-width:700px){
  .table[data-cards], .table[data-cards] tbody, .table[data-cards] tr, .table[data-cards] td{ display:block; width:100%; }
  .table[data-cards] thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .table[data-cards] tbody tr{ background:#fff; border:1px solid var(--tech-border); border-radius:12px; margin-bottom:var(--space-2); padding:var(--space-1) var(--space-2); box-shadow:var(--shadow); }
  .table[data-cards] td{ display:flex; justify-content:space-between; align-items:center; gap:var(--space-2); border:0!important; padding:6px 0!important; text-align:right!important; }
  .table[data-cards] td::before{ content:attr(data-label); flex:0 0 38%; text-align:left; font-weight:700; font-size:.78rem; text-transform:uppercase; color:var(--text-muted); }
  .table[data-cards] td[data-label=""]::before, .table[data-cards] td[colspan]::before{ display:none; }
  .table-wrap:has(> .table[data-cards]){ border:0; box-shadow:none; background:transparent; overflow:visible; }
}

/* Touch-Ziele */
@media (pointer:coarse){
  button, a.btn, select, .nav-dd__item{ min-height:44px; }
  .btn--small{ min-height:44px; min-width:44px; padding-inline:12px; }
  input:where(:not([type=checkbox]):not([type=radio])){ min-height:44px; }
  input[type=checkbox], input[type=radio]{ width:24px; height:24px; }
}

/* Dashboard-Kacheln */
.tile{ display:flex; flex-direction:column; justify-content:space-between; }
.tile__head{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:var(--space-2); }
.fav-toggle{ color:var(--text-muted); padding:4px; }
.fav-toggle:hover, .fav-toggle.is-fav{ color:#d97706; }
.is-tile-hidden{ display:none; }
.is-customizing [data-module-key]{ cursor:pointer; outline:2px dashed var(--color-info); outline-offset:-2px; }
.is-customizing .is-tile-hidden{ display:block; opacity:.4; }

/* Globale Suche */
.search-results{ position:absolute; top:100%; left:0; right:0; z-index:100; margin-top:var(--space-1); padding:var(--space-2); max-height:400px; overflow-y:auto; background:#fff; border:1px solid var(--tech-border); border-radius:12px; box-shadow:var(--shadow-hover); }
.search-results[hidden]{ display:none; }
.sr-title{ display:flex; align-items:center; gap:6px; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); margin-bottom:6px; }
.sr-item{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; text-decoration:none; color:inherit; min-height:44px; }
.sr-icon{ width:28px; height:28px; border-radius:6px; background:rgba(2,132,199,.1); display:flex; align-items:center; justify-content:center; color:var(--color-info); flex-shrink:0; }
.sr-main{ flex:1; min-width:0; font-weight:600; font-size:.9rem; }
.sr-sub{ font-size:.75rem; color:var(--text-muted); font-weight:400; }

/* Wochen-Timeline */
.timeline{ list-style:none; margin:0; padding:0; display:grid; gap:var(--space-1); }
.timeline__day{ display:grid; grid-template-columns:72px 1fr; gap:var(--space-1); align-items:start; padding:6px 0; border-bottom:1px solid var(--tech-border); }
.timeline__day:last-child{ border-bottom:0; }
.timeline__date{ font-weight:700; font-size:.85rem; }
.timeline__items{ display:flex; flex-wrap:wrap; gap:6px; }

/* Countdown und Bestand (Vereinsseite) */
.countdown__title{ margin:0 0 4px; font-weight:700; }
.countdown__value{ margin:0 0 4px; font-family:var(--font-mono); font-size:1.6rem; font-weight:800; color:var(--color-info); }
.stock-badge{ display:inline-flex; margin-left:8px; padding:2px 8px; border-radius:999px; font-size:.75rem; font-weight:700; background:#dcfce7; color:#15803d; }
.stock-badge--low{ background:#fef3c7; color:#b45309; }
.stock-badge--out{ background:#fee2e2; color:#b91c1c; }

.confirm-text{white-space:pre-wrap;color:var(--text-primary)}

/* Bewegung reduzieren */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
}