/* Projektkarte RudelPlan – im Design der Projektseite (rudelplan/assets/style.css), Seed #B85C38. Hell + dunkel. */

.projekt--rudelplan {
  --rp-brand: #B85C38; --rp-primary: #94492A; --rp-on-primary: #FFFFFF; --rp-tertiary: #EBE1A9;
  --rp-bg: #FFF8F6; --rp-surface: #FFFFFF; --rp-text: #231A16; --rp-muted: #53433D; --rp-outline: #D8C2BA;
  color: var(--rp-text); border: 1px solid var(--rp-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(--rp-brand) 30%, transparent), transparent 70%),
    radial-gradient(620px 380px at -10% 120%, color-mix(in srgb, var(--rp-tertiary) 70%, transparent), transparent 70%),
    var(--rp-bg);
}
@media (prefers-color-scheme: dark) {
  .projekt--rudelplan { --rp-primary: #FFB59A; --rp-on-primary: #5A1B03; --rp-tertiary: #4C461B; --rp-bg: #1A110E; --rp-surface: #231A16; --rp-text: #F1DFD9; --rp-muted: #D8C2BA; --rp-outline: #53433D; }
}
.projekt--rudelplan .projekt-marke img { border-radius: 10px; width: 36px; height: 36px; }
.projekt--rudelplan .projekt-name { font-weight: 800; font-size: 1.15rem; }
.projekt--rudelplan .projekt-motto { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rp-primary); }
.projekt--rudelplan h2 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); font-weight: 800; letter-spacing: -.01em; line-height: 1.12; }
.projekt--rudelplan h2 em { font-style: normal; color: var(--rp-primary); }
.projekt--rudelplan .projekt-lede { color: var(--rp-muted); font-size: 1.08rem; }
.projekt--rudelplan .projekt-fakten { gap: .5rem; }
.projekt--rudelplan .projekt-fakten li { background: var(--rp-surface); border: 1px solid var(--rp-outline); border-radius: 8px; padding: 2px 10px; font-weight: 600; color: var(--rp-muted); }
.projekt--rudelplan .projekt-link { background: var(--rp-primary); color: var(--rp-on-primary); }
.projekt--rudelplan:hover .projekt-link { filter: brightness(1.08); }
.projekt--rudelplan:hover { box-shadow: 0 18px 44px rgba(0, 0, 0, .16); }

/* Ausschnitt der App */
.rp-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); }
.rp-screen { border-radius: 30px; overflow: hidden; background: var(--rp-bg); color: var(--rp-text); padding-bottom: 12px; }
.rp-bar { display: flex; justify-content: space-between; padding: 14px 16px 10px; font-weight: 700; font-size: 1rem; }
.rp-bar span { color: var(--rp-muted); font-weight: 500; font-size: .74rem; }
.rp-kopf, .rp-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 0 12px; }
.rp-kopf { font-size: .68rem; font-weight: 700; text-align: center; margin-bottom: 5px; }
.rp-kopf i { display: block; width: 16px; height: 16px; border-radius: 50%; margin: 0 auto 2px; }
.rp-raster div { position: relative; height: 190px; background: color-mix(in srgb, var(--rp-outline) 35%, transparent); border-radius: 8px; }
.rp-raster b { position: absolute; left: 3px; right: 3px; border-radius: 6px; padding: 3px 4px; font-size: .6rem; font-weight: 600; color: #fff; }
.rp-blau { background: #1E88E5; } .rp-gelb { background: #E09A00; } .rp-gruen { background: #2E7D32; } .rp-rudel { background: var(--rp-brand); }
.rp-a { top: 6%; height: 20%; } .rp-b { top: 36%; height: 22%; } .rp-c { top: 80%; height: 16%; } .rp-d { top: 14%; height: 16%; } .rp-e { top: 50%; height: 20%; }