/* Projektkarte RudelOrga – im Design der Projektseite (rudelorga/assets/style.css), Seed #1F7A70. Hell + dunkel. */

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

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