/* ==========================================================================
   HAFA Treppen® — Design System (DNA aus RenewHAFA / Print-Produktinformation)
   "Mit Sicherheit das richtige System!"
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

@font-face {
    font-family: 'Meta Headline';
    src: url('../fonts/metaheadot-bold-webfont.woff2') format('woff2'),
         url('../fonts/metaheadot-bold-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* ---- Brand & neutrals ---------------------------------------------- */
    --red-50:#fdecec; --red-100:#f9c9cb; --red-500:#e30613; --red-600:#cc0511; --red-700:#a8040e;
    --green-50:#eef6e3; --green-100:#d6ebbf; --green-500:#76b82a; --green-600:#5fa01f; --green-700:#009940;
    --white:#ffffff;
    --gray-50:#f6f6f6; --gray-100:#ececec; --gray-200:#e2e2e1; --gray-300:#cfcfce; --gray-400:#9d9d9c;
    --gray-500:#878787; --gray-600:#6e6e6d; --gray-700:#575756; --gray-800:#3c3c3b; --gray-900:#1c1c1c;
    --black:#000000;

    --color-brand:var(--red-500); --color-brand-hover:var(--red-600); --color-brand-press:var(--red-700);
    --color-brand-tint:var(--red-50);
    --color-accent:var(--green-500); --color-accent-deep:var(--green-700); --color-accent-tint:var(--green-50);

    --text-strong:var(--gray-900); --text-body:var(--gray-800); --text-muted:var(--gray-700); --text-subtle:var(--gray-500);
    --text-on-brand:var(--white);
    --surface:var(--white); --surface-alt:var(--gray-50); --surface-ink:var(--gray-900);
    --border:var(--gray-200); --border-strong:var(--gray-400); --focus-ring:var(--red-500);
    --color-success:var(--green-600); --color-danger:var(--red-500);

    /* ---- Type ---------------------------------------------------------- */
    --font-display:'Meta Headline','Arimo','Helvetica Neue',Helvetica,Arial,sans-serif;
    --font-body:'Arimo','Helvetica Neue',Helvetica,Arial,sans-serif;
    --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
    --fs-display:3.5rem; --fs-h1:2.75rem; --fs-h2:2rem; --fs-h3:1.5rem; --fs-h4:1.25rem;
    --fs-lead:1.25rem; --fs-body:1rem; --fs-sm:.875rem; --fs-xs:.75rem;
    --lh-tight:1.05; --lh-heading:1.15; --lh-snug:1.35; --lh-body:1.6;
    --ls-display:-0.01em; --ls-kicker:.08em; --ls-label:.04em;

    /* ---- Space / radius / elevation / motion --------------------------- */
    --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem;
    --space-6:2rem; --space-7:3rem; --space-8:4rem; --space-9:6rem;
    --container-max:1200px; --container-pad:var(--space-5);
    --radius-sm:3px; --radius-md:6px; --radius-lg:10px; --radius-pill:999px;
    --shadow-xs:0 1px 2px rgba(28,28,28,.06);
    --shadow-sm:0 1px 3px rgba(28,28,28,.08),0 1px 2px rgba(28,28,28,.06);
    --shadow-md:0 4px 12px rgba(28,28,28,.08),0 2px 4px rgba(28,28,28,.05);
    --shadow-lg:0 12px 28px rgba(28,28,28,.12),0 4px 8px rgba(28,28,28,.06);
    --ease-standard:cubic-bezier(.2,0,.1,1); --dur-fast:120ms; --dur-base:200ms;
}

/* ---- Base ------------------------------------------------------------- */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
    margin:0; font-family:var(--font-body); font-size:var(--fs-body);
    line-height:var(--lh-body); color:var(--text-body); background:var(--surface-alt);
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4 { font-family:var(--font-display); font-weight:var(--fw-bold); color:var(--text-strong);
    line-height:var(--lh-heading); letter-spacing:var(--ls-display); margin:0 0 var(--space-4); }
h1{font-size:var(--fs-h1);} h2{font-size:var(--fs-h2);} h3{font-size:var(--fs-h3);} h4{font-size:var(--fs-h4);}
a { color:var(--color-brand); text-decoration:none; }
a:hover { text-decoration:underline; }
p { margin:0 0 var(--space-4); }

.kicker { font-size:var(--fs-xs); font-weight:var(--fw-bold); letter-spacing:var(--ls-kicker);
    text-transform:uppercase; color:var(--color-brand); }

/* ---- Buttons ---------------------------------------------------------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
    font-family:var(--font-body); font-size:var(--fs-sm); font-weight:var(--fw-semibold);
    letter-spacing:var(--ls-label); padding:.65rem 1.15rem; border-radius:var(--radius-md);
    border:1px solid transparent; cursor:pointer; transition:background var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast), color var(--dur-fast); line-height:1; }
.btn-brand { background:var(--color-brand); color:var(--text-on-brand); }
.btn-brand:hover { background:var(--color-brand-hover); text-decoration:none; }
.btn-brand:active { background:var(--color-brand-press); }
.btn-ghost { background:transparent; color:var(--text-muted); border-color:var(--border-strong); }
.btn-ghost:hover { background:var(--gray-100); text-decoration:none; }
.btn-block { width:100%; }

/* ---- Form controls ---------------------------------------------------- */
.field { margin-bottom:var(--space-4); }
.label { display:block; font-size:var(--fs-sm); font-weight:var(--fw-semibold);
    color:var(--text-muted); margin-bottom:var(--space-2); }
.input { width:100%; font-family:var(--font-body); font-size:var(--fs-body); color:var(--text-strong);
    background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius-md);
    padding:.7rem .85rem; transition:border-color var(--dur-fast), box-shadow var(--dur-fast); }
.input:focus { outline:none; border-color:var(--color-brand);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--focus-ring) 22%, transparent); }

/* ---- Badges ----------------------------------------------------------- */
.badge { display:inline-flex; align-items:center; gap:.35em; font-size:var(--fs-xs);
    font-weight:var(--fw-bold); letter-spacing:var(--ls-label); padding:.25em .6em;
    border-radius:var(--radius-pill); line-height:1.4; }
.badge-brand { background:var(--color-brand-tint); color:var(--color-brand-press); }
.badge-accent { background:var(--color-accent-tint); color:var(--color-accent-deep); }

/* ---- Cards ------------------------------------------------------------ */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm); }

/* ---- Alerts ----------------------------------------------------------- */
.alert { border-radius:var(--radius-md); padding:.75rem 1rem; font-size:var(--fs-sm); }
.alert-danger { background:var(--red-50); color:var(--red-700); border:1px solid var(--red-100); }