/* Projektkarte RudelKey – im Design der Projektseite (rudelkey/assets/style.css), Seed #2A9D8F. Hell + dunkel. */

.projekt--rudelkey {
  --rk-brand: #2A9D8F; --rk-primary: #006B5F; --rk-on-primary: #FFFFFF; --rk-tertiary: #CCE5FF;
  --rk-bg: #F4FBF8; --rk-surface: #FFFFFF; --rk-text: #161D1B; --rk-muted: #3F4946; --rk-outline: #BEC9C5;
  color: var(--rk-text); border: 1px solid var(--rk-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(--rk-brand) 30%, transparent), transparent 70%),
    radial-gradient(620px 380px at -10% 120%, color-mix(in srgb, var(--rk-tertiary) 70%, transparent), transparent 70%),
    var(--rk-bg);
}
@media (prefers-color-scheme: dark) {
  .projekt--rudelkey { --rk-primary: #82D5C6; --rk-on-primary: #003731; --rk-tertiary: #33485D; --rk-bg: #0E1513; --rk-surface: #161D1B; --rk-text: #DDE4E1; --rk-muted: #BEC9C5; --rk-outline: #3F4946; }
}
.projekt--rudelkey .projekt-marke img { border-radius: 10px; width: 36px; height: 36px; }
.projekt--rudelkey .projekt-name { font-weight: 800; font-size: 1.15rem; }
.projekt--rudelkey .projekt-motto { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rk-primary); }
.projekt--rudelkey h2 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); font-weight: 800; letter-spacing: -.01em; line-height: 1.12; }
.projekt--rudelkey h2 em { font-style: normal; color: var(--rk-primary); }
.projekt--rudelkey .projekt-lede { color: var(--rk-muted); font-size: 1.08rem; }
.projekt--rudelkey .projekt-fakten { gap: .5rem; }
.projekt--rudelkey .projekt-fakten li { background: var(--rk-surface); border: 1px solid var(--rk-outline); border-radius: 8px; padding: 2px 10px; font-weight: 600; color: var(--rk-muted); }
.projekt--rudelkey .projekt-link { background: var(--rk-primary); color: var(--rk-on-primary); }
.projekt--rudelkey:hover .projekt-link { filter: brightness(1.08); }
.projekt--rudelkey:hover { box-shadow: 0 18px 44px rgba(0, 0, 0, .16); }

/* Ausschnitt der App */
.rk-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); }
.rk-screen { border-radius: 30px; overflow: hidden; background: var(--rk-bg); color: var(--rk-text); padding-bottom: 12px; }
.rk-bar { display: flex; justify-content: space-between; padding: 14px 16px 10px; font-weight: 700; font-size: 1rem; }
.rk-bar span { color: var(--rk-muted); font-weight: 500; font-size: .74rem; }
.rk-eintrag { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 16px; border-top: 1px solid var(--rk-outline); font-size: .8rem; }
.rk-eintrag span { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; color: #fff; }
.rk-eintrag small { display: block; color: var(--rk-muted); font-size: .66rem; }
.rk-eintrag i { font-style: normal; color: var(--rk-muted); letter-spacing: 2px; }
.rk-c1 { background: #1E88E5; } .rk-c2 { background: #E53935; } .rk-c3 { background: #43A047; } .rk-c4 { background: #FB8C00; }
.rk-gen { margin: 10px 12px 0; background: color-mix(in srgb, var(--rk-brand) 22%, var(--rk-surface)); border-radius: 14px; padding: 9px 12px; font-size: .7rem; }
.rk-gen b { display: block; font-size: .82rem; word-break: break-all; }