/* Systemseiten /systeme/… und Übersicht /systeme/ (tools/inhalte/systeme.py). Bausteine sp-… kommen aus site.css. */

/* Schriftzeichen statt Logo, solange keine Logodatei vorliegt */
.sy-mono{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;font-family:var(--head);font-size:17px;letter-spacing:.5px;color:#fff;
  background:linear-gradient(135deg,rgba(63,216,232,.28),rgba(167,107,255,.32));border:1px solid rgba(207,198,240,.3)}
.sp-syslogo .sy-mono{width:59px;height:59px;font-size:22px}
/* Logos aus den GitHub-Avataren der Hersteller: quadratisch, teils transparent mit dunkler Schrift */
.sy-av{background:#fff;border-radius:10px;object-fit:contain}

/* Hinweis unter dem Kopf (SaaS-Kern, abgekündigte Version) */
.sy-hinweis{max-width:640px;margin:26px 0 0;padding:18px 22px;border:1px solid color-mix(in srgb,var(--sp-ora) 55%,transparent);border-radius:14px;
  background:color-mix(in srgb,var(--sp-ora) 9%,rgba(24,14,58,.72))}
.sy-hinweis b{display:block;margin-bottom:6px;color:#fff;font-size:15px}
.sy-hinweis p{margin:0;font-size:14.5px;line-height:1.7;color:var(--sp-muted)}

/* Steckbrief */
.sy-fact{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px;align-items:center;max-width:1100px;margin:0 auto;padding:44px 48px;
  border:1px solid rgba(207,198,240,.16);border-radius:20px;background:radial-gradient(120% 120% at 0% 0%,rgba(63,216,232,.1),transparent 55%),rgba(24,14,58,.72)}
.sy-fact h2{margin:18px 0 16px}
.sy-fact p{margin:0;font-size:15px;line-height:1.75;color:var(--sp-muted)}
.sy-fact dl{margin:0;display:grid}
.sy-fact dl div{display:grid;grid-template-columns:170px minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid rgba(207,198,240,.12)}
.sy-fact dl div:last-child{border-bottom:0}
.sy-fact dt{font-size:11.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--sp-cya);padding-top:2px}
.sy-fact dd{margin:0;font-size:14.5px;line-height:1.55;color:#fff}
@media(max-width:900px){.sy-fact{grid-template-columns:minmax(0,1fr);gap:24px;padding:32px 24px}}
@media(max-width:620px){.sy-fact{padding:26px 18px}.sy-fact dl div{grid-template-columns:minmax(0,1fr);gap:4px}}

/* Übersicht */
.sy-all-hero{padding-bottom:10px}
.sy-all-hero .wrap{grid-template-columns:minmax(0,1fr);min-height:0;padding-top:40px}
.sy-all-hero .sp-lead{max-width:760px}
.sy-filter{max-width:560px;margin:0 auto 28px;text-align:center}
.sy-filter label{display:block;margin-bottom:10px;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--sp-cya)}
.sy-filter input{width:100%;padding:14px 18px;border-radius:999px;border:1px solid rgba(207,198,240,.3);background:rgba(24,14,58,.72);color:#fff;font:inherit;font-size:15px}
.sy-filter input:focus-visible{outline:none;border-color:var(--sp-cya);box-shadow:0 0 16px rgba(63,230,255,.35)}
.sy-none{margin:14px 0 0;color:var(--sp-muted)}
.sy-groups{grid-template-columns:minmax(0,1fr)}
.sy-box h2{font-size:22px;margin:0 0 18px}
.sy-count{color:var(--muted);font-size:15px}
.sy-logos{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.sy-tile{justify-content:flex-start;gap:8px;padding:18px 10px;color:#fff;text-decoration:none;transition:border-color .3s,box-shadow .3s}
.sy-tile:hover,.sy-tile:focus-visible{border-color:var(--cyan);box-shadow:0 0 16px rgba(63,230,255,.25);outline:none}
.sy-tile b{font-size:13px;font-weight:600;line-height:1.3}
.sy-tile small{font-size:11px;line-height:1.4;color:var(--muted)}
.sy-tile[hidden],.sy-box[hidden]{display:none}
@media(max-width:620px){.sy-logos{grid-template-columns:repeat(2,minmax(0,1fr))}}