/* Smartmacherei — Zusatzbausteine fuer /ratgeber/loxone-miniserver-gen-1:
   Zeitstrahl im Hero (vertikal am Handy, horizontal ab 901 px), Status-Kacheln, Symptom-Karten,
   Entscheidungskarten, Architektur-SVG (zwei Layouts) und Checklisten-Chips.
   Farben: Bestand/laeuft #13875c, neu #0a6fbe, Warnung #c98300, Tinte #0a2a3d. */

/* Hero: Zeitstrahl */
.lp-hero .visual .gen1-tl { background: #fff; border-radius: 20px; padding: 10px 8px 6px; box-shadow: 0 30px 60px rgba(4,40,70,.35); max-width: 440px; margin: 0 auto; }
.gen1-tl svg { width: 100%; height: auto; display: block; font-family: var(--font-body); }
.gen1-tl .tl-h { display: none; }
.gen1-tl .track { stroke-dasharray: 620; stroke-dashoffset: 620; animation: tl-draw 1.4s ease-out .2s forwards; }
.gen1-tl .stop { opacity: 0; animation: tl-in .5s ease-out forwards; }
.gen1-tl .stop:nth-of-type(1) { animation-delay: .4s; }
.gen1-tl .stop:nth-of-type(2) { animation-delay: .75s; }
.gen1-tl .stop:nth-of-type(3) { animation-delay: 1.1s; }
.gen1-tl .stop:nth-of-type(4) { animation-delay: 1.45s; }
.gen1-tl .halo { transform-box: fill-box; transform-origin: center; animation: tl-pulse 2.4s ease-in-out 1.8s infinite; }
@keyframes tl-draw { to { stroke-dashoffset: 0; } }
@keyframes tl-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes tl-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .35; } }

/* Status-Kacheln: laeuft / keine neuen Funktionen / Hardware altert */
.article .gen1-status { display: grid; gap: 10px; margin: 6px 0 26px; padding: 0; list-style: none; }
.gen1-status li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin: 0; }
.gen1-status i { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; }
.gen1-status i svg { width: 22px; height: 22px; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.gen1-status .ok i { background: rgba(19,135,92,.14); } .gen1-status .ok svg { stroke: #13875c; }
.gen1-status .warn i { background: rgba(201,131,0,.16); } .gen1-status .warn svg { stroke: #c98300; }
.gen1-status .bad i { background: rgba(207,61,51,.13); } .gen1-status .bad svg { stroke: #cf3d33; }
.gen1-status b { display: block; font: 700 15px var(--font-display); color: var(--ink); }
.gen1-status span { font-size: 13px; color: var(--ink-soft); }

/* Symptom-Karten */
.article .gen1-sym { display: grid; gap: 12px; margin: 6px 0 26px; padding: 0; list-style: none; }
.gen1-sym li { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px; margin: 0; display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.gen1-sym .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--card-soft); display: grid; place-items: center; }
.gen1-sym .ic svg { width: 26px; height: 26px; fill: none; stroke: var(--deep); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gen1-sym h3 { margin: 0 0 4px; font-size: 16px; }
.gen1-sym p { margin: 0; font-size: 14px; }

/* Vergleichskarten mit Listen (App selbst vs. Loxone Config) und Wege-Karten */
.rg-duo .card .tag { margin-bottom: 8px; }
.rg-duo .card ul { margin: 6px 0 0; padding-left: 18px; font-size: 14px; }
.rg-duo .card li { margin-bottom: 3px; }
.rg-duo .card.neu { border-color: rgba(10,111,190,.45); background: linear-gradient(180deg, rgba(10,111,190,.06), transparent); }

/* Entscheidungskarten: wann welcher Weg */
.article .gen1-wann { display: grid; gap: 10px; margin: 6px 0 22px; padding: 0; list-style: none; }
.gen1-wann li { background: var(--card-soft); border-radius: 14px; padding: 14px 16px; margin: 0; }
.gen1-wann p { margin: 0 0 8px; font-size: 14px; color: var(--ink-soft); }
.gen1-wann b { display: block; font: 700 15px var(--font-display); color: var(--ink); }
.gen1-wann b::before { content: "→ "; color: var(--deep); }

/* Architektur-SVG */
.gen1-arch svg { width: 100%; height: auto; display: block; font-family: var(--font-body); background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.gen1-arch .arch-m { max-width: 420px; margin: 0 auto; }
.gen1-arch .arch-d { display: none; }
.rg-legend i.alt { background: rgba(19,135,92,.22); box-shadow: inset 0 0 0 1.5px #13875c; }
.rg-legend i.neu { background: rgba(10,111,190,.16); box-shadow: inset 0 0 0 1.5px #0a6fbe; }
.rg-legend i.ink { background: #0a2a3d; }

/* Tabelle in den Technik-Details am Handy kompakter */
@media (max-width: 559px) {
  .article details.tech .lp-table { font-size: 14px; table-layout: fixed; }
  .article details.tech .lp-table th:first-child { width: 26%; }
  .article details.tech .lp-table th, .article details.tech .lp-table td { padding: 10px 10px; }
}

/* Checkliste als Chips */
.article .gen1-check { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; margin: 6px 0 20px; padding: 0; list-style: none; }
.gen1-check li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); min-height: 48px; }
.gen1-check svg { width: 26px; height: 26px; fill: none; stroke: var(--deep); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gen1-check small { display: block; font-size: 12px; font-weight: 400; color: var(--ink-soft); }
@media (max-width: 559px) { .article .gen1-check { grid-template-columns: minmax(0,1fr); } }

@media (min-width: 560px) {
  .gen1-sym { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 640px) {
  .gen1-arch .arch-d { display: block; }
  .gen1-arch .arch-m { display: none; }
  .gen1-status { grid-template-columns: repeat(3, 1fr); }
  .gen1-status li { grid-template-columns: 1fr; align-content: start; }
}
@media (min-width: 720px) {
  .gen1-wann { grid-template-columns: repeat(3, 1fr); }
  .gen1-check { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 901px) {
  .lp-hero .wrap.split { grid-template-columns: 1fr 1fr; }
  .lp-hero .visual .gen1-tl { max-width: none; padding: 14px 12px 8px; }
  .gen1-tl .tl-h { display: block; }
  .gen1-tl .tl-v { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .gen1-tl .track, .gen1-tl .stop, .gen1-tl .halo { animation: none; opacity: 1; stroke-dashoffset: 0; }
}