/* Projektkarte RudelSafe – im Design der Projektseite (rudelsafe/assets/style.css), Seed #0A5FA5. Hell + dunkel. */

.projekt--rudelsafe {
  --rs-brand: #0A5FA5; --rs-primary: #2A5F98; --rs-on-primary: #FFFFFF; --rs-tertiary: #F2DAFF;
  --rs-bg: #F8F9FF; --rs-surface: #FFFFFF; --rs-text: #191C20; --rs-muted: #43474E; --rs-outline: #C3C6CF;
  color: var(--rs-text); border: 1px solid var(--rs-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(--rs-brand) 30%, transparent), transparent 70%),
    radial-gradient(620px 380px at -10% 120%, color-mix(in srgb, var(--rs-tertiary) 70%, transparent), transparent 70%),
    var(--rs-bg);
}
@media (prefers-color-scheme: dark) {
  .projekt--rudelsafe { --rs-primary: #A2C9FF; --rs-on-primary: #00315C; --rs-tertiary: #573E68; --rs-bg: #111418; --rs-surface: #191C20; --rs-text: #E1E2E8; --rs-muted: #C3C6CF; --rs-outline: #43474E; }
}
.projekt--rudelsafe .projekt-marke img { border-radius: 10px; width: 36px; height: 36px; }
.projekt--rudelsafe .projekt-name { font-weight: 800; font-size: 1.15rem; }
.projekt--rudelsafe .projekt-motto { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rs-primary); }
.projekt--rudelsafe h2 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); font-weight: 800; letter-spacing: -.01em; line-height: 1.12; }
.projekt--rudelsafe h2 em { font-style: normal; color: var(--rs-primary); }
.projekt--rudelsafe .projekt-lede { color: var(--rs-muted); font-size: 1.08rem; }
.projekt--rudelsafe .projekt-fakten { gap: .5rem; }
.projekt--rudelsafe .projekt-fakten li { background: var(--rs-surface); border: 1px solid var(--rs-outline); border-radius: 8px; padding: 2px 10px; font-weight: 600; color: var(--rs-muted); }
.projekt--rudelsafe .projekt-link { background: var(--rs-primary); color: var(--rs-on-primary); }
.projekt--rudelsafe:hover .projekt-link { filter: brightness(1.08); }
.projekt--rudelsafe:hover { box-shadow: 0 18px 44px rgba(0, 0, 0, .16); }

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