/* displaysync.de — nach ARENJA Brand Guidelines „Sharp Light“ (v3): Weiß, schwarze Schrift,
   Teal nur als Akzent, Kanten 0–4 px, Rahmen statt Schatten, Inter. Kein Dark Mode.
   Abweichung mit Grund: Knöpfe in --primary-deep (#007f67) statt --primary — weiße Schrift auf
   #00c9a7 hat nur 2,1:1 Kontrast, auf #009b7d 3,5:1 (reicht nur für große Schrift), auf #007f67
   4,96:1 (WCAG AA auch für den 16-px-Knopf im Kopf). Teal als Textfarbe nur als --teal-text (5,8:1). */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #ffffff;
  --surface: #f5f6f7;
  --surface-2: #eeeff1;
  --ink: #0a0a0a;
  --ink-2: #3f3f46;
  --muted: #6b7280;
  --line: #e4e4e7;
  --primary: #00c9a7;
  --primary-hover: #00b396;
  --primary-dark: #009b7d;
  --primary-deep: #007f67;
  --primary-tint: #e6faf6;
  --teal-text: #00735e;
  --error: #dc2626;
  --success: #059669;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, monospace;
  --wrap: 1160px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body { margin: 0; background: var(--bg); color: var(--ink-2); font: 400 1rem/1.6 var(--font); text-rendering: optimizeLegibility; }
img, svg { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
a { color: var(--teal-text); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
h1, h2, h3 { color: var(--ink); letter-spacing: -0.02em; margin: 0; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); font-weight: 800; line-height: 1.07; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); font-weight: 700; line-height: 1.12; }
h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.25; }
p { margin: 0; }
ul { margin: 0; padding: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: #fff; padding: 10px 14px; z-index: 100; }
.skip:focus { left: 8px; }

/* ── Kopf ─────────────────────────────────────────────────────────────── */
.site-header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--line); }
.header-row { display: flex; align-items: center; gap: 28px; min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; flex-shrink: 0; }
.logo-mark { flex-shrink: 0; }
.brand-name { font-weight: 800; font-size: 1.2rem; letter-spacing: -0.02em; }
.nav-desktop { margin-left: auto; }
.nav-desktop ul { display: flex; gap: 4px; list-style: none; }
.nav-desktop a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--ink); text-decoration: none; font-weight: 500; font-size: 0.97rem; border-bottom: 2px solid transparent; }
.nav-desktop a:hover { border-bottom-color: var(--primary); color: var(--ink); }
.nav-desktop a[aria-current="page"] { border-bottom-color: var(--ink); font-weight: 650; }
.nav-mobile { display: none; margin-left: auto; position: relative; }
.nav-mobile summary { list-style: none; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: 1.5px solid var(--ink); border-radius: 4px; cursor: pointer; font-weight: 600; color: var(--ink); }
.nav-mobile summary::-webkit-details-marker { display: none; }
.burger, .burger::before, .burger::after { display: block; width: 18px; height: 2px; background: var(--ink); position: relative; content: ''; }
.burger::before { position: absolute; top: -6px; }
.burger::after { position: absolute; top: 6px; }
.nav-mobile[open] summary { background: var(--ink); color: #fff; }
.nav-mobile[open] .burger, .nav-mobile[open] .burger::before, .nav-mobile[open] .burger::after { background: #fff; }
.nav-mobile nav { position: absolute; right: 0; top: calc(100% + 8px); width: min(88vw, 320px); background: #fff; border: 1.5px solid var(--ink); border-radius: 4px; box-shadow: 0 4px 16px rgba(10, 10, 10, 0.08); padding: 6px; }
.nav-mobile ul { list-style: none; }
.nav-mobile a { display: flex; align-items: center; min-height: 48px; padding: 0 14px; color: var(--ink); text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--line); }
.nav-mobile li:last-child a { border-bottom: none; }
.header-cta, .header-login { white-space: nowrap; }
.icon-login { flex-shrink: 0; }
.login-short { display: none; }
.nav-mobile a.nav-mobile-login { gap: 10px; }
.hero-login { margin-top: 20px; color: var(--muted); }
.hero-login-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-left: 4px; font-weight: 650; color: var(--ink); text-decoration: underline; text-decoration-color: var(--primary); text-decoration-thickness: 2px; text-underline-offset: 4px; vertical-align: middle; }
.hero-login-link:hover { color: var(--teal-text); }

/* Kopf in Stufen (gemessen 28.09.2026, scratchpad header-measure): sechs Menüpunkte + „Kunden-Login“
   + „Anfrage stellen“ brauchen rund 1200 px — mehr als die Inhaltsbreite (1120 px). Deshalb:
     ≥ 1280 px  Kopf etwas breiter als der Inhalt (1280), alles ausgeschrieben
     1131–1279  kompakt: engere Menüpunkte, Knopf „Login“
     ≤ 1130     Menü statt Navigation: Marke | Kunden-Login | Anfrage stellen | Menü
     ≤ 699      „Login“ kurz
     ≤ 600      Kopf: Marke | „Anfrage“ | Menü — der Kunden-Login im Menü, im Fuß und auf der Startseite (63b, 16.10.2026;
                bis dahin stand hier „Login“ und „Anfrage stellen“ nur im Menü)
     ≤ 415      „Menü“ nur als Symbol */
.site-header .wrap { max-width: 1280px; }
.header-row { gap: 20px; }
.nav-desktop a { padding: 0 10px; }
@media (max-width: 1279px) {
  .header-row { gap: 16px; }
  .nav-desktop ul { gap: 0; }
  .nav-desktop a { padding: 0 8px; }
  .site-header .header-login .login-long { display: none; }
  .site-header .header-login .login-short { display: inline; }
}
@media (max-width: 1130px) {
  .nav-desktop { display: none; }
  .nav-mobile { display: block; margin-left: 0; }
  .header-row { gap: 12px; }
  /* Knöpfe rechts neben „Menü“ statt direkt hinter dem Logo (Tablet-Ansicht). */
  .header-login { margin-left: auto; }
  .site-header .header-login .login-long { display: inline; }
  .site-header .header-login .login-short { display: none; }
}
@media (max-width: 699px) {
  .site-header .header-login .login-long { display: none; }
  .site-header .header-login .login-short { display: inline; }
}
/* Höhere Spezifität: .btn (weiter unten) setzt display und gewann sonst — der Knopf drückte am
   Handy das Menü aus dem Bild. */
.cta-short { display: none; }
/* Handy (OFFEN 63, Nutzer 16.10.2026: „63b“): im Kopf „Anfrage“ statt „Login“ — die Website soll Anfragen bringen. Der
   Kunden-Login bleibt im Menü, im Fuß und auf der Startseite. */
@media (max-width: 600px) {
  .site-header .header-login { display: none; }
  .site-header .header-cta { margin-left: auto; padding: 0 0.9rem; }
  .site-header .header-cta .cta-long { display: none; }
  .site-header .header-cta .cta-short { display: inline; }
}
@media (max-width: 415px) {
  .header-row { gap: 8px; }
  .site-header .header-login { padding: 0 0.7rem; }
  .nav-mobile summary { padding: 0 12px; }
  .nav-mobile-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 340px) {
  .site-header .wrap { padding: 0 14px; }
  .site-header .header-login { padding: 0 0.6rem; }
  .site-header .header-login .login-short { display: none; }
  .brand-name { font-size: 1.1rem; }
}

.crumbs { display: flex; gap: 8px; padding-top: 22px; font-size: 0.875rem; color: var(--muted); }
.crumbs a { color: var(--muted); }

/* ── Knöpfe ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 52px; padding: 0 1.5rem;
  font: 700 1.1875rem/1.2 var(--font); letter-spacing: -0.01em; border-radius: 4px; border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
/* Knopf-Grün #007f67: Weiß darauf 4,96 : 1 — reicht nach WCAG AA auch für kleine Schrift (der
   16-px-Knopf „Anfrage stellen“ im Kopf hatte auf #009b7d nur 3,5 : 1; Lighthouse 28.09.2026). */
.btn--primary { background: var(--primary-deep); color: #fff; }
.btn--primary:hover { background: #00664f; color: #fff; }
.btn--secondary { background: #fff; color: var(--ink); border-color: var(--ink); }
.btn--secondary:hover { background: var(--ink); color: #fff; }
.btn--sm { min-height: 44px; padding: 0 1rem; font-size: 1rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── Abschnitte ───────────────────────────────────────────────────────── */
.section { padding: 88px 0; border-top: 1px solid var(--line); }
.section--surface { background: var(--surface); }
.section--tight { padding: 56px 0; }
.eyebrow { display: inline-block; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--teal-text); margin-bottom: 14px; }
.lead { font-size: 1.2rem; line-height: 1.55; color: var(--ink-2); max-width: 720px; }
.section-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 44px; max-width: 760px; }
.prose { max-width: 760px; }
.prose p + p, .prose p + ul, .prose ul + p { margin-top: 1rem; }
.prose h2 { margin: 2.2rem 0 0.8rem; font-size: 1.6rem; }
.prose h3 { margin: 1.6rem 0 0.5rem; }
.prose ul { padding-left: 1.2rem; }
.prose li + li { margin-top: 0.35rem; }

/* ── Kopfbereich (Hero) ───────────────────────────────────────────────── */
.hero { padding: 64px 0 72px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.hero h1 { margin-bottom: 20px; }
.hero .lead { margin-bottom: 30px; }
.hero-figure { border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 56px; border: 1px solid var(--line); border-radius: 4px; }
.trust li { list-style: none; padding: 18px 20px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.trust li:first-child { border-left: none; }
.trust strong { color: var(--ink); font-size: 0.98rem; }
.trust span { font-size: 0.9rem; color: var(--muted); }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust li:nth-child(3) { border-left: none; }
  .trust li:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 520px) {
  .trust { grid-template-columns: minmax(0, 1fr); }
  .trust li { border-left: none; border-top: 1px solid var(--line); }
  .trust li:first-child { border-top: none; }
}

/* ── Karten und Raster ────────────────────────────────────────────────── */
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); } }
.card { background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 26px; display: flex; flex-direction: column; gap: 10px; }
a.card { text-decoration: none; color: var(--ink-2); }
a.card:hover { border-color: var(--primary); color: var(--ink-2); }
.card h3 { font-size: 1.15rem; }
.card .more { margin-top: auto; padding-top: 8px; color: var(--teal-text); font-weight: 600; }
.icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--ink); border-radius: 4px; color: var(--ink); background: #fff; }
.icon svg { width: 24px; height: 24px; }
.card--figure { padding: 0; overflow: hidden; }
.card--figure .card-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 8px; }
.card--figure img { border-bottom: 1px solid var(--line); }
/* Handy: Bild klein neben dem Text statt bildschirmbreit — gestapelt brauchten die vier
   Einsatzbereich-Karten der Startseite 2.035 px, der längste Abschnitt (Website-Review 29.09.2026).
   Die Illustrationen tragen ihren grauen Hintergrund selbst, als Vorschaubild bleiben sie lesbar.
   Unter 360 px bliebe neben dem Bild zu wenig Platz („Selbstbedienung“ lief bei 320 px über den
   Kartenrand) — dort wieder gestapelt, das Bild flacher. */
@media (max-width: 640px) {
  .card--figure { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px; }
  .card--figure img { width: 96px; border: 1px solid var(--line); border-radius: 2px; }
  .card--figure .card-body { padding: 0; gap: 6px; }
  .card--figure h3 { hyphens: auto; overflow-wrap: anywhere; }
  .card--figure .more { white-space: nowrap; }
}
@media (max-width: 359px) {
  .card--figure { grid-template-columns: minmax(0, 1fr); }
  .card--figure img { width: 100%; aspect-ratio: 2 / 1; object-fit: contain; background: var(--surface); }
}

/* Zweispaltig: Text + Bild */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.split + .split { margin-top: 88px; }
.split--flip > :first-child { order: 2; }
.split figure { margin: 0; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: #fff; }
.split figcaption { padding: 10px 14px; font-size: 0.85rem; color: var(--muted); border-top: 1px solid var(--line); }
@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .split--flip > :first-child { order: 0; }
}
.checks { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
.checks li { position: relative; padding-left: 32px; }
.checks li::before { content: ''; position: absolute; left: 0; top: 5px; width: 18px; height: 18px; border: 1.5px solid var(--ink); border-radius: 2px; background: var(--primary-tint); }
.checks li::after { content: ''; position: absolute; left: 5px; top: 8px; width: 8px; height: 5px; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg); }
.checks strong { color: var(--ink); }

/* Schritte */
/* padding/margin 0: `ol` bringt 40 px Einzug mit (nur `ul` ist oben zurückgesetzt) — die erste
   Spalte war breiter, am Handy die ganze Liste eingerückt. */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.steps li { list-style: none; counter-increment: step; padding: 26px 24px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.steps li:first-child { border-left: none; }
.steps li::before { content: counter(step, decimal-leading-zero); font: 700 0.95rem var(--mono); color: var(--teal-text); }
@media (max-width: 900px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
  .steps li { border-left: none; border-top: 1px solid var(--line); }
  .steps li:first-child { border-top: none; }
}

/* FAQ */
.faq { border-top: 1.5px solid var(--ink); max-width: 860px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 4px; font-weight: 650; color: var(--ink); font-size: 1.08rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font: 400 1.6rem/1 var(--font); color: var(--ink); flex-shrink: 0; }
.faq details[open] summary::after { content: '−'; }
.faq .answer { padding: 0 4px 22px; max-width: 760px; }
.faq .answer p + p { margin-top: 0.8rem; }

/* Aufruf am Ende */
.cta-band { border: 2px solid var(--ink); border-radius: 4px; padding: 44px; display: flex; justify-content: space-between; align-items: center; gap: 28px; flex-wrap: wrap; background: #fff; }
.cta-band h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.cta-band p { margin-top: 8px; }
@media (max-width: 640px) { .cta-band { padding: 26px 22px; } }

/* Hinweis-Kästen */
.note { border: 1px solid var(--line); border-left: 4px solid var(--primary); background: var(--surface); padding: 16px 18px; border-radius: 2px; }

/* ── Formular ─────────────────────────────────────────────────────────── */
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.form .span-2 { grid-column: 1 / -1; }
@media (max-width: 640px) { .form { grid-template-columns: minmax(0, 1fr); } }
.field { display: flex; flex-direction: column; gap: 7px; font-weight: 600; color: var(--ink); font-size: 0.95rem; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 0.7rem 0.9rem; background: var(--surface); color: var(--ink);
  border: 1px solid #c9ccd1; border-radius: 2px; font: 400 1rem var(--font);
}
.field textarea { min-height: 150px; resize: vertical; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--primary-dark); background: #fff; box-shadow: inset 0 0 0 1px var(--primary-dark); }
.field .hint { font-weight: 400; color: var(--muted); font-size: 0.85rem; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 0.95rem; color: var(--ink-2); }
.consent input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--primary-dark); flex-shrink: 0; }
.hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.form-status { padding: 14px 16px; border-radius: 2px; font-weight: 600; }
.form-status[hidden] { display: none; }
.form-status--ok { background: var(--primary-tint); border: 1px solid var(--primary-dark); color: var(--ink); }
.form-status--err { background: #fef2f2; border: 1px solid var(--error); color: #991b1b; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
.contact-card { border: 1px solid var(--line); border-radius: 4px; padding: 26px; display: flex; flex-direction: column; gap: 14px; background: var(--surface); }
.contact-card a { font-weight: 600; }

/* ── Fuß ──────────────────────────────────────────────────────────────── */
.site-footer { border-top: 1.5px solid var(--ink); margin-top: 88px; padding: 56px 0 28px; font-size: 0.95rem; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.footer-brand p { margin-top: 14px; max-width: 360px; }
.footer-title { font-weight: 700; color: var(--ink); margin-bottom: 10px; text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.08em; }
.site-footer ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.site-footer a { color: var(--ink-2); text-decoration: none; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; }
.footer-bottom { position: relative; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 44px; padding-top: 20px; color: var(--muted); font-size: 0.875rem; }
.footer-bottom::before { content: ''; position: absolute; left: 20px; right: 20px; top: 0; border-top: 1px solid var(--line); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }

/* ── Kleinkram ────────────────────────────────────────────────────────── */
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.center { text-align: center; }
.mt-lg { margin-top: 44px; }
.mt-sm { margin-top: 14px; }
.small { font-size: 0.875rem; }
.h-card { font-size: 1.3rem; }
.page-head { padding: 28px 0 56px; }
.page-head h1 { margin: 6px 0 18px; max-width: 900px; }
/* „Datenschutzerklärung“ ist ein Wort und breiter als ein 360-px-Handy — die Seite ließ sich seitlich
   schieben (gemessen 29.09.2026: 20 px bei 360, 60 px bei 320). Die Überschrift trägt deshalb ein
   weiches Trennzeichen (pages.mjs); break-word fängt alles andere ab, statt überzulaufen. */
.legal h1 { overflow-wrap: break-word; }
.legal h2 { font-size: 1.35rem; margin: 2rem 0 0.6rem; }
.legal h3 { font-size: 1.1rem; margin: 1.4rem 0 0.4rem; }
.legal p, .legal li { max-width: 780px; }
.legal ul { padding-left: 1.2rem; }
.legal p + p { margin-top: 0.8rem; }
@media (max-width: 640px) {
  .section { padding: 64px 0; }
  .hero { padding: 36px 0 48px; }
  .lead { font-size: 1.08rem; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; }
  .header-cta.btn, .header-login.btn { width: auto; }
}