/* Projektkarte TonStrom – im Design der Projektseite (tonstrom/assets/style.css), Seed #5B3CC4. Hell + dunkel. */

.projekt--tonstrom {
  --ts-brand: #5B3CC4; --ts-primary: #5B44B0; --ts-on-primary: #FFFFFF; --ts-tertiary: #FFDCC2;
  --ts-bg: #FDF7FF; --ts-surface: #FFFFFF; --ts-text: #1C1B20; --ts-muted: #48454E; --ts-outline: #CAC4CF;
  color: var(--ts-text); border: 1px solid var(--ts-outline); border-radius: 28px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background:
    radial-gradient(860px 460px at 92% -20%, color-mix(in srgb, var(--ts-brand) 30%, transparent), transparent 70%),
    radial-gradient(620px 380px at -10% 120%, color-mix(in srgb, var(--ts-tertiary) 70%, transparent), transparent 70%),
    var(--ts-bg);
}
@media (prefers-color-scheme: dark) {
  .projekt--tonstrom { --ts-primary: #CBBEFF; --ts-on-primary: #31138A; --ts-tertiary: #6B3B10; --ts-bg: #141218; --ts-surface: #1C1B20; --ts-text: #E6E1E9; --ts-muted: #CAC4CF; --ts-outline: #48454E; }
}
.projekt--tonstrom .projekt-marke img { border-radius: 10px; width: 36px; height: 36px; }
.projekt--tonstrom .projekt-name { font-weight: 800; font-size: 1.15rem; }
.projekt--tonstrom .projekt-motto { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ts-primary); }
.projekt--tonstrom h2 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); font-weight: 800; letter-spacing: -.01em; line-height: 1.12; }
.projekt--tonstrom h2 em { font-style: normal; color: var(--ts-primary); }
.projekt--tonstrom .projekt-lede { color: var(--ts-muted); font-size: 1.08rem; }
.projekt--tonstrom .projekt-fakten { gap: .5rem; }
.projekt--tonstrom .projekt-fakten li { background: var(--ts-surface); border: 1px solid var(--ts-outline); border-radius: 8px; padding: 2px 10px; font-weight: 600; color: var(--ts-muted); }
.projekt--tonstrom .projekt-link { background: var(--ts-primary); color: var(--ts-on-primary); }
.projekt--tonstrom:hover .projekt-link { filter: brightness(1.08); }
.projekt--tonstrom:hover { box-shadow: 0 18px 44px rgba(0, 0, 0, .16); }

/* Ausschnitt der App */
.ts-handy { width: 280px; max-width: 100%; margin-inline: auto; padding: 11px; border-radius: 40px; background: #16141A; box-shadow: 0 30px 60px rgba(0, 0, 0, .25); }
.ts-screen { border-radius: 30px; overflow: hidden; background: var(--ts-bg); color: var(--ts-text); padding-bottom: 12px; }
.ts-bar { display: flex; justify-content: space-between; padding: 14px 16px 10px; font-weight: 700; font-size: 1rem; }
.ts-bar span { color: var(--ts-muted); font-weight: 500; font-size: .74rem; }
.ts-pegel { margin: 0 16px 8px; height: 30px; display: flex; align-items: flex-end; gap: 3px; }
.ts-pegel i { flex: 1; background: linear-gradient(#FFB74D, var(--ts-primary)); border-radius: 3px 3px 0 0; }
.ts-p1 { height: 35%; } .ts-p2 { height: 70%; } .ts-p3 { height: 95%; } .ts-p4 { height: 55%; } .ts-p5 { height: 80%; }
.ts-ls { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 16px; border-top: 1px solid var(--ts-outline); font-size: .8rem; }
.ts-ls span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--ts-brand) 25%, var(--ts-surface)); }
.ts-ls small { display: block; color: var(--ts-muted); font-size: .64rem; }
.ts-ls i { width: 30px; height: 17px; border-radius: 999px; background: var(--ts-primary); }