/* dela-media · komponenten.css
   Bauteile, die auf mehreren Seiten vorkommen. Bisher stand der Knopf
   wortgleich in home.css und about.css — jede Änderung musste an zwei
   Stellen gemacht werden. Jetzt an einer.
   Wird vor der Seiten-CSS geladen, damit eine Seite noch nachjustieren kann. */

.btn {
    position:relative; display:inline-flex; align-items:center; gap:12px;
    font-family:var(--font-mono); font-size:12px; letter-spacing:0.18em; text-transform:uppercase;
    padding:18px 32px; border-radius:100px; overflow:hidden;
    border:1px solid var(--glass-border); color:var(--text-primary);
    background:var(--bg-glass); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
    transition: color var(--t-normal), border-color var(--t-normal), box-shadow var(--t-normal), transform var(--t-normal);
    will-change:transform;
}
.btn::before {
    content:''; position:absolute; inset:0; background:var(--accent);
    transform:translateY(101%); transition:transform 450ms var(--ease-expo); border-radius:inherit;
}
.btn > * { position:relative; z-index:1; }
.btn:hover { color:#0a0a0f; border-color:var(--accent); box-shadow:0 8px 40px var(--accent-glow); }
.btn:hover::before { transform:translateY(0); }
.btn--solid { background:var(--accent); color:#0a0a0f; border-color:var(--accent); font-weight:500; }
.btn--solid::before { background:#fff; }
.btn--solid:hover { color:#0a0a0f; box-shadow:0 8px 48px var(--accent-glow); }
.btn .arr { transition:transform var(--t-normal); }
.btn:hover .arr { transform:translateX(5px); }