/* /css/footer.css – Optimierte Version */
/* =========================================================
GFC – Footer (Seriosität, Klarheit, Vertrauen)
Optimiert + Accessibility + konsistentere Abstände
========================================================= */

/* ---------- Base ---------- */
.site-footer {
font-family: var(--ft-font);
line-height: var(--ft-lh);
color: var(--ft-text);
background:
radial-gradient(1200px 400px at 20% -10%, rgba(92, 200, 255, 0.12), transparent 60%),
radial-gradient(900px 300px at 80% 0%, rgba(92, 200, 255, 0.08), transparent 55%),
var(--ft-bg);
border-top: 1px solid var(--ft-border);
}

.footer-inner {
margin-inline: auto;
max-width: var(--ft-maxw);
padding: clamp(18px, 3.5vw, 36px) var(--ft-pad);
display: grid;
grid-template-columns: 1.1fr 1fr 1.2fr;
gap: calc(var(--ft-gap-md) * 0.9);
align-items: start;
}

/* ---------- Utilities ---------- */
.small { font-size: 0.90rem; }
.tiny { font-size: 0.82rem; }
.muted { color: var(--ft-muted); }

.visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}

/* ---------- Brand ---------- */
.footer-brand {
background: linear-gradient(180deg, var(--ft-surface), transparent);
border: 1px solid var(--ft-border);
border-radius: var(--ft-radius);
padding: calc(var(--ft-pad) * 0.6);
}

.brand-row {
display: flex;
align-items: center;
gap: 10px;
}

.brand-mark {
display: grid;
place-items: center;
inline-size: 38px;
block-size: 38px;
border-radius: 10px;
border: 1px solid var(--ft-border);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
font-weight: 800;
letter-spacing: 0.5px;
color: var(--ft-accent);
}

.brand-text {
display: grid;
gap: 3px;
}

.brand-name {
font-size: clamp(1rem, 1.8vw, 1.12rem);
font-weight: 700;
}

.brand-abbr {
font-size: 0.85rem;
color: var(--ft-muted);
letter-spacing: 0.3px;
}

.claim { margin-top: 8px; }

/* ---------- Navigation ---------- */
.footer-nav {
padding: calc(var(--ft-pad) * 0.6);
border: 1px solid var(--ft-border);
border-radius: var(--ft-radius);
background: linear-gradient(180deg, var(--ft-surface), transparent);
}

.footer-links {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 8px;
}

.link-btn,
.footer-links a {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 10px;
border-radius: var(--ft-radius-sm);
border: 1px solid transparent;
background: transparent;
color: var(--ft-text);
font-weight: 600;
letter-spacing: 0.2px;
text-decoration: none;
cursor: pointer;
transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.link-btn:hover,
.footer-links a:hover {
background: rgba(92, 200, 255, 0.10);
border-color: rgba(92, 200, 255, 0.25);
transform: translateY(-1px);
}

/* ---------- Primary Links (ehem. is-key) ---------- */
.footer-links .is-primary {
border-color: var(--ft-border);
background: radial-gradient(circle at top left, rgba(92, 200, 255, 0.18), transparent 55%);
}

.footer-links .is-primary:hover {
background: rgba(92, 200, 255, 0.12);
border-color: rgba(92, 200, 255, 0.35);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.32);
}

/* ---------- Trust / Disclaimer ---------- */
.footer-trust {
padding: calc(var(--ft-pad) * 0.6);
border: 1px solid var(--ft-border);
border-radius: var(--ft-radius);
background: linear-gradient(180deg, var(--ft-surface), transparent);
}

.disclaimer {
margin-bottom: 8px;
padding: 10px 12px;
border-radius: var(--ft-radius-sm);
background: rgba(255, 189, 66, 0.10);
border: 1px solid rgba(255, 189, 66, 0.32);
line-height: 1.45;
}

/* ---------- Bottom Line ---------- */
.footer-bottom {
grid-column: 1 / -1;
margin-top: 8px;
padding-top: 14px;
border-top: 1px dashed var(--ft-border);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
}

.back-to-top {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 999px;
background: linear-gradient(180deg, rgba(92, 200, 255, 0.12), rgba(92, 200, 255, 0.06));
color: var(--ft-accent);
border: 1px solid rgba(92, 200, 255, 0.20);
transition: background 0.15s ease, border-color 0.15s ease;
}

.back-to-top:hover {
background: rgba(92, 200, 255, 0.16);
border-color: rgba(92, 200, 255, 0.35);
}

/* ---------- Mail Links ---------- */
.mail-link,
.footer-trust a[href^="mailto:"] {
text-decoration: underline;
text-underline-offset: 3px;
color: var(--ft-text);
}

.mail-link:hover,
.footer-trust a[href^="mailto:"]:hover {
color: var(--ft-accent);
}

/* ---------- Footer container ---------- */
.site-footer .container {
width: min(1200px, 100%);
margin-inline: auto;
}

/* ---------- Mobile (≤900px) ---------- */
@media (max-width: 900px) {
.site-footer {
padding: 20px 0;
}

.footer-inner {
grid-template-columns: 1fr;
gap: 12px;
padding: 20px var(--ft-pad);
}

.footer-links {
gap: 6px;
}
}

/* ---------- Branding Elemente ---------- */
.inline-logo {
height: 20px;
width: auto;
vertical-align: baseline;
margin-right: 6px;
transform: translateY(2px);
}

.favicon-mark {
width: 28px;
height: 28px;
border-radius: 50%;
background: url("/assets/favicon/favicon-32.png") center/cover no-repeat;
vertical-align: middle;
}