/* Loipen-Ampel (22.10.2026): Seite /loipen und Kachel auf /app-start. Gehoert zu inc/loipenampel.php. */
:root{ --la-gruen:#3f9a4d; --la-orange:#e39a2d; --la-rot:#c8473d; --la-leer:#c3ccc5; --la-dunkel:#26332b; --la-schnee:#eef3f6 }

/* ---------- Kopf */
.la-seite{padding-top:34px}
.la-bsp-band{background:#fff4d6; border:1px solid #f0d38a; color:#6b5418; border-radius:10px; padding:10px 16px; font-weight:600; font-size:.92rem; margin-bottom:18px}
.la-kopf{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:28px; align-items:end; margin-bottom:22px}
.la-tag{display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.la-kopf h1{font-size:clamp(2rem,4.4vw,3.1rem); font-weight:800; color:var(--gruen-dunkel); line-height:1.08; margin:4px 0 10px; letter-spacing:-.02em}
.la-zusammen{display:flex; align-items:center; gap:14px; font-size:clamp(1.15rem,2.2vw,1.45rem); color:var(--ink)}
.la-stand{color:var(--muted); font-size:.95rem; margin-top:6px}
.la-kopf-rechts{color:var(--muted); font-size:1rem; line-height:1.55}

/* ---------- Raster: Karte links, Liste und Kästen rechts */
.la-raster{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:22px; align-items:start}
.la-karte-feld{position:sticky; top:104px; background:linear-gradient(180deg,#f6f9fb 0%,var(--la-schnee) 100%); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.la-karte{position:relative; height:min(76vh,820px); min-height:420px}
.la-laden{padding:30px; color:var(--muted)}
.la-svg{display:block; width:100%; height:100%; touch-action:manipulation; user-select:none; -webkit-user-select:none}
.la-karte-quelle{font-size:.74rem; color:var(--muted); padding:8px 14px 12px; line-height:1.45}
.la-ganz{position:absolute; top:12px; right:12px; z-index:2; font:inherit; font-weight:700; font-size:.85rem; background:#fff; color:var(--gruen-dunkel); border:1px solid var(--line); border-radius:999px; padding:8px 14px; cursor:pointer; box-shadow:0 4px 14px rgba(20,40,30,.12)}
.la-ganz:hover{border-color:var(--gruen)}

/* Linien: dunkler Rand, innen die Ampelfarbe, Muster je Zustand (nie nur Farbe) */
.la-loipe{cursor:pointer}
.la-treffer{fill:none; stroke:transparent; stroke-width:24px; stroke-linecap:round; stroke-linejoin:round}
.la-rand{fill:none; stroke:var(--la-dunkel); stroke-width:8px; stroke-linecap:round; stroke-linejoin:round}
.la-innen{fill:none; stroke-width:4.5px; stroke-linecap:round; stroke-linejoin:round}
.la-loipe[data-ampel="gruen"] .la-innen{stroke:var(--la-gruen)}
.la-loipe[data-ampel="orange"] .la-innen{stroke:var(--la-orange); stroke-dasharray:9 6; stroke-linecap:butt}
.la-loipe[data-ampel="rot"] .la-innen{stroke:var(--la-rot); stroke-dasharray:.1 8}
.la-loipe[data-ampel="leer"] .la-rand{stroke:#8d998f; stroke-width:7px}
.la-loipe[data-ampel="leer"] .la-innen{stroke:#e3e8e4; stroke-width:4px}
.la-zubringer{cursor:default}
.la-zubringer .la-rand{stroke:#8d998f; stroke-width:4px}
.la-zubringer .la-innen{stroke:#e3e8e4; stroke-width:1.5px}
.la-loipe .la-rand,.la-loipe .la-innen{transition:opacity .2s}
.la-auswahl .la-loipe:not(.la-an) .la-rand,.la-auswahl .la-loipe:not(.la-an) .la-innen{opacity:.28}
.la-loipe.la-an .la-rand{stroke-width:11px}
.la-loipe.la-an .la-innen{stroke-width:6px}

/* Nummern, Orte, Einstiege (Grösse in Bildschirmpixeln, das Skript skaliert) */
.la-nummer{cursor:pointer}
.la-nummer rect{fill:var(--la-dunkel); stroke:#fff; stroke-width:2}
.la-nummer text{font:800 13px 'Encode Sans',system-ui,sans-serif; fill:#fff}
.la-nummer .la-nummer-name{font:700 12.5px 'Encode Sans',system-ui,sans-serif; fill:var(--la-dunkel); paint-order:stroke; stroke:#f3f7f9; stroke-width:4px; stroke-linejoin:round}
.la-nummer.la-an rect{fill:var(--gruen); stroke-width:3}
.la-auswahl .la-nummer:not(.la-an){opacity:.45}
.la-ort text{font:600 15px 'Encode Sans',system-ui,sans-serif; fill:#61705f; letter-spacing:.02em; paint-order:stroke; stroke:#f3f7f9; stroke-width:5px; stroke-linejoin:round}
.la-einstieg circle{fill:#fff; stroke:var(--gruen); stroke-width:3}
.la-einstieg text{font:600 11.5px 'Encode Sans',system-ui,sans-serif; fill:var(--gruen-dunkel); paint-order:stroke; stroke:#f3f7f9; stroke-width:4px; stroke-linejoin:round}
.la-massstab path{fill:none; stroke:var(--la-dunkel); stroke-width:2}
.la-massstab text{font:600 11px 'Encode Sans',system-ui,sans-serif; fill:var(--la-dunkel)}
/* Schmale Karte (Handy, ganze Ansicht): nur Nummern, keine Namen */
.la-schmal .la-nummer-name,.la-schmal .la-einstieg text{display:none}

/* Infozeile unten in der Karte */
.la-info{position:absolute; left:12px; right:12px; bottom:44px; z-index:2; display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px 12px; box-shadow:0 8px 24px rgba(20,40,30,.16)}
.la-info[hidden]{display:none}
.la-info-text{display:flex; flex-direction:column; min-width:0; flex:1; line-height:1.35}
.la-info-text strong{font-size:1rem}
.la-info-text span{font-size:.85rem; color:var(--muted)}
.la-info-zu{flex:none; width:36px; height:36px; border:0; border-radius:50%; background:var(--gruen-hell); color:var(--gruen-dunkel); font-size:1.3rem; line-height:1; cursor:pointer}

/* ---------- Liste */
.la-rechts{display:flex; flex-direction:column; gap:22px; min-width:0}
.la-liste-feld{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px 18px 10px}
.la-h2{font-size:1.05rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--gruen-dunkel); margin-bottom:10px}
.la-liste{list-style:none; margin:0; padding:0}
.la-eintrag{border-top:1px solid var(--line)}
.la-eintrag:first-child{border-top:0}
.la-zeile{width:100%; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; font:inherit; color:var(--ink); text-align:left; background:none; border:0; padding:11px 6px; min-height:56px; cursor:pointer; border-radius:10px}
.la-zeile:hover{background:var(--gruen-hell)}
.la-eintrag.aktiv .la-zeile{background:var(--gruen-hell)}
.la-zeile:focus-visible{outline:3px solid var(--gruen); outline-offset:1px}
.la-nr{display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:8px; background:var(--la-dunkel); color:#fff; font-weight:800; font-size:.9rem; flex:none}
.la-eintrag.aktiv .la-nr{background:var(--gruen)}
.la-name{font-weight:700; font-size:1rem; line-height:1.3; min-width:0}
.la-name small{display:block; font-weight:500; font-size:.82rem; color:var(--muted)}
.la-chips{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end}
.la-chip{display:inline-flex; align-items:center; gap:6px; font-size:.8rem; font-weight:700; padding:5px 10px 5px 7px; border-radius:999px; border:1.5px solid var(--line); background:#fff; white-space:nowrap}
.la-chip i,.la-punkt{display:inline-block; width:12px; height:12px; border-radius:50%; background:var(--la-leer); flex:none}
.la-c-gruen i,.la-punkt.la-c-gruen{background:var(--la-gruen)}
.la-c-orange i,.la-punkt.la-c-orange{background:linear-gradient(90deg,var(--la-orange) 50%,#f5d9ad 50%)}
.la-c-rot i,.la-punkt.la-c-rot{background:#fff; box-shadow:inset 0 0 0 3px var(--la-rot)}
.la-chip.la-c-gruen{border-color:#b7dcbc; background:#f1f9f2}
.la-chip.la-c-orange{border-color:#f0cf9c; background:#fdf6ea}
.la-chip.la-c-rot{border-color:#ecbab5; background:#fcf1f0; color:#8e2f27}
.la-chip.la-c-leer{color:var(--muted)}
.la-punkt{margin-right:7px; vertical-align:-1px}
.la-mehr{padding:4px 6px 14px 46px}
.la-mehr dl{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px 16px; margin:0 0 8px}
.la-mehr dt{font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted)}
.la-mehr dd{margin:0; font-weight:600; font-size:.92rem}
.la-mehr-stand{font-size:.84rem; color:var(--muted); margin-bottom:6px}
.la-mehr-link{font-weight:700; font-size:.9rem; color:var(--gruen); text-decoration:underline}

/* ---------- Kästen unter der Liste */
.la-unten{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px}
.la-unten .la-box:last-child{grid-column:1 / -1}
.la-box{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px}
.la-box p{font-size:.95rem; margin-bottom:10px}
.la-box p:last-child{margin-bottom:0}
.la-box a:not(.btn){font-weight:700; text-decoration:underline}
.la-klein{font-size:.84rem!important; color:var(--muted)}
.la-legende{list-style:none; margin:0 0 12px; padding:0; display:flex; flex-direction:column; gap:10px}
.la-legende li{display:grid; grid-template-columns:60px 1fr; gap:12px; align-items:center}
.la-legende svg{width:60px; height:14px; overflow:visible}
.la-legende strong{display:block; font-size:.95rem}
.la-legende span{font-size:.84rem; color:var(--muted); line-height:1.35}
.la-legende span strong{color:var(--ink)}
.la-l-rand{fill:none; stroke:var(--la-dunkel); stroke-width:8; stroke-linecap:round}
.la-l-rand-leer{stroke:#8d998f; stroke-width:7}
.la-l-gruen,.la-l-orange,.la-l-rot,.la-l-leer{fill:none; stroke-width:4.5; stroke-linecap:round}
.la-l-gruen{stroke:var(--la-gruen)}
.la-l-orange{stroke:var(--la-orange); stroke-dasharray:9 6; stroke-linecap:butt}
.la-l-rot{stroke:var(--la-rot); stroke-dasharray:.1 8}
.la-l-leer{stroke:#e3e8e4; stroke-width:4}

/* ---------- Kachel auf /app-start */
.la-kachel{display:flex; flex-direction:column; gap:10px; background:var(--la-dunkel); color:#fff; border-radius:var(--radius); padding:18px 20px; text-decoration:none; box-shadow:var(--schatten)}
.la-kachel:hover{color:#fff; filter:brightness(1.08)}
.la-kachel-kopf{display:flex; align-items:center; gap:10px}
.la-kachel-tag{font-size:.78rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#b9cdbf}
.la-bsp-marke{font-size:.72rem; font-weight:800; background:#f0c64a; color:#3d3108; border-radius:6px; padding:2px 8px}
.la-kachel-zeile{display:flex; align-items:center; gap:12px; font-size:1.25rem}
.la-kachel-punkte{display:flex; gap:6px; flex-wrap:wrap}
.la-mini{width:22px; height:8px; border-radius:4px; background:#56635a}
.la-m-gruen{background:var(--la-gruen)} .la-m-orange{background:var(--la-orange)} .la-m-rot{background:var(--la-rot)}
.la-kachel-fuss{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:.86rem; color:#b9cdbf}
.la-kachel-pfeil{font-weight:800; color:#fff}

/* ---------- Handy */
@media (max-width:980px){
  .la-kopf{grid-template-columns:1fr; gap:10px}
  .la-raster{grid-template-columns:1fr}
  .la-karte-feld{position:relative; top:auto}
  .la-karte{height:min(72vh,640px)}
}
@media (max-width:640px){
  .la-seite{padding:22px 14px 50px}
  .la-zeile{grid-template-columns:auto minmax(0,1fr); row-gap:8px}
  .la-chips{grid-column:2; justify-content:flex-start}
  .la-mehr{padding-left:6px}
  .la-mehr dl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .la-unten{grid-template-columns:1fr}
  .la-liste-feld{padding:14px 10px 6px}
}
@media (prefers-reduced-motion:reduce){ .la-loipe .la-rand,.la-loipe .la-innen{transition:none} }