/* Reset + editorial Basistypografie. Setzt tokens.css voraus. */

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

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--ink);
    background: var(--paper);
    background-image:
        radial-gradient(ellipse 800px 240px at 20% -10%, rgba(216, 0, 0, 0.06), transparent 60%),
        radial-gradient(ellipse 600px 180px at 90% -20%, rgba(216, 0, 0, 0.04), transparent 60%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

main { flex: 1; }

/* ============ Headings ============ */

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--sp-4);
    font-family: var(--font-display);
    /* Swiss 721 ships 300/400/700 only — 400 is what actually renders */
    font-weight: 400;
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--ink);
    text-wrap: balance;
}

h1 { font-size: clamp(var(--fs-2xl), 6vw, var(--fs-3xl)); }
h2 { font-size: clamp(var(--fs-xl), 4vw, var(--fs-2xl)); }
h3 { font-size: var(--fs-lg); letter-spacing: var(--tracking-snug); }
h4 { font-size: var(--fs-md); letter-spacing: var(--tracking-snug); }
h5, h6 { font-size: var(--fs-base); letter-spacing: var(--tracking-snug); }

p {
    margin: 0 0 var(--sp-4);
    max-width: 62ch;
    color: var(--ink);
}

ul, ol { margin: 0 0 var(--sp-4); padding-left: var(--sp-5); }

/* UA default is 1em 40px — with width:100% media that overflows small viewports */
figure { margin: 0; }
.prose li + li,
.numbered-list li + li,
.vita-list li + li,
.site-footer ul li + li {
    margin-top: var(--sp-2);
}

a {
    color: inherit;
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size var(--transition-base), color var(--transition-fast);
}
a:hover, a:focus-visible {
    color: var(--brand-red);
    background-size: 0 1px;
}

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

img, picture, svg, video {
    max-width: 100%;
    height: auto;
    display: block;
}

img { background: var(--paper-deep); }

button { font: inherit; cursor: pointer; }

hr {
    border: 0;
    border-top: 1px solid var(--line-soft);
    margin: var(--sp-7) 0;
}

/* ============ Layout-Helper ============ */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.container--text   { max-width: var(--container-text); }
.container--narrow { max-width: var(--container-narrow); }

.section {
    padding-block: clamp(var(--sp-7), 8vw, var(--sp-10));
    position: relative;
}
.section--tight { padding-block: var(--sp-7); }
.section--paper-deep { background: var(--paper-deep); }
.section--noir       { background: var(--noir); color: var(--on-noir); }
.section--noir h1, .section--noir h2, .section--noir h3 { color: var(--on-noir); }
.section--noir p     { color: var(--on-noir-soft); }
.section--noir hr    { border-top-color: rgba(244, 241, 234, 0.18); }
.section--noir a:hover, .section--noir a:focus-visible { color: var(--brand-red-on-noir); }

/* ============ Editorial Type-Helper ============ */

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    font-weight: 500;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--brand-red);
}
.section--noir .eyebrow, .cta-strip .eyebrow { color: var(--brand-red-on-noir); }

/* CSP-safe helpers — production CSP is style-src 'self', so templates must
   not carry style="" attributes. */
.eyebrow-meta {
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--ink-muted);
}
.teaser-link {
    display: inline-block;
    margin-top: var(--sp-3);
    font-size: var(--fs-2xs);
    letter-spacing: var(--tracking-wider);
    color: var(--brand-red);
}
.form-hint {
    margin: 0;
    font-size: var(--fs-2xs);
    color: var(--ink-muted);
    letter-spacing: var(--tracking-wider);
}
.u-m0 { margin: 0; }

/* Entry-animation stagger steps (replace former inline --anim-delay) */
.anim-delay-1 { --anim-delay: 80ms; }
.anim-delay-2 { --anim-delay: 150ms; }
.anim-delay-3 { --anim-delay: 320ms; }
.anim-delay-4 { --anim-delay: 350ms; }
.eyebrow::before {
    content: "";
    display: inline-block;
    width: 1.4rem;
    height: 1px;
    background: currentColor;
}

.lead {
    font-family: var(--font-display);
    font-size: clamp(var(--fs-md), 2.2vw, var(--fs-lg));
    font-weight: 400;
    line-height: 1.34;
    letter-spacing: var(--tracking-tight);
    color: var(--ink);
    max-width: 36ch;
}

.serif    { font-family: var(--font-display); }
.mono     { font-family: var(--font-mono); }
.italic   { font-style: italic; }
.uppercase { text-transform: uppercase; letter-spacing: var(--tracking-wider); }
.tnum     { font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; }

/* Pipe-Motiv: kleine vertikale rote Linie als visuelles Echo des Logos */
.pipe-mark {
    display: inline-block;
    width: 2px;
    height: 1em;
    background: var(--brand-red);
    vertical-align: -0.1em;
    margin-inline: 0.2em;
}

/* Skip-Link */
.skip-link {
    position: absolute;
    left: var(--sp-3);
    top: var(--sp-3);
    transform: translateY(-150%);
    background: var(--ink);
    color: var(--on-noir);
    padding: var(--sp-2) var(--sp-4);
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    z-index: 1000;
    transition: transform var(--transition-fast);
}
.skip-link:focus { transform: translateY(0); color: var(--on-noir); background-image: none; }

/* ============ Buttons ============ */

.btn {
    --btn-pad-y: 0.95rem;
    --btn-pad-x: 1.6rem;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--btn-pad-y) var(--btn-pad-x);
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    font-weight: 500;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    text-decoration: none;
    background-image: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: color var(--transition-base);
}
.btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--ink);
    transform: translateY(101%);
    transition: transform var(--transition-base);
    z-index: -1;
}
.btn:hover, .btn:focus-visible {
    color: var(--paper);
}
.btn:hover::after, .btn:focus-visible::after { transform: translateY(0); }

.btn--primary {
    color: var(--paper);
    background: var(--ink);
    border-color: var(--ink);
}
.btn--primary::after { background: var(--brand-red); }
.btn--primary:hover, .btn--primary:focus-visible { color: var(--paper); border-color: var(--brand-red); }

.btn--ghost-light { color: var(--on-noir); border-color: var(--on-noir); }
.btn--ghost-light::after { background: var(--brand-red); }
.btn--ghost-light:hover, .btn--ghost-light:focus-visible { color: var(--paper); border-color: var(--brand-red); }

.btn .arrow {
    display: inline-block;
    transition: transform var(--transition-base);
}
.btn:hover .arrow, .btn:focus-visible .arrow { transform: translateX(4px); }

/* ============ Tags / Kategorie-Pills ============ */

.tag {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: var(--font-mono);
    font-size: var(--fs-3xs);
    font-weight: 500;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--ink);
}
.tag::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--brand-red);
}
.tag--inverted { color: var(--on-noir-soft); }
.tag--inverted::before { background: var(--brand-red); }

/* ============ Forms ============ */

.form-stack { display: grid; gap: var(--sp-5); }

.form-field { display: flex; flex-direction: column; gap: var(--sp-2); }

.form-field label {
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--ink-soft);
}

.form-field input,
.form-field textarea {
    font: inherit;
    padding: 0.85rem 0;
    border: 0;
    border-bottom: 1px solid var(--line-soft);
    background: transparent;
    color: var(--ink);
    transition: border-color var(--transition-base);
}
.form-field input:focus,
.form-field textarea:focus { outline: 0; border-bottom-color: var(--ink); }
.form-field textarea { resize: vertical; min-height: 7rem; line-height: 1.5; }

.form-field--error input,
.form-field--error textarea { border-bottom-color: var(--brand-red); }

.form-error {
    color: var(--brand-red);
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.form-checkbox {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--sp-3);
    align-items: start;
}
.form-checkbox input {
    width: 1.1rem; height: 1.1rem;
    margin-top: 0.25rem;
    accent-color: var(--brand-red);
}
.form-checkbox label {
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    color: var(--ink-soft);
    line-height: 1.55;
}
.form-checkbox a { background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 100%; }

.honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px; overflow: hidden; opacity: 0;
}

.form-message {
    padding: var(--sp-5);
    border-left: 3px solid currentColor;
    background: rgba(216, 0, 0, 0.04);
    margin-bottom: var(--sp-5);
}
.form-message--success { color: #1f5f3f; background: rgba(31, 95, 63, 0.06); }
.form-message--error   { color: var(--brand-red-deep); }

/* ============ Visually hidden ============ */

.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;
}

/* ============ Page-Load Animations ============ */

@keyframes mga-rise {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes mga-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes mga-rule-grow {
    from { transform: scaleX(0); transform-origin: left; }
    to   { transform: scaleX(1); transform-origin: left; }
}

[data-anim="rise"] {
    animation: mga-rise var(--transition-slow) both;
    animation-delay: var(--anim-delay, 0ms);
}
[data-anim="fade"] {
    animation: mga-fade var(--transition-slow) both;
    animation-delay: var(--anim-delay, 0ms);
}
[data-anim="rule"] {
    animation: mga-rule-grow var(--transition-slow) both;
    animation-delay: var(--anim-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}