/* ============================================================
   appmock.css — Mockups im Look der echten semco-Apps.
   Abgeleitet aus den Original-Screens (Tailwind-basiert):
   System-Schrift, zentrierter App-Header, iOS-Chrome,
   Label/Wert-Zeilen, Kapitälchen-Sektionslabels, schlichte Karten.
   Basisgrößen: Desk 660x495, Phone 300x632 (werden per JS skaliert).
   ============================================================ */
.am{
  --ink:#111827; --ink-2:#374151; --mute:#6B7280; --mute-2:#9CA3AF;
  --line:#E5E7EB; --line-2:#EEF1F4; --ground:#E1E6E9; --ground-2:#EDF2F6;
  --blue:#0052A0; --green:#1BA44C; --amber:#E9B440; --red:#DC2626;
  --red-bg:#FEE2E2; --green-2:#16A34A;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); font-size:13px; line-height:1.35; letter-spacing:0;
  -webkit-font-smoothing:antialiased;
}
.am *{box-sizing:border-box}

/* ---------- Phone ---------- */
.am-phone{width:300px;height:632px;background:var(--ground);display:flex;flex-direction:column;overflow:hidden;position:relative}
.am-status{height:26px;background:var(--hd,var(--blue));color:#fff;display:flex;align-items:center;
  justify-content:space-between;padding:0 14px;font-size:11px;font-weight:600;position:relative;flex:none}
.am-status .notch{position:absolute;left:50%;top:0;transform:translateX(-50%);width:78px;height:15px;
  background:#000;border-radius:0 0 9px 9px}
.am-status .ico{display:flex;gap:4px;align-items:center}
.am-status .ico i{display:block;background:#fff;opacity:.95}
.am-status .wifi{width:11px;height:8px;clip-path:polygon(50% 100%,0 32%,12% 20%,50% 55%,88% 20%,100% 32%)}
.am-status .bat{width:16px;height:8px;border-radius:2px}
.am-title{background:var(--hd,var(--blue));color:#fff;text-align:center;font-size:14px;font-weight:600;
  padding:5px 0 9px;flex:none;letter-spacing:.01em}
.am-body{flex:1;padding:11px;display:flex;flex-direction:column;gap:9px;overflow:hidden}
.am-home{height:16px;display:grid;place-items:center;flex:none}
.am-home::after{content:"";width:88px;height:4px;border-radius:2px;background:#111827;opacity:.85}

/* Segment-Control */
.am-seg{align-self:flex-end;display:inline-flex;background:#fff;border-radius:999px;padding:2px;
  box-shadow:0 1px 3px rgba(17,24,39,.12);font-size:11px;font-weight:500}
.am-seg span{padding:3px 11px;border-radius:999px;color:var(--ink-2)}
.am-seg span.on{background:var(--hd,var(--blue));color:#fff;font-weight:600}

/* ---------- Karten ---------- */
.am-card{background:#fff;border:1px solid var(--line);border-radius:9px;padding:10px 12px}
.am-card.sel{border-color:var(--hd,var(--blue));box-shadow:0 1px 4px rgba(17,24,39,.1)}
.am-lbl{font-size:9.5px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--mute);
  display:flex;align-items:center;gap:5px;margin-bottom:6px}
.am-lbl .dot{width:6px;height:6px;border-radius:50%;background:var(--green)}
/* Label/Wert-Zeile — Wert rechtsbündig, halbfett */
.am-kv{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:3px 0;font-size:12px}
.am-kv .k{color:var(--ink-2)}
.am-kv .v{font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
/* Listeneintrag: Titel + Untertitel, optional Badge */
.am-row{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.am-row .t{font-size:12.5px;color:var(--ink)}
.am-row .s{font-size:10.5px;color:var(--mute);margin-top:2px}
.am-badge{font-size:9.5px;font-weight:600;padding:2.5px 7px;border-radius:999px;white-space:nowrap;flex:none}
.am-badge.red{background:var(--red-bg);color:var(--red)}
.am-badge.amber{background:#FEF3C7;color:#B45309}
.am-badge.green{background:#DCFCE7;color:#15803D}
.am-badge.grey{background:#F3F4F6;color:var(--ink-2)}
.am-btn{display:inline-block;background:var(--hd,var(--green));color:#fff;font-size:10.5px;font-weight:600;
  padding:5px 11px;border-radius:999px;margin-top:7px}
.am-fab{position:absolute;right:16px;bottom:30px;width:38px;height:38px;border-radius:50%;
  background:var(--hd,var(--green));color:#fff;display:grid;place-items:center;font-size:19px;font-weight:300;
  box-shadow:0 4px 12px rgba(17,24,39,.28)}
.am-err{font-size:11.5px;font-weight:600;color:#991B1B}
/* Checkbox-Zeile */
.am-chk{display:flex;align-items:center;gap:8px;padding:6px 9px;background:#fff;border:1px solid var(--line);
  border-radius:7px;font-size:11.5px}
.am-chk .box{width:14px;height:14px;border-radius:3px;border:1.5px solid #D1D5DB;flex:none}
.am-chk.done .box{background:var(--green-2);border-color:var(--green-2);position:relative}
.am-chk.done .box::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;
  border:solid #fff;border-width:0 1.6px 1.6px 0;transform:rotate(42deg)}
.am-chk.now{border-color:var(--amber)}
/* Baum */
.am-tree{font-size:11.5px;display:grid;gap:4px}
.am-tree .lvl{display:flex;align-items:center;gap:6px;color:var(--ink-2)}
.am-tree .lvl.i1{padding-left:12px}.am-tree .lvl.i2{padding-left:24px}
.am-tree .cv{color:var(--mute-2);font-size:9px}
.am-tree .pick{background:#fff;border:1.5px solid var(--blue);border-radius:6px;padding:4px 8px;color:var(--ink);font-weight:500}
.am-tree .node{background:#fff;border:1px solid var(--line);border-radius:6px;padding:4px 8px;flex:1}

/* ---------- Desktop / Portal ---------- */
.am-desk{width:660px;height:495px;background:var(--ground-2);display:flex;flex-direction:column;overflow:hidden}
.am-win{height:28px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;
  padding:0 12px;gap:7px;flex:none;font-size:11px;color:var(--mute)}
.am-win .tl{display:flex;gap:5px}
.am-win .tl i{width:9px;height:9px;border-radius:50%;display:block}
.am-win .c{flex:1;text-align:center}
.am-head{background:#fff;border-bottom:1px solid var(--line);padding:11px 16px;font-size:14px;font-weight:600;flex:none}
.am-main{flex:1;padding:12px 16px;display:flex;flex-direction:column;gap:11px;overflow:hidden}
/* KPI-Reihe */
.am-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.am-kpi{background:#fff;border:1px solid var(--line);border-radius:8px;padding:9px 11px}
.am-kpi.warn{border-color:#FCA5A5}
.am-kpi .l{font-size:9px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.am-kpi .v{font-size:19px;font-weight:600;margin-top:4px;font-variant-numeric:tabular-nums}
.am-kpi.warn .v{color:var(--red)}
.am-kpi .f{font-size:10px;color:var(--mute);margin-top:4px;display:flex;align-items:center;gap:5px}
.am-kpi .f i{width:6px;height:6px;border-radius:50%;display:block}
/* Zwei-Spalten-Karten */
.am-grid2{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.am-item{background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px 12px}
.am-item .ih{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.am-item .n{font-size:12.5px;font-weight:600}
.am-item .c{font-size:10.5px;color:var(--mute);margin-top:1px}
.am-item .pill{display:flex;align-items:center;gap:5px;background:#F3F4F6;border-radius:999px;
  padding:2.5px 8px;font-size:9.5px;font-weight:500;flex:none}
.am-item .pill i{width:6px;height:6px;border-radius:50%;display:block}
.am-mets{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:9px}
.am-met{border:1px solid var(--line);border-radius:6px;padding:6px 8px}
.am-met .l{font-size:8.5px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--mute)}
.am-met .v{font-size:12px;font-weight:500;margin-top:2px;font-variant-numeric:tabular-nums}
.am-met .v.bad{color:var(--red)}
.am-bar{height:4px;border-radius:2px;background:#F3F4F6;margin-top:9px;overflow:hidden}
.am-bar i{display:block;height:100%;border-radius:2px}
/* Tabelle */
.am-tbl{background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;flex:1}
.am-tbl .tr{display:grid;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--line-2);font-size:11.5px}
.am-tbl .tr:last-child{border-bottom:0}
.am-tbl .th{background:#F9FAFB;font-size:9px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.am-tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.am-sub{font-size:10.5px;color:var(--mute)}
/* Balkendiagramm */
.am-chart{display:flex;align-items:flex-end;gap:7px;height:96px;padding-top:6px}
.am-chart .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;height:100%}
.am-chart .bar{width:100%;border-radius:3px 3px 0 0;background:#BFD4EA}
.am-chart .bar.on{background:var(--blue)}
.am-chart .cl{font-size:8.5px;color:var(--mute-2)}

/* Im Solex-Browser: eigene Fensterleiste entfällt, Kopfzeile trägt den Ort */
.am-win{display:none}
.am-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.am-head .z{font-size:11px;font-weight:400;color:var(--mute)}

/* ============================================================
   Animationen — starten bei jedem Tab-Wechsel neu, weil die
   Slots per [hidden] auf display:none gehen und wieder zurück.
   ============================================================ */
@keyframes am-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes am-in{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
@keyframes am-pop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
@keyframes am-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes am-rise{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes am-count{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@keyframes am-check{from{opacity:0;transform:scale(.4) rotate(-18deg)}to{opacity:1;transform:none}}
@keyframes am-glow{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,0)}45%{box-shadow:0 0 0 4px rgba(220,38,38,.16)}}

.am{--e:cubic-bezier(.22,.61,.36,1)}
/* Kopfzeilen zuerst */
.am-title,.am-head{animation:am-up .42s var(--e) both}
/* KPI-Kacheln nacheinander */
.am-kpi{animation:am-up .5s var(--e) both}
.am-kpi:nth-child(1){animation-delay:.10s}.am-kpi:nth-child(2){animation-delay:.18s}
.am-kpi:nth-child(3){animation-delay:.26s}.am-kpi:nth-child(4){animation-delay:.34s}
.am-kpi .v{animation:am-count .45s var(--e) both;animation-delay:inherit}
.am-kpi.warn{animation:am-up .5s var(--e) both,am-glow 2.2s ease-out .9s 2}
/* Tabellenzeilen einlaufen */
.am-tbl .tr{animation:am-in .42s var(--e) both}
.am-tbl .tr:nth-child(1){animation-delay:.40s}.am-tbl .tr:nth-child(2){animation-delay:.50s}
.am-tbl .tr:nth-child(3){animation-delay:.60s}.am-tbl .tr:nth-child(4){animation-delay:.70s}
.am-tbl .tr:nth-child(5){animation-delay:.80s}.am-tbl .tr:nth-child(6){animation-delay:.90s}
/* Karten im Portal */
.am-item{animation:am-up .5s var(--e) both}
.am-item:nth-child(1){animation-delay:.42s}.am-item:nth-child(2){animation-delay:.52s}
.am-item:nth-child(3){animation-delay:.62s}.am-item:nth-child(4){animation-delay:.72s}
/* Fortschrittsbalken wachsen */
.am-bar i{transform-origin:left center;animation:am-grow .85s var(--e) both;animation-delay:.75s}
/* Diagramm-Säulen */
.am-chart .bar{transform-origin:bottom center;animation:am-rise .6s var(--e) both}
.am-chart .col:nth-child(1) .bar{animation-delay:.30s}.am-chart .col:nth-child(2) .bar{animation-delay:.38s}
.am-chart .col:nth-child(3) .bar{animation-delay:.46s}.am-chart .col:nth-child(4) .bar{animation-delay:.54s}
.am-chart .col:nth-child(5) .bar{animation-delay:.62s}.am-chart .col:nth-child(6) .bar{animation-delay:.70s}
/* Phone: Karten & Listeneinträge */
.am-body > *{animation:am-up .46s var(--e) both}
.am-body > *:nth-child(1){animation-delay:.14s}.am-body > *:nth-child(2){animation-delay:.24s}
.am-body > *:nth-child(3){animation-delay:.34s}.am-body > *:nth-child(4){animation-delay:.44s}
.am-body > *:nth-child(5){animation-delay:.54s}.am-body > *:nth-child(6){animation-delay:.64s}
/* Checkliste hakt nacheinander ab */
.am-chk .box::after{animation:am-check .38s var(--e) both}
.am-chk:nth-of-type(1) .box::after{animation-delay:.55s}
.am-chk:nth-of-type(2) .box::after{animation-delay:.75s}
.am-chk:nth-of-type(3) .box::after{animation-delay:.95s}
/* Badges & Buttons */
.am-badge,.am-btn,.am-fab{animation:am-pop .4s var(--e) both;animation-delay:.55s}
.am-fab{animation-delay:.8s}
/* Live-Punkt pulsiert dezent */
.am-lbl .dot{animation:am-pop .4s var(--e) both .5s}

@media (prefers-reduced-motion:reduce){
  .am *,.am{animation:none !important}
}

/* ============================================================
   Highlights — lenken den Blick auf das, worum es geht.
   ============================================================ */
@keyframes am-sweep{0%{left:-35%;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:105%;opacity:0}}
@keyframes am-ring{0%{box-shadow:0 0 0 0 rgba(13,113,234,.42)}70%{box-shadow:0 0 0 7px rgba(13,113,234,0)}100%{box-shadow:0 0 0 0 rgba(13,113,234,0)}}
@keyframes am-ring-warn{0%{box-shadow:0 0 0 0 rgba(220,38,38,.4)}70%{box-shadow:0 0 0 7px rgba(220,38,38,0)}100%{box-shadow:0 0 0 0 rgba(220,38,38,0)}}
@keyframes am-ripple{0%{transform:scale(.3);opacity:.55}100%{transform:scale(2.6);opacity:0}}
@keyframes am-flash{0%,100%{background:#fff}45%{background:#FFF9E8}}
@keyframes am-tick{0%,100%{transform:none}40%{transform:translateY(-2px) scale(1.05)}}

/* Lichtstreifen über die erste Datenzeile */
.am-tbl .tr:nth-child(2){position:relative;overflow:hidden}
.am-tbl .tr:nth-child(2)::before{content:"";position:absolute;top:0;bottom:0;width:32%;left:-35%;
  background:linear-gradient(90deg,transparent,rgba(13,113,234,.14),transparent);
  animation:am-sweep 1.5s var(--e) 1.05s both;pointer-events:none}
/* Ausgewählte Karte pulst einmal */
.am-card.sel{animation:am-up .46s var(--e) both,am-ring 1.6s var(--e) .85s 1}
/* Aktive Checkbox: Tap-Ripple + Aufblitzen der Zeile */
.am-chk.now{position:relative;animation:am-up .46s var(--e) both,am-flash 1.5s var(--e) 1.15s 1}
.am-chk.now::after{content:"";position:absolute;left:12px;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;
  border-radius:50%;background:var(--amber);animation:am-ripple 1.1s var(--e) 1.2s 2;pointer-events:none}
/* Warn-KPI: Ring statt nur Schatten */
.am-kpi.warn{animation:am-up .5s var(--e) both,am-ring-warn 1.9s var(--e) 1s 2}
/* Kritische Werte zucken einmal */
.am-met .v.bad,.am-tbl .tr .am-badge.red{animation:am-tick 1.1s var(--e) 1.3s 1}
/* Portal-Karte mit dem schlechtesten Wert bekommt Fokus */
.am-grid2 .am-item:nth-child(1){animation:am-up .5s var(--e) .42s both,am-ring-warn 1.9s var(--e) 1.15s 1}

@media (prefers-reduced-motion:reduce){
  .am-tbl .tr:nth-child(2)::before,.am-chk.now::after{display:none}
}