/* ============================================================
   Page 3.3 Kontakt — page-specific styles (shared base: main.css)
   Tokens only; raw px only where documented inline.
   Flow: hero with "what happens next" → two ways (book | write,
   side by side ≥ bp-lg, scheduler first) → direct contact
   (+ one self-testing hint while the trial is on) → trust badges.
   ============================================================ */

/* ── Hero: dark band (surface-dark in main.css) + next steps ── */
.contact-hero { padding-block: var(--space-2xl); }
.contact-hero__intro { max-width: 46rem; margin-inline: auto; text-align: center; }
.contact-hero__eyebrow { margin-bottom: var(--space-md); } /* pill look: .eyebrow-dark */
.contact-hero__grid { display: grid; gap: var(--space-xl); align-items: center; }
@media (min-width: 1024px) {
    .contact-hero__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-2xl); }
    .contact-hero__intro { margin-inline: 0; text-align: left; }
}

/* Hero visual (hero-visual.css base): calendar card with a picked + confirmed slot,
   message card with typed lines (no text) and a "sent" badge. Decorative. */
.contact-hero__visual { max-width: 400px; }
.contact-hero__visual .hva__card { gap: var(--space-xs); }
.contact-hero__visual .hva__label { font-size: var(--text-base); }
.cv-icon { width: 40px; height: 40px; } /* raw px: compact icon circle */
.cv-icon > .icon { width: 20px; height: 20px; }
.cv-cal { margin-right: 14%; }
.cv-msg { position: relative; margin: calc(-1 * var(--space-md)) 0 0 14%; }
.cv-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); margin-top: var(--space-2xs); }
.cv-slot {
    height: 28px; /* raw px: slot pill */
    border: 1px solid var(--line-200); border-radius: var(--radius-full);
    background: var(--surface-50);
}
.cv-slot--pick {
    border-color: var(--accent-500);
    background: linear-gradient(var(--accent-500), var(--accent-500)) left / 100% 100% no-repeat, var(--surface-50);
}
.cv-status {
    display: flex; align-items: center; gap: var(--space-xs);
    margin: var(--space-2xs) 0 0;
    font-size: var(--text-sm); font-weight: 600; color: var(--accent-600);
}
.cv-tick {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 22px; height: 22px; /* raw px: small check badge */
    border-radius: var(--radius-full); background: var(--accent-500); color: var(--surface-0);
}
.cv-chip {
    display: inline-flex; align-items: center; gap: var(--space-2xs); justify-self: start;
    padding: 4px 10px; /* raw px: mini chip */
    border-radius: var(--radius-full); background: var(--accent-500); color: var(--surface-0);
}
.cv-chip__bar { width: 64px; height: 6px; border-radius: var(--radius-full); background: rgba(255, 255, 255, .75); } /* raw px: label stand-in */
.cv-line { display: block; height: 8px; border-radius: var(--radius-full); background: var(--line-200); transform-origin: left center; } /* raw px: text line stand-in */
.cv-line--short { width: 60%; }
.contact-hero__visual .hva__badge { background: var(--accent-500); border-color: var(--accent-300); }
@media (max-width: 1023.98px) {
    /* below the two-column hero the visual would push the form down: hidden, the steps carry the message */
    .contact-hero__visual { display: none; }
}
.contact-hero__sub { font-size: var(--text-lg); color: var(--ink-inverse-muted); margin-top: var(--space-sm); }
@media (min-width: 1024px) { .contact-hero { padding-block: var(--space-3xl) var(--space-2xl); } }

.surface-dark .contact-next__heading {
    margin: var(--space-xl) 0 var(--space-md); text-align: center;
    font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink-inverse-muted);
}
.contact-next {
    display: grid; gap: var(--space-sm);
    max-width: 62rem; margin: 0 auto; padding: 0; list-style: none;
}
.contact-next__item {
    display: flex; align-items: center; gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: rgba(230, 237, 245, .05);
    border: 1px solid rgba(159, 177, 196, .22);
    border-radius: var(--radius-lg);
    color: var(--ink-inverse);
}
.contact-next__icon {
    position: relative; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; /* raw px: compact icon circle on the dark band */
    border-radius: var(--radius-full);
    background: rgba(49, 187, 216, .14); color: var(--cyan-300);
}
.contact-next__num {
    position: absolute; top: -4px; right: -6px;
    display: flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding-inline: 4px; /* raw px: number badge */
    border-radius: var(--radius-full);
    background: var(--accent-300); color: var(--navy-950);
    font-family: var(--font-display); font-size: var(--text-2xs); font-weight: 700; line-height: 1;
}
.contact-next__text { font-size: var(--text-sm); line-height: 1.45; }
@media (min-width: 768px) {
    .contact-next { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
}

/* ── Two ways: book a meeting (primary) + write a message ───
   Desktop: form on the right spanning all rows; booking card, direct
   contact and (trial on) the demo hint stack on the left. The last row
   takes the spare height, so the left cards stay packed at the top. */
.contact-split__grid { display: grid; gap: var(--space-lg); align-items: start; }
@media (min-width: 1024px) {
    .contact-split__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto 1fr;
        column-gap: var(--space-xl);
    }
    .contact-split__grid > .contact-panel--form { grid-column: 2; grid-row: 1 / span 3; }
    .contact-split__grid > #kontakt-book { grid-column: 1; grid-row: 1; }
    .contact-split__grid > #kontakt-direct { grid-column: 1; grid-row: 2; }
    .contact-split__grid > #kontakt-demo { grid-column: 1; grid-row: 3; }
}

.contact-panel {
    background: var(--surface-0);
    border: 1px solid var(--line-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-lg);
}
@media (max-width: 479.98px) { .contact-panel { padding: var(--space-lg) var(--space-md); } } /* more room for the form on small phones */
@media (min-width: 640px) { .contact-panel { padding: var(--space-xl); } }
.contact-panel__head { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-md); }
.contact-panel__icon { width: 48px; height: 48px; } /* raw px: compact icon circle */
.contact-panel__icon > .icon { width: 24px; height: 24px; }
.contact-panel__heading { font-size: var(--text-xl); margin-bottom: var(--space-3xs); }
.contact-panel__note { font-size: var(--text-sm); color: var(--ink-600); margin: 0; }

/* ── Consent-gated scheduler slot (cookie-consent: external_media) ─ */
.contact-embed {
    display: grid; gap: var(--space-md);
    justify-items: center; align-content: center; text-align: center;
    background: var(--surface-50);
    border: 1px dashed var(--line-200);
    border-radius: var(--radius-md);
    padding: var(--space-xl) var(--space-lg);
    min-height: 320px; /* raw px: reserved embed slot — no layout jump when the scheduler loads */
}
/* .btn sets display, which beats the hidden attribute: keep hidden parts hidden */
.contact-embed [hidden] { display: none; }
.contact-embed__note { font-size: var(--text-sm); color: var(--ink-600); max-width: 40ch; }
.contact-embed__fallback, .contact-embed__privacy { font-size: var(--text-sm); }

/* Soft free-mail nudge (JS, non-blocking) */
.form-field__note--nudge { color: var(--warning); font-weight: 500; }
.contact-embed a { color: var(--blue-700); } /* blue-500 misses 4.5:1 on surface-50 */
.contact-embed--loaded { padding: 0 0 var(--space-md); border-style: solid; background: var(--surface-0); }
/* the frame runs edge to edge, the links below keep the usual side padding */
.contact-embed--loaded > p { padding-inline: var(--space-lg); }
/* raw px: fixed scheduler height (no script = no auto-resize); taller on mobile where Calendly stacks */
.contact-embed__frame { width: 100%; height: 950px; border: 0; border-radius: var(--radius-md); }
@media (min-width: 1024px) { .contact-embed__frame { height: 700px; } }

/* ── Message form ──────────────────────────────────────────── */
.contact-form { display: grid; gap: var(--space-md); margin-top: var(--space-sm); /* breathing room under the panel heading */ }
/* Topic chips ("Worum geht es?"): radio group as wrapping pills. The radio sits
   visually hidden inside its label (native arrow keys, one tab stop); selected =
   filled accent with a check in place of the icon. */
.contact-topics { border: 0; padding: 0; margin: 0; min-width: 0; }
.contact-topics > legend { padding: 0; margin-bottom: var(--space-xs); }
.contact-topics__chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.contact-topic-chip {
    position: relative;
    display: inline-flex; align-items: center; gap: var(--space-2xs);
    min-height: 36px; /* raw px: chip height (touch target with the 8px gap) */
    padding: 6px 12px; /* raw px: pill padding */
    background: var(--surface-0); color: var(--ink-900);
    border: 1px solid var(--line-200); border-radius: var(--radius-full);
    font-size: var(--text-sm); font-weight: 500; line-height: 1.2;
    cursor: pointer;
    transition: background-color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.contact-topic-chip__input {
    position: absolute; inset: 0;
    width: 100%; height: 100%; margin: 0;
    opacity: 0; cursor: pointer;
}
.contact-topic-chip__icon { flex: none; color: var(--ink-600); }
.contact-topic-chip__check { display: none; flex: none; }
.contact-topic-chip:hover { border-color: var(--ink-400); }
.contact-topic-chip:has(:checked) { background: var(--accent-500); border-color: var(--accent-500); color: var(--surface-0); }
.contact-topic-chip:has(:checked) .contact-topic-chip__icon { display: none; }
.contact-topic-chip:has(:checked) .contact-topic-chip__check { display: block; }
.contact-topic-chip:has(:focus-visible) { box-shadow: var(--focus-ring); }
.contact-topics.form-field--error .contact-topic-chip:not(:has(:checked)) { border-color: var(--error); }
@media (max-width: 479.98px) {
    .contact-topics__chips { gap: 6px 4px; } /* raw px: tighter rows on small phones */
    .contact-topic-chip { min-height: 32px; padding: 4px 9px; gap: 4px; font-size: var(--text-xs); } /* raw px: compact chips */
    .contact-topic-chip__icon, .contact-topic-chip__check { width: 14px; height: 14px; }
}

/* Topic hint (support / careers): sits right under the topic chips, quiet info style */
.contact-topic-hint {
    margin-top: calc(var(--space-md) * -1);
    padding: var(--space-xs) var(--space-sm);
    border-left: 3px solid var(--blue-500);
    background: var(--blue-100);
    border-radius: var(--radius-sm, 4px);
    font-size: var(--text-sm);
    color: var(--ink-900);
}
.contact-topic-hint[hidden] { display: none; }
.contact-topic-hint a { color: var(--blue-700); }

/* Backend state banners */
.contact-form__banner {
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-top: var(--space-sm);
    font-weight: 500;
}
.contact-form__banner--success { background: var(--accent-100); color: var(--accent-600); }
.contact-form__banner--error { background: #FBE9EA; color: var(--error); } /* error @ ~8% on white */

/* Honeypot: visually gone, still in the a11y tree-off via aria-hidden */
.contact-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact-consent--error .contact-consent__label { color: var(--error); }
.contact-consent { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-sm); }
/* error note on its own line under checkbox + label (server-rendered and from contact.js) */
.contact-consent .form-field__note { flex-basis: 100%; margin: 0; }
.contact-consent__label { flex: 1 1 0; min-width: 0; }
.contact-consent__input {
    width: 24px; height: 24px; /* raw px: checkbox size — matches the consent-settings toggles */
    accent-color: var(--accent-500);
    flex-shrink: 0;
    margin-top: var(--space-3xs);
}
.contact-consent__label { font-size: var(--text-sm); color: var(--ink-600); }
.contact-form__submit { justify-self: start; }

/* ── Direct contact + self-testing hint (trial on) + trust badges ── */
.contact-card {
    display: flex; flex-direction: column; align-items: flex-start;
    background: var(--surface-0);
    border: 1px solid var(--line-200);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}
@media (min-width: 640px) { .contact-card { padding: var(--space-xl); } }
.contact-card__heading { font-size: var(--text-xl); margin-bottom: var(--space-md); }
.contact-card__icon { width: 48px; height: 48px; margin-bottom: var(--space-md); } /* raw px: compact icon circle */
.contact-card__icon > .icon { width: 24px; height: 24px; }
.contact-card--demo .contact-card__heading { margin-bottom: var(--space-xs); }
.contact-card__body { color: var(--ink-600); margin-bottom: var(--space-lg); }
.contact-card--demo { background: var(--blue-100); border-color: transparent; }
.contact-card--demo .contact-card__icon { background: var(--surface-0); }
.contact-card--demo .btn { margin-top: auto; }
/* the secondary button's blue-100 hover fill would vanish on this card */
.contact-card--demo .btn--secondary:hover { background: var(--surface-0); }

.contact-direct__list { display: grid; gap: var(--space-sm); list-style: none; padding: 0; margin: 0; width: 100%; }
.contact-direct__list li {
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-sm); align-items: center;
}
.contact-direct__icon { grid-row: span 2; width: 40px; height: 40px; } /* raw px: small icon circle */
.contact-direct__icon > .icon { width: 20px; height: 20px; }
.contact-direct__label { font-size: var(--text-xs); color: var(--ink-600); line-height: 1.2; }
.contact-direct__list a {
    display: inline-flex; align-items: center; justify-self: start;
    min-height: 32px; /* raw px: touch target, plus the row gap */
    font-weight: 600; overflow-wrap: anywhere;
}
.contact-direct__address { margin-top: var(--space-md); font-size: var(--text-sm); }
.contact-direct__address a { display: inline-flex; align-items: center; min-height: 32px; } /* raw px: touch target */

.contact-more__badges { margin-top: var(--space-xl); }