/* Projektkarte RudelRally – im Design der Projektseite (rudelrally/assets/style.css), Seed #1F6F8B. Hell + dunkel. */

.projekt--rudelrally {
  --rr-brand: #1F6F8B; --rr-primary: #146683; --rr-on-primary: #FFFFFF; --rr-tertiary: #FFDBCB;
  --rr-bg: #F6FAFE; --rr-surface: #FFFFFF; --rr-text: #171C1F; --rr-muted: #40484C; --rr-outline: #BFC8CD;
  color: var(--rr-text); border: 1px solid var(--rr-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(--rr-brand) 30%, transparent), transparent 70%),
    radial-gradient(620px 380px at -10% 120%, color-mix(in srgb, var(--rr-tertiary) 70%, transparent), transparent 70%),
    var(--rr-bg);
}
@media (prefers-color-scheme: dark) {
  .projekt--rudelrally { --rr-primary: #8CCFF0; --rr-on-primary: #003546; --rr-tertiary: #6A3A1C; --rr-bg: #0F1417; --rr-surface: #171C1F; --rr-text: #DEE3E6; --rr-muted: #BFC8CD; --rr-outline: #40484C; }
}
.projekt--rudelrally .projekt-marke img { border-radius: 10px; width: 36px; height: 36px; }
.projekt--rudelrally .projekt-name { font-weight: 800; font-size: 1.15rem; }
.projekt--rudelrally .projekt-motto { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rr-primary); }
.projekt--rudelrally h2 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); font-weight: 800; letter-spacing: -.01em; line-height: 1.12; }
.projekt--rudelrally h2 em { font-style: normal; color: var(--rr-primary); }
.projekt--rudelrally .projekt-lede { color: var(--rr-muted); font-size: 1.08rem; }
.projekt--rudelrally .projekt-fakten { gap: .5rem; }
.projekt--rudelrally .projekt-fakten li { background: var(--rr-surface); border: 1px solid var(--rr-outline); border-radius: 8px; padding: 2px 10px; font-weight: 600; color: var(--rr-muted); }
.projekt--rudelrally .projekt-link { background: var(--rr-primary); color: var(--rr-on-primary); }
.projekt--rudelrally:hover .projekt-link { filter: brightness(1.08); }
.projekt--rudelrally:hover { box-shadow: 0 18px 44px rgba(0, 0, 0, .16); }

/* Ausschnitt der App */
.rr-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); }
.rr-screen { border-radius: 30px; overflow: hidden; background: var(--rr-bg); color: var(--rr-text); padding-bottom: 12px; }
.rr-bar { display: flex; justify-content: space-between; padding: 14px 16px 10px; font-weight: 700; font-size: 1rem; }
.rr-bar span { color: var(--rr-muted); font-weight: 500; font-size: .74rem; }
.rr-box { margin: 0 12px 8px; background: color-mix(in srgb, var(--rr-brand) 14%, var(--rr-surface)); border-radius: 16px; padding: 12px; text-align: center; }
.rr-box small { display: block; color: var(--rr-muted); font-size: .66rem; }
.rr-abw { font-size: 2rem; font-weight: 800; line-height: 1.1; color: #E65100; font-variant-numeric: tabular-nums; }
.rr-hint { font-size: .74rem; font-weight: 700; color: #E65100; }
.rr-werte { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 12px; }
.rr-werte div { background: color-mix(in srgb, var(--rr-outline) 30%, transparent); border-radius: 10px; padding: 6px 8px; font-size: .64rem; color: var(--rr-muted); }
.rr-werte b { display: block; font-size: .9rem; color: var(--rr-text); font-variant-numeric: tabular-nums; }
@media (prefers-color-scheme: dark) { .rr-abw, .rr-hint { color: #FF8A50; } }