/* Systeme (/systeme, /systeme/<slug>): Marketingseiten der elf Systeme im Stil "Glas und Licht".
   Ruhezustand = sichtbar; Einblenden und Bewegung kommen aus neu.css / grafik.css. */
.sy-name { margin: 6px 0 0; font: 600 clamp(20px, 2vw, 26px)/1 Clash, sans-serif; color: var(--orange-hell); letter-spacing: .01em; }
.sy-kopf h1 { margin-top: 10px; }
.sy-gruppe { font-size: clamp(26px, 3vw, 40px); }

.sy-punkte { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (min-width: 1100px) { .sy-punkte { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 600px) { .sy-punkte { grid-template-columns: 1fr; } }
.sy-punkt { min-height: 220px; }
.sy-nr { font: 600 14px/1 DM, sans-serif; letter-spacing: .14em; color: var(--orange); }
.sy-punkt h3 { margin-top: auto; }

.sy-schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; counter-reset: sy; }
.sy-schritte li { padding: 32px; display: flex; flex-direction: column; gap: 12px; }
.sy-schritte h3 { margin: 0; font: 600 clamp(22px, 2vw, 28px)/1.12 Clash, sans-serif; }
.sy-schritte p { margin: 0; color: var(--leise); }
.sy-schritte .sy-nr { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 113, 32, .14); border: 1px solid var(--rand-stark); font-size: 18px; letter-spacing: 0; color: var(--orange-hell); }

.sy-daten { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; padding: clamp(28px, 4vw, 56px); align-items: start; }
.sy-daten h2 { margin: 14px 0 14px; font: 600 clamp(28px, 3.4vw, 46px)/1.08 Clash, sans-serif; }
.sy-daten p { margin: 0 0 12px; color: var(--leise); }
.sy-hinweis { padding: 14px 18px; border-radius: 16px; border: 1px solid var(--rand-stark); background: rgba(255, 113, 32, .08); color: var(--text) !important; }
.sy-fakten { margin: 0; display: grid; gap: 14px; }
.sy-fakten div { padding: 16px 20px; border-radius: 18px; border: 1px solid var(--rand); background: rgba(255, 255, 255, .04); }
.sy-fakten dt { font: 600 12px/1 DM, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); margin-bottom: 8px; }
.sy-fakten dd { margin: 0; font-weight: 500; }
.sy-weg { margin: 28px 0 0; }

.sy-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.sy-karte { overflow: hidden; }
.sy-karte:hover { transform: translateY(-6px); border-color: var(--rand-stark); }
.sy-karte-grafik { margin: -10px -10px 8px; }
.sy-karte-grafik .grafik { max-width: none; }

@media (max-width: 860px) { .sy-daten { grid-template-columns: 1fr; gap: 28px; } }

/* Kachelraster (Startseite, /tools) */
.sy-einleitung { margin: 14px 0 0; max-width: 56ch; color: var(--leise); }
.sy-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.sy-kachel { overflow: hidden; }
.sy-kachel:hover { transform: translateY(-6px); border-color: var(--rand-stark); }
.sy-kachel-grafik { margin: -8px -8px 6px; }
.sy-kachel-grafik .grafik { max-width: none; }
.sy-kachel h3 { font-size: clamp(20px, 1.8vw, 24px); }

/* Systemfinder */
.sy-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 22px; }
.sy-chips[hidden], .sy-treffer[hidden], .sy-kachel[hidden] { display: none; }
.sy-chips-text { font: 600 13px/1 DM, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--leise); margin-right: 6px; }
.sy-chip { padding: 11px 20px; border-radius: 999px; border: 1px solid var(--rand); background: rgba(255, 255, 255, .06); color: var(--text); font: 500 15px/1 DM, sans-serif; cursor: pointer;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: background .3s, border-color .3s, transform .3s var(--kurve), color .3s; }
.sy-chip:hover { border-color: rgba(255, 255, 255, .34); transform: translateY(-2px); }
.sy-chip[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); color: #140900; font-weight: 600; }
.sy-treffer { margin: 0 0 18px; color: var(--leise); font-size: 15px; }