/* JP Remote: Zusätze zur Dashboard-Grundlage (app.css) im blauen JP-Stil der JP-Webseiten. */
:root[data-theme="light"] {
  --bg: #faf9fc; --panel: #ffffff; --panel-2: #f3f6fb; --line: #e9e7ee; --line-2: #dcdbe6;
  --text: #191b20; --muted: #5c5f6b; --faint: #767987;
  --accent: #4f9be6; --accent-2: #eaf3fd; --accent-ink: #ffffff;
  --good: #1f9d55; --good-bg: #e8f7ee; --warn: #c27c0e; --warn-bg: #fff4e0; --bad: #d64545; --bad-bg: #fdecec;
  --violet: #8a5fae; --teal: #4f9be6; --slate: #5c5f6b; --pink: #7dd3fc; --pink-text: #0284c7; --soft-blue: #a8d3f9;
  --logo: linear-gradient(135deg, #4f9be6, #38bdf8); --logo-ink: #ffffff; --frame: #4f9be6;
  --shadow: 0 1px 2px rgba(25,27,32,.04), 0 6px 20px rgba(79,155,230,.08);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0f1218; --panel: #161a22; --panel-2: #1c212b; --line: #262c38; --line-2: #323a49;
  --text: #eef1f6; --muted: #9aa3b5; --faint: #6b7385;
  --accent: #7db8f2; --accent-2: #1a2a3d; --accent-ink: #0b1620;
  --good: #46c17f; --good-bg: #14281d; --warn: #e2a23b; --warn-bg: #2a2112; --bad: #ff6b6b; --bad-bg: #2c1717;
  --violet: #c9a6ff; --teal: #7db8f2; --slate: #9aa3b5; --pink: #7dd3fc; --pink-text: #7dd3fc; --soft-blue: #a8d3f9;
  --logo: linear-gradient(135deg, #7db8f2, #38bdf8); --logo-ink: #0b1620; --frame: #7db8f2;
  --shadow: none; color-scheme: dark;
}
/* Schrift: Inter (OFL, public/fonts). Ohne eigene Schrift zeigte Windows Segoe UI, das wirkte billig (Paul 22.10.2026). */
@font-face { font-family: 'Inter Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/fonts/inter-latin-wght-normal.woff2) format('woff2-variations'), url(/fonts/inter-latin-wght-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Inter Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/fonts/inter-latin-ext-wght-normal.woff2) format('woff2-variations'), url(/fonts/inter-latin-ext-wght-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
html, body, button, input, select, textarea { font-family: 'Inter Variable', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-feature-settings: 'cv01', 'ss03'; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body { background: var(--bg); }

/* Anmelde-Seiten */
.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(900px 500px at 10% -10%, color-mix(in srgb, var(--soft-blue) 45%, transparent), transparent 60%),
              radial-gradient(700px 420px at 110% 110%, color-mix(in srgb, var(--pink) 35%, transparent), transparent 60%), var(--bg); }
.auth-card { width: min(410px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 30px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 20px 60px rgba(79,155,230,.12); }
.auth-card .brand { display: flex; gap: 12px; align-items: center; padding: 0 0 6px; }
.auth-card .logo { width: 38px; height: 38px; border-radius: 12px; font-size: 14px; }
.auth-card h1 { margin: 0; font-size: 19px; }
.auth-card .sub { margin: 0; color: var(--muted); font-size: 13px; }
.auth-card label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.auth-card button { justify-content: center; padding: 11px; border-radius: 12px; }
.auth-card button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.auth-card .qr { background: #fff; border-radius: 14px; padding: 12px; width: 210px; margin: 0 auto; border: 1px solid var(--line); }
.auth-card .qr img { width: 100%; display: block; }
.auth-card .link { background: none; border: none; color: var(--accent); padding: 0; justify-content: flex-start; font-size: 13px; }
.error { color: var(--bad); margin: 0; font-size: 14px; }

/* Telegram-Schritt */
.tg-hero { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 4px 0 2px; }
.tg-hero .tg-icon { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(160deg, #37aee2, #1e96c8); display: grid; place-items: center; box-shadow: 0 10px 24px rgba(42,171,238,.35); }
.tg-hero .tg-icon svg { width: 34px; height: 34px; margin-left: -3px; }
.tg-hero h1 { margin: 0; font-size: 20px; }
.tg-hero p { margin: 0; color: var(--muted); font-size: 14px; max-width: 300px; }
.tg-field { display: flex; align-items: center; border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel); overflow: hidden; }
.tg-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-2); }
.tg-field span { padding: 0 4px 0 14px; color: var(--muted); font-weight: 600; }
.tg-field input { border: none; box-shadow: none !important; padding: 12px 12px 12px 2px; background: transparent; }
.tg-note { display: flex; gap: 8px; align-items: flex-start; background: var(--accent-2); color: var(--text); border-radius: 12px; padding: 10px 12px; font-size: 13px; }

/* Handys und Team */
.phone-tile { cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: var(--radius); }
.phone-tile:hover { border-color: var(--accent); }
.phone-tile .ph { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-2); color: var(--accent); }
.phones-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.chips-inline { display: flex; flex-wrap: wrap; gap: 4px; }
.check-list { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow: auto; border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.check-list label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); }
.tg-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); }
.tg-chip svg { width: 15px; height: 15px; }
/* Passwort: Auge zum Zeigen und Regeln mit Haken */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 44px; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--muted); padding: 6px !important; border-radius: 8px; display: grid; place-items: center; cursor: pointer; }
.pw-eye:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.pw-rules { list-style: none; margin: -4px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; font-size: 12.5px; color: var(--muted); }
.pw-rules[hidden] { display: none; }
.pw-rules li { display: flex; align-items: center; gap: 6px; }
.pw-rules li::before { content: ''; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--line); flex: none; box-sizing: border-box; }
.pw-rules li.ok { color: var(--good, #2f9e44); }
.pw-rules li.ok::before { border: none; background: var(--good, #2f9e44) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/10px no-repeat; }
.auth-card button.primary:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 380px) { .pw-rules { grid-template-columns: 1fr; } }

/* Billing */
.bill-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; }
.bill-amount { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; margin: 4px 0 2px; }
.bill-picks { max-height: 50vh; overflow: auto; }
@media (max-width: 760px) { .bill-grid { grid-template-columns: 1fr; } }

/* Boxes */
.fleet-boxes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.fleet-code { font-family: var(--mono, ui-monospace, monospace); font-size: 28px; font-weight: 700; letter-spacing: 0.06em; text-align: center; padding: 14px; border: 1px dashed var(--line); border-radius: 12px; user-select: all; }

/* Zentrale: Ueberblick, Vorschaubilder, MultiView */
.ov-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ov-tiles:not(:has(> :nth-child(5))) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 641px) { .ov-tiles:has(> :nth-child(3)):not(:has(> :nth-child(4))) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Kacheln immer in einer Reihe bzw. gleichmaessig, nie eine allein (Paul 25.10.2026) */
@media (min-width: 1280px) {
  .ov-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ov-tiles:not(:has(> :nth-child(6))) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ov-tiles:not(:has(> :nth-child(5))) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ov-tiles:not(:has(> :nth-child(4))) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ov-tile { color: inherit; text-decoration: none; }
.ov-num { font-size: 28px; font-weight: 700; margin: 4px 0 2px; }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.thumbs.big { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }   /* Name, #0001 und Working passen in eine Zeile */
.thumb { color: inherit; text-decoration: none; display: flex; flex-direction: column; gap: 6px; }
/* Alle iPhones im gleichen Rahmen, nichts abgeschnitten (iPhone SE ist kürzer als iPhone 13: oben und unten schwarzer Rand) */
.thumb-img { aspect-ratio: 9 / 19.5; border-radius: 14px; border: 1px solid var(--line); background: #0b0c0f; overflow: hidden; display: grid; place-items: center; }
.thumb-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.thumb.off .thumb-img { background: var(--panel-2); }
.thumb .card-net { font-variant-numeric: tabular-nums; }
.thumb.off .thumb-img { opacity: .7; }
.multi-grid { display: grid; grid-template-columns: repeat(var(--mv-cols, 6), minmax(0, 1fr)); gap: 14px; }
.multi-cell { color: inherit; text-decoration: none; display: flex; flex-direction: column; gap: 6px; }
.multi-cell .live { aspect-ratio: 9 / 19.5; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: #000; }
.multi-cell .live img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Telegram verbinden: kleiner Knopf links unten */
#tg-slot .tg-chip { display: flex; align-items: center; gap: 8px; width: calc(100% - 20px); margin: 0 10px 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid color-mix(in srgb, #2aabee 35%, transparent); background: color-mix(in srgb, #2aabee 10%, transparent); color: var(--text); font-size: 13px; text-align: left; cursor: pointer; }
#tg-slot .tg-chip svg { color: #2aabee; flex: none; }
#tg-slot .tg-chip:hover { border-color: #2aabee; }

/* Admin / Kundensicht */
.view-switch { display: flex; align-items: center; gap: 8px; width: calc(100% - 20px); margin: 0 10px 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 13px; text-align: left; cursor: pointer; }
.view-switch:hover { border-color: var(--accent); }
.view-banner { margin-bottom: 14px; }
/* Vorschaubild: ruhige Flaeche bis das Bild da ist, nie das kaputte Bild-Symbol */
.thumb-img img:not([src]) { visibility: hidden; }
.thumb-img:not(.ok) img { opacity: 0; }
.thumb-img.ok img { opacity: 1; transition: opacity .2s; }
/* Ladebild, bis app.js laeuft */
.boot { min-height: 100vh; display: grid; place-items: center; }
.boot .logo { animation: boot 1.2s ease-in-out infinite; }
@keyframes boot { 50% { opacity: .35; } }

.ov-tile.warn .ov-num { color: var(--bad, #d64545); }
/* Sprache: kleiner Knopf neben dem Namen */
.side-foot { display: flex; align-items: center; gap: 6px; }
.lang-chip { display: inline-flex; align-items: center; gap: 4px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--muted, inherit); font-size: 12px; font-weight: 600; cursor: pointer; flex: none; }
.lang-chip:hover { border-color: var(--accent); color: var(--text); }
/* iPhone-Karte: Status-Punkt, offene Tickets */
.card-name { display: flex; align-items: center; gap: 6px; }
.sdot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #9aa3b2; }
.sdot.good { background: #2fb37a; } .sdot.warn { background: #e0a526; } .sdot.bad { background: #d64545; } .sdot.blue { background: var(--accent); }
.thumb .tix { color: #d64545; display: flex; align-items: center; gap: 4px; }
/* Tipp-Punkt auf dem Live-Bild */
#live { position: relative; }
.tap-dot { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: rgba(79,155,230,.45); border: 2px solid rgba(255,255,255,.85); pointer-events: none; animation: tapdot .45s ease-out forwards; }
@keyframes tapdot { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }
/* Video-Bild (Canvas) wie das JPEG-Bild */
#live canvas, .multi-cell .live canvas { width: 100%; height: 100%; object-fit: contain; display: block; touch-action: none; }
#live canvas.hidden, .multi-cell canvas.hidden, #live img.hidden, .multi-cell img.hidden { display: none; }

/* Dashboard (JP-Team): ruhig, Blau und Grau */
.db-todo { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.db-chip { display: inline-flex; gap: 6px; align-items: center; padding: 7px 12px; border-radius: 999px; background: var(--accent-2); color: var(--text); text-decoration: none; font-size: 13px; }
.db-chip b { color: var(--accent); }
.db-hero { display: grid; grid-template-columns: 2.2fr 1fr; gap: 14px; }
.db-rev { padding: 20px 22px 14px; display: flex; flex-direction: column; min-width: 0; }
.db-chart-head { display: flex; align-items: flex-end; gap: 34px; flex-wrap: wrap; }
.db-big { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin-top: 4px; font-variant-numeric: tabular-nums; }
.db-mute { color: var(--muted); }
.db-key { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; vertical-align: 0; }
.db-key-r { background: var(--accent); } .db-key-c { background: color-mix(in srgb, var(--muted) 45%, transparent); }
.db-chart { width: 100%; height: 150px; margin-top: 18px; }
.db-bar { fill: var(--accent); } .db-bar0 { fill: var(--line); } .db-cbar { fill: color-mix(in srgb, var(--muted) 45%, transparent); }
.db-ticks { position: relative; height: 16px; margin-top: 6px; font-size: 11.5px; color: var(--faint); }
.db-ticks span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.db-ticks span:first-child { transform: none; } .db-ticks span:last-child { transform: translateX(-100%); }
.db-side { padding: 4px 22px; display: flex; flex-direction: column; justify-content: space-around; }
.db-side .db-stat + .db-stat { border-top: 1px solid var(--line); }
.db-stat { padding: 14px 0; }
.db-row .db-stat { padding: 16px 18px; }
.db-label { font-size: 12.5px; color: var(--muted); }
.db-val { font-size: 22px; font-weight: 650; margin-top: 4px; font-variant-numeric: tabular-nums; }
.db-sub { font-size: 12.5px; color: var(--faint); margin-top: 2px; }
.db-neg { color: var(--muted); }
.db-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 14px; }
.db-tabs { margin: 14px 14px 4px; }
.db-cats { padding: 12px 14px 8px; display: grid; gap: 9px; }
.db-catrow { display: grid; grid-template-columns: 170px 1fr 110px 120px; gap: 12px; align-items: center; }
.db-catname { font-size: 13.5px; }
.db-catbar { height: 8px; background: var(--line); border-radius: 99px; overflow: hidden; }
.db-catbar span { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.db-costtable { margin-top: 6px; }
.db-costtable tr.db-grp td { background: var(--panel-2, transparent); padding-top: 12px; }
.db-src { padding: 10px 14px 14px; }
@media (max-width: 1000px) { .db-hero { grid-template-columns: 1fr; } .db-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .db-catrow { grid-template-columns: 1fr 1fr; } .db-catbar { grid-column: 1 / -1; order: 3; } .db-big { font-size: 24px; } .db-chart-head { gap: 18px; } }
/* Team (JP-Team = Support-Team) */
.sp-switch { position: relative; display: inline-block; width: 36px; height: 20px; }
.sp-switch input { opacity: 0; width: 0; height: 0; }
.sp-switch span { position: absolute; inset: 0; background: var(--line); border-radius: 99px; transition: .15s; cursor: pointer; }
.sp-switch span::after { content: ''; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.sp-switch input:checked + span { background: var(--accent); }
.sp-switch input:checked + span::after { transform: translateX(16px); }
.sp-switch input:disabled + span { opacity: .4; cursor: default; }
.tm-person { display: flex; align-items: center; gap: 10px; }
.tm-av { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-2); color: var(--accent); display: grid; place-items: center; font-weight: 650; font-size: 13px; flex: none; }
/* Boxes */
.bx-card { padding: 18px 20px; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.bx-card .grow { min-width: 180px; }
.bx-stat { text-align: right; } .bx-stat b { font-size: 20px; display: block; font-variant-numeric: tabular-nums; }
.sdot.inline { display: inline-block; margin-right: 6px; vertical-align: 1px; }

/* Handy-Seite: Dateien in die Galerie */
.up-drop { display: flex; gap: 12px; align-items: center; padding: 14px; border: 1.5px dashed var(--line); border-radius: 12px; cursor: pointer; color: var(--accent); }
.up-drop span { display: flex; flex-direction: column; gap: 2px; color: var(--text); }
.up-drop:hover, .up-drop.over { border-color: var(--accent); background: var(--accent-2); }

/* Karten: zuweisen, wer es gerade offen hat */
.link-btn { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }
.inview { color: var(--accent); }

/* Karte: Nummer links, Status rechts; Modell/eSIM links, Assign rechts */
.card-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; margin-top: 3px; }
.card-row > .ellipsis { min-width: 0; }
.card-row .card-name { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.card-row + .card-row { font-size: 11.5px; }
.card-row .link-btn { flex: none; }

/* Karte: Anbieter-Zeichen, Volumen, Modell; Assign als kleiner Knopf */
.card-sim > span { display: inline-flex; align-items: center; gap: 6px; }
.card-sim b { font-weight: 600; color: var(--text); letter-spacing: .01em; }
.sim { display: inline-grid; place-items: center; flex: none; height: 16px; min-width: 16px; border-radius: 4px; font-size: 9.5px; font-weight: 700; line-height: 1; }
.sim-flex { background: #111; color: #ff7900; padding: 0 4px; letter-spacing: .02em; }
.sim-orange { background: #ff7900; width: 16px; }
.sim-orange::after { content: ""; width: 8px; height: 2px; background: #fff; margin-top: 7px; }
.sim-other { background: var(--line); color: var(--muted); padding: 0 3px; }
.as-btn { flex: none; border: 1px solid var(--line); background: var(--panel); color: var(--accent); border-radius: 999px; font-size: 11px; padding: 2px 9px; cursor: pointer; line-height: 1.4; }
.as-btn:hover { border-color: var(--accent); background: var(--accent-2); }
.thumb .card-row { margin-top: 5px; }
.thumb .card-row { min-height: 22px; }

/* iPhones: Kachel zwei Zeilen, Liste mit Zeichen */
.card-sim { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.card-sim b { font-weight: 600; color: var(--text); }
.ph-table td { vertical-align: middle; }
.ph-id, .ph-cell { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.ph-cell svg { color: var(--faint); flex: none; }

.ph-model .ph-ico { color: var(--muted); }

/* Offline-iPhone: roter Bildschirm */
.thumb.off .thumb-img { background: linear-gradient(160deg, color-mix(in srgb, var(--bad) 22%, var(--panel)), color-mix(in srgb, var(--bad) 40%, var(--panel))); border: 1px solid color-mix(in srgb, var(--bad) 45%, transparent); display: grid; place-items: center; }
.thumb.off .thumb-img .pill { background: var(--bad); color: #fff; }

/* Karten: nichts laeuft in die Nachbarkarte (Uebersicht hat schmalere Karten) */
.thumb .card-row { overflow: hidden; overflow: clip; }
.thumb .card-sim { min-width: 0; overflow: hidden; }
.thumb .card-sim b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill.inuse { font-size: 10.5px; padding: 1px 8px; flex: none; }

/* MultiView: schlanke Leiste oben */
.mv-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.multi-cell .card-row { margin-top: 0; }

.mv-slider { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.mv-slider input[type=range] { -webkit-appearance: none; appearance: none; width: 160px; height: 4px; border-radius: 99px; background: var(--line); outline: none; cursor: pointer; }
.mv-slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 2px solid var(--panel); box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.mv-slider input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 2px solid var(--panel); }
.mv-slider input[type=range]::-moz-range-track { height: 4px; border-radius: 99px; background: var(--line); }

.mv-num { font-size: 13px; color: var(--muted); white-space: nowrap; min-width: 72px; }
.mv-num b { color: var(--text); font-size: 15px; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .multi-grid { grid-template-columns: repeat(min(var(--mv-cols, 6), 3), minmax(0, 1fr)); } }

.mv-model { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; color: var(--muted); font-weight: 500; }
.mv-model .ph-ico { width: 9px; height: 14px; color: var(--muted); }
.multi-cell .card-row { overflow: hidden; }
.multi-cell .card-sim { min-width: 0; overflow: hidden; }
.multi-cell .card-sim b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Tickets: Postfach in zwei Spalten */
.tk-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.tk-wrap { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; min-height: 520px; overflow: hidden; padding: 0; }
.tk-list { border-right: 1px solid var(--line); overflow-y: auto; max-height: calc(100vh - 180px); }
.tk-item { display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 14px 16px; cursor: pointer; color: inherit; font: inherit; border-radius: 0; }
.tk-item:hover { background: var(--panel-2, rgba(0,0,0,.02)); }
.tk-item.active { background: var(--accent-2); box-shadow: inset 3px 0 0 var(--accent); }
.tk-item .sdot { margin-top: 6px; }
.tk-ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--panel-2, var(--line)); color: var(--muted); }
.tk-ico.bad { background: var(--bad-bg); color: var(--bad); } .tk-ico.warn { background: var(--warn-bg); color: var(--warn); } .tk-ico.good { background: var(--good-bg); color: var(--good); }
.tk-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.tk-top { display: flex; justify-content: space-between; gap: 8px; }
.tk-snip { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-detail { padding: 26px 30px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.tk-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.tk-head h2 { margin: 2px 0 4px; font-size: 22px; letter-spacing: -0.01em; }
.tk-msg { font-size: 15px; line-height: 1.55; padding: 16px 18px; border-radius: 14px; background: var(--panel-2, rgba(0,0,0,.03)); border: 1px solid var(--line); white-space: pre-wrap; }
.tk-phone { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; color: inherit; text-decoration: none; }
.tk-phone:hover { border-color: var(--accent); }
.tk-time { display: flex; gap: 0; }
.tk-step { flex: 1; display: flex; gap: 10px; align-items: flex-start; position: relative; }
.tk-step > span { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line); background: var(--panel); margin-top: 3px; flex: none; z-index: 1; }
.tk-step:not(:last-child)::after { content: ''; position: absolute; left: 12px; right: 8px; top: 8px; height: 2px; background: var(--line); }
.tk-step.done > span { background: var(--accent); border-color: var(--accent); }
.tk-step.done:not(:last-child)::after { background: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.tk-step > div { background: var(--panel); padding-right: 10px; z-index: 1; position: relative; margin-top: -2px; }
.tk-note { display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--accent-2); color: var(--text); }
.tk-note svg { color: var(--accent); margin-top: 3px; flex: none; }
.tk-actions { display: flex; gap: 8px; margin-top: auto; justify-content: flex-end; }
.tk-empty { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; max-width: 320px; color: var(--muted); }
.tk-empty svg { color: var(--faint); }
.tk-empty b { color: var(--text); font-size: 16px; }
@media (max-width: 900px) { .tk-wrap { grid-template-columns: 1fr; } .tk-list { border-right: 0; max-height: 320px; } .tk-detail { padding: 20px; } }

/* Ticket-Detail, modern */
.tk-head { align-items: center; gap: 14px; }
.tk-head h2 { margin: 0 0 4px; }
.tk-hico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; flex: none; background: var(--panel-2, var(--line)); color: var(--muted); }
.tk-hico.bad { background: var(--bad-bg); color: var(--bad); } .tk-hico.warn { background: var(--warn-bg); color: var(--warn); } .tk-hico.good { background: var(--good-bg); color: var(--good); }
.tk-meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12.5px; color: var(--muted); }
.tk-meta span + span::before { content: "·"; margin-right: 6px; color: var(--faint); }
.tk-ex { color: var(--accent); }
.tk-chat { display: flex; gap: 10px; align-items: flex-end; }
.tk-chat.me { justify-content: flex-end; }
.tk-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--accent-2); color: var(--accent); font-weight: 650; font-size: 13px; }
.tk-bubble { max-width: 78%; padding: 12px 15px; border-radius: 16px 16px 16px 4px; background: var(--panel-2, rgba(0,0,0,.035)); border: 1px solid var(--line); font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; display: flex; flex-direction: column; gap: 3px; }
.tk-chat.me .tk-bubble { border-radius: 16px 16px 4px 16px; background: var(--accent-2); border-color: transparent; }
.tk-phone { gap: 14px; padding: 12px; border-radius: 16px; transition: border-color .15s, box-shadow .15s; }
.tk-phone:hover { box-shadow: 0 4px 16px rgba(0,0,0,.06); }
.tk-shot { width: 46px; aspect-ratio: 9 / 19.5; border-radius: 9px; overflow: hidden; background: var(--line); flex: none; }
.tk-shot img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .2s; display: block; }
.tk-shot.ok img { opacity: 1; }
.tk-pinfo { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.tk-pname { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; }
.tk-pspec { display: inline-flex; align-items: center; gap: 14px; font-size: 13px; flex-wrap: wrap; }
.tk-open { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--accent); white-space: nowrap; }
.tk-steps { display: grid; grid-template-columns: repeat(3, 1fr); position: relative; }
.tk-st { display: flex; flex-direction: column; gap: 2px; position: relative; padding-top: 22px; font-size: 13.5px; }
.tk-st::before { content: ""; position: absolute; top: 6px; left: 0; right: 0; height: 2px; background: var(--line); }
.tk-st.done::before { background: var(--accent); }
.tk-st:first-child::before { left: 7px; } .tk-st:last-child::before { right: auto; width: 7px; }
.tk-dot { position: absolute; top: 0; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--panel); border: 2px solid var(--line); box-sizing: border-box; }
.tk-st.done .tk-dot { background: var(--accent); border-color: var(--accent); }
.tk-st.now .tk-dot { box-shadow: 0 0 0 4px var(--accent-2); }
.tk-actions button { display: inline-flex; align-items: center; gap: 6px; }

/* Ticket-Detail, ruhig und klar */
.tk-detail { padding: 0; gap: 0; }
.tk-d { padding: 26px 30px 10px; display: flex; flex-direction: column; gap: 22px; flex: 1; }
.tk-dhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.tk-dhead h2 { margin: 0 0 6px; font-size: 21px; font-weight: 650; letter-spacing: -0.01em; }
.tk-lbl { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; }
.tk-lbl:not(:first-child) { margin-top: 14px; }
.tk-quote { margin: 0; padding: 2px 0 2px 14px; border-left: 3px solid var(--line); font-size: 15px; line-height: 1.55; color: var(--text); white-space: pre-wrap; }
.tk-quote.tk-reply { border-left-color: var(--accent); }
.tk-ph { display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; border: 1px solid var(--line); border-radius: 12px; color: inherit; text-decoration: none; }
.tk-ph:hover { border-color: var(--accent); }
.tk-ph .tk-shot { width: 34px; border-radius: 7px; }
.tk-phl { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.tk-phn { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 14.5px; }
.tk-phs { display: flex; flex-wrap: wrap; align-items: center; gap: 0; font-size: 12.5px; color: var(--muted); }
.tk-phs > span { display: inline-flex; align-items: center; gap: 6px; }
.tk-phs > span + span::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--faint); margin: 0 9px; }
.tk-go { color: var(--faint); display: grid; }
.tk-prog { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.tk-prog li { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; min-height: 32px; position: relative; font-size: 14px; color: var(--muted); }
.tk-prog li:not(:last-child)::after { content: ""; position: absolute; left: 6px; top: 22px; height: 20px; width: 2px; background: var(--line); }
.tk-prog li.done { color: var(--text); }
.tk-prog li.done:not(:last-child)::after { background: var(--accent); }
.tk-prog .tk-dot { position: static; width: 14px; height: 14px; }
.tk-pt { font-size: 12.5px; color: var(--faint); }
.tk-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 30px; border-top: 1px solid var(--line); background: var(--panel-2, transparent); }
.tk-item .tk-ico { width: 28px; height: 28px; border-radius: 8px; }

.tk-prog .tk-dot { border-radius: 50%; border: 2px solid var(--line); background: var(--panel); box-sizing: border-box; z-index: 1; }
.tk-prog li.done .tk-dot { background: var(--accent); border-color: var(--accent); }
.tk-prog li:not(:last-child)::after { left: 6px; top: 23px; height: 18px; }

/* Dashboard: Kosten nach Bereich, blau laufend, gruen einmalig */
.cs { padding: 6px 16px 4px; display: flex; flex-direction: column; gap: 16px; }
.cs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 13px; cursor: pointer; }
.cs-chip span { color: var(--muted); font-variant-numeric: tabular-nums; }
.cs-chip i, .cs-legend i, .cs-area i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; flex: none; }
.cs-chip:hover { border-color: var(--accent); }
.cs-chip.active { background: var(--accent-2); border-color: var(--accent); }
.cs-chip.active span { color: var(--accent); }
.cs-sum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.cs-box { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.cs-box.blue { background: color-mix(in srgb, #4f9be6 9%, var(--panel)); border-color: color-mix(in srgb, #4f9be6 28%, var(--line)); }
.cs-box.green { background: color-mix(in srgb, #3fb68b 9%, var(--panel)); border-color: color-mix(in srgb, #3fb68b 28%, var(--line)); }
.cs-box.blue .cs-num { color: #2f78c4; } .cs-box.green .cs-num { color: #2e9470; }
.cs-num { font-size: 24px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.cs-bar { display: flex; height: 12px; border-radius: 99px; overflow: hidden; gap: 2px; background: var(--line); }
.cs-bar span { display: block; min-width: 3px; }
.cs-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--muted); margin-top: -6px; }
.cs-legend span { display: inline-flex; align-items: center; gap: 6px; } .cs-legend b { color: var(--text); font-weight: 600; }
.cs-area { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); }
.cs-m { color: #2f78c4; } .cs-o { color: #2e9470; }
.cs-table tfoot td { border-top: 2px solid var(--line); padding-top: 12px; }
@media (max-width: 900px) { .cs-sum { grid-template-columns: repeat(2, 1fr); } }
.cs-table th.num { text-align: right; }

/* Dashboard oben: Kennzahlen mit Farbe (blau, gruen, rot) */
.dk-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.dk { padding: 16px 18px; position: relative; overflow: hidden; }
.dk::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: var(--dk); }
.dk.blue { --dk: #4f9be6; } .dk.green { --dk: #3fb68b; } .dk.red { --dk: #e5484d; }
.dk-ico { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--dk); background: color-mix(in srgb, var(--dk) 12%, transparent); }
.dk-num { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin-top: 6px; font-variant-numeric: tabular-nums; }
.dk.red .dk-num { color: #d33a3f; } .dk.green .dk-num { color: #2e9470; }
.db-bar { fill: #3fb68b; } .db-cbar { fill: color-mix(in srgb, #e5484d 70%, transparent); } .db-su { fill: #4f9be6; }
.db-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.db-leg i { width: 10px; height: 10px; border-radius: 3px; } .db-leg i.g { background: #3fb68b; } .db-leg i.r { background: #e5484d; } .db-leg i.b { background: #4f9be6; } .db-leg i.dot { border-radius: 50%; }
.db-chart-head { align-items: center; gap: 16px; }
.db-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.dl { display: flex; flex-direction: column; }
.dl-row { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-top: 1px solid var(--line); }
.dl-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; background: color-mix(in srgb, #4f9be6 14%, transparent); color: #2f78c4; font-weight: 650; font-size: 13px; }
.dl-av.g { background: color-mix(in srgb, #3fb68b 14%, transparent); color: #2e9470; }
.dl-amt { color: #2e9470; }
.dl-empty { padding: 16px; border-top: 1px solid var(--line); }
@media (max-width: 1100px) { .dk-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px) { .dk-row { grid-template-columns: repeat(2, 1fr); } .db-two { grid-template-columns: 1fr; } }

.db-chartbox { position: relative; }
.db-sudot { position: absolute; top: 20px; width: var(--s); height: var(--s); margin-left: calc(var(--s) / -2); border-radius: 50%; background: #4f9be6; box-shadow: 0 0 0 3px color-mix(in srgb, #4f9be6 22%, transparent); color: #fff; font-size: 9px; font-weight: 700; display: grid; place-items: center; }

/* Dashboard: Kurve mit Achse, Hilfslinien und Tagesdetails; Aktivitaet daneben; schmale Leiste */
.db-main { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(280px, 1fr); gap: 14px; margin-top: 14px; }
.ch-card { padding: 16px 20px 12px; display: flex; flex-direction: column; min-width: 0; }
.ch-head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.ch { display: grid; grid-template-columns: auto 1fr; gap: 10px; height: 240px; }
.ch-y { display: flex; flex-direction: column; justify-content: space-between; font-size: 11px; color: var(--faint); text-align: right; padding-bottom: 0; transform: translateY(-6px); }
.ch-plot { position: relative; border-bottom: 1px solid var(--line); background-image: linear-gradient(var(--line) 1px, transparent 1px); background-size: 100% 50%; background-position: 0 0; }
.ch-cols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--n), 1fr); }
.ch-col { position: relative; display: flex; align-items: flex-end; justify-content: center; cursor: default; }
.ch-col:hover, .ch-col.on { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.ch-bars { display: flex; align-items: flex-end; gap: 2px; height: 100%; width: min(70%, 18px); }
.ch-bars span { flex: 1; border-radius: 3px 3px 0 0; transition: height .25s; }
.ch-bars .c { background: #e5484d; opacity: .75; } .ch-bars .v { background: #3fb68b; }
.ch-su { position: absolute; top: 6px; left: 50%; width: var(--s); height: var(--s); transform: translateX(-50%); border-radius: 50%; background: #4f9be6; box-shadow: 0 0 0 3px color-mix(in srgb, #4f9be6 22%, transparent); color: #fff; font-size: 9px; font-weight: 700; display: grid; place-items: center; }
.ch-x { position: relative; height: 18px; margin: 6px 0 0 calc(10px + 3.2em); font-size: 11.5px; color: var(--faint); }
.ch-x span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.ch-tip { position: absolute; top: 8px; transform: translateX(-50%); background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 10px 12px; font-size: 12.5px; min-width: 170px; pointer-events: none; z-index: 5; }
.ch-tip.hidden { display: none; }
.tip-row { display: flex; align-items: center; gap: 7px; margin-top: 5px; color: var(--muted); }
.tip-row span { margin-left: auto; color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.tip-row i { width: 8px; height: 8px; border-radius: 2px; } .tip-row i.g { background: #3fb68b; } .tip-row i.r { background: #e5484d; } .tip-row i.b { background: #4f9be6; border-radius: 50%; }
.tip-buys { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.act { padding: 0; display: flex; flex-direction: column; min-width: 0; }
.act-h { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 16px 8px; }
.act .dl-row { padding: 9px 16px; }
.db-strip { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 14px; padding: 0; }
.db-strip .db-stat { padding: 14px 20px; }
.db-strip .db-stat + .db-stat { border-left: 1px solid var(--line); }
@media (max-width: 1100px) { .db-main { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .db-strip { grid-template-columns: repeat(2, 1fr); } .db-strip .db-stat + .db-stat { border-left: 0; } }

/* Kunden: sortierbare Spalten */
.cu-sort { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; }
.cu-sort:hover, .cu-sort.on { color: var(--text); }
.cu-sort span { color: var(--accent); }
.cu-table td { vertical-align: middle; }

/* Boxen: Kacheln mit Bild, Kopf mit Angaben */
.bx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.bx-tile { display: flex; flex-direction: column; color: inherit; text-decoration: none; overflow: hidden; padding: 0; transition: box-shadow .15s, border-color .15s; }
.bx-tile:hover { border-color: var(--accent); box-shadow: 0 6px 20px rgba(0,0,0,.07); }
.bx-img { display: grid; place-items: center; padding: 22px 0 10px; background: linear-gradient(180deg, var(--accent-2), transparent); }
.bx-img .mac-ill { width: 150px; height: auto; }
.bx-img.big { padding: 10px 26px; background: none; } .bx-img.big .mac-ill { width: 190px; }
.bx-body { padding: 14px 18px 16px; display: flex; flex-direction: column; gap: 6px; }
.bx-title { display: flex; align-items: center; gap: 8px; } .bx-title h2 { margin: 0; font-size: 21px; }
.bx-chips { display: flex; flex-wrap: wrap; gap: 6px; } .bx-chips span { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--panel-2, var(--line)); color: var(--muted); }
.bx-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; }
.bad-t { color: var(--bad); }
.bx-head { display: flex; align-items: center; gap: 10px; padding: 20px 24px; flex-wrap: wrap; }
.bx-specs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px 20px; margin-top: 14px; }
.bx-spec { display: flex; flex-direction: column; gap: 2px; } .bx-spec b { font-size: 14px; font-weight: 600; }
.sm-back { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); text-decoration: none; } .sm-back:hover { color: var(--accent); }
/* Nummer kopieren (Klick auf Nummer oder SIM-Chip) */
.card-num { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 4px; max-width: 100%; font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--muted); cursor: copy; border-radius: 6px; white-space: nowrap; }
@media (hover: hover) { .card-num:hover, .card-copyable:hover { color: var(--accent); } }
.card-num:focus-visible { outline: 2px solid var(--accent); }
.card-num svg { flex: none; opacity: .7; }
.card-copyable { cursor: copy; }
/* Karte ruhig (24.10.2026): Zeile 2 grau mit Anbieter, Tarif, Modell; Offline grau statt rot */
.thumb .card-row.card-sub, .multi-cell .card-row.card-sub { justify-content: flex-start; gap: 5px; color: var(--muted); font-size: 11.5px; margin-top: 2px; min-height: 18px; }
.card-sub .card-sim { flex: none; gap: 4px; }
.card-sub .card-sim > span:last-child { font-weight: 500; color: var(--muted); white-space: nowrap; }
.card-sub .card-dot { opacity: .5; flex: none; }
.card-who { display: inline-flex; align-items: center; gap: 4px; min-width: 0; color: var(--muted); }
.card-who svg { flex: none; }
.as-btn { border: none; background: none; padding: 0; font-size: 11.5px; font-weight: 500; }
.as-btn:hover { background: none; text-decoration: underline; }
.thumb.off .thumb-img { background: var(--panel-2); border: 1px dashed var(--line); }
.thumb.off .thumb-img .pill { background: var(--panel); color: var(--muted); border: 1px solid var(--line); }
/* Eigenes Menue (Paul 24.10.2026: "eigen, nicht wie ALI"): kleine Gruppentitel in Grossbuchstaben, aktiver Punkt mit
   Akzentleiste links, Punkte zum Box-Dashboard mit feinem Pfeil, Einstellungen/Hilfe unten abgesetzt. */
.jp-nav .nav-group { margin-bottom: 10px; }
.jp-nav .nav-title { font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--faint, #9aa3b2); padding: 0 12px; margin: 0 0 6px; }
.jp-nav a { position: relative; gap: 11px; padding: 6px 12px; border-radius: 10px; font-size: 13.5px; transition: background .12s, color .12s; }
.jp-nav a svg { opacity: .7; }
.jp-nav a:hover { background: var(--panel-2); }
.jp-nav a.active { background: var(--accent-2); color: var(--accent); font-weight: 600; }
.jp-nav a.active::before { content: ""; position: absolute; left: -4px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--accent); }
.jp-nav a.active svg { opacity: 1; }
.nav-ext { margin-left: auto; display: inline-grid; place-items: center; color: var(--faint, #9aa3b2); opacity: .55; }
.jp-nav a:hover .nav-ext { opacity: 1; color: var(--accent); }
.jp-nav .nav-foot { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 2px; }
/* Handys unter "All phones" (Paul 24.10.2026) */
.jp-nav .nav-row { position: relative; }
.jp-nav .nav-row > a { padding-right: 34px; }
.jp-nav .nav-tg { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; padding: 0; border: 0; border-radius: 7px; background: none; color: var(--faint); display: grid; place-items: center; cursor: pointer; }
.jp-nav .nav-tg:hover { background: var(--panel-2); color: var(--text); }
.jp-nav .nav-tg[hidden] { display: none; }
.jp-nav .nav-tg svg { width: 14px; height: 14px; opacity: 1; transition: transform .15s; }
.jp-nav .nav-tg[aria-expanded="false"] svg { transform: rotate(-90deg); }
.jp-nav .nav-sub { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 6px 19px; padding-left: 8px; border-left: 1px solid var(--line); max-height: 40vh; overflow-y: auto; scrollbar-width: thin; }
.jp-nav .nav-sub[hidden] { display: none; }
.jp-nav .nav-sub a { gap: 9px; padding: 4px 10px; font-size: 12.5px; color: var(--muted); }
.jp-nav .nav-sub a:hover { color: var(--text); }
.jp-nav .nav-sub a.active { color: var(--accent); font-weight: 600; }
.jp-nav .nav-sub a.active::before { left: -9px; top: 6px; bottom: 6px; width: 2px; }
.jp-nav .nav-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--line-2); }
.jp-nav .nav-dot.on { background: var(--good); }
/* Box-Seiten in JP Remote eingebettet (Content library, Flows ...): Rahmen fuellt die Seite */
body:has(.farm-wrap) main.page { max-width: none; padding-top: 0; padding-bottom: 0; }
.farm-wrap { position: relative; height: 100vh; height: 100dvh; margin: 0 -8px; }
.farm-frame { width: 100%; height: 100%; border: 0; display: block; background: transparent; }
.farm-load { position: absolute; top: 24px; left: 24px; }
/* Coming soon (24.10.2026): ruhige Karte, kleines Kennzeichen im Menue */
.card.soon { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 320px; color: var(--muted); }
.card.soon b { font-size: 16px; font-weight: 600; color: var(--text); }
.soon-ico { width: 56px; height: 56px; border-radius: 16px; background: var(--accent-2); color: var(--accent); display: grid; place-items: center; }
.soon-tag { margin-left: auto; font-size: 10px; font-weight: 600; letter-spacing: .04em; color: var(--faint, #8a8f9c); border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; }
.jp-nav a.active .soon-tag { color: var(--accent); border-color: currentColor; }
/* Eigene Tags je iPhone */
.tag-chip { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; margin-left: 6px; border-radius: 999px; background: var(--accent-2); color: var(--accent); font-size: 11px; font-weight: 500; white-space: nowrap; }
.card-tags { display: inline-flex; min-width: 0; overflow: hidden; } .card-tags .tag-chip:first-child { margin-left: 0; }
.ph-id { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ph-rename { cursor: text; border-radius: 6px; padding: 1px 4px; margin: -1px -4px; }
.ph-rename:hover { background: var(--panel-2); }
.ph-rename-in { width: 160px; padding: 3px 7px; font-weight: 600; }
/* Tags und Team direkt in der Liste */
.tag-cell { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; cursor: text; min-height: 24px; padding: 2px 4px; margin: -2px -4px; border-radius: 8px; }
.tag-cell:hover { background: var(--panel-2); }
.tag-cell .tag-chip { margin-left: 0; }
.tag-add { font-size: 12px; color: var(--faint, #8a8f9c); }
.tag-cell:hover .tag-add, .team-cell:hover .tag-add { color: var(--accent); }
.team-cell { all: unset; display: inline-flex; align-items: center; cursor: pointer; padding: 2px 4px; margin: -2px -4px; border-radius: 999px; }
.team-cell:hover { background: var(--panel-2); }
.team-cell .av { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 600; color: #fff; background: var(--accent); border: 2px solid var(--panel); margin-left: -6px; }
.team-cell .av:first-child { margin-left: 0; }
.team-cell .av.more { background: var(--panel-2); color: var(--muted); }
/* Tags/Team deutlicher (24.10.2026) */
.add-pill { display: inline-flex; align-items: center; white-space: nowrap; height: 22px; padding: 0 9px; border: 1px dashed var(--line-2); border-radius: 999px; font-size: 11.5px; color: var(--muted); }
.tag-cell:hover .add-pill, .team-cell:hover .add-pill { border-color: var(--accent); color: var(--accent); }
.tag-chip { height: 22px; padding: 0 9px; font-size: 11.5px; }
.who-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 2px; margin-right: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); font-size: 12px; white-space: nowrap; }
.who-chip .av { width: 20px; height: 20px; border: 0; margin: 0; font-size: 10.5px; }
.who-more { font-size: 12px; color: var(--muted); }
.pop-menu .ck, .menu .ck, .ck { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--line-2); font-size: 11px; color: #fff; flex: none; margin-right: 8px; }
.ck.on { background: var(--accent); border-color: var(--accent); }
.ck.dim { opacity: .45; }
.role-tag { font-size: 10.5px; font-weight: 600; padding: 1px 7px; border-radius: 999px; margin: 0 6px 0 10px; background: var(--panel-2); color: var(--muted); }
.role-tag.owner { background: #efe7f6; color: #7a4fa0; } .role-tag.admin { background: var(--accent-2); color: var(--accent); }
/* Tag-Fenster */
.tag-pop { position: fixed; z-index: 80; width: 280px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 32px rgba(16, 24, 40, .14); padding: 10px; }
.tp-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px; border: 1px solid var(--line-2); border-radius: 10px; }
.tp-chips:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-2); }
.tp-chips .tag-chip { margin: 0; gap: 4px; }
.tp-chips .tag-chip button { all: unset; cursor: pointer; font-size: 13px; line-height: 1; opacity: .6; padding: 0 1px; }
.tp-chips .tag-chip button:hover { opacity: 1; }
.tp-in { all: unset; flex: 1; min-width: 80px; font-size: 13px; padding: 2px; }
.tp-sug { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tp-lbl { width: 100%; font-size: 11px; color: var(--faint, #8a8f9c); }
.tag-chip.ghost { all: unset; cursor: pointer; display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 11.5px; color: var(--muted); }
.tag-chip.ghost:hover { border-color: var(--accent); color: var(--accent); }
.tag-pop input.tp-in, .tag-pop input.tp-in:focus { border: 0; box-shadow: none; background: transparent; padding: 2px; width: auto; border-radius: 0; }
.pop .mi:has(.ck) { display: flex; align-items: center; min-width: 260px; }
.pick-tags { display: inline-flex; gap: 4px; flex: none; } .pick-tags .tag-chip { margin: 0; height: 18px; padding: 0 7px; font-size: 10.5px; }

/* Alle Geraete (Paul 25.10.2026, Pruefung mit 10 Agenten) */
/* Handy-Liste links (Paul 26.10.2026: "bei 100 Handys nur so weit ausklappen, dass das Menue nicht verschwindet"): die Liste
   bekommt nur den Platz, der im Menue frei bleibt, und scrollt darin, alles andere bleibt sichtbar. Bis 4 Handys steht sie
   immer ganz da, ab 5 mindestens etwa 4 Zeilen. Ist das Fenster selbst dafuer zu klein, scrollt wie bisher das ganze Menue. */
.jp-nav { display: flex; flex-direction: column; }
.jp-nav > .nav-group { margin-top: 0; }
.jp-nav > .nav-ph-group { display: contents; }
.jp-nav > .nav-ph-group > .nav-title { margin-top: 6px; }
.jp-nav > .nav-ph-group > :last-child { margin-bottom: 10px; }
.jp-nav .nav-sub { flex: none; max-height: none; overscroll-behavior: contain; }
.jp-nav .nav-sub.many { flex: 0 1 auto; min-height: 110px; }
.jp-nav .nav-sub.up { --ft: 20px; }
.jp-nav .nav-sub.more { --fb: 24px; }
.jp-nav #nav-phones.many.more { --fb: 16px; }
/* Startseite (Paul 26.10.2026): Kennzahlen, Schnellzugriffe, Nutzung. Ruhig in Blau und Grau, nicht wie ALI 1 zu 1. */
.hm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
@media (max-width: 520px) { .hm-stats { grid-template-columns: 1fr 1fr; } .hm-stats .hm-val { font-size: 24px; } .hm-stats > :last-child:nth-child(odd) { grid-column: 1 / -1; } }   /* Handy: die letzte Kachel nicht allein auf halber Breite */
.hm-stat { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; color: inherit; text-decoration: none; min-width: 0; transition: border-color .15s; }
.hm-stat:hover { border-color: var(--accent); }
.hm-top { display: flex; align-items: center; gap: 8px; }
.hm-ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--accent-2); color: var(--accent); flex: none; }
.hm-val { font-size: 28px; font-weight: 650; letter-spacing: -.02em; line-height: 1.1; }
.hm-of { font-size: 14px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.hm-wait { color: var(--faint); font-size: 22px; }
.hm-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 22px; min-width: 0; }
.hm-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; background: var(--panel-2); color: var(--muted); font-size: 12px; font-weight: 500; white-space: nowrap; }
.hm-chip.accent { background: var(--accent-2); color: var(--accent); }
.hm-chip.good { background: rgba(31, 157, 85, .1); color: #1f9d55; }
.hm-chip.bad { background: rgba(229, 72, 77, .1); color: #d9534f; }
.hm-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.hm-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.hm-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; padding: 16px 18px 18px; }
@media (max-width: 900px) { .hm-charts { grid-template-columns: 1fr; } }
.hm-chart { min-width: 0; }
.hm-cval { font-size: 22px; font-weight: 650; margin: 2px 0 8px; }
.hm-spark { width: 100%; height: 84px; display: block; }
.hm-spark .a { fill: var(--accent); opacity: .12; }
.hm-spark .l { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.hm-x { display: flex; justify-content: space-between; margin-top: 4px; }
.hm-note { margin-top: 6px; }
.hm-empty { height: 84px; display: grid; place-items: center; border: 1px dashed var(--line); border-radius: 10px; }
/* Wer das iPhone gerade offen hat: Kreise oben links im Bild; Nummer ohne "JP-" */
.thumb { position: relative; }
.th-av { position: absolute; top: 10px; left: 10px; display: flex; z-index: 2; pointer-events: none; }
.th-av i { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; font-style: normal; font-size: 12px; font-weight: 700; display: grid; place-items: center; border: 2px solid #fff; margin-left: -6px; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.th-av i:first-child { margin-left: 0; }
/* Needs you: Zeilen mit Symbol, ruhige Zeile wenn nichts ansteht */
.hm-needs .req-row { align-items: center; gap: 10px; }
.hm-nic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: rgba(229, 72, 77, .1); color: #d9534f; flex: none; }
.hm-allgood { display: flex; align-items: center; gap: 8px; padding: 14px 18px; color: #1f9d55; }
.card-id { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Handy-Karte in der User-Sicht: nur Name, Zustand und ID (Paul 26.10.2026: "edel und clean") */
.card-clean { display: grid; gap: 3px; padding: 2px 2px 0; min-width: 0; }
.card-clean .cc-top { display: flex; align-items: center; gap: 4px; font-size: 13px; min-width: 0; }
.card-clean .cc-top b { font-weight: 600; white-space: nowrap; flex: none; }
.card-clean .cc-state { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--muted); }
@media (max-width: 600px) { .card-clean .cc-state { display: none; } }   /* Handy: "Work…" abgeschnitten, der Punkt zeigt den Zustand schon */
.id-chip { position: relative; flex: none; font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; letter-spacing: .01em; padding: 1px 4px; border-radius: 6px; cursor: copy; transition: color .12s, background .12s; }
.id-chip:hover, .id-chip:focus-visible { color: var(--accent); background: var(--accent-2); outline: none; }
.id-chip::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translate(-50%, 4px); padding: 5px 9px; border-radius: 8px; background: #111827; color: #fff; font-size: 11.5px; font-weight: 500; letter-spacing: 0; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s, transform .12s; z-index: 5; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
.id-chip:hover::after, .id-chip:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
/* Test-Stand je Menuepunkt (nur JP-Team, app.js qaMarks): X leicht rot = noch nicht abgesegnet, Haken gruen = getestet */
.jp-nav a .qa-mark { margin-left: auto; flex: none; width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center; font-size: 11px; font-weight: 700; line-height: 1; color: #d9534f; background: rgba(229, 72, 77, .1); cursor: pointer; }
.jp-nav a .qa-mark.ok { color: #1f9d55; background: rgba(31, 157, 85, .12); }
.jp-nav a .qa-mark:hover { box-shadow: 0 0 0 1px currentColor; }
.jp-nav a .soon-tag + .qa-mark, .jp-nav a .grow + .qa-mark { margin-left: 4px; }
/* Phones-Seite wie ALI, ohne Ueberschrift (Paul 26.10.2026): Reiter unterstrichen, runde Suche und Filter, Name mit "Used ... ago" */
.ph-tabs { display: flex; align-items: center; gap: 22px; border-bottom: 1px solid var(--line); margin-bottom: 14px; overflow-x: auto; scrollbar-width: none; }
.ph-tabs button { flex: none; background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 10px 0 9px; margin-bottom: -1px; min-height: 0; font-size: 14px; font-weight: 500; color: var(--muted); box-shadow: none; }
.ph-tabs button span { margin-left: 5px; color: var(--faint); }
.ph-tabs button.active { color: var(--text); border-bottom-color: var(--text); font-weight: 600; }
.ph-tabs .btn { flex: none; margin-bottom: 6px; }
.ph-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.ph-search { position: relative; flex: 0 1 320px; min-width: 180px; margin: 0; }
.ph-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
.ph-search input { width: 100%; padding-left: 34px; border-radius: 999px; }
select.ph-dd { border-radius: 999px; }
.ph-stack { display: inline-flex !important; flex-direction: column; align-items: flex-start; gap: 2px; }
.ph-sub { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); font-weight: 400; }
.ph-used:empty { display: none; }
/* Phones-Seite: Zusatzfilter Tag, Kunde, Modell, SIM neben der Suche */
select.ph-dd { width: auto; max-width: 180px; min-height: 36px; padding: 6px 30px 6px 10px; font-size: 13px; }
select.ph-dd.on { border-color: var(--accent); color: var(--accent); background-color: var(--accent-2); }   /* hoechstens 5 Handys (Hoehe setzt app.js): nur das Stueck vom 6. verblasst */
.jp-nav .nav-sub:is(.up, .more) { -webkit-mask-image: linear-gradient(transparent, #000 var(--ft, 0px), #000 calc(100% - var(--fb, 0px)), transparent); mask-image: linear-gradient(transparent, #000 var(--ft, 0px), #000 calc(100% - var(--fb, 0px)), transparent); }
@media (max-width: 1024px) {
  #nav { overscroll-behavior: contain; }
  .side { width: min(300px, 86vw); }
  .side-foot { border-top: 1px solid var(--line); padding-top: 8px; }
}
/* Touch: Tippflaechen mindestens etwa 40 px, Felder 16 px (sonst zoomt iOS beim Antippen) */
@media (pointer: coarse) {
  .jp-nav a { min-height: 40px; }
  .jp-nav .nav-sub a { min-height: 36px; }
  .jp-nav .nav-sub.many { min-height: 150px; }
  .jp-nav .nav-tg { width: 36px; height: 36px; }
  #menu-btn { width: 40px; height: 40px; font-size: 18px; }
  .side-foot .lang-chip { min-width: 40px; min-height: 40px; justify-content: center; }
  .seg button { min-height: 36px; }
  button.sm, .btn.sm { min-height: 36px; }
  .as-btn { padding: 10px 6px; margin: -10px -6px; }
  input, select, textarea { font-size: 16px; }
}
/* Handy: Kacheln und Live-Bilder zweispaltig, Suche ueber die volle Breite */
@media (max-width: 640px) {
  .ov-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ov-tile.pad { padding: 12px 14px; }
  .thumbs.big { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #page-view #ps { max-width: none !important; flex: 1 1 0; min-width: 0; }
  #page-view #ps + .grow { display: none; }
}
@media (orientation: landscape) and (max-height: 500px) { .thumbs.big { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); } }
:root[data-theme="dark"] .jp-nav .nav-dot:not(.on) { background: var(--faint); }

/* Klick-Pruefung (Paul 25.10.2026, 5 Agenten) */
/* Settings, Help und Support immer sichtbar, auch wenn das Menue scrollt */
.jp-nav .nav-foot { position: sticky; bottom: 0; background: var(--panel); z-index: 1; box-shadow: 0 -10px 10px -10px rgba(16, 24, 40, .2); margin-left: -6px; padding-left: 6px; }
:root[data-theme="dark"] .jp-nav .nav-foot { box-shadow: 0 -12px 12px -10px rgba(0, 0, 0, .6); }
#nav { scroll-padding-bottom: 112px; }
@media (pointer: coarse) { #nav { scroll-padding-bottom: 134px; } }
@media (max-width: 1024px) {
  .side { visibility: hidden; transition: transform .2s, visibility .2s; }
  .side.open { visibility: visible; transition: transform .2s, visibility 0s; }
  .farm-wrap { height: calc(100vh - 61px); height: calc(100dvh - 61px); }
  .shell { min-height: calc(100vh - 61px); min-height: calc(100dvh - 61px); }
}
@media (pointer: coarse) { .pop .mi { min-height: 40px; } }
#page-view #ps { flex: 1 1 160px; }
@media (max-width: 640px) {
  #page-view #ps ~ .grow { display: none; }
  #page-view #as-all { order: 5; flex: 1 0 100%; }
  #page-view table.t td { white-space: nowrap; }
  #page-view table.t td:has(> .small, > .muted), #page-view table.t td.wrap { white-space: normal; min-width: 180px; }
}
@media (min-width: 641px) and (max-width: 1365px) { #page-view #as-all { order: 5; } }
#page-view table.t td.small:not(.wrap) { white-space: nowrap; }
#page-view table.ph-table td.small:not(.num) { white-space: normal; }
@media (min-width: 641px) and (max-width: 1365px) { .ph-table .ph-model { white-space: normal; } }

/* Neuer Durchgang (Paul 25.10.2026, 5 Agenten) */
.jp-nav:not(.more) .nav-foot { box-shadow: none; }
@media (max-height: 500px) { .jp-nav .nav-foot { position: static; box-shadow: none; } #nav { scroll-padding-bottom: 0; } }
@media (hover: none) { .jp-nav .nav-tg:hover { background: none; color: var(--faint); } }
@media (pointer: coarse) { .tag-pop .tp-in { font-size: 16px; } }
#page-view #pm { margin-left: auto; }
.thumb .card-row > .faint { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.multi-cell .card-row .card-name { flex: 0 1 auto; min-width: 0; overflow: hidden; }
.multi-cell .card-row .card-sim { flex: none; }
.multi-cell .card-name > b { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 700px) {
  .mv-bar { flex-wrap: wrap; }
  .mv-bar .grow, .mv-bar .mv-slider { display: none; }
  .mv-bar #mv-q { order: 5; flex: 1 1 100%; max-width: none !important; }
  .mv-bar #mv-pick { margin-left: auto; }
}
#page-view table.t tr > td.num:last-child:has(> button[data-m]) { position: sticky; right: 0; background: var(--panel); box-shadow: inset 1px 0 0 var(--line); }
@media (min-width: 641px) and (max-width: 1365px) { .ph-table .card-sim { flex-wrap: wrap; row-gap: 2px; } }
.cu-table td:first-child { min-width: 170px; }
@media (max-width: 640px) { .tk-phs { flex-direction: column; align-items: flex-start; } .tk-phs > span + span::before { display: none; } }
/* Nachpruefung 1 (neuer Durchgang) */
#page-view .card > .table-wrap { border-radius: 15px; }
@media (min-width: 641px) and (max-width: 900px) { #page-view .ph-table .ph-mcol { display: none; } }
.multi-cell { container-type: inline-size; }
@container (max-width: 140px) { .multi-cell .mv-model { display: none; } }
/* Nachpruefung 2 (neuer Durchgang) */
@container (max-width: 100px) { .multi-cell .card-row .card-sim { display: none; } }
@media (min-width: 641px) and (max-width: 700px) { #page-view .ph-table :is(th, td) { padding-left: 10px; padding-right: 10px; } }
input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none; }
/* Multi View wie bei ALI (Paul 27.10.2026: "exakt so wie bei aliremote"), mit Multi Control: Steuerfeld oben, Hauptgeraet rechts */
.mv-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.mv-head h1 { font-size: 22px; line-height: 31px; font-weight: 600; letter-spacing: -.99px; margin: 0; }
.mv-on { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border: 1px solid var(--line); border-radius: 99px; font-size: 12px; font-weight: 500; }
.mv-on i { width: 6px; height: 6px; border-radius: 50%; background: var(--good, #16a34a); }
.mv-count { font-size: 12px; color: var(--muted); }
.mv-mode { display: inline-flex; padding: 2px; border: 1px solid var(--line); border-radius: 99px; background: var(--panel); }
.mv-mode button { display: inline-flex; align-items: center; gap: 4px; height: 26px; min-height: 0; padding: 0 12px; border: 0; border-radius: 99px; background: none; box-shadow: none; font-size: 13px; font-weight: 500; color: var(--muted); }
.mv-mode button.active { background: var(--panel-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.mv-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; }
.mv-search { position: relative; display: inline-flex; align-items: center; margin: 0; }
.mv-search svg { position: absolute; left: 10px; color: var(--faint); pointer-events: none; }
.mv-search input { width: 176px; height: 28px; min-height: 0; padding: 0 10px 0 30px; border-radius: 99px; font-size: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.mv-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; min-height: 0; padding: 0 11px; border: 1px solid var(--line); border-radius: 99px; background: var(--panel); box-shadow: none; font-size: 12px; font-weight: 500; color: var(--muted); }
.mv-chip span { color: var(--faint); font-weight: 500; }
.mv-chip.active { background: color-mix(in srgb, var(--accent) 10%, transparent); border-color: color-mix(in srgb, var(--accent) 25%, transparent); color: var(--accent); }
.mv-chip.active span { color: var(--accent); opacity: .7; }
.mv-choose { margin-right: 2px; }
.mv-pop { position: fixed; z-index: 60; width: 210px; padding: 6px; }
.mv-pop .mv-psearch { display: flex; margin-bottom: 4px; }
.mv-pop .mv-psearch input { width: 100%; border-radius: 8px; }
.mv-plist { max-height: 300px; overflow: auto; }
.mv-prow { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 6px; font-size: 13px; cursor: pointer; margin: 0; }
.mv-prow:hover { background: var(--panel-2); }
.mv-prow .ellipsis { flex: 1; min-width: 0; }
.mv-pnote { padding: 4px 6px 2px; }
.multi-grid { grid-template-columns: repeat(var(--mv-cols, 7), minmax(0, 202px)); justify-content: start; gap: 16px; }   /* links (Paul 27.10.2026) */
@media (max-width: 700px) { .multi-grid { grid-template-columns: repeat(min(var(--mv-cols, 7), 3), minmax(0, 1fr)); gap: 12px; } }   /* Handy: hoechstens 3, sonst 9 winzige Kacheln mit "P..." */
.mv-item { display: flex; flex-direction: column; min-width: 0; }
.mv-item .live { position: relative; border-radius: 22px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent); }
/* Unter dem Bild wie bei All phones (Paul 28.10.2026): Name, darunter Handytyp links und Tag rechts. Schmale Kachel: "13" statt "iPhone 13" */
.mv-item { container-type: inline-size; }
.mv-meta { display: grid; gap: 2px; padding: 8px 2px 0; min-width: 0; }
.mv-name { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-sub { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 20px; font-size: 11.5px; color: var(--muted); }
.mv-model { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-model .am-mshort { display: none; }
@container (max-width: 140px) { .mv-model .am-mfull { display: none; } .mv-model .am-mshort { display: inline; } .mv-name { font-size: 12px; } }
/* Offline leicht rot (Paul 28.10.2026), iPhone SE: dunkler Rand oben und unten wie beim echten Geraet */
.mv-item.off .live { display: grid; place-items: center; background: color-mix(in srgb, #e5484d 6%, var(--panel)); border: 1px dashed color-mix(in srgb, #e5484d 40%, transparent); box-shadow: none; }
.mv-offtxt { font-size: 12px; font-weight: 500; color: #d9534f; }
.mv-item.off .mv-name { color: var(--muted); }
.mv-item.mv-short .live { background: #0b0d12; }
/* Tag rechts neben dem Typ; "+ Tag" erst beim Drueberfahren (Touch: immer), Filter "Tags" als Pille */
.mv-tags { display: flex; margin-left: auto; min-width: 0; }
.mv-tagbtn { display: inline-flex; gap: 4px; min-width: 0; padding: 0; min-height: 0; border: 0; background: none; box-shadow: none; cursor: pointer; }
.mv-tagbtn .tag-chip { margin-left: 0; height: 18px; max-width: 90px; padding: 0 7px; overflow: hidden; text-overflow: ellipsis; font-size: 11px; }
.mv-tagbtn .add-pill { height: 18px; padding: 0 7px; font-size: 11px; }
@media (hover: hover) { .mv-tagbtn .add-pill { opacity: 0; transition: opacity .12s; } .mv-item:hover .mv-tagbtn .add-pill, .mv-tagbtn:focus-visible .add-pill { opacity: 1; } }
.mv-tagbtn:hover .add-pill, .mv-tagbtn:hover .tag-chip { border-color: var(--accent); color: var(--accent); }
select.mv-tagdd { width: auto; max-width: 140px; padding: 0 26px 0 11px; appearance: auto; }   /* die laengste Option bestimmt sonst die Breite */
select.mv-tagdd.on { background: color-mix(in srgb, var(--accent) 10%, transparent); border-color: color-mix(in srgb, var(--accent) 25%, transparent); color: var(--accent); }
.mv-mini { display: none; justify-content: center; gap: 4px; margin-top: 8px; }
.mc-wrap.on .mv-mini { display: flex; }
.mv-mini button { width: 28px; height: 28px; min-height: 0; padding: 0; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--muted); box-shadow: none; }
.mv-mini button:hover { color: var(--text); background: var(--panel-2); }
.mc-panel { margin-bottom: 16px; padding: 10px 10px 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.mc-panel[hidden] { display: none; }
.mc-head { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 12px; }
.mc-by { color: var(--muted); }
.mc-who { color: var(--faint); }
.mc-who.on { color: var(--text); font-weight: 500; }
.mc-apply { color: var(--muted); font-size: 11px; }
.mc-body { display: flex; flex-wrap: wrap; gap: 18px 20px; align-items: flex-start; }
.mc-lab { font-size: 10px; line-height: 13px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.mc-pad { display: grid; grid-template-columns: repeat(3, 40px); grid-template-rows: repeat(3, 40px); gap: 6px; }
.mc-pad button, .mc-sys > span { border: 0; border-radius: 14px; background: rgba(128,128,128,.17); color: var(--text); display: grid; place-items: center; padding: 0; min-height: 0; box-shadow: none; }
.mc-pad button:hover, .mc-sys:hover > span, .mc-sys.on > span { background: rgba(128,128,128,.27); }
.mc-pad .c .logo { width: 22px; height: 22px; border-radius: 6px; font-size: 9px; display: grid; place-items: center; }
.mc-tiles { display: flex; flex-wrap: wrap; gap: 8px; }
.mc-sys { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 64px; padding: 0; border: 0; background: none; box-shadow: none; min-height: 0; font-size: 10px; line-height: 13px; font-weight: 500; color: var(--muted); text-align: center; }
.mc-sys > span { width: 64px; height: 48px; }
.mc-sys svg { stroke-width: 1.4; }
.mc-type { display: flex; gap: 6px; max-width: 460px; margin-top: 12px; }
.mc-type[hidden] { display: none; }
.mc-type input { flex: 1; min-width: 0; }
.mc-wrap.on { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.mc-master { display: none; }
.mc-wrap.on .mc-master { display: block; position: sticky; top: 12px; border-radius: 12px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); padding: 12px; }
.mc-mh { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 10px; font-size: 12px; font-weight: 500; }
.mc-mh .muted { font-weight: 400; }
.mc-cap { margin: 10px 0 0; font-size: 12px; color: var(--muted); line-height: 1.45; }
.mc-master .live { touch-action: none; cursor: crosshair; width: min(100%, calc((100vh - 170px) * 9 / 19.5)); margin: 0 auto; border: 2px solid var(--accent); }
.mc-badge { display: none; position: absolute; top: 8px; right: 8px; z-index: 3; padding: 2px 6px; border-radius: 99px; background: var(--accent); color: #fff; font-size: 9px; font-weight: 600; pointer-events: none; }
.mv-item.is-master .mc-badge { display: block; }
.mc-wrap.on .multi-grid .multi-cell { cursor: pointer; }
@media (max-width: 900px) { .mc-wrap.on { grid-template-columns: 1fr; } .mc-wrap.on .mc-master { order: -1; position: static; max-width: 320px; margin: 0 auto; } .mv-search input { width: 150px; } }
/* Steuern (Paul 28.10.2026): links der Master, darunter klein das Menue, rechts die anderen Handys. Kein Kasten mehr oben. */
.mc-wrap.on { --mh: clamp(340px, calc(100vh - 362px), 780px); --mw: calc(var(--mh) * 9 / 19.5); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: start; }
.mc-wrap.on .mc-master { order: -1; position: sticky; top: 12px; max-width: none; margin: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; }
.mc-wrap.on .mc-master:has(.mc-ctl.fold) { --mh: clamp(360px, calc(100vh - 290px), 820px); --mw: calc(var(--mh) * 9 / 19.5); }   /* eingeklappt: Master groesser */
.mc-master[hidden] { display: none !important; }
.mc-mh { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; font-size: 12px; font-weight: 400; }
.mc-mt { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.mc-mt b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-pill { flex: none; padding: 1px 7px; border-radius: 99px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 600; letter-spacing: .02em; }
.mc-by { flex: none; color: var(--faint); font-size: 11.5px; white-space: nowrap; }
.mc-who { color: var(--muted); }
.mc-who.on { color: var(--text); font-weight: 500; }
.mc-stage { display: flex; flex-direction: column; align-items: center; gap: 10px; }
#mc-slot .mv-item { width: var(--mw); }
.mc-master #mc-slot .live { width: 100%; margin: 0; }
#mc-slot .mv-meta, #mc-slot .mv-mini, #mc-slot .mc-badge { display: none !important; }
/* Menue klein unter dem Master (Paul 28.10.2026: "Menue klein unter dem Master-Handy"): links die 8 Knoepfe wie auf der Handy-Seite
   4 je Reihe (Name beim Drueberfahren), rechts das Steuerkreuz mit JP in der Mitte, oben "Controls" mit Pfeil zum Einklappen */
.mc-ctl { --key: rgba(224, 224, 224, .72); --card: #eeeeee; --edge: rgba(255, 255, 255, .9); --ink2: #5f5f5f;
  box-sizing: border-box; width: max(var(--mw), 288px); display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "h h" "tiles pad" "type type";
  gap: 8px 12px; padding: 8px 12px 12px; border-radius: 22px; background: var(--card); box-shadow: inset 0 0 0 2px var(--edge), 0 10px 24px rgba(0, 0, 0, .03); }
:root[data-theme="dark"] .mc-ctl { --key: color-mix(in srgb, var(--text) 9%, transparent); --card: color-mix(in srgb, var(--text) 6%, var(--panel)); --edge: rgba(255, 255, 255, .05); --ink2: var(--muted); }
.mc-ctl-h { grid-area: h; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mc-ctl-pill { font-size: 11px; font-weight: 600; letter-spacing: .03em; color: var(--ink2); }
.mc-fold { flex: none; width: 24px; height: 24px; min-height: 0; padding: 0; display: grid; place-items: center; border: 0; border-radius: 999px; background: none; box-shadow: none; color: var(--ink2); cursor: pointer; }
.mc-fold:hover, .mc-fold:focus-visible { background: var(--accent-2); color: var(--accent); }
.mc-ctl:not(.fold) .mc-fold svg { transform: rotate(180deg); }
.mc-ctl-tiles { grid-area: tiles; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; align-content: center; }
.mc-ctl-tile { min-width: 0; min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; color: var(--text); cursor: pointer; }
.mc-ctl-tile .ti { width: 100%; height: 38px; display: grid; place-items: center; border-radius: 11px; background: var(--key); transition: background .15s, color .15s; }
.mc-ctl-tile .ti svg { width: 18px; height: 18px; stroke-width: 1.4; }
.mc-ctl-tile .tl { display: none; }
.mc-ctl-tile:hover .ti, .mc-ctl-tile:focus-visible .ti { background: var(--accent-2); color: var(--accent); }
.mc-ctl-tile:active .ti { transform: scale(.96); }
.mc-ctl-tile.on .ti { background: var(--accent); color: #fff; }
.mc-ctl-pad { grid-area: pad; display: grid; grid-template-columns: repeat(3, 28px); grid-template-rows: repeat(3, 28px); gap: 4px; }
.mc-ctl-pad button { width: 28px; height: 28px; min-height: 0; padding: 0; display: grid; place-items: center; border: 0; border-radius: 9px; background: var(--key); box-shadow: none; color: var(--text); }
.mc-ctl-pad button svg { width: 14px; height: 14px; }
.mc-ctl-pad button:hover { background: var(--accent-2); color: var(--accent); }
.mc-ctl-pad button:active { transform: scale(.94); }
.mc-ctl-pad .c, .mc-ctl-pad .c:hover { background: #fff; box-shadow: 0 1px 3px -1px rgba(0, 0, 0, .08); }
:root[data-theme="dark"] .mc-ctl-pad .c { background: var(--panel); }
.mc-ctl-pad .c .logo { width: 18px; height: 18px; border-radius: 5px; font-size: 7.5px; display: grid; place-items: center; }
.mc-ctl .mc-type { grid-area: type; width: 100%; max-width: none; margin: 0; }
.mc-cap { display: none; }
.mc-ctl.fold { grid-template-areas: "h"; grid-template-columns: minmax(0, 1fr); padding: 6px 12px; cursor: pointer; }
.mc-ctl.fold > :not(.mc-ctl-h) { display: none !important; }
.mc-ctl.fold:hover .mc-ctl-pill { color: var(--accent); }
/* Die anderen beim Steuern (Paul 28.10.2026): so viele je Reihe wie der Regler sagt, der Master zaehlt mit (fitFollowers),
   nie breiter als 202px und kleiner als der Master. Home, Lock und ⋮ erst beim Drueberfahren (Touch: immer) */
.mc-wrap.on .multi-grid { --tmax: min(202px, calc(var(--mw) * .85)); grid-template-columns: repeat(var(--mv-cols, 3), minmax(0, var(--tmax))); justify-content: start; align-content: start; }
/* Home, Lock und ⋮ liegen beim Drueberfahren unten rechts auf dem Bild, damit der Name die ganze Breite hat (sonst "Ph..." bei kleinen Kacheln) */
.mc-wrap.on .multi-grid .mv-item { position: relative; }
.mc-wrap.on .multi-grid .mv-sub { display: none; }
.mc-wrap.on .multi-grid .mv-mini { position: absolute; right: 6px; bottom: 34px; z-index: 2; gap: 3px; margin: 0; padding: 3px; border-radius: 10px; background: color-mix(in srgb, var(--panel) 90%, transparent); box-shadow: 0 2px 8px rgba(15, 23, 42, .14); }
@media (hover: hover) { .mc-wrap.on .multi-grid .mv-mini { opacity: 0; transition: opacity .12s; } .mc-wrap.on .multi-grid .mv-item:hover .mv-mini, .mc-wrap.on .multi-grid .mv-mini:focus-within { opacity: 1; } }
@container (max-width: 160px) { .mc-wrap.on .mv-mini button { width: 24px; height: 24px; } .mc-wrap.on .mv-mini button svg { width: 12px; height: 12px; } }
/* Kopf mit Watch/Control und Filtern bleibt beim Scrollen oben (Paul 28.10.2026), der Master haengt sich darunter (--mvtop aus app.js) */
.mv-top { position: sticky; top: 0; z-index: 6; margin-top: -12px; padding-top: 12px; background: var(--bg); }
.mc-wrap.on .mc-master { top: calc(var(--mvtop, 96px) + 8px); }
@media (min-width: 1101px) { .mc-wrap.on .multi-grid { margin-top: 30px; } }   /* oben buendig mit dem Master-Bild, nicht mit seiner Kopfzeile */
@media (max-width: 1100px) { .mc-wrap.on { --mh: clamp(340px, calc(100vh - 420px), 720px); grid-template-columns: minmax(0, 1fr); } .mc-wrap.on .mc-master { position: static; } .mc-stage { align-items: flex-start; } }
@media (max-width: 700px) {
  .mc-wrap.on, .mc-wrap.on .mc-master:has(.mc-ctl.fold) { --mh: min(56vh, 560px); }
  .mc-stage { align-items: stretch; }
  #mc-slot, .mc-ctl { width: 100%; }
  #mc-slot .mv-item { width: min(var(--mw), 100%); margin: 0 auto; }
}
/* Phones-Seite wie bei ALI: Kacheln in einer Karte, Bild in heller Flaeche mit Leuchtrand, Knopf "mehr" oben rechts, Name + Zustand + "Used ... ago" */
.ph-gridcard { padding: 10px; }
.thumbs.ali { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px 10px; }
.thumbs.ali .thumb { gap: 6px; }
.thumbs.ali .thumb-img { position: relative; aspect-ratio: 162 / 217; border: 0; border-radius: 12px; background: rgba(128,128,128,.09); padding: 16px 0; overflow: visible; }
.thumbs.ali .thumb-img img { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); width: auto; height: calc(100% - 32px); max-width: none; aspect-ratio: 9 / 19.5; object-fit: cover; border-radius: 8px; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent), 0 6px 18px color-mix(in srgb, var(--accent) 22%, transparent); }
.thumbs.ali .thumb.off .thumb-img { border: 0; background: rgba(128,128,128,.09); opacity: 1; }
.th-more { position: absolute; top: 8px; right: 8px; z-index: 3; width: 24px; height: 24px; min-height: 0; padding: 0; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--muted); box-shadow: none; }
.th-more:hover { color: var(--text); }
.am { padding: 0 2px; min-width: 0; }
.am-top { display: flex; align-items: center; gap: 5px; font-size: 13px; min-width: 0; }
.am-top b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
.am-st { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text); flex: none; }
.am-sub { display: flex; gap: 6px; font-size: 12px; color: var(--muted); min-height: 16px; margin-top: 1px; min-width: 0; }
.am-who { display: inline-flex; align-items: center; gap: 3px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-st { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.ph-open { white-space: nowrap; }
.ph-open .th-more { position: static; display: inline-grid; vertical-align: middle; margin-right: 10px; border: 0; background: none; }
@media (max-width: 700px) { .thumbs.ali { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 8px; } .ph-gridcard { padding: 8px; } }
/* Mehrfachauswahl auf All phones (Admin-Sicht): Haken, markierte Karte/Zeile, Leiste unten mit Assign */
.ph-ck { flex: none; width: 16px; height: 16px; margin: 0 3px 0 0; padding: 0; min-height: 0; border-radius: 4px; cursor: pointer; }
.ph-ckcol { width: 34px; padding-right: 0 !important; }
.thumbs.ali .thumb.is-sel .thumb-img { background: color-mix(in srgb, var(--accent) 9%, transparent); box-shadow: inset 0 0 0 2px var(--accent); }
.ph-table tr.is-sel td { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.sel-bar { position: sticky; bottom: 16px; z-index: 20; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; max-width: 680px; margin: 14px auto 0; padding: 10px 12px 10px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: 0 10px 30px rgba(0,0,0,.14); font-size: 13px; }
.sel-bar[hidden] { display: none; }
/* Drueberfahren (Paul 27.10.2026): Karte, Zeile, Haken, "mehr" mit Hinweis "Actions", Assign, Multi-View-Kachel */
.thumbs.ali .thumb:hover .thumb-img { background: rgba(128,128,128,.15); }
.thumbs.ali .thumb:hover .am-top b { color: var(--accent); }
.ph-table tbody tr:hover td { background: rgba(128,128,128,.06); }
.ph-table tbody tr.is-sel:hover td { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.ph-ck:hover { outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 1px; }
.th-more[data-tip] { overflow: visible; }
.th-more[data-tip]:hover::after { content: attr(data-tip); position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 30; padding: 4px 8px; border-radius: 6px; background: #1f2329; color: #fff; font-size: 11px; font-weight: 500; white-space: nowrap; pointer-events: none; }
.ph-open .th-more { position: relative; }
.th-more:hover { background: var(--panel-2); }
.am .as-btn:hover, .ph-table .as-btn:hover { color: var(--accent); text-decoration: underline; }
.multi-cell:hover .live { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.mv-mini button[title]:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
/* Auswahl per Ziehen: Rahmen, waehrenddessen kein Markieren von Text */
.marquee { position: fixed; z-index: 50; border: 1px solid var(--accent); border-radius: 4px; background: color-mix(in srgb, var(--accent) 12%, transparent); pointer-events: none; }
body.marquee-on, body.marquee-on * { user-select: none !important; cursor: crosshair !important; }
/* Auswahl-Modus: Drueberfahren zeigt, dass der Klick nur an- oder abwaehlt */
.sel-mode .thumbs.ali .thumb:not(.is-sel):hover .thumb-img { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); }
.sel-mode .thumbs.ali .thumb.is-sel:hover .thumb-img { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); }
.sel-mode .thumbs.ali .thumb:hover .am-top b { color: inherit; }
/* Startseite: Live nur eine Reihe, der Rest unter "See all" (Paul 27.10.2026) */
.thumbs.one-row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(165px, 1fr); overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 6px; }
/* Telefon-ID schlicht und ruhig: kleines graues Kaertchen "0001", beim Drueberfahren blau mit Hinweis, Klick kopiert */
.id-chip { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 6px; background: rgba(128,128,128,.12); color: var(--muted); font-size: 10.5px; font-weight: 500; letter-spacing: .03em; line-height: 1; }
.id-chip:hover, .id-chip:focus-visible { background: var(--accent-2); color: var(--accent); }
/* Menue unten links (Paul 27.10.2026: "das Menue ist buggy"): bei 1080p-Fenstern war es 10 px zu hoch, dann kamen Scrollbalken und
   Schatten ueber Settings. Etwas enger, und der Balken bleibt unsichtbar (Mausrad geht weiter, der Schatten zeigt, dass es weitergeht). */
.jp-nav { scrollbar-width: none; }
.jp-nav::-webkit-scrollbar { display: none; }
@media (max-height: 980px) { .jp-nav a { padding-top: 5px; padding-bottom: 5px; } .jp-nav .nav-group { margin-bottom: 8px; } .jp-nav .nav-sub a { padding-top: 3px; padding-bottom: 3px; } }
/* Kein Schwarz um die Handys (Paul 27.10.2026: "will hier auch kein Schwarzes sehen"): helle Flaeche statt #000, Vorschaubilder
   fuellen die Kachel ganz aus. In Multi View bleibt das Bild ganz sichtbar (Tippen rechnet damit), nur der Rand ist hell. */
.thumb-img { background: var(--panel-2); border-color: var(--line); }
.thumb-img img { object-fit: cover; }
.mv-item .live, .multi-cell .live { background: var(--panel-2); }

/* Ansicht-Umschalter (Paul 27.10.2026): Name gekuerzt, Zahl und Haken rechts in einer Spalte */
.pop .vs-t { min-width: 0; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop .vs-n { margin-left: auto; padding-left: 10px; font-variant-numeric: tabular-nums; }
/* Kachel User-Sicht: Name und ID oben, "Used ... ago" leise darunter mit Uhr */
.am-user .am-top { gap: 6px; }
.am-user .am-top b { font-weight: 600; }
.am-used { display: inline-flex; align-items: center; gap: 4px; color: var(--faint); font-size: 11.5px; }
.am-used svg { flex: none; opacity: .8; }
.am-used:has(.ph-used:empty) { display: none; }

/* Alle Handys neben "All phones" (Paul 27.10.2026): kleines Fenster statt aufklappender Liste */
.nav-pick { position: fixed; z-index: 70; width: 260px; max-height: min(440px, calc(100vh - 24px)); display: flex; flex-direction: column; gap: 6px; padding: 6px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 2px 4px rgba(16, 24, 40, .06), 0 18px 40px -12px rgba(16, 24, 40, .25); }
.nav-pick .np-q { height: 34px; min-height: 34px; border-radius: 9px; padding: 0 10px; font-size: 13px; }
.nav-pick .np-l { overflow-y: auto; display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; overscroll-behavior: contain; }
.nav-pick .np-l a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; color: var(--text); text-decoration: none; font-size: 13px; font-weight: 500; }
.nav-pick .np-l a:hover, .nav-pick .np-l a:focus-visible { background: var(--panel-2); outline: none; }
.nav-pick .np-l a.cur { background: var(--accent-2); color: var(--accent); }
.nav-pick .np-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-pick .np-id { flex: none; font-size: 10.5px; font-weight: 500; color: var(--muted); background: rgba(128,128,128,.12); border-radius: 6px; padding: 2px 6px; font-variant-numeric: tabular-nums; }
.nav-pick .np-id:empty { display: none; }
.nav-pick .np-none { padding: 12px 10px; font-size: 13px; color: var(--muted); }
.nav-pick .nav-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--line-2); }
.nav-pick .nav-dot.on { background: var(--good); }

/* Tags an der Kachel (User-Sicht): rechts in der Used-Zeile; ohne Tags erscheint "+ Tag" erst beim Drueberfahren */
.am-user .am-sub { align-items: center; }
.am-tags { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; flex-wrap: nowrap; overflow: hidden; max-width: 60%; padding: 0; border: 0; background: none; min-height: 0; cursor: pointer; font: inherit; }
.am-tags .tag-chip { margin-left: 0; }
.am-tags .add-pill { height: 18px; padding: 0 7px; font-size: 11px; }
.am-tags:hover .add-pill, .am-tags:focus-visible .add-pill { border-color: var(--accent); color: var(--accent); }
.am-tags.empty { opacity: 0; transition: opacity .12s; }
.thumb:hover .am-tags.empty, .am-tags.empty:focus-visible { opacity: 1; }
@media (hover: none) { .am-tags.empty { opacity: 1; } }

/* Filter auf All phones und Multi View (Paul 27.10.2026: "Arrows leicht verbuggt"): eigener Pfeil, gleich weit vom Rand */
select.ph-dd, select.mv-tagdd { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8f98' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; background-size: 12px 12px; padding-right: 34px; cursor: pointer; }
select.ph-dd { padding-left: 14px; }
select.ph-dd.on, select.mv-tagdd.on { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234f9be6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; background-size: 12px 12px; }
/* "⋮" und "Open ›" mittig nebeneinander */
.ph-open-in { display: inline-flex; align-items: center; gap: 10px; vertical-align: middle; }
.ph-open-in .th-more { margin-right: 0; top: 0; right: 0; }   /* sonst schob top: 8px vom Kachel-Knopf es 8 px nach unten */
.ph-table tbody tr[data-go] { cursor: default; }

/* Durchgang mit 4 Pruefern (27.10.2026) */
/* Kachel: "Used ... ago" bleibt einzeilig (mit "..."), Tags: einer plus "+N", "+ Tag" nimmt erst beim Drueberfahren Platz */
.am-used { flex: 0 1 auto; min-width: 0; white-space: nowrap; }
.am-used .ph-used { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.am-tags { flex: none; max-width: 58%; }
.am-tags .tag-chip { display: inline-block; max-width: 86px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; height: 18px; line-height: 18px; padding: 0 7px; font-size: 11px; vertical-align: middle; }
.tag-more { display: inline-flex; align-items: center; flex: none; height: 18px; padding: 0 6px; border-radius: 999px; background: rgba(128,128,128,.12); color: var(--muted); font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tag-cell .tag-more { height: 22px; padding: 0 8px; }
.tag-cell { flex-wrap: nowrap; }
.tp-sug:empty { display: none; }
.am-tags.empty { display: none; }
.thumb:hover .am-tags.empty, .thumb:focus-within .am-tags.empty { display: inline-flex; opacity: 1; }
@media (hover: none) { .am-tags.empty { display: inline-flex; opacity: 1; } }
/* Liste: "Open" und "⋮" bleiben rechts stehen, wenn die Tabelle seitlich scrollt (vor allem am Handy) */
@media (max-width: 1365px) {
  #page-view .ph-table th:last-child, #page-view .ph-table td.ph-open { position: sticky; right: 0; z-index: 1; background: var(--panel); box-shadow: inset 1px 0 0 var(--line); }
  #page-view .ph-table tbody tr:hover td.ph-open { background: linear-gradient(rgba(128,128,128,.06), rgba(128,128,128,.06)), var(--panel); }
  #page-view .ph-table tbody tr.is-sel td.ph-open { background: linear-gradient(color-mix(in srgb, var(--accent) 6%, transparent), color-mix(in srgb, var(--accent) 6%, transparent)), var(--panel); }
}
/* Handy: Model und Team fallen weg, die Suche geht ueber die volle Breite */
@media (max-width: 640px) {
  #page-view .ph-table .ph-mcol, #page-view .ph-table .ph-tcol { display: none; }
  #page-view .ph-search { flex: 1 1 100%; max-width: none; }
}
@media (min-width: 641px) and (max-width: 860px) { #page-view .ph-table :is(th, td) { padding-left: 10px; padding-right: 10px; } }
/* Touch: 16 px Schrift (sonst zoomt das iPhone beim Antippen), groessere Knoepfe, keine Hinweise, die nach dem Tippen stehen bleiben */
@media (pointer: coarse) {
  select.ph-dd, .nav-pick .np-q { font-size: 16px; }
  .ph-open-in .th-more { width: 34px; height: 34px; }
  .thumb .th-more { width: 30px; height: 30px; }
  .ph-open a { display: inline-flex; align-items: center; min-height: 34px; }
}
@media (hover: none) {
  .th-more[data-tip]:hover::after, .id-chip:hover::after { display: none; }
  .ph-table tbody tr:hover td { background: none; }
}
/* Dunkel: Fenster und Hinweise heben sich vom Grund ab */
:root[data-theme="dark"] .nav-pick, :root[data-theme="dark"] .tag-pop, :root[data-theme="dark"] .pop { background: #1c212b; border-color: #333a48; box-shadow: 0 18px 40px -8px rgba(0,0,0,.75); }
:root[data-theme="dark"] .id-chip::after, :root[data-theme="dark"] .th-more[data-tip]:hover::after { background: #2c3443; box-shadow: 0 6px 16px rgba(0,0,0,.5); }
/* Lesbarkeit: Tag-Text und aktiver Filter etwas dunkler im hellen Modus, Kreis-Buchstabe im dunklen Modus dunkel */
:root:not([data-theme="dark"]) .tag-chip, :root:not([data-theme="dark"]) select.ph-dd.on { color: #2f74b5; }
:root[data-theme="dark"] .who-chip .av { color: #0b1620; }

/* Hinweis "Actions" weg, solange das Menue vom Knopf offen ist; Suche so hoch wie die Filter */
.th-more[data-tip]:focus::after { display: none; }
#page-view .ph-search input { height: 36px; min-height: 36px; }

/* Zweite Pruefrunde (27.10.2026) */
:root[data-theme="dark"] select.ph-dd.on, :root[data-theme="dark"] select.mv-tagdd.on { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237db8f2' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.am-used { color: var(--muted); }
#page-view .ph-table .ph-model, #page-view .ph-table .ph-st { white-space: nowrap; }
#page-view .ph-table .ph-model { vertical-align: middle; }
.ph-table tbody tr:last-child .th-more[data-tip]:hover::after { top: auto; bottom: calc(100% + 6px); }
.team-cell:focus-visible, .tag-cell:focus-visible, .am-tags:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.tp-chips .tag-chip button { padding: 2px 4px; margin-right: -3px; }
body.marquee-on, body.marquee-on * { -webkit-user-select: none !important; }
.nav-pick { max-height: min(440px, calc(100dvh - 24px)); }

/* Kachel User-Sicht (Paul 27.10.2026): Name, leise #ID, rechts zuletzt benutzt; darunter Modell mit Handy-Icon und Tags */
.am-user .am-top { gap: 6px; }
.am-user .am-top b { font-weight: 600; }
.am-user .am-top .am-used { margin-left: auto; }
.am-user .am-sub { margin-top: 3px; gap: 8px; }
.id-chip.id-plain { height: auto; padding: 0 2px; background: none; color: var(--muted); font-size: 11px; font-weight: 500; letter-spacing: .02em; }
.id-chip.id-plain:hover, .id-chip.id-plain:focus-visible { background: none; color: var(--accent); }
.am-model { display: inline-flex; align-items: center; gap: 5px; min-width: 0; color: var(--muted); font-size: 12px; white-space: nowrap; }
.am-model > span { overflow: hidden; text-overflow: ellipsis; }
.am-model .ph-ico { width: 9px; height: 14px; flex: none; color: var(--muted); }
/* Filter als Knopf mit Fenster und Haekchen (mehrere Werte) */
button.ph-dd, button.ph-dd:hover { display: inline-flex; align-items: center; gap: 6px; width: auto; max-width: 220px; height: 36px; min-height: 36px; padding: 0 34px 0 14px; border: 1px solid var(--line-2); border-radius: 999px; background-color: var(--panel); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8f98' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; background-size: 12px 12px; color: var(--text); font: inherit; font-size: 13px; font-weight: 400; white-space: nowrap; cursor: pointer; box-shadow: none; }
button.ph-dd:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line-2)); }
button.ph-dd[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-2); }
button.ph-dd.on, button.ph-dd.on:hover { border-color: var(--accent); color: var(--accent); background-color: var(--accent-2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234f9be6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] button.ph-dd.on, :root[data-theme="dark"] button.ph-dd.on:hover { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237db8f2' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
button.ph-dd .dd-n { min-width: 0; max-width: 110px; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.dd-pop { position: fixed; z-index: 75; min-width: 210px; max-width: 280px; max-height: min(360px, calc(100vh - 24px)); max-height: min(360px, calc(100dvh - 24px)); overflow: auto; padding: 6px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 2px 4px rgba(16, 24, 40, .06), 0 18px 40px -12px rgba(16, 24, 40, .25); }
.dd-pop .dd-l { display: flex; flex-direction: column; gap: 1px; }
.dd-pop .dd-opt { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--text); }
.dd-pop .dd-opt:hover, .dd-pop .dd-opt:focus-within { background: var(--panel-2); }
.dd-pop .dd-opt input { width: 16px; height: 16px; min-height: 0; margin: 0; padding: 0; flex: none; accent-color: var(--accent); cursor: pointer; box-shadow: none; }
.dd-pop .dd-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-pop .dd-c { color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.dd-pop .dd-clear { display: block; width: 100%; margin-top: 4px; padding: 8px 10px; border: 0; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; background: none; color: var(--accent); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; }
.dd-pop .dd-clear:hover { background: var(--panel-2); }
.dd-pop .dd-none { padding: 10px 12px; font-size: 12.5px; color: var(--muted); max-width: 250px; }

/* Kachel enger (Paul 27.10.2026: "weniger Space, ID cleaner"): ID als feiner Rahmen ohne #, Modell kurz neben dem Handy-Icon */
.id-chip.id-plain { height: 16px; padding: 0 5px; border: 1px solid var(--line-2); border-radius: 5px; background: none; color: var(--muted); font-size: 10px; font-weight: 500; letter-spacing: .04em; line-height: 14px; }
.id-chip.id-plain:hover, .id-chip.id-plain:focus-visible { border-color: var(--accent); background: none; color: var(--accent); }
.am-user .am-sub { margin-top: 1px; min-height: 0; }
.am-model { gap: 4px; font-size: 11.5px; }
.am-model .ph-ico { width: 8px; height: 12px; }

/* User-Kachel in drei Zeilen (Paul 28.10.2026): Name ganz und Modell dahinter, darunter "Used ...", darunter die ID */
.am-stack .am-top { gap: 7px; }
.am-stack .am-top b { flex: 0 1 auto; }
.am-stack .am-top .am-model { flex: none; }
.am-stack .am-sub { margin-top: 2px; gap: 6px; align-items: center; }
.am-stack .am-used { font-size: 11.5px; }
/* ID in derselben Zeile als leiser Text ohne Kasten (Paul 28.10.2026: "ID cleaner"), Klick kopiert sie weiterhin */
.am-stack .am-dot { color: var(--faint); font-size: 11.5px; flex: none; }
.am-stack .am-id { display: inline-flex; align-items: baseline; gap: 3px; flex: none; font-size: 11.5px; color: var(--faint); white-space: nowrap; }
.am-stack .am-idl { font-size: 11.5px; font-weight: 400; color: var(--faint); }
.am-stack .id-chip.id-plain { height: auto; padding: 0; border: 0; border-radius: 0; font-size: 11.5px; font-weight: 500; letter-spacing: .02em; line-height: inherit; color: var(--muted); }
.am-stack .id-chip.id-plain:hover, .am-stack .id-chip.id-plain:focus-visible { border: 0; color: var(--accent); }
.am-stack .am-tags { margin-left: auto; }
/* Zwei Zeilen (Paul 28.10.2026): "Last used" + Zeit duerfen kuerzer werden, ID und Modell nie. Schmale Kachel: Uhr statt Wort */
.thumbs.ali .thumb { container-type: inline-size; }
.am-stack .am-sub { flex-wrap: nowrap; }
.am-stack .am-used { flex: 0 1 auto; min-width: 0; gap: 4px; }
.am-stack .am-used > svg { display: none; }
.am-stack .am-model { flex: none; }
@container (max-width: 205px) {
  .am-stack .am-lastl { display: none; }
  .am-stack .am-used > svg { display: inline-block; }
}
@container (max-width: 190px) {
  .am-stack .am-used .ago { display: none; }
  .am-stack .am-sub { gap: 3px; }
  .am-stack .am-sub, .am-stack .am-used, .am-stack .am-dot, .am-stack .am-id, .am-stack .am-idl, .am-stack .id-chip.id-plain, .am-stack .am-model { font-size: 11px; }
}
@container (max-width: 150px) {
  .am-stack .am-idl, .am-stack .am-model .ph-ico { display: none; }
}
@container (max-width: 125px) {
  .am-stack .am-used > svg, .am-stack .am-model .ph-ico { display: none; }
  .am-stack .am-sub, .am-stack .am-used, .am-stack .am-dot, .am-stack .am-id, .am-stack .id-chip.id-plain, .am-stack .am-model { font-size: 10.5px; }
}
/* Regler "Handys pro Zeile" neben Grid/List (Paul 28.10.2026), Wert pro Browser gemerkt */
/* Nie schmaler als 150px (Tablet, Handy): dann eben weniger je Zeile, sonst schneidet die Kachel den Namen ab und die ID ragt raus */
.thumbs.big.fixed-cols { grid-template-columns: repeat(auto-fill, minmax(max(150px, calc((100% - (var(--cols, 6) - 1) * 14px) / var(--cols, 6) - 1px)), 1fr)); }
@media (max-width: 700px) { .ph-cols { display: none !important; } }
.ph-cols { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--muted); font-size: 12px; }
/* Eigene Schiene statt der schwarzen von Chrome (Paul 28.10.2026: "das Schwarze passt nicht"): duenn, links Akzent, rechts hellgrau */
.ph-cols input[type="range"] { -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 104px; height: 4px; min-height: 0; margin: 0; padding: 0; border: 0; box-shadow: none; border-radius: 999px; background: linear-gradient(to right, var(--accent) var(--pct, 100%), var(--line-2, var(--line)) var(--pct, 100%)); cursor: pointer; outline: none; }
.ph-cols input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--panel, #fff); border: 2px solid var(--accent); box-shadow: 0 1px 3px rgba(15, 23, 42, .18); }
.ph-cols input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--panel, #fff); border: 2px solid var(--accent); box-shadow: 0 1px 3px rgba(15, 23, 42, .18); }
.ph-cols input[type="range"]::-moz-range-track { background: transparent; }
.ph-cols input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--acc-soft, rgba(37, 99, 235, .2)); }
.ph-cols b { min-width: 14px; text-align: right; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
#page-view .ph-cols { margin-left: auto; }
#page-view .ph-cols + #pm { margin-left: 0; }
/* Plus: eigenes gruenes Zeichen wie flex (Paul 28.10.2026) */
.sim-plus { background: #1f9d3a; color: #fff; width: 16px; font-size: 13px; font-weight: 700; padding-bottom: 1px; }

/* Kachel-Fuss, fuenfte Runde (Paul 28.10.2026: "eleganter, nicht so chaotisch"): oben Name mit Stift, darunter links die Zeit,
   rechts Modell · #ID, alles leise und ohne Symbole. Ueberschreibt die Regeln oben nur fuer .am-v5. */
.am-v5 .am-top { gap: 4px; min-height: 22px; }
.am-v5 .am-name { font-size: 13px; font-weight: 600; color: var(--text); letter-spacing: -.005em; }
.thumbs.ali .thumb:hover .am-v5 .am-name { color: var(--text); }
.am-v5 .am-name.ph-rename { cursor: text; margin: 0; padding: 0; border-radius: 0; }
.am-v5 .am-name.ph-rename:hover { background: none; }
.am-v5 .am-rn { display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--faint); opacity: 0; cursor: pointer; flex: none; transition: opacity .12s, background .12s, color .12s; }
.thumbs.ali .thumb:hover .am-v5 .am-rn, .am-v5 .am-rn:focus-visible { opacity: 1; }
.am-v5 .am-rn:hover { background: var(--panel-2); color: var(--accent); }
.am-v5 .am-top.renaming .am-rn, .am-v5 .am-top.renaming .am-tags { display: none; }
.am-v5 .am-name .ph-rename-in { width: 100%; min-width: 0; height: 22px; margin: 0; padding: 0 2px; border: 0; border-bottom: 1.5px solid var(--accent); border-radius: 0; background: transparent; box-shadow: none; outline: none; font: inherit; color: var(--text); }
.am-v5 .am-top.renaming .am-name { flex: 1 1 auto; }
.am-v5 .am-sub { justify-content: space-between; gap: 8px; margin-top: 1px; font-size: 11.5px; color: var(--muted); }
.am-v5 .am-used { gap: 0; color: var(--muted); font-size: 11.5px; }
.am-v5 .am-meta { display: inline-flex; align-items: baseline; gap: 5px; flex: none; color: var(--faint); font-size: 11.5px; white-space: nowrap; }
.am-v5 .am-model { gap: 0; color: var(--muted); font-size: 11.5px; }
.am-v5 .am-mshort { display: none; }
.am-v5 .am-lw, .am-v5 .am-uw { white-space: pre; }
.am-v5 .am-uw { text-transform: none; }
.am-v5 .am-used.never .am-lw, .am-v5 .am-used.never .am-uw { display: none; }
.am-v5 .am-dot { color: var(--line-2, var(--faint)); font-size: 11.5px; }
.am-v5 .am-id { font-size: 11.5px; font-variant-numeric: tabular-nums; letter-spacing: .02em; color: var(--faint); cursor: copy; }
.am-v5 .am-id:hover, .am-v5 .am-id:focus-visible { color: var(--accent); }
/* Breit: "Last used 2h ago · iPhone 13 · #0001"; mittel: "Used 2h ago · 13 · #0001"; schmal: "2h ago · 13 · #0001" */
@container (max-width: 250px) {
  .am-v5 .am-mfull { display: none; }
  .am-v5 .am-mshort { display: inline; }
  .am-v5 .am-lw { display: none; }
  .am-v5 .am-uw::first-letter { text-transform: uppercase; }
  .am-v5 .am-uw { display: inline-block; }
}
@container (max-width: 180px) {
  .am-v5 .am-uw { display: none; }
}
@container (max-width: 160px) {
  .am-v5 .am-sub, .am-v5 .am-used, .am-v5 .am-meta, .am-v5 .am-model, .am-v5 .am-dot, .am-v5 .am-id { font-size: 11px; }
  .am-v5 .am-meta { gap: 3px; }
}
/* Variante C (Paul 28.10.2026): oben Name links und #ID rechts, darunter "iPhone 13 · used 4m ago", Tags rechts daneben */
.am-v6 .am-top .am-id { margin-left: auto; flex: none; font-size: 11.5px; color: var(--faint); }
.am-v6 .am-top.renaming .am-id { display: none; }
.am-v6 .am-sub { justify-content: flex-start; gap: 6px; }
.am-v6 .am-line { display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; overflow: hidden; white-space: nowrap; color: var(--muted); font-size: 11.5px; }
.am-v6 .am-line .am-used { display: inline; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.am-v6 .am-uw { display: inline; }
.am-v6 .am-used.never .am-uw { display: none; }
.am-v6 .am-sub .am-tags { margin-left: auto; flex: none; }
@container (max-width: 250px) { .am-v6 .am-uw { display: inline; } .am-v6 .am-uw::first-letter { text-transform: none; } }
@container (max-width: 180px) { .am-v6 .am-mfull { display: none; } .am-v6 .am-mshort { display: inline; } }
@container (min-width: 181px) { .am-v6 .am-mfull { display: inline; } .am-v6 .am-mshort { display: none; } }
@container (max-width: 140px) { .am-v6 .am-uw { display: none; } }

/* Tag mehreren Handys geben (Paul 27.10.2026) */
.tg-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0 6px; }
.tg-list { display: flex; flex-direction: column; gap: 2px; max-height: min(360px, 50vh); overflow: auto; border: 1px solid var(--line); border-radius: 12px; padding: 4px; }
.tg-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.tg-row:hover { background: var(--panel-2); }
.tg-row input { width: 16px; height: 16px; min-height: 0; margin: 0; padding: 0; flex: none; accent-color: var(--accent); box-shadow: none; }
.tg-nm { font-weight: 600; white-space: nowrap; }
.tg-meta { color: var(--muted); font-size: 11.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tg-cur { margin-left: auto; display: inline-flex; gap: 4px; min-width: 0; overflow: hidden; }
.tg-cur .tag-chip { margin-left: 0; }
.dd-pop .dd-edit { flex: none; display: grid; place-items: center; width: 24px; height: 24px; min-height: 0; padding: 0; margin-right: -4px; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; opacity: 0; }
.dd-pop .dd-opt:hover .dd-edit, .dd-pop .dd-edit:focus-visible { opacity: 1; }
.dd-pop .dd-edit:hover { background: var(--line); color: var(--text); }
@media (hover: none) { .dd-pop .dd-edit { opacity: 1; } }
.dd-pop .dd-new { display: flex; align-items: center; gap: 6px; width: 100%; margin-top: 4px; padding: 8px 10px; border: 0; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; background: none; color: var(--accent); font: inherit; font-size: 12.5px; font-weight: 500; text-align: left; cursor: pointer; }
.dd-pop .dd-new:hover { background: var(--panel-2); }
.dd-pop .dd-clear + .dd-new { border-top: 0; margin-top: 0; }

/* iPhone SE (Paul 27.10.2026: "einfach groesserer Bildschirm, wie bei den anderen Phones"): derselbe schlanke Rahmen, gleich hoch,
   nur im Format des SE (375:667) und dadurch breiter, das Bild fuellt ihn ganz */
/* Ecken kleiner und ein schmaler schwarzer Rand wie bei echten Handys: die runden Ecken der neuen iPhones schnitten beim SE die Statusleiste ab */
.jpc-bento.se { --pw: calc(var(--ph) * 375 / 667); }
/* Rand wie bei ALI: kein schwarzer Innenrand, kleinere Ecken als bei den neuen iPhones */
.jpc-bento.se .jpc-bezel { aspect-ratio: 375 / 667; padding: 0; border-radius: calc(var(--ph) * .04); background: transparent; }
@media (max-width: 1024px) { .jpc-bento.se .jpc-bezel { border-radius: 26px; } }
.jpc-bento.se .jpc-bezel .live { border-radius: inherit; }

/* Hinter dem Handybild kein Schwarz (Paul 27.10.2026): Bruchteile eines Pixels an Rand und Ecken zeigen sonst einen dunklen Strich */
.jpc.jpc-bento .jpc-bezel, .jpc.jpc-bento .jpc-bezel .live { background: #fff; }
:root[data-theme="dark"] .jpc.jpc-bento .jpc-bezel, :root[data-theme="dark"] .jpc.jpc-bento .jpc-bezel .live { background: #1d212a; }

/* Content-Reiter: schon aufs iPhone geschickte Dateien (Paul 27.10.2026) */
.jpc-sent { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow: auto; }
.jpc-sent-r { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; font-size: 12.5px; color: var(--text); }
.jpc-sent-r:hover { background: var(--panel-2); }
.jpc-sent-r svg { flex: none; color: var(--muted); }
.jpc-sent-r .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jpc-sent-r .w { flex: none; color: var(--muted); font-size: 11.5px; }
.jpc-sent-r.bad, .jpc-sent-r.bad svg, .jpc-sent-r.bad .w { color: var(--bad); }

/* iPhones-Seite im eigenen JP-Stil (Paul 28.10.2026: "schaut zu krass nach ALI Remote aus, cleaner, nicht kopiert").
   Statt Reitern mit Unterstrich ein weicher Umschalter, Filter und Suche als ruhige Flaechen ohne Rahmen, jedes iPhone als
   eigene weisse Karte mit getoentem Bildgrund, Status als Punkt im Bild, #ID als kleines Schild. Nur auf dieser Seite (.jp-phones). */
.jp-phones .ph-tabs { display: inline-flex; gap: 2px; padding: 3px; border: 0; border-radius: 12px; background: var(--panel-2); margin-bottom: 12px; overflow: visible; }
.jp-phones .ph-tabs button { padding: 6px 12px; margin: 0; border: 0; border-radius: 9px; font-size: 13px; font-weight: 500; color: var(--muted); }
.jp-phones .ph-tabs button span { margin-left: 6px; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 14%, transparent); color: var(--muted); font-size: 11px; font-weight: 600; line-height: 17px; display: inline-block; }
.jp-phones .ph-tabs button:hover { color: var(--text); }
.jp-phones .ph-tabs button.active { background: var(--panel); color: var(--text); font-weight: 600; border-bottom: 0; box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 0 0 1px var(--line); }
.jp-phones .ph-tabs button.active span { background: var(--accent-2); color: var(--accent); }
.jp-phones .ph-bar { gap: 8px; }
.jp-phones .ph-search input { height: 36px; border: 1px solid transparent; border-radius: 12px; background: var(--panel-2); box-shadow: none; }
.jp-phones .ph-search input:focus { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--panel); box-shadow: 0 0 0 3px var(--accent-2); }
.jp-phones button.ph-dd, .jp-phones button.ph-dd:hover { border: 1px solid transparent; border-radius: 12px; background-color: var(--panel-2); color: var(--text); }
.jp-phones button.ph-dd:hover { background-color: color-mix(in srgb, var(--accent) 7%, var(--panel-2)); }
.jp-phones button.ph-dd[aria-expanded="true"] { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background-color: var(--panel); box-shadow: 0 0 0 3px var(--accent-2); }
.jp-phones button.ph-dd.on, .jp-phones button.ph-dd.on:hover { border-color: transparent; background-color: var(--accent-2); color: var(--accent); }
.jp-phones .ph-cols { height: 36px; border: 0; border-radius: 12px; background: var(--panel-2); }
.jp-phones #pm { height: 36px; align-items: center; border-radius: 12px; }
/* Raster: keine grosse Sammelkarte mehr, jede Karte steht fuer sich */
.jp-phones .ph-gridcard { padding: 0; border: 0; background: none; box-shadow: none; }
.jp-phones .thumbs.ali { gap: 14px; }
.jp-phones .thumbs.ali .thumb { gap: 8px; padding: 8px 8px 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); transition: border-color .15s, box-shadow .15s, transform .15s; }
.jp-phones .thumbs.ali .thumb:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); box-shadow: 0 8px 24px rgba(15, 23, 42, .07); transform: translateY(-1px); }
.jp-phones .thumbs.ali .thumb-img, .jp-phones .thumbs.ali .thumb.off .thumb-img { border-radius: 11px; background: color-mix(in srgb, var(--accent) 6%, var(--panel-2)); }
.jp-phones .thumbs.ali .thumb:hover .thumb-img { background: color-mix(in srgb, var(--accent) 10%, var(--panel-2)); }
.jp-phones .thumbs.ali .thumb.is-sel { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-2); }
.jp-phones .thumbs.ali .thumb.is-sel .thumb-img { box-shadow: none; }
.jp-phones .th-more { top: 14px; right: 14px; width: 26px; height: 26px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--panel) 88%, transparent); color: var(--muted); box-shadow: 0 1px 3px rgba(15, 23, 42, .12); opacity: 0; transition: opacity .12s; }
.jp-phones .thumb:hover .th-more, .jp-phones .th-more:focus-visible, .jp-phones .th-more[aria-expanded="true"] { opacity: 1; }
@media (hover: none) { .jp-phones .th-more { opacity: 1; } }
/* Status als Punkt oben links im Bild (gruen online, rot offline, gelb braucht Hilfe) */
.jp-phones .am-live { position: absolute; top: 17px; left: 17px; z-index: 3; width: 9px; height: 9px; border-radius: 50%; background: var(--faint); box-shadow: 0 0 0 2.5px var(--panel); }
.jp-phones .am-live.s-good { background: var(--good); }
.jp-phones .am-live.s-warn { background: var(--warn); }
.jp-phones .am-live.s-bad { background: var(--bad); }
.jp-phones .am-live.s-accent { background: var(--accent); }
/* Fuss: Name und #ID-Schild, darunter Modell und Zeit */
.jp-phones .am-v6 { padding: 0 2px; }
.jp-phones .am-v6 .am-name { font-size: 13.5px; }
.jp-phones .am-v6 .am-top .am-id { padding: 0 6px; border-radius: 6px; background: var(--panel-2); color: var(--muted); font-size: 10.5px; font-weight: 600; line-height: 18px; letter-spacing: .03em; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.jp-phones .am-v6 .am-top .am-id:hover, .jp-phones .am-v6 .am-top .am-id:focus-visible { background: var(--accent-2); color: var(--accent); }
.jp-phones .am-v6 .am-line { font-size: 12px; }
/* Liste: ruhige Zeilen mit leichtem Hover */
.jp-phones .ph-table tbody tr:hover td { background: color-mix(in srgb, var(--accent) 4%, transparent); }

/* Zweite Runde eigener Stil (Paul 28.10.2026: "man sieht die Buttons oben teilweise nicht, schaut immer noch aehnlich aus").
   Filter und Suche wieder klar als Knoepfe (weiss mit Rand), der ⋮-Knopf immer sichtbar. Karte: Kopfzeile ueber dem Bild
   (Status, Name, #ID, ⋮), unter dem Bild eine Zeile mit SIM-Zeichen, Modell und Zeit. */
.jp-phones .ph-search input { border: 1px solid var(--line-2); background: var(--panel); }
.jp-phones button.ph-dd, .jp-phones button.ph-dd:hover { border: 1px solid var(--line-2); background-color: var(--panel); box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.jp-phones button.ph-dd:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line-2)); background-color: var(--panel); }
.jp-phones button.ph-dd.on, .jp-phones button.ph-dd.on:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background-color: var(--accent-2); }
.jp-phones .ph-cols { border: 1px solid var(--line-2); background: var(--panel); }
.jp-phones #pm { border: 1px solid var(--line-2); background: var(--panel); }
.jp-phones .thumbs.ali .thumb { padding: 6px 8px 9px; gap: 6px; }
.jp-phones .am7-head { order: -1; display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 28px; padding: 0 32px 0 4px; }
.jp-phones .am7-head .am-live { position: static; flex: none; width: 8px; height: 8px; box-shadow: none; }
.jp-phones .am7-head .am-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 600; color: var(--text); }
.jp-phones .am7-head .am-name.ph-rename { cursor: text; margin: 0; padding: 0; border-radius: 0; }
.jp-phones .am7-head .am-name.ph-rename:hover { background: none; }
.jp-phones .am7-head .am-rn { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--faint); opacity: 0; cursor: pointer; transition: opacity .12s, background .12s, color .12s; }
.jp-phones .thumb:hover .am7-head .am-rn, .jp-phones .am7-head .am-rn:focus-visible { opacity: 1; }
.jp-phones .am7-head .am-rn:hover { background: var(--panel-2); color: var(--accent); }
.jp-phones .am7-head .am-id { margin-left: auto; flex: none; padding: 0 6px; border-radius: 6px; background: var(--panel-2); color: var(--muted); font-size: 10.5px; font-weight: 600; line-height: 18px; letter-spacing: .03em; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; cursor: copy; }
.jp-phones .am7-head .am-id:hover, .jp-phones .am7-head .am-id:focus-visible { background: var(--accent-2); color: var(--accent); }
.jp-phones .am7-head.renaming .am-rn, .jp-phones .am7-head.renaming .am-id { display: none; }
.jp-phones .am7-head.renaming .am-name { flex: 1 1 auto; }
.jp-phones .am7-head .ph-rename-in { width: 100%; min-width: 0; height: 22px; margin: 0; padding: 0 2px; border: 0; border-bottom: 1.5px solid var(--accent); border-radius: 0; background: transparent; box-shadow: none; outline: none; font: inherit; color: var(--text); }
/* ⋮ sitzt im Bild-Kasten, wird per Versatz in die Kopfzeile gehoben und ist immer sichtbar */
.jp-phones .thumbs.ali .th-more { top: -31px; right: -2px; width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--muted); box-shadow: none; opacity: 1; }
.jp-phones .thumbs.ali .th-more:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); color: var(--accent); }
.jp-phones .am7-foot { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 20px; padding: 0 4px; font-size: 12px; color: var(--muted); }
.jp-phones .am7-foot .am7-sim { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; }
.jp-phones .am7-foot .am7-sim .sim { flex: none; }
.jp-phones .am7-foot .am-model { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.jp-phones .am7-foot .am-mshort { display: none; }
.jp-phones .am7-foot .am-tags { flex: none; }
.jp-phones .am7-foot .am-used { margin-left: auto; flex: none; color: var(--faint); font-size: 11.5px; white-space: nowrap; }
@container (max-width: 175px) {
  .jp-phones .am7-foot .am-mfull { display: none; }
  .jp-phones .am7-foot .am-mshort { display: inline; }
}
/* Name wieder unter dem Bild (Paul 28.10.2026: "unten war es uebersichtlicher"). Status-Punkt und ⋮ sitzen im Bild. */
.jp-phones .thumbs.ali .thumb { padding: 8px 8px 10px; gap: 8px; }
.jp-phones .am7-head { order: 0; min-height: 22px; padding: 0 2px; }
.jp-phones .am7-foot { padding: 0 2px; margin-top: -4px; }
.jp-phones .am-live { top: 18px; left: 18px; width: 9px; height: 9px; box-shadow: 0 0 0 2.5px var(--panel); }
.jp-phones .thumbs.ali .th-more { top: 8px; right: 8px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--panel) 90%, transparent); box-shadow: 0 1px 3px rgba(15, 23, 42, .14); }
/* Feinschliff (Paul 28.10.2026: "die 8 und 1 oben ist nicht so schoen, die Farbe der ID gefaellt mir nicht"):
   Zahlen in den Reitern als leise Zahl ohne Pille (aktiv in Akzentfarbe), #ID als helle graue Schrift ohne Kasten. */
.jp-phones .ph-tabs button span, .jp-phones .ph-tabs button.active span { display: inline; margin-left: 6px; padding: 0; border-radius: 0; background: none; color: var(--faint); font-size: 12.5px; font-weight: 500; line-height: inherit; font-variant-numeric: tabular-nums; }
.jp-phones .ph-tabs button.active span { color: var(--accent); }
.jp-phones .am7-head .am-id { padding: 0; border-radius: 0; background: none; color: var(--faint); font-family: inherit; font-size: 11.5px; font-weight: 500; line-height: inherit; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.jp-phones .am7-head .am-id:hover, .jp-phones .am7-head .am-id:focus-visible { background: none; color: var(--accent); }
/* Durchgang Home und All phones (Paul 28.10.2026: "geh nochmal durch und suche nach Fehlern"):
   "+ Tag" beim Drueberfahren nur als kleines Plus, sonst wurde der Handytyp zu "iPhone..." gequetscht.
   ID auf Home und in der Liste wie auf den Karten: leise #0001 ohne Kasten. */
.jp-phones .am7-foot .am-tags.empty .add-pill { width: 18px; padding: 0; justify-content: center; font-size: 0; }
.jp-phones .am7-foot .am-tags.empty .add-pill::before { content: '+'; font-size: 13px; line-height: 1; }
.card-clean .id-chip, .jp-phones .ph-table .id-chip { height: auto; padding: 0 2px; border: 0; border-radius: 4px; background: none; color: var(--faint); font-family: inherit; font-size: 11.5px; font-weight: 500; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.card-clean .id-chip::before, .jp-phones .ph-table .id-chip::before { content: '#'; }
.card-clean .id-chip:hover, .card-clean .id-chip:focus-visible, .jp-phones .ph-table .id-chip:hover, .jp-phones .ph-table .id-chip:focus-visible { background: none; color: var(--accent); }
/* Statuszeile unter dem Handy: mit "Needs you" wird sie lang, der Knopf darf nicht aus dem Bild rutschen */
@media (min-width: 1260px) { .jpc-bento .jpb-stage #status.jpc-st { width: max-content; flex-wrap: nowrap; } }
.ph-sort { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.ph-sort:hover { color: var(--text); }