/* ═══════════════════════════════════════════════════════════════════
   Laramidia — one-pager
   ═══════════════════════════════════════════════════════════════════
   Same command-centre language as the web panel (dark base, terminal
   green, monospace accents) but loosened up for a public page: rounder
   corners, more air, softer hairlines. The panel is a tool — this is a
   shop window.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    /* Base — carried over from the panel so both feel like one product */
    --bg-0: #060a0e;
    --bg-1: #0a0f14;
    --bg-2: #12181f;
    --bg-3: #171e26;
    --bg-4: #1e2731;

    --bd-1: rgba(74, 222, 128, 0.08);
    --bd-2: rgba(74, 222, 128, 0.16);
    --bd-3: rgba(74, 222, 128, 0.30);

    --tx-1: #e8f0ea;
    --tx-2: #a6d5c8;
    --tx-3: #7ba398;
    --tx-4: #4a6b62;

    --accent:      #4ade80;
    --accent-hi:   #86efac;
    --accent-lo:   #22c55e;
    --accent-soft: rgba(74, 222, 128, 0.12);
    --accent-glow: rgba(74, 222, 128, 0.28);

    --amber: #fbbf24;
    --info:  #22d3ee;

    /* Rounder than the panel — this is the main visual "modernisation" */
    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 24px;
    --r-pill: 999px;

    --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --maxw: 1200px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    background: var(--bg-1);
    color: var(--tx-1);
    font-family: var(--sans);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Faint tactical grid — the one texture we keep from the panel */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(rgba(74, 222, 128, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(74, 222, 128, 0.035) 1px, transparent 1px);
    background-size: 56px 56px;
    pointer-events: none;
    z-index: 0;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }

/* ── Typography ──────────────────────────────────────────────────── */
h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; }

.eyebrow {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.eyebrow::before {
    content: '';
    width: 22px; height: 1px;
    background: var(--accent);
    opacity: 0.6;
}

.section-title { font-size: clamp(1.7rem, 3.2vw, 2.5rem); margin: 14px 0 12px; }
.section-lead  { color: var(--tx-3); max-width: 60ch; font-size: 1.02rem; }

/* ── Nav ─────────────────────────────────────────────────────────── */
.nav {
    position: sticky; top: 0; z-index: 50;
    background: rgba(10, 15, 20, 0.82);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--bd-1);
}
.nav-inner {
    max-width: var(--maxw); margin: 0 auto; padding: 14px 24px;
    display: flex; align-items: center; gap: 20px;
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; margin-right: auto; }
.brand-mark {
    width: 42px; height: 42px;
    object-fit: contain;
    /* The logo is a light bone/olive artwork on transparency — a faint glow
       lifts it off the near-black nav without tinting it. */
    filter: drop-shadow(0 0 14px rgba(74, 222, 128, 0.22));
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-weight: 700; font-size: 1.05rem; color: var(--tx-1); letter-spacing: -0.01em; }
.brand-sub  { font-family: var(--mono); font-size: 0.65rem; color: var(--tx-4); letter-spacing: 0.1em; }

.nav-links { display: flex; gap: 4px; }
.nav-links a {
    color: var(--tx-3); text-decoration: none;
    font-size: 0.88rem; padding: 8px 14px;
    border-radius: var(--r-pill);
    transition: color .18s, background .18s;
}
.nav-links a:hover { color: var(--tx-1); background: var(--bg-3); }

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 12px 22px;
    border-radius: var(--r-pill);
    font-weight: 600; font-size: 0.92rem;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .16s, box-shadow .16s, background .16s, border-color .16s;
    white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }

.btn-primary {
    background: linear-gradient(140deg, var(--accent), var(--accent-lo));
    color: #04140a;
    box-shadow: 0 6px 24px -6px var(--accent-glow);
}
.btn-primary:hover { box-shadow: 0 10px 32px -6px var(--accent-glow); }

.btn-ghost {
    background: var(--bg-3);
    color: var(--tx-1);
    border-color: var(--bd-2);
}
.btn-ghost:hover { border-color: var(--bd-3); background: var(--bg-4); }

.btn-discord { background: #5865F2; color: #fff; box-shadow: 0 6px 24px -6px rgba(88,101,242,.5); }
.btn-discord:hover { background: #6b77f5; }

/* The panel is as important an entry point as Discord — give it the same
   visual weight rather than demoting it to a ghost button. */
.btn-panel {
    background: linear-gradient(140deg, var(--accent), var(--accent-lo));
    color: #04140a;
    box-shadow: 0 6px 24px -6px var(--accent-glow);
}
.btn-panel:hover { box-shadow: 0 10px 32px -6px var(--accent-glow); }

.nav-cta { display: flex; gap: 10px; }
@media (max-width: 560px) { .nav-cta .btn { padding: 10px 14px; font-size: 0.84rem; } }

/* ── Hero ────────────────────────────────────────────────────────── */
.hero { padding: 92px 0 80px; position: relative; }
.hero::after {
    content: '';
    position: absolute; top: -180px; left: 50%;
    transform: translateX(-50%);
    width: 760px; height: 520px;
    background: radial-gradient(ellipse, var(--accent-glow), transparent 68%);
    opacity: 0.16; pointer-events: none; filter: blur(30px);
}
.hero-logo {
    width: clamp(140px, 20vw, 210px);
    height: auto;
    display: block;
    margin-bottom: 26px;
    filter: drop-shadow(0 8px 34px rgba(74, 222, 128, 0.24));
}

.hero h1 { font-size: clamp(2.4rem, 6.2vw, 4.1rem); margin: 18px 0 20px; }
.hero h1 .hl {
    background: linear-gradient(120deg, var(--accent-hi), var(--accent));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p { font-size: 1.12rem; color: var(--tx-2); max-width: 62ch; }
.hero-actions { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; }

.hero-stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px; margin-top: 56px;
}
.stat {
    background: var(--bg-2); border: 1px solid var(--bd-1);
    border-radius: var(--r-md); padding: 20px 22px;
}
.stat-v { font-family: var(--mono); font-size: 1.7rem; font-weight: 700; color: var(--accent); }
.stat-l { font-size: 0.76rem; color: var(--tx-4); text-transform: uppercase; letter-spacing: 0.11em; margin-top: 2px; }

/* ── Sections ────────────────────────────────────────────────────── */
section { padding: 84px 0; position: relative; }
.section-head { margin-bottom: 46px; }

/* ── Feature grid ────────────────────────────────────────────────── */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 18px; }
.feature {
    background: var(--bg-2);
    border: 1px solid var(--bd-1);
    border-radius: var(--r-lg);
    padding: 30px 28px;
    transition: transform .2s, border-color .2s, background .2s;
    position: relative; overflow: hidden;
}
.feature::before {
    content: '';
    position: absolute; inset: 0 0 auto 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--bd-3), transparent);
    opacity: 0; transition: opacity .25s;
}
.feature:hover { transform: translateY(-3px); border-color: var(--bd-2); background: var(--bg-3); }
.feature:hover::before { opacity: 1; }

.feature-icon {
    width: 46px; height: 46px; border-radius: var(--r-sm);
    background: var(--accent-soft);
    border: 1px solid var(--bd-2);
    display: grid; place-items: center;
    font-size: 1.35rem; margin-bottom: 18px;
}
.feature h3 { font-size: 1.13rem; margin-bottom: 9px; }
.feature p  { color: var(--tx-3); font-size: 0.93rem; }
.feature ul { list-style: none; margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.feature li {
    font-size: 0.85rem; color: var(--tx-3);
    padding-left: 18px; position: relative;
}
.feature li::before {
    content: '▸'; position: absolute; left: 0;
    color: var(--accent); font-size: 0.75rem;
}

/* ── Join ────────────────────────────────────────────────────────── */
.join-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 860px) { .join-grid { grid-template-columns: 1fr; } }

.panel {
    background: var(--bg-2); border: 1px solid var(--bd-1);
    border-radius: var(--r-lg); padding: 32px;
}
.panel h3 { font-size: 1.2rem; margin-bottom: 16px; }

.steps { list-style: none; counter-reset: s; display: flex; flex-direction: column; gap: 18px; }
.steps li { counter-increment: s; display: flex; gap: 15px; }
.steps li::before {
    content: counter(s);
    flex: 0 0 30px; height: 30px;
    border-radius: 50%;
    background: var(--accent-soft); border: 1px solid var(--bd-2);
    color: var(--accent); font-family: var(--mono); font-size: 0.82rem; font-weight: 700;
    display: grid; place-items: center;
}
.steps strong { display: block; font-size: 0.96rem; margin-bottom: 2px; }
.steps span { color: var(--tx-3); font-size: 0.88rem; }

.kv { display: flex; flex-direction: column; gap: 12px; }
.kv-row {
    display: flex; justify-content: space-between; align-items: center; gap: 14px;
    padding-bottom: 12px; border-bottom: 1px solid var(--bd-1);
}
.kv-row:last-child { border-bottom: 0; padding-bottom: 0; }
.kv-k { font-size: 0.82rem; color: var(--tx-4); text-transform: uppercase; letter-spacing: 0.09em; }
.kv-v { font-family: var(--mono); font-size: 0.9rem; color: var(--tx-1); }
.kv-v.ok { color: var(--accent); }

/* ── Community ───────────────────────────────────────────────────── */
.cta {
    background: linear-gradient(150deg, var(--bg-2), var(--bg-3));
    border: 1px solid var(--bd-2);
    border-radius: var(--r-lg);
    padding: 56px 44px;
    text-align: center;
    position: relative; overflow: hidden;
}
.cta::after {
    content: '';
    position: absolute; bottom: -140px; left: 50%; transform: translateX(-50%);
    width: 520px; height: 300px;
    background: radial-gradient(ellipse, var(--accent-glow), transparent 70%);
    opacity: 0.2; pointer-events: none;
}
.cta h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin-bottom: 12px; }
.cta p { color: var(--tx-3); max-width: 52ch; margin: 0 auto 30px; }
.cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; position: relative; }

/* ── Footer ──────────────────────────────────────────────────────── */
footer {
    border-top: 1px solid var(--bd-1);
    padding: 36px 0;
    margin-top: 40px;
}
.foot-inner {
    display: flex; justify-content: space-between; align-items: center;
    gap: 18px; flex-wrap: wrap;
}
.foot-links { display: flex; gap: 20px; }
.foot-links a { color: var(--tx-4); text-decoration: none; font-size: 0.85rem; transition: color .16s; }
.foot-links a:hover { color: var(--accent); }
.foot-note { color: var(--tx-4); font-size: 0.8rem; font-family: var(--mono); }

/* ── Reveal on scroll ────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s, transform .6s; }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
    .reveal { opacity: 1; transform: none; }
    html { scroll-behavior: auto; }
}

@media (max-width: 720px) {
    .nav-links { display: none; }
    .hero { padding: 60px 0 50px; }
    section { padding: 60px 0; }
    .panel, .cta { padding: 26px 22px; }
}


/* ── Overlay showcase ────────────────────────────────────────────── */
/* Two side by side, the third centred underneath. Three full-width shots
   stacked made the section a long scroll for little extra information. */
.shots {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
}
.shot:last-child {
    grid-column: 1 / -1;
    max-width: 760px;
    margin-inline: auto;
}

.shot { margin: 0; }
.shot img {
    width: 100%; height: auto; display: block;
    border-radius: var(--r-md);
    border: 1px solid var(--bd-2);
    /* The screenshots are dark UI on a dark page — a lifted shadow plus a
       hairline keeps them from bleeding into the background. */
    box-shadow: 0 20px 48px -22px rgba(0, 0, 0, 0.9),
                0 0 0 1px rgba(0, 0, 0, 0.4);
    transition: transform .25s, box-shadow .25s;
}
.shot:hover img {
    transform: translateY(-3px);
    box-shadow: 0 26px 58px -22px rgba(0, 0, 0, 0.95),
                0 0 0 1px var(--bd-2);
}
.shot figcaption {
    margin-top: 14px;
    color: var(--tx-3);
    font-size: 0.88rem;
}
.shot figcaption strong { color: var(--tx-1); font-weight: 600; display: block; }

@media (max-width: 860px) {
    .shots { grid-template-columns: 1fr; gap: 32px; }
    .shot:last-child { max-width: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   OBSIDIAN — Angleichung an das neue Panel (2026-08-04)
   ═══════════════════════════════════════════════════════════════════════
   Die Seite lief noch auf der alten Terminal-Gruen-Palette. Weil sie von
   Anfang an ueber Token gebaut ist, genuegt es, die Token neu zu setzen —
   die 379 Zeilen darueber bleiben unangetastet.

   Dazu kommen die drei Dinge, die das Panel ausmachen: die Buehne mit dem
   Artwork, der atmende Hintergrund und die steinerne Textur auf den
   Karten.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    /* Flaechen: fast schwarz mit einem Stich ins Blaugruene */
    --bg-0: #030709;
    --bg-1: #05090c;
    --bg-2: #0a1114;
    --bg-3: #0e1619;
    --bg-4: #131d21;

    --bd-1: rgba(125, 211, 230, 0.075);
    --bd-2: rgba(125, 211, 230, 0.155);
    --bd-3: rgba(125, 211, 230, 0.30);

    --tx-1: #eaf4f7;
    --tx-2: #a9c2ca;
    --tx-3: #718e97;
    --tx-4: #4a636b;

    --accent:      #67e8f9;
    --accent-hi:   #a5f3fc;
    --accent-lo:   #22d3ee;
    --accent-soft: rgba(103, 232, 249, 0.10);
    --accent-glow: rgba(103, 232, 249, 0.30);

    --amber: #f5b563;
    --info:  #38bdf8;

    --r-sm: 11px;
    --r-md: 16px;
    --r-lg: 20px;
}

/* ═══ Der Hintergrund atmet ════════════════════════════════════════════
   Dieselbe Bewegung wie im Panel: sehr langsam, sehr schwach, `alternate`
   damit es keinen Ruecksprung gibt. Es wird nur verschoben und skaliert,
   nichts neu gezeichnet. */
body::before {
    content: "";
    position: fixed;
    inset: -25%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(42% 46% at 26% 28%, rgba(103, 232, 249, 0.115), transparent 66%),
        radial-gradient(38% 42% at 78% 64%, rgba(45, 212, 191, 0.09), transparent 68%),
        radial-gradient(34% 34% at 52% 92%, rgba(56, 189, 248, 0.07), transparent 70%);
    animation: web-breathe 34s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes web-breathe {
    from { transform: translate3d(-5%, -3.5%, 0) scale(1); }
    to   { transform: translate3d(6%, 4%, 0) scale(1.16); }
}

/* ═══ Die Buehne ═══════════════════════════════════════════════════════
   Das Artwork bekommt das Seitenverhaeltnis des Bildes (1400x768). `cover`
   fuellt die Ebene damit lueckenlos, es gibt keine bildeigene Kante, und
   die Maske arbeitet innerhalb des Motivs. Das haelt bei jeder
   Fenstergroesse — eine feste Breite haette je nach Bildschirm eine harte
   senkrechte Kante ergeben. */
.hero { overflow: hidden; }

.hero-art {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    height: 100%;
    aspect-ratio: 1400 / 768;
    /* Der Kopfbereich ist hoch, ueber das Seitenverhaeltnis wuerde die Ebene
       breiter als der Bildschirm und schoebe sich unter die Ueberschrift.
       Die Deckelung haelt sie rechts; beschnitten wird nur seitlich, und
       dort arbeitet ohnehin die Maske. */
    max-width: 64%;
    background-image: url('assets/hero-dino.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: saturate(0.72) brightness(0.9) contrast(1.06);
    pointer-events: none;
    z-index: 0;
    -webkit-mask-image: radial-gradient(86% 116% at 72% 46%,
        #000 12%, rgba(0,0,0,0.74) 44%, rgba(0,0,0,0.30) 66%, transparent 86%);
    mask-image: radial-gradient(86% 116% at 72% 46%,
        #000 12%, rgba(0,0,0,0.74) 44%, rgba(0,0,0,0.30) 66%, transparent 86%);
}

/* Schleier in Flaechenfarbe, damit die Schrift auf jedem Motiv lesbar
   bleibt — auch wenn spaeter ein helleres Bild eingesetzt wird. */
.hero::after {
    top: 0; left: 0;
    width: 100%; height: 100%;
    transform: none;
    filter: none;
    opacity: 1;
    background:
        linear-gradient(94deg,
            var(--bg-1) 0%, rgba(5, 9, 12, 0.94) 24%,
            rgba(5, 9, 12, 0.55) 46%, transparent 70%),
        radial-gradient(120% 70% at 50% 118%, var(--bg-1) 0%, transparent 56%),
        radial-gradient(110% 60% at 50% -18%, var(--bg-1) 0%, transparent 52%);
    z-index: 1;
}

.hero .wrap { position: relative; z-index: 2; }

.hero-logo {
    filter: drop-shadow(0 8px 34px var(--accent-glow)) saturate(0.55) brightness(1.15);
}

@media (max-width: 860px) {
    /* Auf schmalen Geraeten wuerde das Motiv die Schrift ueberlagern. */
    .hero-art { opacity: 0.30; }
}

/* ═══ Flaechen schweben ════════════════════════════════════════════════ */
.stat,
.feature {
    background:
        linear-gradient(178deg,
            rgba(255, 255, 255, 0.028) 0%,
            rgba(255, 255, 255, 0.008) 40%,
            transparent 100%),
        var(--bg-2);
    box-shadow: 0 18px 44px -22px rgba(0, 0, 0, 0.9);
}

.feature { border-radius: var(--r-lg); }

.feature:hover {
    border-color: rgba(103, 232, 249, 0.42);
    box-shadow: 0 26px 54px -22px rgba(0, 0, 0, 0.95),
                0 0 0 1px var(--accent-soft);
}

/* ─── Steinerne Textur ───────────────────────────────────────────────
   Erzeugt mit `feTurbulence`: fraktales Rauschen, ueber `seed` bekommt
   jede Kachel eine eigene Struktur aus derselben Formel. Waagerecht viel
   niedrigere Frequenz als senkrecht ergibt langgezogene Schlieren, also
   geschichteten Fels statt gleichmaessigem Grieseln.

   Die Deckkraft kommt ueber `luminanceToAlpha` — der direkte Weg ueber
   die Alpha-Zeile einer Farbmatrix scheitert, weil feTurbulence auch im
   Alphakanal rauscht und die Rechnung dann unter null landet. */
.feature::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    background-size: cover;
    background-position: center;
    mix-blend-mode: screen;
    opacity: 0.34;
    transition: opacity 380ms ease;
    -webkit-mask-image: radial-gradient(84% 104% at 97% 106%,
        #000 0%, rgba(0,0,0,0.6) 30%, transparent 66%);
    mask-image: radial-gradient(84% 104% at 97% 106%,
        #000 0%, rgba(0,0,0,0.6) 30%, transparent 66%);
}
.feature:hover::after { opacity: 0.6; }
.feature > * { position: relative; z-index: 1; }

/* ─── Sinnbild-Kachel als Medaillon ─────────────────────────────────── */
.feature-icon {
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 50%;
    border: 0;
    position: relative;
    background:
        radial-gradient(circle at 50% 32%, rgba(125, 211, 230, 0.09), transparent 62%),
        rgba(255, 255, 255, 0.028);
    box-shadow:
        inset 0 0 0 1px rgba(125, 211, 230, 0.14),
        inset 0 0 24px -10px var(--accent-glow),
        0 6px 18px -10px rgba(0, 0, 0, 0.9);
    color: var(--accent-hi);
}
.feature-icon::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px solid transparent;
    border-top-color: rgba(103, 232, 249, 0.55);
    border-right-color: rgba(103, 232, 249, 0.18);
}

/* ═══ Bedienelemente ═══════════════════════════════════════════════════ */
.btn-primary {
    background: linear-gradient(100deg, var(--accent-hi), var(--accent-lo));
    color: #04222a;
    box-shadow: 0 0 26px -10px var(--accent-glow);
}
.btn-primary:hover { filter: brightness(1.08); }

.btn-ghost,
.btn-panel {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--bd-2);
    color: var(--tx-2);
}
.btn-ghost:hover,
.btn-panel:hover {
    background: var(--accent-soft);
    border-color: rgba(103, 232, 249, 0.42);
    color: var(--accent-hi);
}

/* ═══ Ruhebeduerfnis achten ════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    body::before { animation: none; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}

/* Fuenf Auspraegungen. Bei drei Spalten laege sonst in jeder Zeile
   dieselbe Reihenfolge und das Muster waere wieder sichtbar. */

.feature::after {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27520%27%20height%3D%27420%27%3E%3Cfilter%20id%3D%27t%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%20color-interpolation-filters%3D%27sRGB%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.005%200.034%27%20numOctaves%3D%275%27%20seed%3D%273%27%20result%3D%27n%27%2F%3E%3CfeColorMatrix%20in%3D%27n%27%20type%3D%27luminanceToAlpha%27%20result%3D%27l%27%2F%3E%3CfeComponentTransfer%20in%3D%27l%27%20result%3D%27c%27%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%275.4%27%20intercept%3D%27-2.55%27%2F%3E%3C%2FfeComponentTransfer%3E%3CfeFlood%20flood-color%3D%27%237fe4f7%27%20result%3D%27f%27%2F%3E%3CfeComposite%20in%3D%27f%27%20in2%3D%27c%27%20operator%3D%27in%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27520%27%20height%3D%27420%27%20filter%3D%27url%28%23t%29%27%2F%3E%3C%2Fsvg%3E");
}

.feature:nth-child(5n+2)::after {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27520%27%20height%3D%27420%27%3E%3Cfilter%20id%3D%27t%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%20color-interpolation-filters%3D%27sRGB%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.008%200.027%27%20numOctaves%3D%275%27%20seed%3D%2717%27%20result%3D%27n%27%2F%3E%3CfeColorMatrix%20in%3D%27n%27%20type%3D%27luminanceToAlpha%27%20result%3D%27l%27%2F%3E%3CfeComponentTransfer%20in%3D%27l%27%20result%3D%27c%27%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%274.6%27%20intercept%3D%27-2.15%27%2F%3E%3C%2FfeComponentTransfer%3E%3CfeFlood%20flood-color%3D%27%236ad8f0%27%20result%3D%27f%27%2F%3E%3CfeComposite%20in%3D%27f%27%20in2%3D%27c%27%20operator%3D%27in%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27520%27%20height%3D%27420%27%20filter%3D%27url%28%23t%29%27%2F%3E%3C%2Fsvg%3E");
}

.feature:nth-child(5n+3)::after {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27520%27%20height%3D%27420%27%3E%3Cfilter%20id%3D%27t%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%20color-interpolation-filters%3D%27sRGB%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.004%200.042%27%20numOctaves%3D%276%27%20seed%3D%2741%27%20result%3D%27n%27%2F%3E%3CfeColorMatrix%20in%3D%27n%27%20type%3D%27luminanceToAlpha%27%20result%3D%27l%27%2F%3E%3CfeComponentTransfer%20in%3D%27l%27%20result%3D%27c%27%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%276.0%27%20intercept%3D%27-2.95%27%2F%3E%3C%2FfeComponentTransfer%3E%3CfeFlood%20flood-color%3D%27%238eecff%27%20result%3D%27f%27%2F%3E%3CfeComposite%20in%3D%27f%27%20in2%3D%27c%27%20operator%3D%27in%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27520%27%20height%3D%27420%27%20filter%3D%27url%28%23t%29%27%2F%3E%3C%2Fsvg%3E");
}

.feature:nth-child(5n+4)::after {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27520%27%20height%3D%27420%27%3E%3Cfilter%20id%3D%27t%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%20color-interpolation-filters%3D%27sRGB%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.01%200.023%27%20numOctaves%3D%274%27%20seed%3D%2768%27%20result%3D%27n%27%2F%3E%3CfeColorMatrix%20in%3D%27n%27%20type%3D%27luminanceToAlpha%27%20result%3D%27l%27%2F%3E%3CfeComponentTransfer%20in%3D%27l%27%20result%3D%27c%27%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%274.2%27%20intercept%3D%27-1.9%27%2F%3E%3C%2FfeComponentTransfer%3E%3CfeFlood%20flood-color%3D%27%2363d2ea%27%20result%3D%27f%27%2F%3E%3CfeComposite%20in%3D%27f%27%20in2%3D%27c%27%20operator%3D%27in%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27520%27%20height%3D%27420%27%20filter%3D%27url%28%23t%29%27%2F%3E%3C%2Fsvg%3E");
}

.feature:nth-child(5n+5)::after {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27520%27%20height%3D%27420%27%3E%3Cfilter%20id%3D%27t%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%20color-interpolation-filters%3D%27sRGB%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.006%200.036%27%20numOctaves%3D%275%27%20seed%3D%2795%27%20result%3D%27n%27%2F%3E%3CfeColorMatrix%20in%3D%27n%27%20type%3D%27luminanceToAlpha%27%20result%3D%27l%27%2F%3E%3CfeComponentTransfer%20in%3D%27l%27%20result%3D%27c%27%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%275.0%27%20intercept%3D%27-2.4%27%2F%3E%3C%2FfeComponentTransfer%3E%3CfeFlood%20flood-color%3D%27%2379e0f4%27%20result%3D%27f%27%2F%3E%3CfeComposite%20in%3D%27f%27%20in2%3D%27c%27%20operator%3D%27in%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27520%27%20height%3D%27420%27%20filter%3D%27url%28%23t%29%27%2F%3E%3C%2Fsvg%3E");
}

/* Font-Awesome-Zeichen im Medaillon. Groesse hier statt geerbt, damit sie
   ueber alle sechs Karten gleich gross stehen. */
.feature-icon .fa-solid {
    font-size: 1.35rem;
    color: var(--accent-hi);
    filter: drop-shadow(0 0 9px var(--accent-glow));
}