@charset "utf-8";

:root{
  --fg:#111; --muted:#667; --bg:#fff; --card:#fafafa; --line:#eee; --acc:#0a68ff;
  /* Responsiver, aber nie kleiner als optisch groß (≥16px) */
  --radius-card: clamp(16px, 2.2vmin, 22px);
  --rad: var(--radius-card);
  --gap-cards: 16px;
  /* Header-Höhe für Loader-Offset */
  --header-h: 80px;
  /* Glass additions */
  --glass-bg: rgba(255,255,255,0.72);
  --glass-border: rgba(255,255,255,0.9);
  --glass-blur: saturate(180%) blur(16px);
  /* Card spacing */
  --gap-cards: 16px;
  --shadow-1: 0 14px 44px rgba(13,20,40,0.16);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.85);
  --bg-gradient: radial-gradient(1400px 900px at 10% -10%, #f0f9ff 0%, #f4f1ff 45%, #fff3f9 70%, #f5fbff 100%);
  /* Loader Background (Light) */
  --loader-bg: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.78));
}
/* Während des ersten Paints Blur reduzieren (wird per JS entfernt) */
html[data-initial='1']{
  --glass-blur: saturate(130%) blur(6px);
}
/* Zusätzlicher Tablet/Laptop-Breakpoint: 3 Spalten */
@media screen and (min-width: 1024px) and (max-width: 1199px) {
  .grid { grid-template-columns: repeat(3, 1fr) !important; }
}

@media (prefers-color-scheme: dark) {
  :root{
    --fg:#e6ecff; --muted:#a6b0cf; --bg:#0b1228; --card: rgba(255,255,255,0.06); --line: rgba(255,255,255,0.12);
    --glass-bg: rgba(255,255,255,0.08);
    --glass-border: rgba(255,255,255,0.22);
    --glass-blur: saturate(180%) blur(18px);
    --shadow-1: 0 10px 30px rgba(0,0,0,0.35);
    --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.25);
    --bg-gradient: radial-gradient(1200px 800px at 10% 0%, #0f172a 0%, #0b1228 35%, #070d1f 70%, #060a18 100%);
    /* Loader Background (Dark) */
    --loader-bg: rgba(12,16,24,0.65);
    /* gleiche Abstände im Dark-Mode */
    --gap-cards: 14px;
  }
}
/* Performance optimizations */
*{box-sizing:border-box;}
img{will-change:transform;image-rendering:optimizeSpeed;}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font:15px/1.5 system-ui,Segoe UI,Roboto,Arial}

/* GPU-Beschleunigung für bessere Performance */
.card, .btn, .gps-indicator, .gps-signal {
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Optimierte Animationen */
.content-fade-in {
  animation: fadeInUp 0.3s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
body{background-image:var(--bg-gradient);background-attachment:fixed;padding-bottom:calc(var(--footer-h, 50px) + env(safe-area-inset-bottom))}
@supports (height: 100svh) {
  body{min-height:100svh;}
}
.wrap{max-width:1100px;margin:0 auto;padding:16px}
.wrap-narrow{max-width:1200px;margin:0 auto;padding:16px}
/* Responsivere Außenabstände, damit Rundungen sichtbar bleiben */
@media (max-width: 1024px) {
  .wrap, .wrap-narrow{
    padding-left: clamp(16px, 5vw, 24px);
    padding-right: clamp(16px, 5vw, 24px);
  }
}
/* iOS Safe-Area berücksichtigen */
@supports (padding: max(0px)) {
  .wrap, .wrap-narrow{
    padding-left: max(clamp(16px, 5vw, 24px), env(safe-area-inset-left));
    padding-right: max(clamp(16px, 5vw, 24px), env(safe-area-inset-right));
  }
}
.header{display:flex;align-items:center;justify-content:space-between;padding-top:12px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: 18px;
  padding: 12px 16px;
  box-shadow: var(--shadow-1), var(--shadow-inset);
  position: sticky;
  top: 0;
  z-index: 1100; /* Über dem Loader */
}
.brand{display:flex;gap:10px;align-items:center}
.logo{font-size:28px}
.title{font-weight:700;font-size:20px}
.subtitle{font-size:13px;color:var(--muted);margin-top:2px}
.nav a{margin-left:14px;text-decoration:none;color:var(--fg)}
.nav a[aria-current="page"]{font-weight:600}
/* Desktop-only Link (wie Finder, nur umgekehrt) */
@media (max-width: 767px) {
  .desktop-only-link {
    display: none !important;
  }
}
.muted{color:var(--muted)}
/* Controls */
.controls{display:flex;gap:10px;align-items:center;margin:10px 0}
.controls input[type=search],
.controls input[type=text],
.controls select,
input[type=search], input[type=text], select, textarea{
  flex:1;
  padding:10px 12px;
  border:1px solid var(--glass-border);
  border-radius:999px;
  background: var(--glass-bg);
  color: var(--fg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-inset);
}
::placeholder { color: var(--muted); opacity: 1; }
input::placeholder, textarea::placeholder { color: var(--muted); }
input, select, textarea { color: var(--fg); }

/* Critical Performance CSS */
.content-fade-in {
  animation: contentFadeIn 0.4s ease-out;
}

@keyframes contentFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Grüner Apfel Loader Animation */
.apple-loader {
  position: fixed;
  top: var(--header-h); /* Platz für Navigation */
  left: 0;
  width: 100%;
  height: calc(100% - var(--header-h));
  /* Hintergrund über Variable (passt sich Light/Dark automatisch an) */
  background: var(--loader-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000; /* Unter Navigation */
  border: 1px solid rgba(0,0,0,0.08);
  backdrop-filter: blur(14px) saturate(160%);
  transform: translateZ(0);
  box-shadow: 0 10px 30px rgba(13,20,40,0.12), inset 0 1px 0 rgba(255,255,255,0.6);
}

.apple-animation {
  position: relative;
  width: 76px; height: 76px;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(255,255,255,0.6), rgba(255,255,255,0.2));
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
  margin-bottom: 16px;
}
.apple-animation::before{content:'🍏';position:absolute;inset:0;display:grid;place-items:center;font-size:34px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2))}
/* Ring im Tagmodus etwas dunkler für besseren Kontrast */
.apple-animation::after{content:'';position:absolute;inset:8px;border-radius:50%;border:2px solid rgba(0,0,0,0.22);border-top-color:transparent;animation: spin 1.2s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

@keyframes appleGrow {
  0%, 100% {
    transform: scale(1) translateZ(0);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.3) translateZ(0);
    opacity: 1;
  }
}

.loading-text {
  font-size: 17px;
  color: var(--fg);
  font-weight: 600;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
  animation: fadeInOut 2s ease-in-out infinite;
}

@keyframes fadeInOut {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.apple-loader.fade-out {
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

/* Performance Optimierungen */
.wrap {
  will-change: transform;
  contain: layout;
}

.grid {
  will-change: contents;
}

.card {
  /* Keine 3D-Forcierung, damit iOS Safari sauber clippt */
  will-change: auto;
  backface-visibility: hidden;
  isolation: isolate; /* sauberes Layering für Schatten/Overflow */
}
/* Ladeoptimierung deaktiviert: Karten immer sichtbar rendern */
@supports (content-visibility: auto) {
  .card { content-visibility: visible; contain-intrinsic-size: auto; }
}

.card:hover {
  transform: translateY(-2px);
  transition: transform 0.15s ease-out;
}

/* Lazy Loading Placeholder */
img[data-src] {
  background: #f0f0f0;
  min-height: 200px;
  display: block;
}

img[data-src]::before {
  content: '🍏';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  opacity: 0.5;
}

/* Schnellere Animationen */
* {
  transition-duration: 0.15s !important;
}

/* Mobile: 1-spaltig, Stil bleibt identisch (keine Reduktion von Radius/Schatten/Glas) */
@media (max-width: 767px) {
  .grid { grid-template-columns: 1fr !important; }
}


/* Dark-Mode-Overrides für Loader – bleibt wie bisher cool */
@media (prefers-color-scheme: dark) {
  .apple-loader{
    background: rgba(12,16,24,0.65);
    border-color: rgba(255,255,255,0.18);
    box-shadow: 0 10px 30px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.2);
  }
  .apple-animation{
    background: linear-gradient(145deg, rgba(255,255,255,0.2), rgba(255,255,255,0.08));
    border-color: rgba(255,255,255,0.2);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
  }
  .apple-animation::after{
    border-color: rgba(255,255,255,0.45);
    border-top-color: transparent;
  }
  .loading-text{ text-shadow: none; }
  /* Karten/Kacheln im Dark-Mode deutlich abheben */
  .card{
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.22);
    box-shadow: 0 8px 30px rgba(0,0,0,0.45), var(--shadow-inset);
  }
}

/* =============================================
   Finder – Dark-Mode Lesbarkeit & Geschwindigkeit
   (keine Änderungen am Präzisionsprozess!)
   ============================================= */
@media (prefers-color-scheme: dark) {
  /* Texte klarer */
  .finder h1,
  .finder p,
  .finder .card-title,
  .finder #status,
  .finder #nearby-title { color: var(--fg); }

  /* Glas-Container im Finder mit etwas geringerem Blur für Performance
     und höherem Kontrast für bessere Lesbarkeit */
  .finder .large-card,
  .finder .mini-card,
  .finder .proximity-hint,
  .finder .gps-indicator,
  .finder .usage-chip,
  .finder .chip-kw,
  .finder .pill {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.28) !important;
    -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
    backdrop-filter: blur(12px) saturate(160%) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.18) !important;
  }

  /* Buttons klar unterscheiden */
  .finder .btn.glass {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.24) !important;
    color: var(--fg) !important;
  }
  .finder .btn.primary {
    background: #3b82f6 !important; /* kräftiges Blau für Dark-Mode */
    border-color: #3b82f6 !important;
    color: #fff !important;
  }
  .finder .btn.primary.glass {
    background: rgba(59,130,246,0.22) !important;
    border-color: rgba(59,130,246,0.55) !important;
    color: #fff !important;
  }

  /* Chips im Finder mit gutem Kontrast im Dark-Mode */
  .finder .badge,
  .finder .usage-chip,
  .finder .chip-kw,
  .finder .pill {
    color: var(--fg) !important;
  }
  .finder .chip-kw-soon,
  .finder .badge-soon { color: #111 !important; }
}

/* Finder – GPS/Satelliten-Visualisierung (Dark-Mode: besser lesbar) */
@media (prefers-color-scheme: dark) {
  /* Container für Signal-Indikator */
  .gps-indicator{
    background: rgba(18,22,28,0.82) !important;
    border: 1px solid rgba(255,255,255,0.28) !important;
    color: var(--fg) !important;
  }
  /* Signal-Zeile */
  .gps-signal{ display:flex; align-items:center; gap:10px; }
  .gps-icon{ filter: drop-shadow(0 1px 1px rgba(0,0,0,0.4)); }
  .gps-text{ color: var(--fg) !important; font-weight: 700; }
  /* Balkenanzeige mit gut sichtbaren inaktiven Balken */
  .gps-bars{ display:flex; gap:4px; }
  .gps-bars .bar{
    width: 10px; height: 18px; border-radius: 3px;
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.22);
  }
  .gps-bars .bar.active{
    background: linear-gradient(180deg,
      color-mix(in oklab, var(--signal-color, #22c55e) 92%, white 8%),
      color-mix(in oklab, var(--signal-color, #22c55e) 88%, black 6%)
    );
    border-color: color-mix(in oklab, var(--signal-color, #22c55e) 86%, white 12%);
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.12) inset,
      0 2px 10px rgba(0,0,0,0.45),
      0 0 10px color-mix(in oklab, var(--signal-color, #22c55e) 55%, transparent 45%);
  }
  /* Hinweis-Box mit Satelliten-Icon */
  .gps-hint{
    background: rgba(18,22,28,0.78) !important;
    border: 1px solid rgba(255,255,255,0.28) !important;
    color: var(--fg) !important;
  }
  .gps-hint .hint-text strong{ color:#fff; }
}

/* Smooth Transitions */
.fade-in{animation:fadeIn 0.3s ease-out;}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

/* Loading States */
.loading{opacity:0.6;pointer-events:none;}
.loaded{opacity:1;transition:opacity 0.3s ease;}

/* Enhanced Mobile */
@media(max-width:767px){
  .wrap{padding:12px;}
  :root{ --header-h: 112px; }
  .header{flex-direction:column;gap:12px;text-align:center;}
  .nav{display:flex;gap:16px;justify-content:center;}
  .apple-animation{font-size:48px;}
  /* Fallback: falls Grid-Gap in seltenen Browsern nicht greift */
  #grid.grid > * { margin-bottom: var(--gap-cards); }
}
.select{display:flex;align-items:center;gap:6px;border:1px solid var(--glass-border);padding:6px 8px;border-radius:var(--rad);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-inset);
}
.select select{border:none;outline:none;background:transparent}
.grid{display:grid;grid-template-columns:1fr;gap:var(--gap-cards) !important;row-gap:var(--gap-cards) !important;column-gap:var(--gap-cards) !important;grid-row-gap:var(--gap-cards) !important;grid-column-gap:var(--gap-cards) !important;margin-top:16px;width:100%}

/* Tablet: 2-spaltig */
@media screen and (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--gap-cards) !important;
  }
}

/* Desktop: 4-spaltig - niedrigerer Breakpoint */
@media screen and (min-width: 900px) {
  .grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: var(--gap-cards) !important;
    max-width: none !important;
    width: 100% !important;
  }
  
  /* Sicherstellen dass Container breit genug ist */
  .wrap {
    max-width: 1200px !important;
    width: 100% !important;
  }
  
  /* Force grid display */
  #grid.grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
  }
}
.card{display:block;border:1px solid var(--glass-border);border-radius:var(--rad);
  background: linear-gradient(145deg, rgba(255,255,255,0.16), rgba(255,255,255,0.06));
  text-decoration:none;color:inherit;overflow:hidden;transition:transform .08s ease, box-shadow .22s ease, border-color .22s ease;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  /* kräftigerer 3D-Look: kombinierte Schattenebenen */
  box-shadow: 0 2px 0 rgba(255,255,255,0.9) inset, var(--shadow-1), 0 6px 18px rgba(13,20,40,0.08);
}
.card:hover{transform:translateY(-3px)}
.card img{
  width:100%;
  display:block;
  background:#eee;
  object-fit:cover;
  aspect-ratio: 16 / 9; /* Gleiches Seitenverhältnis wie Desktop */
  transform: translateZ(0); /* iOS: stabileres Clipping beim Scrollen */
}
.card-body{padding:16px; position: relative;} /* konsistent auf allen Breakpoints */

/* Klick-Hinweis Icon - Design-optimiert */
.card::after {
  content: '';
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='4' y='11' width='12' height='2' rx='1' fill='%230a68ff'/%3E%3Cpath d='M14 8l4 4-4 4' stroke='%230a68ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.6;
  transition: all 0.3s ease;
  z-index: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}

.card:hover::after {
  opacity: 1;
  transform: translateX(2px);
  filter: drop-shadow(0 2px 4px rgba(10, 104, 255, 0.3));
}
/* Feste Mindesthöhen für Karten, um Layout-Shifts zu vermeiden */
@media (max-width: 767px){
  .card{ min-height: 320px; }
}
@media (min-width: 768px) and (max-width: 1023px){
  .card{ min-height: 340px; }
}
@media (min-width: 1024px){
  .card{ min-height: 360px; }
}
.badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.badge{
  font-size:12px;
  padding:4px 10px;
  border-radius:999px;
  background: var(--glass-bg);
  border:1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-inset);
  color: var(--fg);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.badge.tag{background: var(--glass-bg); border-color: var(--glass-border)}
.footer{display:flex;justify-content:space-between;gap:10px;margin:18px 0;border-top:1px solid var(--line);padding-top:12px}

/* Baum-Bildkacheln (baum.html) – zentral und robust */
.tree-image-item{
  position: relative;
  display: block;
  width: 100%;
  border-radius: var(--rad) !important;
  overflow: hidden !important;
  background: linear-gradient(145deg, rgba(255,255,255,0.14), rgba(255,255,255,0.05));
  border: 1px solid var(--glass-border);
  box-shadow: 0 8px 24px rgba(13,20,40,0.16), var(--shadow-inset);
}
.tree-image-item--hero{ aspect-ratio: 4 / 3; }
.tree-image-item--tree,
.tree-image-item--cut{ aspect-ratio: 4 / 3; }
.tree-image-img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.tree-image-item:hover .tree-image-img{ transform: scale(1.02); transition: transform .2s ease; }
.tree-image-item .caption{
  position:absolute;left:0;right:0;bottom:0;
  background: linear-gradient(transparent, rgba(0,0,0,.7));
  color:#fff;padding:8px 10px;font-weight:600;line-height:1.2;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* Navigations-Pill neben KW-Badge */
.tree-header .tree-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.nav-pill{font-size:14px;padding:8px 12px;font-weight:700}
@media (max-width: 767px){
  .tree-header .tree-meta{gap:14px}
  .nav-pill{font-size:16px;padding:10px 14px}
}

/* Glass-styled red X for non-bearing trees */
.bearing-x{
  display:inline-grid;place-items:center;vertical-align:middle;margin-left:8px;
  width:26px;height:26px;border-radius:999px;
  color:#dc2626;font-weight:900;font-size:18px;line-height:1;
  background: var(--glass-bg);
  border:1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-inset);
}

.info-pills{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:var(--glass-bg);
  border:1px solid var(--glass-border);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--shadow-inset);
  font-size:12px;color:var(--fg)}
.pill .dot{width:8px;height:8px;border-radius:50%;background:#16a34a;display:inline-block}
.pill a{color:inherit;text-decoration:none}

/* Inline Glas-Pin Icon (für "Navigiere zu …") */
.pin-ico{display:inline-block;line-height:0;vertical-align:middle}
.pin-ico svg{width:14px;height:14px;display:block;filter:drop-shadow(0 1px 1px rgba(0,0,0,0.2))}

.map{width:100%;height:70vh}

/* Google Maps InfoWindow – Glas-Design */
.map-iw{display:flex;gap:10px;align-items:flex-start;padding:12px;min-width:240px;
  background: rgba(255,255,255,0.85);
  border:1px solid rgba(0,0,0,0.12);
  border-radius: 14px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.18);
  color: var(--fg);
}
.map-iw img{flex:0 0 auto;width:56px;height:56px;border-radius:10px;background:#f2f2f2;object-fit:cover;object-position:center;border:1px solid var(--glass-border)}
.map-iw-title{font:600 14px/1.3 system-ui;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px;margin:0 0 6px 0;color:var(--fg)}
.map-iw-meta{font:400 12px/1.4 system-ui;color:var(--muted);margin:0 0 6px 0}
.map-iw-btn{display:inline-block;border:1px solid var(--glass-border);border-radius:10px;padding:6px 9px;color:var(--fg);text-decoration:none;font-size:13px;background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}

/* Entfernt das weiße Standard-Außengehäuse des Google InfoWindow */
.gm-style .gm-style-iw-c{background:transparent !important;box-shadow:none !important;border-radius:0 !important;padding:0 !important}
.gm-style .gm-style-iw-d{overflow:visible !important}
.gm-style .gm-style-iw-tc{display:none !important}


/* Dark Mode: milchiger, kräftigere Konturen für bessere Lesbarkeit */
@media (prefers-color-scheme: dark) {
  .map-iw{
    background: rgba(18,22,28,0.78);
    border-color: rgba(255,255,255,0.28);
    box-shadow: 0 8px 30px rgba(0,0,0,0.5);
  }
  .map-iw img{background:#1f2937;border-color:rgba(255,255,255,0.18)}
  .map-iw-btn{background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.2)}
}

/* Mobile: Karte auch auf weißer Fläche */
@media (max-width: 767px) {
  .map {
    height: 60vh;
    margin-bottom: 20px;
  }
  
  .fullmap .map {
    height: calc(100vh - 120px);
  }
}

/* Dark Mode Kontrast: Gelbe Chips mit weißer Schrift */
@media (prefers-color-scheme: dark) {
  .badge-soon { color: #fff !important; }
  .chip-kw-soon { color: #fff !important; }
  ::placeholder { color: #a8b3bf; }
  input::placeholder, textarea::placeholder { color: #a8b3bf; }
}

/* Light Mode: Chips stärker glasig und kontrastreicher */
@media (prefers-color-scheme: light) {
  /* Karten im Light-Mode wieder deutlich glasig/3D */
  .card{
    background: rgba(255,255,255,0.88) !important;
    border-color: rgba(0,0,0,0.12) !important;
    box-shadow: 0 16px 48px rgba(13,20,40,0.16), 0 6px 18px rgba(13,20,40,0.08), inset 0 1px 0 rgba(255,255,255,0.9) !important;
    backdrop-filter: blur(18px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
  }
  .badge,
  .usage-chip,
  .chip-kw,
  .pill {
    background: rgba(255,255,255,0.88) !important;
    border-color: rgba(0,0,0,0.12) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 2px 8px rgba(13,20,40,0.08) !important;
    backdrop-filter: blur(18px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
  }
}
  .badge-ripe,
  .chip-kw-ripe {
    /* Fallback für Browser ohne color-mix */
    border-color: #22c55e !important;
    border-color: color-mix(in hsl, #22c55e 75%, white 20%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 1px 6px rgba(34,197,94,0.15) !important;
  }
  .badge-soon,
  .chip-kw-soon {
    /* Fallback für Browser ohne color-mix */
    border-color: #eab308 !important;
    border-color: color-mix(in hsl, #eab308 75%, white 20%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 1px 6px rgba(234,179,8,0.15) !important;
  }
/* Mobile-Lite: Weniger Blur für bessere Performance auf sehr kleinen Geräten */
@media (max-width: 420px) {
  :root { --glass-blur: blur(3px); }
}
.map-full{height:80vh;border-radius:12px;overflow:hidden}
.obst-pin{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:#ffffffcc;border:2px solid #222;box-shadow:0 1px 6px rgba(0,0,0,.25)}
.obst-pin .num{font:700 14px system-ui,-apple-system,Segoe UI,Roboto,Arial}
.obst-tip{font:700 14px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial;color:#111;background:#fff;border:1px solid #222;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,.18);padding:6px 10px}

.back{display:inline-block;margin:8px 0 12px;text-decoration:none}
.detail{display:grid;grid-template-columns:2fr 1fr;gap:18px}
@media (max-width:900px){ .detail{grid-template-columns:1fr} .map{height:300px} }
.hero{width:100%;height:auto;border-radius:var(--rad);border:1px solid var(--line)}
.media-2col{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.media{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;text-decoration:none;color:inherit}
.media img{width:100%;height:220px;object-fit:cover;display:block;background:#eee}
.media .caption{font-size:12px;padding:6px 8px;color:var(--muted)}
@media (max-width:900px){ .media-2col{grid-template-columns:1fr} }

.facts{list-style:none;padding:0;margin:10px 0 0}
.facts li{padding:3px 0}
.links a{display:inline-block;margin-right:8px}
.history{margin-top:12px}
.table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--glass-border);background:var(--glass-bg);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-radius:12px;overflow:hidden;color:var(--fg)}
.table td{border-top:1px solid var(--glass-border);padding:8px 10px;color:var(--fg)}
.table tr:nth-child(odd) td{background:rgba(255,255,255,0.04)}
@media (prefers-color-scheme: dark){
  .table tr:nth-child(odd) td{background:rgba(255,255,255,0.03)}
}

/* Buttons (fix: avoid default blue/purple links) */
.detail-nav .btn, .detail-nav .btn:visited,
.btn, .btn:visited{display:inline-block;color:#111;text-decoration:none}
.btn{padding:8px 12px;border-radius:999px;border:1px solid var(--glass-border);background:var(--glass-bg);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--shadow-inset);color:var(--fg)}
.btn.large{ padding:14px 22px; font-size:18px; font-weight:700; }
.btn.glass{ background: var(--glass-bg); border:1px solid var(--glass-border); color: var(--fg); }
.btn.primary{ background: var(--acc); border-color: transparent; color: #fff; }
.btn:hover{transform:translateY(-1px);}
.btn.ghost{background:transparent;border:1px dashed var(--glass-border)}

.detail-nav{display:flex;gap:10px;margin:8px 0 12px}

/* Reifekalender */
.calendar{display:flex;flex-direction:column;gap:14px;margin-top:10px}
html:has(.calendar), 
body:has(.calendar) {
  scroll-behavior: smooth;
  overscroll-behavior-y: contain;
}
.calendar{overscroll-behavior: contain}
.kw-nav{
  display:flex;gap:8px;overflow-x:auto;padding:8px 10px;position:sticky;top:calc(var(--header-h, 80px) + 6px);z-index:6;
  background: linear-gradient(145deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06));
  border:1px solid rgba(255,255,255,0.4);
  border-radius: calc(var(--rad) + 6px);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 6px 24px rgba(13,20,40,0.12), inset 0 1px 0 rgba(255,255,255,0.55);
}
.kw-nav::-webkit-scrollbar{display:none}
.kw-btn{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:34px;padding:0 12px;
  border:1px solid rgba(255,255,255,0.7);border-radius:999px;
  background: linear-gradient(145deg, rgba(255,255,255,0.28), rgba(255,255,255,0.10));
  backdrop-filter: var(--glass-blur);-webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 6px 16px rgba(13,20,40,0.12), inset 0 1px 0 rgba(255,255,255,0.6);
  font-weight:800; color: var(--fg); text-decoration: none; cursor: pointer;
  transform: translateZ(0);
}
.kw-btn[aria-current="true"], .kw-btn.active{
  background: linear-gradient(145deg, rgba(96,162,255,0.95), rgba(48,128,255,0.85));
  border-color: transparent; color:#fff;
  box-shadow: 0 10px 20px rgba(48,128,255,0.25), inset 0 1px 0 rgba(255,255,255,0.7);
}
.kw-btn:hover{transform:translateY(-1px) scale(1.01)}
.kw-row{border:1px solid var(--glass-border);border-radius:var(--rad);overflow:hidden;background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--shadow-inset);margin:6px 0;scroll-margin-top:calc(var(--header-h, 80px) + var(--nav-h, 0px) + 8px)}
.kw-head{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;background:var(--glass-bg);border-bottom:1px solid var(--glass-border)}
.kw-head{ min-height: 48px; }
.kw-chip{
  font-weight:600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(255,255,255,0.28), rgba(255,255,255,0.10));
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 6px 16px rgba(13,20,40,0.12), inset 0 1px 0 rgba(255,255,255,0.6);
  color: var(--fg);
  text-decoration: none;
  cursor: pointer;
  transform: translateZ(0);
  transition: all 0.2s ease;
  white-space: nowrap;
  font-size: 14px;
  line-height: 1;
}

.kw-chip:hover {
  transform: translateY(-1px) scale(1.02);
  background: linear-gradient(145deg, rgba(255,255,255,0.35), rgba(255,255,255,0.15));
  box-shadow: 0 8px 20px rgba(13,20,40,0.15), inset 0 1px 0 rgba(255,255,255,0.7);
}

.kw-chip.active {
  background: linear-gradient(145deg, rgba(10,104,255,0.2), rgba(10,104,255,0.1));
  border-color: rgba(10,104,255,0.4);
  color: var(--acc);
}
/* Performance: Offscreen sections erst rendern wenn sichtbar */
/* Ladeoptimierung deaktiviert: KW-Reihen immer sichtbar rendern */
.kw-row{content-visibility: visible; contain-intrinsic-size: auto}
.kw-row.reveal{content-visibility: visible}
.kw-count{color:var(--muted)}
.kw-body{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;row-gap:12px;column-gap:12px;padding:10px;background:transparent}
.kw-body.empty{padding:8px 10px}
.card.mini img{height:120px}
.card.mini .card-body{padding:8px}
.card.mini .line1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Legal footer */
.legal-footer{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--glass-bg);
  border-top: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  padding: 8px 0;
  text-align: center;
  z-index: 100;
  transform: translateZ(0);
}

.legal-footer a {
  color: #6b7280;
  text-decoration: none;
  font-size: 13px; /* bessere Lesbarkeit */
  margin: 0 12px;
  padding: 6px 4px; /* größere Hit-Zone */
  transition: color 0.15s ease;
  transform: translateZ(0);
}

.legal-footer a:hover {
  color: #16a34a;
  transform: translateZ(0);
}

/* Map Performance: keine 3D-Forcierung, um Marker-Jitter zu vermeiden */
/* (Regel entfernt, um leere Block-Lint zu vermeiden) */

/* Navigation Performance */
.detail-nav {
  transform: translateZ(0);
}

/* =============================================================
   Safari-Kompatibilität: -webkit-backdrop-filter vor backdrop-filter
   Wir bündeln hier alle glasigen Komponenten und setzen die richtige
   Reihenfolge zentral, damit einzelne Blöcke nicht überall angepasst
   werden müssen. Diese Regeln kommen am Ende der Datei und überschreiben
   frühere Deklarationen (Cascade!).
   ============================================================= */
.header,
.kw-nav,
.kw-btn,
.badge,
.usage-chip,
.pill,
.table,
.legal-footer,
.card,
.select {
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.detail-nav .btn {
  transform: translateZ(0);
  transition: all 0.15s ease;
}

.detail-nav .btn:hover {
  transform: translateY(-1px) translateZ(0);
}

/* Finder-spezifische Styles */
.finder {
  max-width: 800px;
  margin: 0 auto;
}

.finder h1 {
  font-size: 28px;
  margin-bottom: 8px;
  color: var(--fg);
}

.finder p {
  color: var(--muted);
  margin-bottom: 20px;
}

.finder .btn { font-size: 18px; padding: 16px 32px; margin: 20px auto; display: block; cursor: pointer; transition: all 0.2s ease; min-width: 250px; text-align: center; }
.finder .btn.glass { background: var(--glass-bg); border:1px solid var(--glass-border); color: var(--fg); }
.finder .btn.primary { background: var(--acc); color: #fff; border: none; }
/* Mild glasiger blauer CTA */
.finder .btn.primary.glass {
  background: rgba(10,104,255,0.18);
  border-color: rgba(10,104,255,0.45);
  color: #fff;
}
.finder .btn.primary.glass:hover:not(:disabled){
  background: rgba(10,104,255,0.26);
  transform: translateY(-1px);
}

.finder .btn:hover:not(:disabled) {
  background: #0056d6;
  transform: translateY(-1px);
}

.finder .btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Finder Button Loading State */
.finder .btn.loading {
  opacity: 0.8;
  cursor: not-allowed;
}

.finder .btn.loading .icon {
  animation: spin 1s linear infinite;
}

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

/* Finder Icon Styles */
.finder .icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
  fill: currentColor;
  stroke: currentColor;
}

.finder .icon-sm {
  width: 14px;
  height: 14px;
}

.finder .icon-lg {
  width: 20px;
  height: 20px;
}

/* Finder Status */
#status {
  margin: 16px 0;
  display: none;
}

.finder-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px;
}

.finder-loader .apple-animation {
  font-size: 32px;
  animation: bounce 1.5s ease-in-out infinite;
}

.finder-loader .loading-text {
  color: var(--muted);
  font-size: 14px;
}

/* Karten-Layout für Finder */
.card-grid {
  display: grid;
  gap: 16px;
  margin: 20px 0;
}

.large-card {
  border: 1px solid var(--glass-border);
  border-radius: var(--rad);
  overflow: hidden;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-1), var(--shadow-inset);
  transition: all 0.2s ease;
}

.large-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.card-image {
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
}

.card-content {
  padding: 16px;
}

.card-title {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 12px 0;
  color: var(--fg);
}

.card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.chip-sorte {
  background: #f3f4f6;
  color: #374151;
}

.chip-kw { background: var(--glass-bg); color: var(--fg); border:1px solid var(--glass-border); border-radius: 999px; padding: 2px 8px; display:inline-block }

.chip-kw-ripe { background: color-mix(in hsl, #22c55e 70%, transparent) !important; color:#fff !important; font-weight:700; border-color: color-mix(in hsl, #22c55e 70%, white 10%) !important; }

.badge-ripe { background: color-mix(in hsl, #22c55e 70%, transparent) !important; color: #fff !important; font-weight: 700; border-color: color-mix(in hsl, #22c55e 70%, white 10%) !important; }

.badge-soon { background: color-mix(in hsl, #eab308 70%, transparent) !important; color: #111 !important; font-weight: 700; border-color: color-mix(in hsl, #eab308 70%, white 10%) !important; }

/* Usage chips (glass) */
.usage-chips{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0}
.usage-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:4px 10px;
  border-radius:999px;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--shadow-inset);
  color: var(--fg);
  font-size:12px;
  font-weight:700;
  white-space: nowrap;
  line-height: 1;
}
.usage-chip .dot{width:10px;height:10px;border-radius:50%;background:#16a34a;display:inline-block}

.chip-kw-soon { background: color-mix(in hsl, #eab308 70%, transparent) !important; color:#111 !important; font-weight:700; border-color: color-mix(in hsl, #eab308 70%, white 10%) !important; }

.chip-distance {
  background: #f1f5f9;
  color: #475569;
}

.chip-distance-large {
  background: #dcfce7 !important;
  color: #166534 !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 6px 12px !important;
}

.chip-accuracy {
  background: #fef3c7;
  color: #92400e;
}

/* Mini-Karten für "In der Nähe" */
.mini-card {
  display: flex;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--glass-border);
  border-radius: var(--rad);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-inset);
  transition: all 0.2s ease;
  cursor: pointer;
}

.mini-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.mini-card-image {
  width: 80px;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.mini-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--glass-bg);
}

/* Dark Mode: Bild-Platzhalter */
@media (prefers-color-scheme: dark) {
  .card img,
  .mini-card-image img {
    background: rgba(255,255,255,0.05);
  }
  
  img[data-src] {
    background: rgba(255,255,255,0.05);
  }
}

.mini-card-content {
  flex: 1;
  min-width: 0;
}

.mini-card-title {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 6px 0;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-card .card-chips {
  gap: 4px;
}

.mini-card .chip {
  font-size: 10px;
  padding: 2px 6px;
}

/* Proximity und Error Messages */
.proximity-hint {
  margin-top: 12px;
  padding: 8px 12px;
  background: var(--glass-bg);
  color: var(--fg);
  border:1px solid var(--glass-border);
  border-radius: 8px;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  font-size: 14px;
}

.geofence-error {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
  font-size: 16px;
}

/* Nearby Title */
#nearby-title {
  font-size: 18px;
  font-weight: 600;
  margin: 32px 0 16px 0;
  color: var(--fg);
}

.hide {
  display: none !important;
}

/* Pulse Animation für Bearing Warning */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* Responsive Design */
@media (min-width: 768px) {
  .card-grid.nearby-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .large-card {
    max-width: 600px;
    margin: 0 auto;
  }
}

/* GPS-Signal-Anzeige */
.gps-indicator {
  margin: 1rem 0;
  padding: 1rem;
  background: var(--glass-bg);
  border-radius: 8px;
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

/* Verbesserte Fehleranzeige */
.error {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: rgba(255, 68, 68, 0.1);
  border: 1px solid rgba(255, 68, 68, 0.3);
  border-radius: 8px;
  margin: 1rem 0;
}

.error-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.error-text {
  flex: 1;
  line-height: 1.5;
}

.error-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.error-actions .btn {
  padding: 6px 12px;
  font-size: 14px;
}

.gps-signal {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.gps-icon {
  font-size: 1.2rem;
}

.gps-text {
  flex: 1;
  font-size: 0.9rem;
  color: #495057;
  font-weight: 500;
}

.gps-bars {
  display: flex;
  gap: 2px;
  align-items: end;
}

.gps-bars .bar {
  width: 4px;
  background: #dee2e6;
  border-radius: 2px;
  transition: all 0.3s ease;
}

.gps-bars .bar:nth-child(1) { height: 8px; }
.gps-bars .bar:nth-child(2) { height: 12px; }
.gps-bars .bar:nth-child(3) { height: 16px; }
.gps-bars .bar:nth-child(4) { height: 20px; }
.gps-bars .bar:nth-child(5) { height: 24px; }

.gps-bars .bar.active {
  background: var(--signal-color, #4CAF50);
  box-shadow: 0 0 4px var(--signal-color, #4CAF50);
}

/* GPS Hint */
.gps-hint {
  margin: 0.75rem 0;
  padding: 0.75rem;
  background: var(--glass-bg);
  border-radius: 8px;
  border: 1px solid var(--glass-border);
  animation: fadeInUp 0.5s ease;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

/* GPS-Indicator (glasig) */
#gps-indicator{
  margin: 10px 0;
}
.gps-indicator .gps-signal{
  display:flex; align-items:center; gap:10px;
  background: var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius: 10px; padding: 10px 12px;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-inset);
}
.gps-icon{font-size:18px}
.gps-text{font-weight:600}
.gps-bars{display:flex; gap:4px; margin-left:auto}
.gps-bars .bar{width:6px; height:10px; border-radius:2px; background:rgba(148,163,184,0.6)}
.gps-bars .bar.active{background: var(--acc);}
.gps-bars .bar.active{ background: var(--acc); }

/* Ambiguitäts-Warnbox (glasig) */
.ambiguity-warning, .proximity-hint, .geofence-error{
  margin: 12px 0; padding: 10px 12px; border-radius: 10px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-inset);
}
.warning-content{display:flex; align-items:flex-start; gap:10px}
.warning-icon{font-size:18px; margin-top:1px}
.warning-text{font-weight:600}
.proximity-hint{font-weight:600}

/* Finder Error (glasig) */
#status .error{
  background: var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--fg);
  box-shadow: var(--shadow-inset);
}

.hint-content {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.hint-icon {
  font-size: 1.1rem;
  margin-top: 2px;
}

.hint-text {
  flex: 1;
  font-size: 0.9rem;
  line-height: 1.4;
  color: #37474f;
}

.hint-text strong {
  color: #1976d2;
  font-weight: 600;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Ambiguity Warning */
.ambiguity-warning {
  margin: 1rem 0;
  padding: 1rem;
  background: var(--glass-bg);
  border-radius: 8px;
  border: 1px solid var(--glass-border);
  animation: fadeInUp 0.5s ease;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.warning-content {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.warning-icon {
  font-size: 1.2rem;
  margin-top: 2px;
}

.warning-text {
  flex: 1;
  font-size: 0.9rem;
  line-height: 1.4;
  color: #8b4513;
}

.warning-text strong {
  color: #d68910;
  font-weight: 600;
}

/* Ambiguous Result Styling */
.ambiguous-result {
  border: 2px solid #f39c12;
  background: linear-gradient(135deg, #fff9e6 0%, #fef5e7 100%);
}

.ambiguity-hint {
  margin-top: 0.75rem;
  padding: 0.75rem;
  background: #fff3cd;
  border-radius: 6px;
  border-left: 3px solid #f39c12;
  font-size: 0.85rem;
  color: #8b4513;
  font-weight: 500;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* Mobile-only Navigation */
.mobile-only {
  display: none;
}

@media (max-width: 1024px) {
  .mobile-only {
    display: inline-block;
  }
}

@media (max-width: 480px) {
  .mini-card {
    flex-direction: column;
    gap: 8px;
  }
  
  .mini-card-image {
    width: 100%;
    height: 120px;
  }
  
  .mini-card-title {
    white-space: normal;
  }
  
  .gps-signal {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
  
  .gps-bars {
    justify-content: center;
  }
}