/* ==========================================================================
   InduTech HK — Footer (global, wird in _layout.twig geladen)
   Eigene Tokens, damit der Footer unabhaengig von site.css funktioniert.
   ========================================================================== */

.site-footer {
    --f-bg:        #0c141a;
    --f-text:      #93a6b0;
    --f-heading:   #eef4f7;
    --f-line:      rgba(181, 196, 204, .1);
    --f-accent:    var(--accent, #4fb6c9);
    --f-wrap:      min(100% - 2.5rem, 1240px);

    position: relative;
    background: var(--f-bg);
    color: var(--f-text);
    font-size: .95rem;
    line-height: 1.6;
}

/* Akzent-Haarlinie an der Oberkante, spiegelt den Header */
.site-footer::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(79, 182, 201, .35) 20%,
        rgba(79, 182, 201, .35) 80%,
        transparent
    );
}

/* --------------------------------------------------------------------------
   Oberer Bereich
   -------------------------------------------------------------------------- */

.footer-top {
    width: var(--f-wrap);
    margin-inline: auto;
    padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(2rem, 4vw, 2.75rem);

    display: grid;
    grid-template-columns: minmax(220px, 1.5fr) repeat(3, minmax(160px, 1fr));
    gap: 2.5rem 2rem;
}

.footer-top h2 {
    margin: 0 0 1rem;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--f-accent);
}

.footer-top p { margin: 0 0 .6rem; }
.footer-top p:last-child { margin-bottom: 0; }

/* Marke ------------------------------------------------------------------ */

.footer-logo {
    display: block;
    height: 46px;
    width: auto;
    margin-bottom: 1.1rem;
    opacity: .9;
}

.footer-tagline {
    max-width: 34ch;
    color: var(--f-text);
}

/* Spalten ---------------------------------------------------------------- */

.footer-hours {
    font-size: 1.05rem;
    line-height: 1.45;
}
.footer-hours strong {
    color: var(--f-heading);
    font-weight: 600;
}

.footer-muted {
    font-size: .88rem;
    color: rgba(147, 166, 176, .75);
}

.footer-col address {
    font-style: normal;
    margin-bottom: .9rem;
    color: var(--f-text);
}

.footer-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .5rem;
}

/* Links ------------------------------------------------------------------ */

.site-footer a {
    color: var(--f-text);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .25s var(--ease, ease), border-color .25s var(--ease, ease);
}

.site-footer a:hover {
    color: var(--f-accent);
    border-color: var(--f-accent);
}

.site-footer a:focus-visible {
    outline: 2px solid var(--f-accent);
    outline-offset: 3px;
    border-radius: 3px;
}

.footer-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
    color: var(--f-heading);
}
.footer-link::after {
    content: "\2192";
    transition: transform .25s var(--ease-out, ease);
}
.footer-link:hover::after { transform: translateX(2px); }

/* --------------------------------------------------------------------------
   Untere Leiste
   -------------------------------------------------------------------------- */

.footer-bottom {
    width: var(--f-wrap);
    margin-inline: auto;
    padding: 1.35rem 0 1.6rem;
    border-top: 1px solid var(--f-line);

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1.5rem;
    font-size: .88rem;
}

.footer-bottom p { margin: 0; color: rgba(147, 166, 176, .7); }

.footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.35rem;
}

.footer-nav a {
    font-size: .82rem;
    letter-spacing: .09em;
    text-transform: uppercase;
}

/* Rechtliches steht in derselben Zeile, tritt aber hinter die
   Hauptnavigation zurueck — es ist Pflichtangabe, kein Wegweiser. */
.footer-nav-legal { color: rgba(147, 166, 176, .7); }
.site-footer .footer-nav-legal:hover { color: var(--f-heading); }

/* --------------------------------------------------------------------------
   Kleine Viewports
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .footer-top {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
        gap: 2.25rem 1.5rem;
    }
    .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
    .site-footer { --f-wrap: min(100% - 1.75rem, 1240px); }

    .footer-top { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
}