/* Projektkarte RudelCash – im Design der Projektseite (rudelcash/assets/style.css), Seed #5E43C0. Hell + dunkel. */

.projekt--rudelcash {
  --rc-brand: #5E43C0; --rc-primary: #6750A4; --rc-on-primary: #FFFFFF; --rc-tertiary: #FFD8E4;
  --rc-bg: #FEF7FF; --rc-surface: #FFFFFF; --rc-text: #1D1B20; --rc-muted: #49454F; --rc-outline: #CAC4D0;
  color: var(--rc-text); border: 1px solid var(--rc-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(--rc-brand) 30%, transparent), transparent 70%),
    radial-gradient(620px 380px at -10% 120%, color-mix(in srgb, var(--rc-tertiary) 70%, transparent), transparent 70%),
    var(--rc-bg);
}
@media (prefers-color-scheme: dark) {
  .projekt--rudelcash { --rc-primary: #D0BCFF; --rc-on-primary: #381E72; --rc-tertiary: #633B48; --rc-bg: #141218; --rc-surface: #1D1B20; --rc-text: #E6E0E9; --rc-muted: #CAC4D0; --rc-outline: #49454F; }
}
.projekt--rudelcash .projekt-marke img { border-radius: 10px; width: 36px; height: 36px; }
.projekt--rudelcash .projekt-name { font-weight: 800; font-size: 1.15rem; }
.projekt--rudelcash .projekt-motto { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rc-primary); }
.projekt--rudelcash h2 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); font-weight: 800; letter-spacing: -.01em; line-height: 1.12; }
.projekt--rudelcash h2 em { font-style: normal; color: var(--rc-primary); }
.projekt--rudelcash .projekt-lede { color: var(--rc-muted); font-size: 1.08rem; }
.projekt--rudelcash .projekt-fakten { gap: .5rem; }
.projekt--rudelcash .projekt-fakten li { background: var(--rc-surface); border: 1px solid var(--rc-outline); border-radius: 8px; padding: 2px 10px; font-weight: 600; color: var(--rc-muted); }
.projekt--rudelcash .projekt-link { background: var(--rc-primary); color: var(--rc-on-primary); }
.projekt--rudelcash:hover .projekt-link { filter: brightness(1.08); }
.projekt--rudelcash:hover { box-shadow: 0 18px 44px rgba(0, 0, 0, .16); }

/* Ausschnitt der App */
.rc-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); }
.rc-screen { border-radius: 30px; overflow: hidden; background: var(--rc-bg); color: var(--rc-text); padding-bottom: 12px; }
.rc-bar { display: flex; justify-content: space-between; padding: 14px 16px 10px; font-weight: 700; font-size: 1rem; }
.rc-bar span { color: var(--rc-muted); font-weight: 500; font-size: .74rem; }
.rc-dok { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 16px; border-top: 1px solid var(--rc-outline); font-size: .8rem; }
.rc-dok span { width: 30px; height: 36px; border-radius: 6px; display: grid; place-items: center; background: color-mix(in srgb, var(--rc-brand) 18%, var(--rc-surface)); }
.rc-dok small { display: block; color: var(--rc-muted); font-size: .66rem; }
.rc-dok i { font-style: normal; font-size: .68rem; color: var(--rc-muted); }
.rc-scan { margin: 10px 12px 0; background: var(--rc-primary); color: var(--rc-on-primary); text-align: center; border-radius: 14px; padding: 8px; font-weight: 700; font-size: .78rem; }