/* Rudolf Metallbau: design tokens and base layer.
   Direction: dark "Werkhalle" shell, "Blaupause" precision inside. */

:root {
    /* Zweite Anmerkung dazu: nicht Schwarz, sondern dunkles Grau, und zwar
       ueberall. Darum die Token selbst angehoben statt einzelner Abschnitte. */
    --steel-950: #1e2226;
    --steel-900: #262b30;
    --steel-800: #343a40;
    --steel-700: #343a40;
    --steel-500: #6b7379;
    --steel-300: #a8afb5;
    --steel-100: #dfe3e6;
    --paper: #f2f0ec;
    --white: #ffffff;

    --accent: #54AF3A;
    --accent-dark: #3f8a2b;
    --brand-red: #E31E24;

    --text-on-dark: #eef0f2;
    --text-on-dark-muted: #a8afb5;
    --text-on-light: #1d2024;
    --text-on-light-muted: #5c6266;

    --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;

    --step--1: 0.8125rem;
    --step-0: 1rem;
    --step-1: 1.25rem;
    --step-2: 1.75rem;
    --step-3: 2.5rem;
    --step-4: clamp(2.75rem, 6vw, 4.5rem);

    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1.25rem;
    --space-lg: 2rem;
    --space-xl: 3.5rem;
    --space-2xl: 6rem;

    --container: 1360px;
    --header-height: 84px;
    --hairline: 1px solid var(--steel-800);
    --hairline-light: 1px solid rgba(29, 32, 36, 0.14);
}

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

html { font-size: 16px; scroll-behavior: smooth; scroll-padding-top: var(--header-height); }

body {
    background: var(--steel-950);
    color: var(--text-on-dark);
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

.container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 0.98; text-transform: uppercase; letter-spacing: 0.01em; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }

a { color: inherit; }

.eyebrow {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
}

.btn {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    padding: 0.85rem 1.4rem;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background 0.2s ease, color 0.2s ease;
}
.btn-accent { background: var(--accent); color: #0d1a08; }
.btn-accent:hover { background: var(--accent-dark); color: var(--white); }

.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    z-index: 1000;
    background: var(--accent);
    color: #0d1a08;
    padding: 0.75rem 1.25rem;
    font-weight: 600;
    text-decoration: none;
}
.skip-link:focus { top: 0; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.site-header { position: sticky; top: 0; z-index: 100; background: var(--steel-900); border-bottom: var(--hairline); }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-height); gap: var(--space-lg); }
.logo img { display: block; height: 56px; width: auto; }
.main-nav { display: flex; gap: var(--space-lg); font-size: var(--step--1); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.main-nav a { color: var(--text-on-dark-muted); text-decoration: none; }
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--accent); }

.hero { padding: var(--space-2xl) 0; }
.hero-title { margin-top: var(--space-md); max-width: 16ch; }
.hero-lead { margin-top: var(--space-md); max-width: 48ch; color: var(--text-on-dark-muted); }
.hero .btn { margin-top: var(--space-lg); }

.site-footer { background: var(--steel-900); border-top: var(--hairline); padding: var(--space-xl) 0 var(--space-lg); margin-top: var(--space-2xl); }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-lg); }
.footer-seal { display: block; height: auto; }
.footer-heading { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-xs); }
.footer-col p { color: var(--text-on-dark-muted); font-size: var(--step--1); }
.footer-col a { color: inherit; }
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-lg); padding-top: var(--space-md); border-top: var(--hairline); font-size: var(--step--1); color: var(--steel-500); }
.footer-legal a { color: inherit; text-decoration: none; }
.footer-legal a:hover { color: var(--accent); }

@media (max-width: 860px) {
    .main-nav { gap: var(--space-md); }
    .main-nav a:not(.nav-cta) { display: none; }
}