/* Projektkarte RudelLink – im Design der RudelLink-Seite (rudellink/assets/style.css):
   Material 3 mit Seed #0A5FA5 („FRITZ!-Blau“), große Rundungen, Systemschrift,
   die Startseite der App als Bild. Hell + dunkel. */

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

/* Ausschnitt der App: Startseite mit VPN-Status und Geräteliste */
.ft-handy { width: 280px; max-width: 100%; margin-inline: auto; padding: 11px; border-radius: 40px; background: #15181C; box-shadow: 0 30px 60px rgba(0, 28, 56, .28); }
.ft-screen { border-radius: 30px; background: var(--ft-bg); color: var(--ft-text); padding: 14px 0 10px; }
.ft-bar { display: flex; justify-content: space-between; padding: 2px 16px 10px; font-weight: 600; font-size: 1.02rem; }
.ft-bar span { color: var(--ft-muted); }
.ft-vpn { margin: 0 10px 6px; background: var(--ft-high); border-radius: 14px; padding: 11px 12px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.ft-vpn svg { width: 22px; height: 22px; color: var(--ft-ok); }
.ft-vpn small { display: block; font-size: .64rem; color: var(--ft-muted); }
.ft-vpn b { color: var(--ft-ok); font-size: .92rem; }
.ft-vpn i { font-style: normal; border: 1px solid var(--ft-outline); border-radius: 999px; padding: 3px 10px; font-size: .68rem; font-weight: 700; color: var(--ft-primary); }
.ft-liste { list-style: none; margin: 0; padding: 0; }
.ft-liste li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: center; padding: 7px 16px; }
.ft-liste span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--ft-primary-container); color: var(--ft-on-primary-container); font-weight: 600; font-size: .9rem; }
.ft-liste b { display: block; font-weight: 500; font-size: .86rem; }
.ft-liste small { display: block; color: var(--ft-muted); font-size: .7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }