/* =========================================================
   Kontakt – Aurora Petrol
   Anzeige: Bricolage Grotesque · Technik: IBM Plex Mono
   ========================================================= */

:root {
    --ink:      #0b1618;
    --ink-2:    #102227;
    --ink-3:    #162d33;
    --line:     #1e353b;
    --fog:      #93aaab;
    --paper:    #e9f1ef;
    --brass:    #e0a458;
    --brass-dk: #b97f34;
    --mint:     #5ad1a8;
    --rust:     #e4664f;

    --r:        14px;
    --shell:    1080px;

    --sans: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --disp: "Bricolage Grotesque", Georgia, serif;
    --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
}

/* --- Hintergrund ---------------------------------------- */

.aurora {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(60vw 50vh at 12% 8%,  rgba(224, 164, 88, .16), transparent 60%),
        radial-gradient(55vw 55vh at 88% 82%, rgba(90, 209, 168, .12), transparent 62%);
    animation: drift 26s ease-in-out infinite alternate;
}

@keyframes drift {
    to { transform: translate3d(0, -3%, 0) scale(1.06); }
}

/* --- Gerüst --------------------------------------------- */

.shell {
    position: relative;
    z-index: 1;
    flex: 1;
    width: 100%;
    max-width: var(--shell);
    margin: 0 auto;
    padding: clamp(32px, 7vw, 88px) 24px 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 5vw, 64px);
    align-items: start;
}

@media (max-width: 860px) {
    .shell { grid-template-columns: 1fr; }
}

/* --- Kopfbereich ---------------------------------------- */

.eyebrow {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--brass);
    margin: 0 0 14px;
}

.display {
    font-family: var(--disp);
    font-weight: 800;
    font-size: clamp(44px, 7vw, 76px);
    line-height: .95;
    letter-spacing: -.03em;
    margin: 0 0 18px;
    text-wrap: balance;
}

.lede {
    color: var(--fog);
    font-size: 17px;
    max-width: 42ch;
    margin: 0 0 40px;
}

.lede strong { color: var(--paper); font-weight: 500; }

/* --- Zustellprotokoll (Signature) ----------------------- */

.rail {
    border-left: 1px solid var(--line);
    padding-left: 22px;
}

.rail-title {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--fog);
    margin: 0 0 16px;
}

.rail ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.rail li {
    position: relative;
    font-family: var(--mono);
    font-size: 13px;
    color: #5d7275;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: color .35s ease;
}

.rail li em {
    font-style: normal;
    color: #47595c;
    font-size: 11px;
}

.tick {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1px solid #33484c;
    flex: none;
    margin-left: -27px;
    background: var(--ink);
    transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.rail li.on { color: var(--paper); }

.rail li.on .tick {
    background: var(--mint);
    border-color: var(--mint);
    box-shadow: 0 0 0 4px rgba(90, 209, 168, .14);
}

.rail li.run .tick {
    background: var(--brass);
    border-color: var(--brass);
    animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {
    50% { box-shadow: 0 0 0 6px rgba(224, 164, 88, .18); }
}

/* --- Karte ---------------------------------------------- */

.card {
    background: linear-gradient(180deg, rgba(22, 45, 51, .92), rgba(16, 34, 39, .92));
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: clamp(22px, 3.5vw, 34px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
    backdrop-filter: blur(8px);
}

.row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 14px;
}

@media (max-width: 520px) {
    .row { grid-template-columns: 1fr; }
}

/* --- Felder mit mitwachsendem Label --------------------- */

.field {
    position: relative;
    margin-bottom: 18px;
}

.field input,
.field textarea {
    width: 100%;
    background: rgba(11, 22, 24, .6);
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--paper);
    font: inherit;
    padding: 22px 14px 8px;
    outline: none;
    transition: border-color .2s ease, background .2s ease;
}

.field textarea {
    min-height: 148px;
    resize: vertical;
    line-height: 1.55;
}

.field label {
    position: absolute;
    left: 15px;
    top: 15px;
    font-size: 15px;
    color: var(--fog);
    pointer-events: none;
    transition: transform .16s ease, font-size .16s ease, color .16s ease;
    transform-origin: left top;
}

.field input:focus + label,
.field textarea:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:not(:placeholder-shown) + label {
    transform: translateY(-9px) scale(.75);
    color: var(--brass);
}

.field input:focus,
.field textarea:focus {
    border-color: var(--brass);
    background: rgba(11, 22, 24, .9);
    box-shadow: 0 0 0 3px rgba(224, 164, 88, .12);
}

.field.is-error input,
.field.is-error textarea {
    border-color: var(--rust);
}

.field .msg {
    font-size: 13px;
    color: var(--rust);
    margin: 6px 2px 0;
}

.field .msg.suggest { color: var(--brass); }

.linkish {
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    padding: 0;
}

.counter {
    font-family: var(--mono);
    font-size: 11px;
    color: #5d7275;
    text-align: right;
    margin: 6px 2px 0;
}

.counter.warn { color: var(--brass); }

/* --- Knopf ---------------------------------------------- */

.send {
    width: 100%;
    border: 0;
    border-radius: 10px;
    background: var(--brass);
    color: #21150a;
    font-family: var(--disp);
    font-weight: 700;
    font-size: 17px;
    padding: 15px 20px;
    margin-top: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    transition: background .2s ease, transform .08s ease;
}

.send:hover { background: #eeb268; }
.send:active { transform: translateY(1px); }

.send-arrow { transition: transform .2s ease; }
.send:hover .send-arrow { transform: translateX(4px); }

.send[disabled] {
    background: var(--ink-3);
    color: var(--fog);
    cursor: progress;
}

.send[disabled] .send-arrow { display: none; }

.send .spin {
    width: 15px;
    height: 15px;
    border: 2px solid rgba(233, 241, 239, .25);
    border-top-color: var(--paper);
    border-radius: 50%;
    animation: spin .7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.fineprint {
    font-size: 12.5px;
    color: #5d7275;
    text-align: center;
    margin: 16px 0 0;
}

/* --- Meldungen ------------------------------------------ */

.alert {
    border: 1px solid rgba(228, 102, 79, .5);
    background: rgba(228, 102, 79, .1);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 14px;
    margin-bottom: 20px;
}

.alert strong { display: block; color: var(--rust); }

/* --- Beleg auf der Bestätigungsseite -------------------- */

.receipt-title {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--fog);
    margin: 0 0 18px;
}

.receipt {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 10px 16px;
    margin: 0 0 22px;
    font-size: 15px;
}

.receipt dt {
    font-family: var(--mono);
    font-size: 12px;
    color: #5d7275;
    padding-top: 2px;
}

.receipt dd {
    margin: 0;
    word-break: break-word;
}

.quote {
    border-left: 2px solid var(--brass);
    padding: 4px 0 4px 16px;
    color: #cbdad7;
    font-size: 15px;
    margin-bottom: 26px;
    max-height: 320px;
    overflow: auto;
}

/* --- Honeypot ------------------------------------------- */

.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- Fuß ------------------------------------------------ */

.foot {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 20px;
    font-family: var(--mono);
    font-size: 12px;
    color: #46585b;
}

.foot a { color: var(--fog); text-decoration: none; }
.foot a:hover { color: var(--brass); }
.foot .dot { margin: 0 8px; }

/* --- Fokus & Barrierefreiheit --------------------------- */

:focus-visible {
    outline: 2px solid var(--brass);
    outline-offset: 3px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
}