/*
 * Shared layout for every page on reizflanke.de.
 * Header + footer pattern is consistent; the body slot is per-page.
 */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* Force Futura globally. Native <button>, <input>, <select>,
     <textarea> and many user-agent stylesheets pin their own
     system font and don't inherit family from <body> — repeating
     the family on the universal selector closes that gap. */
  font-family: var(--font-system);
}

/* Re-apply mono where it actually belongs — version numbers and
   inline code samples. Everything else stays on Futura. */
.version-line .value,
code, kbd, samp, pre {
  font-family: var(--font-mono);
}

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-system);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
body {
  display: flex;
  flex-direction: column;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

/* ── Header ───────────────────────────────────────────────────── */
.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 10;
}
.site-header__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.site-header__brand {
  display: flex;
  align-items: center;
}
.site-header__brand .brand-mark {
  height: 26px;
  width: auto;
  display: block;
}
.site-header__brand:hover { text-decoration: none; }
.site-header__nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.site-header__nav a { color: var(--muted); }
.site-header__nav a:hover { color: var(--accent); text-decoration: none; }
.site-header__nav a.active { color: var(--accent); }
.site-header__lang {
  display: flex;
  gap: 6px;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ghost);
}
.site-header__lang a { color: var(--ghost); }
.site-header__lang a.active { color: var(--accent); }
.site-header__lang .sep { color: var(--dim); }

/* ── Main column ──────────────────────────────────────────────── */
main {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 36px 20px 56px;
  width: 100%;
  flex: 1;
}
.center-col {
  max-width: var(--content-max);
  margin: 0 auto;
  text-align: center;
}

/* Hero block — same shape on every page (home, install, instructions,
   privacy, impressum, license). Three concentric circles + AIRLOCK
   wordmark + optional subtitle. The home page is the only one that
   adds the longer lede + store badges below. */
.hero {
  padding: 24px 0 18px;
  text-align: center;
}
.hero .logo {
  width: 72px;
  height: 72px;
  margin: 0 auto 14px;
  display: block;
}
/* Baked brand hero (rings + "AirLock" in Futura Medium) — a PNG so the
   wordmark renders identically without relying on Futura being installed.
   Source: assets/img/_src/hero-airlock.html. Links to the locale home. */
.hero .hero-brand {
  display: inline-block;
  margin: 0 auto 14px;
  line-height: 0;
}
.hero .hero-brand img {
  display: block;
  width: 200px;
  height: auto;
}
/* Visually-hidden heading kept for SEO / screen readers now that the
   wordmark is an image. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.hero h1, .hero .hero-title {
  font-family: Futura, "Century Gothic", "Trebuchet MS", sans-serif;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 4px;
  margin-bottom: 6px;
}

/* JSON-driven copy is hidden until content.js has either replaced the
   fallback with the JSON value or given up on the fetch. The inline
   <head> bootstrap adds `html.js-content` synchronously, so the
   fallback never paints before JSON resolves. JS-disabled browsers
   never get the `js-content` class and see the HTML fallback. */
html.js-content:not(.content-ready) [data-content] { visibility: hidden; }
.hero .sub {
  font-size: 11px;
  color: var(--ghost);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.hero .lede {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 480px;
  margin: 14px auto 28px;
}

/* ── Page-section headings ────────────────────────────────────── */
.page-title {
  font-family: Futura, "Century Gothic", "Trebuchet MS", sans-serif;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.page-lede {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 28px;
}
section { margin-bottom: 28px; }
section h2 {
  font-size: 13px;
  color: var(--accent);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 12px;
}
section h3 {
  font-size: 12px;
  color: var(--text);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 18px 0 8px;
}
section p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  margin-bottom: 8px;
}
section p b, section p strong { color: var(--text); font-weight: 600; }
section ul, section ol {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  margin: 8px 0 12px 22px;
}
section li { margin-bottom: 4px; }

/* ── Card pattern ─────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--card-padding);
  margin-bottom: 16px;
}
.card h2 {
  font-size: 13px;
  color: var(--accent);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.card p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  margin-bottom: 8px;
}
.card p:last-child { margin-bottom: 0; }
.card b { color: var(--text); }

/* ── Buttons ──────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border-radius: var(--radius-button);
  font-family: var(--font-system);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  text-decoration: none;
  border: 1px solid var(--accent);
}
.btn--primary {
  background: var(--accent);
  color: var(--bg);
}
.btn--primary:hover {
  text-decoration: none;
  filter: brightness(1.08);
}
.btn--ghost {
  background: transparent;
  color: var(--accent);
}
.btn--ghost:hover {
  background: var(--accent);
  color: var(--bg);
  text-decoration: none;
}
.btn--disabled {
  pointer-events: none;
  opacity: 0.45;
  cursor: not-allowed;
}

/* ── Store-badge placeholders (landing) ───────────────────────── */
.stores {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 18px;
}
.store-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 18px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-button);
  min-width: 160px;
  color: var(--text);
  pointer-events: none; /* "Coming soon" stub */
}
.store-badge__name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.store-badge__platform {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ghost);
}
.store-badge__hint {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
}

/* ── Instructions: OLED screenshot blocks ─────────────────────── */
.oled {
  display: block;
  margin: 0 auto;
  max-width: 320px;
  width: 100%;
  /* 128 × 64 source — preserve crisp pixels rather than smooth them. */
  image-rendering: pixelated;
  background: #000;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 12px;
}
.oled-caption {
  text-align: center;
  font-size: 10px;
  color: var(--ghost);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* Side-by-side step blocks on the Instructions page —
   OLED screenshot left, text body right. Stacks on narrow screens. */
.step {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 22px;
  align-items: center;
  margin-bottom: 16px;
  padding: 18px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-card);
}
.step .oled { margin: 0; }
.step h3 {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--accent);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.step p { margin-bottom: 6px; }
.step p:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
  .step { grid-template-columns: 1fr; padding: 14px; }
  .step .oled { max-width: 260px; }
}

/* ── Footer ───────────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--bg);
  padding: 22px 20px;
  margin-top: auto;
}
.site-footer__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ghost);
}
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.site-footer__links a { color: var(--ghost); }
.site-footer__links a:hover { color: var(--accent); text-decoration: none; }
.site-footer__lang {
  margin-left: auto;
  display: flex;
  gap: 8px;
  color: var(--ghost);
}
.site-footer__lang a { color: var(--ghost); }
.site-footer__lang a.active { color: var(--accent); }

/* ── Inline TODO marker (Impressum etc.) ──────────────────────── */
.todo {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--accent);
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 700;
}

/* ── Install page — ESP Web Tools chrome ──────────────────────── */
/* Install uses the universal .hero block; only the version readout
   below the subtitle is install-specific. */
.install-version {
  text-align: center;
  font-size: 13px;
  color: var(--accent);
  letter-spacing: 1px;
  margin: -8px 0 16px;
}
.version-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-card);
  padding: 18px 20px;
  max-width: var(--content-max);
  width: 100%;
  margin: 0 auto 18px;
}
.version-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
}
.version-line .label {
  font-size: 11px;
  color: var(--ghost);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.version-line .value {
  font-size: 14px;
  color: var(--text);
  font-weight: 600;
  font-family: var(--font-mono);
}
.version-line .value.muted { color: var(--faded); font-weight: 400; }
.check-btn {
  margin-top: 12px;
  width: 100%;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.check-btn:hover:not(:disabled) { background: var(--accent); color: var(--bg); }
.check-btn:disabled { opacity: .5; cursor: not-allowed; }
.status {
  margin-top: 10px;
  font-size: 12px;
  text-align: center;
  min-height: 16px;
  line-height: 1.4;
}
.status.up-to-date { color: var(--ok); }
.status.update-available { color: var(--accent); }
.status.error { color: var(--warn); }
.flash-wrap {
  margin: 8px 0 24px;
  text-align: center;
}
esp-web-install-button {
  --esp-tools-button-color: var(--bg);
  --esp-tools-button-text-color: var(--bg);
  --esp-tools-button-border-radius: 10px;
}
esp-web-install-button button {
  background: var(--accent) !important;
  color: var(--bg) !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 14px 28px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  cursor: pointer;
}
.unsupported {
  display: none;
  color: var(--warn);
  font-size: 13px;
  margin-top: 8px;
}

/* On the install page everything stacks at the content-max width so
   the version card, the two info cards, and the footnote all line up
   on the same vertical rails. Without this the .card rule would let
   them spread to the full main column (--page-max ≈ 720 px) while
   .version-card is capped at --content-max ≈ 420 px. */
body[data-page="install"] .card,
body[data-page="install"] main > p {
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
}

/* ── App-Card row (homepage hero) ─────────────────────────────── */
/* Replaces the legacy .store-badge row. Three cards side-by-side
   on desktop, two below 900 px, stacked below 640 px. */
.app-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
  max-width: var(--page-max);
  margin: 32px auto 0;
  padding: 0 16px;
}
/* The row lives inside .center-col (--content-max ≈ 420 px), which is too
   narrow for three tiles — left as-is they overflow the column to the right
   and the row reads off-centre. Break it out of the reading column so it
   spans the full main column and stays centred on the page. main carries
   20 px of horizontal padding, so its content box is (--page-max - 40px),
   and a negative inline margin pulls the row symmetrically out of center-col. */
@media (min-width: 901px) {
  .app-cards {
    width: calc(var(--page-max) - 40px);
    margin-inline: calc((var(--content-max) - (var(--page-max) - 40px)) / 2);
  }
}
@media (max-width: 900px) {
  .app-cards {
    grid-template-columns: repeat(2, minmax(0, 210px));
    justify-content: center;
  }
  /* Three tiles don't divide evenly into two columns, so the third lands
     alone on the second row. Span it across both columns and centre it
     instead of letting it stick to the left rail. */
  .app-card:last-child:nth-child(2n + 1) {
    grid-column: 1 / -1;
    width: 210px;
    justify-self: center;
  }
}
@media (max-width: 640px) {
  .app-cards {
    grid-template-columns: 1fr;
    gap: 12px;
    justify-content: stretch;
  }
  /* Reset the two-column lone-card override so cards fill the stack. */
  .app-card:last-child:nth-child(2n + 1) {
    width: auto;
    justify-self: stretch;
  }
}

.app-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px 20px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  transition: border-color 0.15s;
}
.app-card--live:hover { border-color: var(--accent); text-decoration: none; }
.app-card--coming {
  opacity: 0.85;
  cursor: default;
}
/* Direct-APK / sideload card: Android-green hover hint. */
.app-card--apk:hover { border-color: #3ddc84; }

.app-card__icon {
  width: 88px;
  height: 88px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Light grey shadow: stronger + wider — outline hint + lifted glow. */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10),
              0 10px 40px 8px rgba(255, 255, 255, 0.20);
}
.app-card__icon img { width: 88px; height: 88px; display: block; }

.app-card__name {
  color: var(--text);
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.app-card__badge img { display: block; height: 40px; width: auto; }

.app-card__hint {
  color: var(--ghost);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ── Hero divider ─────────────────────────────────────────────── */
.hero-divider {
  margin: 56px auto 40px;
  width: 80px;
  height: 1px;
  border: 0;
  background: var(--border);
}

/* ── Newsletter section (homepage, /de/ only) ────────────────── */
/* Ported from coming-soon/index.html's inline .signup-* CSS.
   Class prefix renamed to .newsletter__* for BEM consistency.
   Behavior identical to the coming-soon form: same Brevo action
   URL, same hidden honeypot + locale + html_type fields. */
.newsletter {
  width: 100%;
  max-width: 460px;
  margin: 0 auto 64px;
  padding: 0 16px;
  text-align: left;
}
.newsletter__intro {
  margin-bottom: 14px;
  text-align: center;
}
.newsletter__label {
  color: var(--ghost);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0;
}
.newsletter__promise {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.newsletter__row {
  display: flex;
  gap: 8px;
}
.newsletter__row input[type=email] {
  flex: 1;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text);
  font-family: var(--font-system);
  font-size: 14px;
  letter-spacing: 1px;
  padding: 12px 14px;
  caret-color: var(--accent);
}
.newsletter__row input[type=email]::placeholder { color: var(--ghost); }
.newsletter__row input[type=email]:focus {
  outline: none;
  border-color: var(--accent);
}
.newsletter__row button {
  background: var(--accent);
  border: 0;
  border-radius: 3px;
  color: #0a0a0a;
  cursor: pointer;
  font-family: var(--font-system);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 2px;
  padding: 0 18px;
  text-transform: uppercase;
  transition: background 0.1s;
  white-space: nowrap;
}
.newsletter__row button:hover { background: #f4ff7d; }
.newsletter__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
  cursor: pointer;
}
.newsletter__consent input[type=checkbox] {
  margin: 3px 0 0 0;
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
  flex-shrink: 0;
  cursor: pointer;
}
.newsletter__consent a { color: var(--muted); text-decoration: underline; }
.newsletter__consent a:hover { color: var(--text); }
.newsletter__brevo {
  margin: 10px 0 0;
  font-size: 10px;
  line-height: 1.5;
  color: var(--ghost);
}
.newsletter__brevo a { color: var(--ghost); text-decoration: underline; }
.newsletter__brevo a:hover { color: var(--muted); }
.newsletter__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
@media (max-width: 480px) {
  .newsletter__row { flex-direction: column; }
  .newsletter__row button { padding: 12px 14px; }
}

/* ── Stub-Page layout (ios.html, wifi.html) ──────────────────── */
.page-stub {
  max-width: 540px;
  margin: 96px auto;
  padding: 0 24px;
  text-align: center;
}
.page-stub h1 {
  font-size: 28px;
  letter-spacing: 3px;
  color: var(--text);
  font-weight: 400;
  margin: 0 0 24px;
}
.page-stub .lede {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 32px;
}
.page-stub__cta {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0;
}
.page-stub__cta a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
}
.page-stub__cta a:hover { color: var(--text); border-bottom-color: var(--accent); }

/* ── Legal-dialog (Datenschutz/Impressum modal) ──────────────── */
/* Ported from coming-soon/index.html. Triggered by
   <a data-legal="datenschutz" href="..."> inside the newsletter
   consent text. JS handler lives in /assets/js/legal-dialog.js. */
.legal-dialog {
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px 26px 22px;
  max-width: 460px;
  width: calc(100% - 32px);
  font-family: var(--font-system);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
}
.legal-dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
.legal-dialog h2 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
}
.legal-dialog p {
  margin: 10px 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
}
.legal-dialog a { color: var(--accent); text-decoration: none; }
.legal-dialog .dlg-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.legal-dialog .dlg-close:hover { color: var(--text); }
.legal-dialog .dlg-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Hero "Firmware update" CTA — keep it from touching the app-card row
   (EN: no newsletter under the cards) or the newsletter section (DE).
   The button class itself is shared site-wide; this rule is hero-scoped. */
.hero > .btn--ghost {
  margin-top: 48px;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 540px) {
  .site-header__inner { gap: 10px; padding: 12px 14px; }
  .site-header__brand { font-size: 12px; }
  .site-header__nav { gap: 10px; }
  main { padding: 24px 14px 40px; }
  .hero h1 { font-size: 24px; }
  .page-title { font-size: 20px; }
}
