/* Permaplans · gemeinsame Bausteine der Waldgarten-Seiten
   ============================================================================
   Eingebunden von /waldgarten/ und /waldgarten/anlegen/ (Cache-Buster ?v=N im
   <link> hochzaehlen, sonst haengen Telefone tagelang am alten Stand).

   1. .demo      — Live-Demo-Kachel. Laedt die echte Web-App erst beim Klick,
                   Muster wie die Showcase-Kacheln der Startseite
                   (tool/web/landing_template.html).
   2. .lsearch   — Schicht-Suche: Klima + Schicht, gruppiert nach Schicht,
                   Daten aus der Edge Function plant-match.
   Farben kommen aus den :root-Tokens der Seite (--primary, --gold, --line …). */

/* ------------------------------------------------------------ 1. Demo */
.demo{margin:18px 0 0;background:var(--card,#fff);border:1px solid var(--line,#e3dccd);border-radius:16px;
  overflow:hidden;box-shadow:0 10px 30px rgba(20,49,79,.16)}
.demo-media{position:relative;width:100%;aspect-ratio:16/10;
  background:linear-gradient(135deg,#2D5016 0%,#4a7a24 55%,#8B6914 100%)}
.demo.live .demo-media{aspect-ratio:auto;height:min(78vh,640px)}
.demo-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.demo-media iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#F5F0E8}
.demo-media .veil{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;background:rgba(20,30,12,.34);border:0;width:100%;cursor:pointer;color:#fff;
  font:700 1rem Lato,system-ui,sans-serif;transition:background .18s}
.demo-media .veil:hover{background:rgba(20,30,12,.2)}
.demo-media .disc{width:62px;height:62px;border-radius:50%;background:var(--gold,#E8A020);color:#26210b;display:flex;
  align-items:center;justify-content:center;font-size:1.5rem;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.demo-media .veil:hover .disc{transform:scale(1.06)}
.demo-media .spin{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;
  font-size:.95rem;background:rgba(20,30,12,.5)}
.demo figcaption{padding:12px 16px 14px;font-size:.93rem;color:var(--muted,#6b7362)}
.demo figcaption b{color:var(--ink,#22301a)}
.demo .newtab{display:none;margin-left:6px;font-weight:700}
.demo.live .newtab{display:inline}

/* Vollbild auf schmalen Geraeten — wie .sheet auf der Startseite. */
.wg-sheet{position:fixed;inset:0;z-index:1000;background:#16290c;display:flex;flex-direction:column}
.wg-sheet[hidden]{display:none}
.wg-sheet-bar{display:flex;align-items:center;gap:12px;padding:10px 14px;background:#2D5016;color:#fff;flex:0 0 auto}
.wg-sheet-bar strong{font:700 .98rem Lato,system-ui,sans-serif;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wg-sheet-bar button{background:rgba(255,255,255,.16);border:0;color:#fff;font:700 .9rem Lato,system-ui,sans-serif;
  padding:8px 14px;border-radius:9px;cursor:pointer}
.wg-sheet-body{position:relative;flex:1 1 auto;min-height:0}
.wg-sheet-body iframe{width:100%;height:100%;border:0;background:#F5F0E8}
.wg-sheet-load{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;
  text-align:center;color:#e8e6dd;font-size:.95rem}
body.wg-sheet-open{overflow:hidden}

/* ------------------------------------------------------ 2. Schicht-Suche */
.lsearch{margin:20px 0 0;background:var(--card,#fff);border:1px solid var(--line,#e3dccd);border-radius:18px;
  padding:18px 18px 8px;box-shadow:0 2px 14px rgba(20,49,79,.10)}
.ls-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px}
.ls-row>b{font-size:.88rem;min-width:80px;color:var(--ink,#22301a)}
.ls-chip{font:inherit;font-size:.88rem;border:1.5px solid var(--line,#e3dccd);background:#fff;color:var(--ink,#22301a);
  border-radius:999px;padding:6px 13px;cursor:pointer;transition:background .12s,border-color .12s}
.ls-chip:hover{border-color:var(--primary,#2D5016)}
.ls-chip[aria-pressed="true"]{background:var(--primary,#2D5016);border-color:var(--primary,#2D5016);color:#fff}
.ls-note{font-size:.86rem;color:var(--muted,#6b7362);margin:0 0 10px;max-width:80ch}
.ls-status{font-size:.92rem;color:var(--muted,#6b7362);padding:18px 2px}
.ls-group{border-top:1px solid var(--line,#e3dccd);padding:14px 0 10px}
.ls-group h4{font-family:Merriweather,Georgia,serif;font-size:1rem;margin:0 0 2px;color:var(--primary,#2D5016)}
.ls-group .ls-count{font-size:.84rem;color:var(--muted,#6b7362);margin:0 0 10px}
/* Grid-Kinder duerfen schmaler werden als ihr Inhalt — sonst zieht die
   Karten-Reihe (grid-auto-flow:column) die 1fr-Spalte des Schritts auf und die
   Seite laeuft rechts aus dem Bildschirm, ohne dass sich etwas scrollen laesst. */
.step>div,.lsearch,.ls-group,.ls-track{min-width:0}
.ls-track{position:relative}
.ls-cards{display:grid;grid-auto-flow:column;grid-auto-columns:176px;gap:12px;overflow-x:auto;
  padding:0 0 10px;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:#c9bfa9 transparent}
.ls-cards::-webkit-scrollbar{height:8px}
.ls-cards::-webkit-scrollbar-thumb{background:#c9bfa9;border-radius:99px}
.ls-nav{position:absolute;top:70px;z-index:3;width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.95);color:var(--primary,#2D5016);font:900 1.3rem/1 Lato,system-ui,sans-serif;
  box-shadow:0 3px 12px rgba(0,0,0,.28);display:flex;align-items:center;justify-content:center}
.ls-nav:hover{background:#fff;transform:scale(1.06)}
.ls-nav.prev{left:-6px}
.ls-nav.next{right:-6px}
.ls-nav[hidden]{display:none}
.ls-card{scroll-snap-align:start;display:block;text-decoration:none;color:var(--ink,#22301a);background:#faf7f1;
  border:1px solid var(--line,#e3dccd);border-radius:12px;overflow:hidden}
.ls-card:hover{border-color:var(--gold,#E8A020)}
.ls-ph{position:relative;aspect-ratio:1/1;background:#e9e3d6}
.ls-ph>img{display:block;width:100%;height:100%;object-fit:cover}
/* Verlaeufe, damit die Symbole auf hellen Fotos lesbar bleiben — wie /plant-finder/. */
.ls-ph:before,.ls-ph:after{content:"";position:absolute;left:0;right:0;height:50px;pointer-events:none;z-index:1}
.ls-ph:before{top:0;background:linear-gradient(to bottom,rgba(0,0,0,.3),transparent)}
.ls-ph:after{bottom:0;background:linear-gradient(to top,rgba(0,0,0,.45),transparent)}
/* Werte auf dem Foto: gleiche Bildsprache wie /plant-finder/ und die App
   (rating_widget_on_surface.dart): Symbol als Grund, Zahl mittig, nach Stufe
   eingefaerbt, schwarz umrandet. */
.ls-ov{position:absolute;display:flex;align-items:center;z-index:2}
.ls-ov img{display:block;filter:drop-shadow(0 1px 3px rgba(0,0,0,.75))}
.ls-ov b{position:absolute;left:0;right:0;text-align:center;font:900 16px/1 Lato,system-ui,sans-serif;color:#fff;
  text-shadow:-2px -2px 0 #000,2px -2px 0 #000,2px 2px 0 #000,-2px 2px 0 #000}
.ls-ov-h{top:6px;right:6px}
.ls-ov-h img{width:34px;height:34px}
.ls-ov-h b{font-size:12px;top:50%;transform:translateY(-50%)}
.ls-ov-r{bottom:5px;left:0;right:0;justify-content:center;gap:6px}
.ls-ov-r span{position:relative;display:block;width:40px;height:40px}
.ls-ov-r img{width:40px;height:40px;object-fit:contain}
.ls-ov-r b{top:50%;transform:translateY(-50%)}
.v-low{color:#FFAAA0!important}.v-mid{color:#FFE9A3!important}.v-high{color:#B4EDA6!important}
.ls-card>span{display:block;padding:8px 10px 0;font-size:.88rem;font-weight:700;line-height:1.25}
/* Namensregeln der App: immergruen = gruen (App: Color(0,128,0)), Hecke = unterstrichen. */
.ls-eg{color:#007300!important}
.ls-hedge{text-decoration:underline;text-underline-offset:3px}
.ls-legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.82rem;color:var(--muted,#6b7362);margin:-4px 0 10px}
.ls-legend .ls-lead{font-weight:700}
.ls-legend .ls-eg{font-weight:700}
.ls-card>i{display:block;padding:1px 10px 9px;font-size:.78rem;color:var(--muted,#6b7362);line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:600px){ .ls-cards{grid-auto-columns:158px} .ls-nav{display:none!important} }
.ls-foot{border-top:1px solid var(--line,#e3dccd);padding:12px 0 10px;font-size:.9rem}