/* ============================================================
   KlimaCraft – Monteur-App: Handy-Bilder und Bühne (Runde 6, 01.11.2026)
   Nur auf funktion-monteur-app.html und der Startseite (Abschnitt
   #monteur-app). Rahmen und Glas aus Stil 2026 (.e-handy, .h-glas),
   Inhalte nach Wiki „Monteur App“ (Stand 28.10.2026).
   ============================================================ */
.e-handy.kdm-handy{position:relative;right:auto;bottom:auto;left:auto;transform:none;margin:0 auto;width:300px;z-index:2}
.e-handy.kdm-handy .h-glas{height:612px;display:flex;flex-direction:column;font-size:12px}
.kdm-handy .h-status{flex:none}
.kdm-kopf{flex:none;padding:0 18px 10px}
.kdm-kopf small{display:block;font-size:11px;color:#64748b}
.kdm-kopf b{display:block;margin-top:1px;font:700 20px/1.2 var(--kc-kopf,'Geist',system-ui,sans-serif);letter-spacing:-.01em;color:#0f172a}
.kdm-kopf b.klein{font-size:16px}
.kdm-titel{flex:none;padding:8px 18px 6px;font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#94a3b8}
.kdm-karte{flex:none;margin:0 12px 8px;padding:10px 12px;border:1px solid #e8edf3;border-radius:14px;background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.kdm-karte.kdm-laeuft{border-color:#bfdbfe;background:linear-gradient(#f5f9ff,#fff)}
.kdm-kz{display:flex;align-items:center;justify-content:space-between;gap:6px}
.kdm-nr{min-width:0;font-size:10px;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kdm-pille{flex:none;display:inline-flex;align-items:center;gap:5px;height:19px;padding:0 7px;border-radius:999px;background:#eff6ff;color:#1d4ed8;font-size:10px;font-weight:600;white-space:nowrap}
.kdm-pille i{width:6px;height:6px;border-radius:50%;background:#22c55e}
.kdm-karte b{display:block;margin-top:3px;font-size:13.5px;line-height:1.25;color:#0f172a}
.kdm-karte small{display:block;margin-top:1px;font-size:11px;color:#64748b}
.kdm-knoepfe{display:flex;gap:6px;margin-top:8px}
.kdm-knopf{flex:1;display:grid;place-items:center;min-height:32px;padding:4px 6px;border-radius:10px;border:1px solid #e2e8f0;background:#fff;color:#0f172a;font-size:11.5px;font-weight:600;line-height:1.2;text-align:center}
.kdm-knopf.haupt{background:#2563eb;border-color:#2563eb;color:#fff}
.kdm-knopf.gelb{background:#f59e0b;border-color:#f59e0b;color:#fff}
.kdm-block{flex:none;margin:0 12px;padding:9px 12px;border-radius:14px;background:#f8fafc;border:1px solid #eef2f6}
.kdm-block>span{font-size:11.5px;font-weight:600;color:#0f172a}
.kdm-spur{display:flex;gap:3px;height:8px;margin:7px 0 6px}
.kdm-spur i{border-radius:4px}
.kdm-grau{background:#94a3b8}.kdm-gelb{background:#f59e0b}.kdm-blau{background:#2563eb}
.kdm-block small{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:10px;color:#64748b}
.kdm-block small em{display:inline-block;width:8px;height:8px;margin-right:4px;border-radius:2px;vertical-align:-1px}
.kdm-hinweis{flex:none;margin:0 12px 8px;padding:10px 12px;border-radius:14px;background:#fffbeb;border:1px solid #fde68a}
.kdm-hinweis b{display:block;font-size:12.5px;line-height:1.3;color:#92400e}
.kdm-hinweis small{display:block;margin-top:2px;font-size:10.5px;line-height:1.35;color:#b45309}
.kdm-feld{flex:none;margin:0 12px 7px;padding:8px 12px;border-radius:12px;border:1px solid #eef2f6;background:#fff}
.kdm-feld small{display:block;font-size:9.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#94a3b8}
.kdm-feld span{display:block;margin-top:2px;font-size:12px;line-height:1.35;color:#0f172a}
.kdm-feld.anlage{border-color:#dbeafe;background:#f8fbff}
.kdm-feld .kdm-lnk{display:block;margin-top:4px;font-size:11px;font-weight:600;color:#2563eb}
.kdm-kacheln{flex:none;display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 12px 8px}
.kdm-kacheln div{padding:8px 10px;border-radius:12px;border:1px solid #eef2f6;background:#fff}
.kdm-kacheln small{display:block;font-size:10px;color:#64748b}
.kdm-kacheln b{display:block;margin-top:1px;font-size:14px;color:#0f172a}
.kdm-kacheln .gr b{color:#047857}
.kdm-weiter{flex:none;margin:2px 12px 0;font-size:11px;font-weight:600;color:#2563eb;text-align:center}
.kdm-leiste{margin-top:auto;flex:none;display:grid;grid-template-columns:repeat(5,1fr);align-items:end;padding:10px 4px 14px;border-top:1px solid #eef2f6;background:#fff}
.kdm-leiste>span{position:relative;display:grid;justify-items:center;gap:3px;font-size:9px;line-height:1.1;color:#64748b;text-align:center}
.kdm-leiste>span svg{width:18px;height:18px}
.kdm-leiste>span.an{color:#2563eb;font-weight:600}
.kdm-leiste>span sup{position:absolute;top:-5px;left:calc(50% + 4px);min-width:15px;height:15px;padding:0 4px;border-radius:999px;background:#f59e0b;color:#fff;font-size:9px;font-weight:700;line-height:15px}
.kdm-leiste>span.kdm-uhr{width:54px;height:54px;margin:-24px auto 0;align-content:center;gap:0;border-radius:50%;background:#fff;border:3px solid #2563eb;color:#0f172a;box-shadow:0 8px 18px -8px rgba(37,99,235,.6)}
.kdm-leiste>span.kdm-uhr b{font-size:13px;line-height:1}
.kdm-leiste>span.kdm-uhr small{font-size:8px;color:#64748b}
.kdm-leiste>span.kdm-uhr::after{content:"";position:absolute;top:1px;right:3px;width:9px;height:9px;border-radius:50%;background:#22c55e;border:2px solid #fff}
@media (prefers-reduced-motion:no-preference){.kdm-leiste>span.kdm-uhr::after{animation:aPuls 1.4s ease-in-out infinite}}

/* Bühne im Kopfbereich: links der Monteur, Mitte das Handy, rechts das Büro */
.kdm-screen{margin-top:56px}
.kdm-buehne{display:grid;grid-template-columns:minmax(0,1fr) 320px minmax(0,1fr);gap:40px;align-items:center;max-width:1120px;margin:0 auto}
.kdm-spalte{display:grid;gap:14px;align-content:center}
.kdm-spkopf{display:flex;align-items:center;gap:10px;font:600 17px/1.2 var(--kc-kopf,'Geist',system-ui,sans-serif);color:var(--e-ink,#0B1220)}
.kdm-chip{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;font:600 12px/1 'Noto Sans KC','Noto Sans',system-ui,sans-serif;letter-spacing:.02em}
.kdm-chip.du{background:#EFF6FF;color:#1D4ED8;box-shadow:inset 0 0 0 1px #BFDBFE}
.kdm-chip.auto{background:#ECFDF5;color:#047857;box-shadow:inset 0 0 0 1px #A7F3D0}
.kdm-schritte,.kdm-feed{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.kdm-schritte li{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:14px;background:#fff;border:1px solid var(--e-line,#E3E8EF);box-shadow:0 1px 2px rgba(15,23,42,.04);font-size:14.5px;font-weight:600;color:var(--e-ink,#0B1220)}
.kdm-schritte time{flex:none;min-width:44px;font-size:12.5px;font-weight:600;color:var(--e-slate,#5B6573);font-variant-numeric:tabular-nums}
.kdm-schritte li.offen{background:transparent;border-style:dashed;color:var(--e-slate,#5B6573);box-shadow:none}
.kdm-feed li{display:flex;align-items:flex-start;gap:11px;padding:11px 14px;border-radius:14px;background:#fff;border:1px solid #D1FAE5;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.kdm-feed li>i{flex:none;width:22px;height:22px;margin-top:1px;border-radius:50%;background:#10b981;color:#fff;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:700}
.kdm-feed b{display:block;font-size:14.5px;line-height:1.3;color:var(--e-ink,#0B1220)}
.kdm-feed small{display:block;margin-top:2px;font-size:12.5px;line-height:1.4;color:var(--e-slate,#5B6573)}
.kdm-feed li.offen{background:transparent;border:1px dashed #CBD5E1;box-shadow:none}
.kdm-feed li.offen>i{background:#E2E8F0}
@media (max-width:980px){
  .kdm-buehne{grid-template-columns:minmax(0,1fr) 300px;gap:28px;max-width:760px}
  .kdm-links{display:none}
}
@media (max-width:700px){
  .kdm-screen{margin-top:36px;padding:0 16px}
  .kdm-buehne{grid-template-columns:1fr;gap:26px;max-width:420px}
  .e-handy.kdm-handy{width:288px}
  .e-handy.kdm-handy .h-glas{height:590px}
}

/* Startseite und Seite: Handy als Bild neben dem Text */
.kdm-visual{display:grid;place-items:center;padding:12px 0}
.kdm-start-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:26px}
.kdm-start-cta .kdb-livelink{margin:0}
.kdm-demo-knoepfe{display:grid;gap:12px;justify-items:start;margin-top:26px}
.kdm-demo-knoepfe .e-btn{min-width:260px}
.kdm-fakten{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;color:var(--e-slate,#5B6573)}
.kdm-fakten li{display:inline-flex;align-items:center;gap:7px}
.kdm-fakten li::before{content:"✓";font-size:12px;font-weight:700;color:#059669}
@media (max-width:700px){.kdm-demo-knoepfe{justify-items:stretch}.kdm-demo-knoepfe .e-btn{min-width:0;width:100%}}
.kdm-demo-knoepfe .kdb-termin-klein{font-size:15px;font-weight:600;color:var(--e-ink2,#334155);text-decoration:none;border-bottom:1px solid #CBD5E1;padding:2px 0}
.kdm-demo-knoepfe .kdb-termin-klein:hover{color:var(--e-ink,#0B1220);border-bottom-color:currentColor}
@media (max-width:700px){.kdm-demo-knoepfe .kdb-termin-klein{justify-self:center}}

/* Runde 7 – Startseite, Reiter „Monteur-App“ unter „Alle Funktionen“: Bühne auf heller Fläche im dunklen Abschnitt */
.kdm-show{margin-top:26px;padding:40px 32px;border-radius:22px;background:linear-gradient(180deg,#F8FAFC,#EDF2F8);
  border:1px solid rgba(148,163,184,.22);box-shadow:0 40px 90px -40px rgba(0,0,0,.7)}
.kdm-show .kdm-buehne{max-width:1080px}
@media (max-width:760px){.kdm-show{padding:26px 14px;border-radius:18px}}