/* ------------------------------------------------------------------------
   Thai Visum — same theme as the Dinner app: a first-class menu card.
   White ground, warm neutral tints, deep gold labels set small, uppercase
   and letterspaced, notes in italic, 1px rules instead of shadows.
   ------------------------------------------------------------------------ */

:root {
  color-scheme: light;

  --bg: #ffffff;
  --tint: #f7f6f3;
  --tint-deep: #f0eee9;

  --ink: #2e2b26;
  --ink-soft: #4b4740;
  --muted: #5f5a51;
  --faint: #706b61;

  --gold: #86681d;
  --gold-soft: #a98c46;
  --gold-wash: #faf6ea;
  --gold-deep: #6f5617;

  --line: #e2ded4;
  --line-soft: #eeebe3;

  --danger: #9c3226;
  --danger-line: #e3c6c1;
  --danger-wash: #fbf4f3;
  --ok: #2f6b4f;
  --ok-line: #cadfd2;
  --ok-wash: #f3f8f4;

  --ui: "Source Sans 3", "Source Sans Pro", ui-sans-serif, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --radius: 2px;

  --wrap: 1080px;
  --wrap-narrow: 720px;

  /* The prajam yam rosette, carried over from the Dinner app as the mark of
     the house. Its white ring is a stroke in the page's own ground, so it
     only works on a light background. */
  --ornament: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='1 1 14 14'%3E%3Cg fill='%238c6d1f'%3E%3Cpath d='M8 1C5.1 3.66 5.91 7.16 8 8 10.09 7.16 10.9 3.66 8 1ZM8 4.1C8.85 5.58 8.61 7.53 8 8 7.39 7.53 7.15 5.58 8 4.1Z'/%3E%3Cpath d='M15 8C12.34 5.1 8.84 5.91 8 8 8.84 10.09 12.34 10.9 15 8ZM11.9 8C10.42 8.85 8.47 8.61 8 8 8.47 7.39 10.42 7.15 11.9 8Z'/%3E%3Cpath d='M8 15C10.9 12.34 10.09 8.84 8 8 5.91 8.84 5.1 12.34 8 15ZM8 11.9C7.15 10.42 7.39 8.47 8 8 8.61 8.47 8.85 10.42 8 11.9Z'/%3E%3Cpath d='M1 8C3.66 10.9 7.16 10.09 8 8 7.16 5.91 3.66 5.1 1 8ZM4.1 8C5.58 7.15 7.53 7.39 8 8 7.53 8.61 5.58 8.85 4.1 8Z'/%3E%3Cpath d='M11.25 4.75C8.67 4.64 7.42 6.64 8 8 9.36 8.58 11.36 7.33 11.25 4.75Z'/%3E%3Cpath d='M11.25 11.25C11.36 8.67 9.36 7.42 8 8 7.42 9.36 8.67 11.36 11.25 11.25Z'/%3E%3Cpath d='M4.75 11.25C7.33 11.36 8.58 9.36 8 8 6.64 7.42 4.64 8.67 4.75 11.25Z'/%3E%3Cpath d='M4.75 4.75C4.64 7.33 6.64 8.58 8 8 8.58 6.64 7.33 4.64 4.75 4.75Z'/%3E%3Cpath d='M6.85 8A1.15 1.15 0 1 1 9.15 8 1.15 1.15 0 1 1 6.85 8Z'/%3E%3C/g%3E%3Cpath d='M6.05 8A1.95 1.95 0 1 1 9.95 8 1.95 1.95 0 1 1 6.05 8Z' fill='none' stroke='%23ffffff' stroke-width='0.85' stroke-linecap='round'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.55 var(--ui);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a { color: var(--gold); text-decoration-color: rgba(140,109,31,.32); text-underline-offset: 2px; }
a:hover { color: var(--gold-deep); text-decoration-color: currentColor; }

/* Headings are set the way the menu sets its categories: small, gold,
   uppercase, widely tracked. Size carries the hierarchy, not weight. */
h1, h2, h3, h4 { margin: 0 0 .5em; color: var(--gold); font-weight: 600; }

h1 {
  font-size: clamp(23px, 1.1rem + 1.6vw, 30px);
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.28;
}
h2 {
  font-size: 15px;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.4;
}
h3 { font-size: 19px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink); line-height: 1.4; }
h4, .label-head {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); line-height: 1.5; font-weight: 600;
}

p { margin: 0 0 1em; }
hr { border: 0; border-top: 1px solid var(--line-soft); margin: 34px 0; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 28px; }
.wrap-narrow { max-width: var(--wrap-narrow); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  background: var(--gold); color: #fff; padding: 10px 16px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase;
  border-radius: 0 0 var(--radius) var(--radius); text-decoration: none;
  transition: top .15s;
}
.skip-link:focus { top: 0; color: #fff; }

/* ------------------------------------------------------------------ header */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 20px; min-height: 66px; }

.brand {
  display: inline-flex; align-items: center; gap: 11px;
  text-decoration: none; white-space: nowrap;
  font-size: 15px; font-weight: 600; letter-spacing: .17em;
  text-transform: uppercase; color: var(--gold);
}
.brand:hover { color: var(--gold-deep); }
.brand-mark {
  width: 22px; height: 22px; flex: none;
  background: var(--ornament) center / contain no-repeat;
}
.brand-sub {
  display: block; margin-top: 2px;
  font-size: 10px; font-weight: 400; letter-spacing: .12em;
  color: var(--faint); text-transform: uppercase;
}

.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav a {
  padding: 8px 9px; text-decoration: none;
  font-size: 12.5px; letter-spacing: .04em; color: var(--muted);
  border-radius: var(--radius);
  white-space: nowrap;
}
.nav a:hover { color: var(--gold); background: var(--gold-wash); }
.nav a.is-active { color: var(--gold); border-bottom: 1px solid var(--gold-soft); border-radius: 0; }

.lang-toggle { display: inline-flex; gap: 6px; flex: none; }
.lang-toggle button {
  appearance: none; cursor: pointer;
  font: 600 10.5px/1 var(--ui); letter-spacing: .15em; text-transform: uppercase;
  color: var(--muted); background: transparent;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 11px;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.lang-toggle button:hover { color: var(--gold); border-color: var(--gold-soft); background: var(--gold-wash); }
.lang-toggle button[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: #fff; }

.nav-toggle {
  display: none; appearance: none; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: transparent; color: var(--gold);
  width: 40px; height: 38px; font-size: 15px; padding: 0;
}

/* Between the mobile menu and the full-width layout the row is tight in
   German ("Brauche ich ein Visum?" alone is twice the width of "Contact"),
   so the links give up a little air before the hamburger takes over. */
@media (max-width: 1180px) {
  .header-inner { gap: 14px; }
  .nav { gap: 0; }
  .nav a { padding: 8px 6px; font-size: 12px; letter-spacing: .02em; }
  .nav a.nav-cta { padding: 9px 10px; margin-left: 2px; }
}

@media (max-width: 1024px) {
  .nav-toggle { display: block; order: 3; }
  .lang-toggle { order: 2; margin-left: auto; }
  .nav {
    order: 4; width: 100%; margin: 0; display: none;
    flex-direction: column; align-items: stretch; gap: 0;
  }
  .nav.is-open { display: flex; }
  .nav a { border-bottom: 1px solid var(--line-soft); border-radius: 0; }
  .nav a.is-active { border-bottom-color: var(--gold-soft); }
  .header-inner { padding-block: 10px; min-height: 0; gap: 14px; }
}

/* ----------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 11.5px/1 var(--ui); letter-spacing: .15em; text-transform: uppercase;
  cursor: pointer; text-decoration: none; text-align: center;
  border: 1px solid var(--gold); border-radius: var(--radius);
  padding: 14px 26px; background: var(--gold); color: #fff;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: #fff; }
.btn-primary, .btn-gold { background: var(--gold); border-color: var(--gold); color: #fff; }
.btn-ghost { background: transparent; color: var(--gold); border-color: var(--line); }
.btn-ghost:hover { background: var(--gold-wash); border-color: var(--gold); color: var(--gold); }
.btn-sm { padding: 10px 16px; font-size: 10.5px; letter-spacing: .13em; }
/* .75 keeps a busy label ("Wird gesendet …") readable at 3.2:1 while still
   looking inactive; .4 left it at 1.8:1. */
.btn[disabled], .btn[aria-disabled="true"] { opacity: .75; pointer-events: none; }

/* -------------------------------------------------------------------- hero */

/* The cover of the card: centred, the title in gold small caps, the rosette
   set beneath it, everything on the page's own white. */
.hero {
  background: var(--bg);
  border-bottom: 1px solid var(--line-soft);
  padding: clamp(52px, 6vw, 84px) 0 clamp(40px, 5vw, 62px);
  text-align: center;
}
.hero h1 {
  font-size: clamp(26px, 1rem + 2.4vw, 36px);
  letter-spacing: .17em;
  margin: 0 auto 22px;
  max-width: 18ch;
}
.hero h1::after {
  content: ""; display: block; width: 28px; height: 28px;
  background: var(--ornament) center / contain no-repeat;
  margin: 24px auto 0;
}
.hero-lede {
  max-width: 56ch; margin: 0 auto 30px;
  font-size: 17.5px; font-style: italic; line-height: 1.6; color: var(--ink-soft);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

.eyebrow {
  display: block; margin-bottom: 18px;
  font-size: 11px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--faint);
}


/* ---------------------------------------------------------------- sections */

.section { padding: clamp(46px, 5vw, 72px) 0; }
.section-soft { background: var(--tint); }
.section-tint { background: var(--gold-wash); }
.section + .section:not(.section-soft):not(.section-tint) { border-top: 1px solid var(--line-soft); }

.section-head { max-width: 60ch; margin-bottom: 34px; }
.section-head p { color: var(--muted); font-style: italic; font-size: 16.5px; margin-bottom: 0; }
.section-head.center { margin-inline: auto; text-align: center; }

/* ------------------------------------------------------------------- cards */

.grid { display: grid; gap: 18px; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(262px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.grid-4 { grid-template-columns: repeat(auto-fit, minmax(206px, 1fr)); }

.card {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px 26px;
}
.card h3 { margin-bottom: .3em; }
.card p { color: var(--ink-soft); font-size: 16px; font-style: italic; margin-bottom: 0; }

.card-link {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  transition: border-color .18s ease, background .18s ease;
}
.card-link:hover { border-color: var(--gold); background: var(--gold-wash); color: inherit; }

/* A numeral in a bordered square, set like the menu's course numbers. */
.card-step {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; margin-bottom: 16px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--gold-wash); color: var(--gold);
  font-size: 13px; font-weight: 600; letter-spacing: .04em;
}
.card-link:hover .card-step { border-color: var(--gold-soft); background: var(--bg); }

.card-foot {
  margin-top: auto; padding-top: 18px;
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold);
}
.card-foot span { transition: transform .18s ease; }
.card-link:hover .card-foot span { transform: translateX(4px); }

/* ------------------------------------------------------------------- pills */

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--gold-wash); color: var(--gold);
  white-space: nowrap;
}
.badge-gold  { background: var(--gold); border-color: var(--gold); color: #fff; }
.badge-green { background: var(--ok-wash); border-color: var(--ok-line); color: var(--ok); }
.badge-red   { background: var(--danger-wash); border-color: var(--danger-line); color: var(--danger); }
.badge-amber { background: var(--tint-deep); border-color: var(--line); color: var(--muted); }

/* ------------------------------------------------------------------ tables */

.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; font-size: 15.5px; }
th, td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
thead th {
  background: var(--tint); color: var(--gold);
  font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }

/* ---------------------------------------------------------------- messages */

.note {
  font-size: 15px; padding: 15px 17px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--tint); color: var(--ink-soft);
}
.note strong { color: var(--gold); font-weight: 600; }
.note-warn { border-color: var(--line); background: var(--gold-wash); color: var(--ink-soft); }
.note-warn strong { color: var(--gold); }
.note-ok { border-color: var(--ok-line); background: var(--ok-wash); color: var(--ok); }
.note-ok strong { color: var(--ok); }
.note-red { border-color: var(--danger-line); background: var(--danger-wash); color: var(--danger); }
.note-red strong { color: var(--danger); }


/* ------------------------------------------------------------------ footer */

.site-footer {
  background: var(--tint); border-top: 1px solid var(--line);
  padding: 56px 0 30px; font-size: 15px; color: var(--muted);
}
.site-footer .label-head { margin-bottom: 14px; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--gold); }


.footer-disclaimer {
  margin-top: 40px; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); font-size: 13.5px; line-height: 1.6; color: var(--muted);
}

.footer-bottom {
  margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  font-size: 11.5px; letter-spacing: .04em; color: var(--faint);
}
/* Links in the small print differ from the text around them by shade alone,
   which is not enough to see; the underline says "link". */
.footer-bottom a { text-decoration: underline; text-underline-offset: 2px; }

/* -------------------------------------------------------------- page heads */

.page-head {
  background: var(--tint); border-bottom: 1px solid var(--line);
  padding: 46px 0 42px;
}
.page-head h1 { margin-bottom: 16px; }
.page-head p { max-width: 62ch; margin-bottom: 0; font-size: 17px; font-style: italic; color: var(--ink-soft); }

.breadcrumb {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 20px;
}
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb .sep { color: var(--faint); }

/* ------------------------------------------------------------------ layout */

.layout-side { display: grid; grid-template-columns: minmax(0,1fr) 272px; gap: 52px; align-items: start; }
@media (max-width: 980px) { .layout-side { grid-template-columns: 1fr; gap: 34px; } }

.sidebar { position: sticky; top: 92px; display: grid; gap: 18px; }
/* The apply page groups its cards per service; a shown group spaces its cards like the sidebar does. */
.sidebar > [data-service]:not([hidden]) { display: grid; gap: 18px; }
@media (max-width: 980px) { .sidebar { position: static; } }
.sidebar-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 20px; }
.sidebar-card .label-head { margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); }
.sidebar-card p { font-size: 15px; font-style: italic; color: var(--muted); }

/* ------------------------------------------------------- purpose accordion */

.purpose {
  border: 1px solid var(--line); border-radius: var(--radius);
  margin-bottom: 14px; background: var(--bg); scroll-margin-top: 88px;
}
.purpose > summary {
  cursor: pointer; list-style: none;
  padding: 20px 22px; display: flex; align-items: flex-start; gap: 14px;
  transition: background .16s ease;
}
.purpose > summary::-webkit-details-marker { display: none; }
.purpose > summary:hover { background: var(--gold-wash); }
.purpose[open] > summary { border-bottom: 1px solid var(--line-soft); }
.purpose-title {
  margin: 0; font-size: 18px; font-weight: 400; letter-spacing: 0;
  text-transform: none; color: var(--ink); line-height: 1.4;
}

.purpose-num {
  flex: none; width: 26px; height: 26px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--gold-wash); color: var(--gold);
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
}
.purpose[open] .purpose-num { background: var(--gold); border-color: var(--gold); color: #fff; }
/* Number and chevron hold the first line of a heading that wraps to several. */
.purpose-num, .purpose-chevron { margin-top: 2px; }
.purpose-chevron {
  margin-left: auto; flex: none; width: 8px; height: 8px; align-self: flex-start;
  border-right: 1.5px solid var(--faint); border-bottom: 1.5px solid var(--faint);
  transform: rotate(45deg); transition: transform .2s ease;
}
.purpose[open] .purpose-chevron { transform: rotate(-135deg); margin-top: 6px; }
.purpose-body { padding: 24px 22px 26px; }

/* ------------------------------------------------------------------- facts */

/* Set like the event details on the menu: a tiny gold label over a value at
   reading size. */
.fact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 20px 26px; margin: 0 0 28px; }
.fact { padding: 0; }
.fact dt { font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.fact dd { margin: 0; font-size: 17.5px; line-height: 1.4; color: var(--ink); white-space: pre-line; }
.fact-fee dd { color: var(--gold); }

.subhead {
  display: flex; align-items: center; gap: 12px;
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); margin: 30px 0 14px;
}
.subhead::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }
.subhead:first-child { margin-top: 0; }

/* Documents read as a numbered list on the card, not as boxes. */
.doc-list { list-style: none; margin: 0; padding: 0; counter-reset: doc; }
.doc-list li {
  counter-increment: doc; position: relative;
  padding: 0 0 0 30px; font-size: 16.5px; line-height: 1.5; color: var(--ink);
}
.doc-list li + li { margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--line-soft); }
.doc-list li::before {
  content: counter(doc) "."; position: absolute; left: 0;
  color: var(--gold); font-size: 14px; font-weight: 600; line-height: 1.75;
}
.doc-list li + li::before { top: 15px; }
.doc-list li .sub {
  display: block; margin-top: 5px; padding-left: 13px;
  border-left: 1px solid var(--line); color: var(--ink-soft);
  font-size: 15.5px; font-style: italic;
}

.bullets { margin: 0; padding-left: 19px; display: grid; gap: 9px; font-size: 16px; color: var(--ink-soft); }
.bullets li::marker { color: var(--gold-soft); }

/* ------------------------------------------------------------------- price */

/* What the client pays us, set apart from the consulate's own fee above it. */
/* The tracking code, the one time it is announced: after payment. */
.tracking-code { font-size: 1.2em; letter-spacing: .14em; color: var(--gold-deep); white-space: nowrap; }

/* Scripts hide price elements when no real figure is available; a display rule
   on the element itself must not win over that. */
[hidden] { display: none !important; }

.price-box {
  margin: 26px 0 4px; padding: 20px 22px;
  border: 1px solid var(--gold-soft); border-radius: var(--radius);
  background: var(--gold-wash);
}
.price-main { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.price-label {
  font-size: 10.5px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold);
}
.price-value {
  margin-left: auto; font-size: 26px; font-weight: 300; color: var(--gold); line-height: 1.2;
}
.price-value.is-on-request { font-size: 19px; font-style: italic; color: var(--gold-deep); }
.price-remark {
  margin: 12px 0 0; font-size: 14px; font-style: italic;
  line-height: 1.5; color: var(--ink-soft);
}
/* One total per entry option, where the consulate charges two different fees.
   Totals only — the amounts they are made of are never shown. */
.price-options {
  list-style: none; margin: 14px 0 0; padding: 11px 0 0;
  border-top: 1px solid rgba(140, 109, 31, .18);
  display: grid; gap: 7px;
}
.price-options li { display: flex; align-items: baseline; gap: 14px; }
.price-option-label { font-size: 13.5px; color: var(--ink-soft); }
.price-option-value {
  margin-left: auto; font-size: 16px; font-weight: 600; color: var(--gold);
  white-space: nowrap;
}

.price-box .btn { margin-top: 16px; }

@media (max-width: 520px) {
  .price-value { margin-left: 0; }
}

/* The application call in the header, set apart from the plain nav links. */
.nav a.nav-cta {
  border: 1px solid var(--gold); background: var(--gold); color: #fff;
  font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: 10.5px;
  padding: 9px 12px; margin-left: 4px;
}
.nav a.nav-cta:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: #fff; }
.nav a.nav-cta.is-active { border-radius: var(--radius); }
@media (max-width: 1024px) {
  .nav a.nav-cta { margin: 8px 0 0; text-align: center; border-radius: var(--radius); }
}

/* ------------------------------------------------------------------- tools */

.tool-shell { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.tool-progress { height: 2px; background: var(--line-soft); }
.tool-progress-bar { height: 100%; background: var(--gold); width: 0; transition: width .35s ease; }
.tool-body { padding: clamp(26px, 3.5vw, 42px); }

.step-meta { font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); margin-bottom: 12px; }
.step-q { font-size: clamp(20px, 1rem + .9vw, 25px); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink); margin-bottom: 10px; }
.step-hint { color: var(--muted); font-style: italic; font-size: 16.5px; margin-bottom: 28px; }

.opt-list { display: grid; gap: 10px; margin-bottom: 30px; }
.opt {
  display: flex; align-items: flex-start; gap: 14px; width: 100%; text-align: left;
  padding: 17px 20px; cursor: pointer;
  font: 400 16.5px/1.5 var(--ui); color: var(--ink);
  background: transparent; border: 1px solid var(--line); border-radius: var(--radius);
  letter-spacing: 0; text-transform: none;
  transition: border-color .18s ease, background .18s ease;
}
/* Hover only where there is a pointer: on a touch screen it sticks after a tap. */
@media (hover: hover) {
  .opt:hover { border-color: var(--gold); background: var(--gold-wash); }
  .opt:hover .opt-mark { border-color: var(--gold-soft); }
}
.opt.is-selected { border-color: var(--gold); background: var(--gold-wash); }
.opt-mark {
  flex: none; width: 16px; height: 16px; margin-top: 4px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); color: transparent;
  position: relative;
  transition: background .16s ease, border-color .16s ease;
}
.opt.is-selected .opt-mark::after {
  content: ""; position: absolute; left: 5px; top: 1px;
  width: 3px; height: 7px; border: solid #fff; border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.opt.is-selected .opt-mark { background: var(--gold); border-color: var(--gold); }
.opt-text { min-width: 0; }
.opt-text strong { display: block; font-weight: 400; }
.opt-text span { display: block; margin-top: 3px; font-size: 15px; font-style: italic; color: var(--muted); }

.field { margin-bottom: 28px; }
.field label {
  display: block; margin-bottom: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.field select, .field input[type="number"], .field input[type="text"],
.field input[type="email"], .field input[type="tel"], .field input[type="date"] {
  width: 100%; font: 400 16px/1.5 var(--ui); color: var(--ink);
  background: var(--tint); border: 1px solid transparent; border-radius: var(--radius);
  padding: 13px 15px;
  transition: background .16s ease, border-color .16s ease;
}
.field select {
  cursor: pointer; appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236f6a60' stroke-width='1.2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center;
}
.field input::placeholder { color: var(--faint); }
.field select:focus, .field input:focus { outline: none; background-color: var(--bg); border-color: var(--gold); }
.field .help { margin-top: 8px; font-size: 13.5px; font-style: italic; color: var(--faint); }

.tool-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tool-actions .spacer { flex: 1; }

/* ------------------------------------------------------------- the verdict */

.result-head { padding: 30px clamp(26px, 3.5vw, 42px); background: var(--tint); border-bottom: 1px solid var(--line); }
.tool-body > .result-head:first-child { margin: calc(-1 * clamp(26px, 3.5vw, 42px)); margin-bottom: 0; }
.result-head h2, .result-head h3 {
  font-size: clamp(20px, 1rem + .9vw, 25px); font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--ink); margin-bottom: 0;
}
.result-head p { margin: 8px 0 0; font-style: italic; color: var(--ink-soft); }
.result-kicker { font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }

.result-head.is-no    { background: var(--ok-wash);     border-bottom-color: var(--ok-line); }
.result-head.is-no .result-kicker { color: var(--ok); }
.result-head.is-yes   { background: var(--danger-wash); border-bottom-color: var(--danger-line); }
.result-head.is-yes .result-kicker { color: var(--danger); }
.result-head.is-maybe { background: var(--gold-wash);   border-bottom-color: var(--gold-soft); }

.reason-list { list-style: none; margin: 0; padding: 0; }
.reason-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.55; padding: 12px 0; }
.reason-list li + li { border-top: 1px solid var(--line-soft); }
.reason-ico {
  flex: none; width: 18px; height: 18px; margin-top: 4px;
  display: grid; place-items: center; border-radius: 999px;
  font-size: 11px; font-weight: 600; line-height: 1; border: 1px solid;
}
.reason-ico.ok   { background: var(--ok-wash); border-color: var(--ok-line); color: var(--ok); }
.reason-ico.no   { background: var(--danger-wash); border-color: var(--danger-line); color: var(--danger); }
.reason-ico.info { background: var(--tint); border-color: var(--line); color: var(--muted); }
.reason-ico.warn { background: var(--gold-wash); border-color: var(--gold-soft); color: var(--gold); }

.rec-card {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 22px;
  transition: border-color .18s ease, background .18s ease;
}
.rec-card:hover { border-color: var(--gold); background: var(--gold-wash); color: inherit; }
.rec-card[data-href] { cursor: pointer; }
.rec-card[data-href]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.rec-docs { font-size: .86rem; color: var(--faint); text-decoration: underline; text-underline-offset: 3px; }
.rec-docs:hover { color: var(--gold); }

/* The consulate's link behind a document label: "(Beispiel)", "(Formular)". */
.doc-link { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.doc-link:hover { color: var(--ink); }
.rec-card.is-top { border-color: var(--gold-soft); background: var(--gold-wash); }
.rec-rank {
  display: block; margin-bottom: 10px;
  font-size: 10px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: var(--gold);
}
.rec-card h3, .rec-card h4 {
  margin-bottom: .25em;
  font-size: 19px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink); line-height: 1.4;
}
.rec-card p { font-size: 16px; font-style: italic; color: var(--ink-soft); margin-bottom: 14px; }
.rec-card .fact-grid { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 16px 22px; margin: 16px 0 0; }
.rec-card .fact dd { font-size: 15.5px; }

/* --------------------------------------------------------- the path taken */

.flow-map { display: grid; }
.flow-node { display: flex; gap: 13px; }
.flow-rail { flex: none; width: 18px; display: flex; flex-direction: column; align-items: center; }
.flow-dot {
  width: 18px; height: 18px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--gold-soft); border-radius: 999px;
  background: var(--gold-wash); color: var(--gold); font-size: 9.5px; font-weight: 600;
}
.flow-dot.is-current { background: var(--gold); border-color: var(--gold); color: #fff; }
.flow-line { flex: 1; width: 1px; background: var(--line); min-height: 14px; }
.flow-content { flex: 1; min-width: 0; padding-bottom: 18px; }
.flow-q { font-size: 10px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--faint); }
.flow-a { font-size: 15px; color: var(--ink); line-height: 1.4; margin-top: 2px; }

/* ------------------------------------------------------------ narrow screens */

@media (max-width: 620px) {
}

@media print {
  .site-header, .site-footer, .tool-actions, .nav, .lang-toggle, .skip-link, .sidebar { display: none !important; }
  body { font-size: 11pt; }
  .card, .purpose { break-inside: avoid; }
  .purpose-body { display: block !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8.5pt; color: var(--faint); }
}

/* Language visibility — driven by <html lang> */
html[lang="de"] [data-i18n-lang="en"] { display: none !important; }
html[lang="en"] [data-i18n-lang="de"] { display: none !important; }

/* =============================================================================
   Application form, confirmation and admin desk
   ========================================================================== */

/* --- form fields ---------------------------------------------------------- */

.field .req { color: var(--gold); font-weight: 400; }
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea { border-color: var(--danger); background: var(--danger-wash); }
.field textarea {
  width: 100%; font: 400 16px/1.5 var(--ui); color: var(--ink);
  background: var(--tint); border: 1px solid transparent; border-radius: var(--radius);
  padding: 13px 15px; resize: vertical; min-height: 84px;
}
.field textarea:focus { outline: none; background: var(--bg); border-color: var(--gold); }
.field-error { margin: 7px 0 0; font-size: 13.5px; color: var(--danger); }

.yesno { display: flex; flex-wrap: wrap; gap: 8px; }
.yesno-btn {
  flex: 0 0 auto; min-width: 92px; cursor: pointer;
  font: 600 11px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); background: transparent;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 18px;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.yesno-btn:hover { border-color: var(--gold-soft); color: var(--gold); background: var(--gold-wash); }
.yesno-btn.is-on { background: var(--gold); border-color: var(--gold); color: #fff; }

/* --- document checklist with uploads -------------------------------------- */

.doc-upload-list li { display: block; }
.doc-text { display: block; }
.doc-upload { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }

.file-add {
  display: inline-flex; align-items: center; cursor: pointer;
  font: 600 10.5px/1 var(--ui); letter-spacing: .13em; text-transform: uppercase;
  color: var(--gold); background: transparent;
  border: 1px dashed var(--gold-soft); border-radius: var(--radius); padding: 9px 14px;
  transition: background .16s ease;
}
.file-add:hover { background: var(--gold-wash); }

.file-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink);
  background: var(--tint); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 7px 10px; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.file-remove {
  appearance: none; border: 0; background: none; cursor: pointer;
  color: var(--faint); font-size: 15px; line-height: 1; padding: 0 2px;
}
.file-remove:hover { color: var(--danger); }

.file-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 15px; }
.file-list li { padding-bottom: 9px; border-bottom: 1px solid var(--line-soft); }

/* --- review --------------------------------------------------------------- */

.review-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
/* Apply: the first question, a visa or the TDAC, as two card buttons; and the line above a chosen form. */
.service-grid { margin-top: 18px; }
.service-btn { display: block; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.service-btn h3 { margin: 0 0 8px; }
.service-btn p { margin: 0 0 14px; }

/* Review step: what to know before paying, above the confirmations. */
.review-warn { margin-top: 22px; }
.review-warn .bullets { margin-top: 8px; font-size: inherit; color: inherit; }

.review-block {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px;
}
.review-block h5 {
  margin: 0 0 12px; display: flex; align-items: baseline; gap: 10px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
}
.review-block dl { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.review-block dt { font-size: 12.5px; color: var(--faint); margin-top: 10px; }
.review-block dt:first-child { margin-top: 0; }
.review-block dd { margin: 2px 0 0; font-size: 15px; color: var(--ink); }
.review-edit {
  appearance: none; border: 0; background: none; cursor: pointer; padding: 0;
  font: 400 11px/1 var(--ui); letter-spacing: .04em; text-transform: none;
  color: var(--muted); text-decoration: underline;
}
.review-edit:hover { color: var(--gold); }

.consent {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  padding: 13px 0; border-bottom: 1px solid var(--line-soft); font-size: 15px; line-height: 1.5;
}
.consent:last-of-type { border-bottom: 0; }
.consent.is-invalid { color: var(--danger); }
.consent input[type="checkbox"] {
  appearance: none; width: 17px; height: 17px; flex: none; margin-top: 2px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg);
  position: relative; cursor: pointer;
  transition: background .14s ease, border-color .14s ease;
}
.consent input[type="checkbox"]:checked { background: var(--gold); border-color: var(--gold); }
.consent input[type="checkbox"]:checked::after {
  content: ""; position: absolute; left: 5px; top: 1px;
  width: 4px; height: 8px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}

.mini-facts { margin: 0; display: grid; gap: 0; }
.mini-facts dt { font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-top: 12px; }
.mini-facts dt:first-child { margin-top: 0; }
.mini-facts dd { margin: 3px 0 0; font-size: 15px; color: var(--ink); }

/* --- admin desk ----------------------------------------------------------- */

.admin-login { max-width: 420px; margin: 0 auto; }
.code-input {
  width: 100%; font: 300 34px/1 var(--ui); letter-spacing: .38em; text-align: center; text-indent: .38em;
  color: var(--gold); background: var(--tint);
  border: 1px solid transparent; border-radius: var(--radius); padding: 18px 12px;
}
.code-input:focus { outline: none; background: var(--bg); border-color: var(--gold); }
.code-display-inline { font-size: 22px; letter-spacing: .3em; color: var(--gold); }

.admin-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding-bottom: 18px; margin-bottom: 26px; border-bottom: 1px solid var(--line);
}
.admin-bar .spacer { flex: 1; }
/* The countdown to the automatic sign-out, next to the buttons. */
.idle-clock { font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.idle-clock [data-countdown] { font-weight: 600; color: var(--ink-soft); }
.idle-clock.is-late, .idle-clock.is-late [data-countdown] { color: var(--danger); }
.admin-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.admin-tab {
  appearance: none; cursor: pointer;
  font: 600 10.5px/1 var(--ui); letter-spacing: .15em; text-transform: uppercase;
  color: var(--muted); background: transparent;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 11px 18px;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.admin-tab:hover { color: var(--gold); border-color: var(--gold-soft); background: var(--gold-wash); }
.admin-tab.is-on { background: var(--gold); border-color: var(--gold); color: #fff; }

.admin-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.admin-filters input, .admin-filters select {
  font: 400 15px/1.4 var(--ui); color: var(--ink);
  background: var(--tint); border: 1px solid transparent; border-radius: var(--radius); padding: 11px 14px;
}
.admin-filters input { flex: 1 1 260px; }
.admin-filters input:focus, .admin-filters select:focus { outline: none; background: var(--bg); border-color: var(--gold); }

tr.row-link { cursor: pointer; }
tr.revenue-total td { border-top: 2px solid var(--line); }
tr.revenue-month.is-open td { background: var(--gold-wash); }
tr.revenue-detail td { background: var(--tint); padding: 18px 22px 22px; }
.revenue-detail-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; }
.revenue-detail-grid .label-head { margin-bottom: 10px; }
.revenue-mini { font-size: 14px; }
.revenue-mini th, .revenue-mini td { padding: 6px 10px; }
@media (max-width: 760px) { .revenue-detail-grid { grid-template-columns: 1fr; } }
.attention-star { color: var(--gold); font-weight: 600; }
tr.row-link:hover td { background: var(--gold-wash); }
.muted { color: var(--faint); font-size: 13px; }

.inline-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.inline-form .field { flex: 1 1 200px; }

.price-row { padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
.price-row:last-child { border-bottom: 0; }
.price-row.is-visa-wide { background: var(--tint); margin: -4px -22px 8px; padding: 16px 22px; }
.price-row-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; margin-bottom: 12px; }
.price-row-fields { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.price-row-fields label {
  display: flex; flex-direction: column; gap: 5px; flex: 1 1 150px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--muted);
}
.price-row-fields input {
  font: 400 15px/1.4 var(--ui); color: var(--ink); text-transform: none; letter-spacing: 0;
  background: var(--tint); border: 1px solid transparent; border-radius: var(--radius); padding: 10px 12px;
}
.price-row-fields input:focus { outline: none; background: var(--bg); border-color: var(--gold); }
.price-row-actions { display: flex; gap: 8px; flex: 0 0 auto; }

@media (max-width: 620px) {
  .price-row.is-visa-wide { margin-inline: -16px; padding-inline: 16px; }
  .review-grid { grid-template-columns: 1fr; }
}

/* Legal pages: the parts only the business can supply are marked, not invented. */
.placeholder {
  background: var(--gold-wash); color: var(--gold);
  border: 1px dashed var(--gold-soft); border-radius: var(--radius);
  padding: 2px 8px; font-style: italic; font-size: .95em;
}
.footer-legal a { text-decoration: none; }
.footer-legal a:hover { color: var(--gold-deep); }

/* A price row with edits that have not been saved yet. */
.price-row.is-edited { background: var(--gold-wash); box-shadow: inset 2px 0 0 var(--gold-soft); }

/* The way in to the admin desk. Deliberately quiet and in the footer rather
   than the navigation: it is for the person running the agency, not for
   clients, and it is protected by the code either way. */


/* --- tracking: where an applicant stands -------------------------------- */


.track-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.track-steps li {
  counter-increment: step; position: relative;
  padding: 0 0 20px 34px; font-size: 16px; color: var(--faint);
}
.track-steps li::before {
  content: ""; position: absolute; left: 0; top: 3px;
  width: 16px; height: 16px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg);
}
/* The rail joining one step to the next, drawn behind the markers. */
.track-steps li::after {
  content: ""; position: absolute; left: 7.5px; top: 19px; bottom: 3px;
  width: 1px; background: var(--line);
}
.track-steps li:last-child { padding-bottom: 0; }
.track-steps li:last-child::after { display: none; }

.track-steps li.is-done { color: var(--ink-soft); }
.track-steps li.is-done::before { background: var(--gold-soft); border-color: var(--gold-soft); }
.track-steps li.is-current { color: var(--ink); font-weight: 600; }
.track-steps li.is-current::before {
  background: var(--gold); border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-wash);
}

/* A download that has to be a POST cannot be an anchor, so it is a button
   dressed as one. */
.link-button {
  appearance: none; border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--gold); text-decoration: underline;
  text-underline-offset: 2px;
}
.link-button:hover { color: var(--gold-deep); }
.link-button:disabled { color: var(--faint); cursor: default; text-decoration: none; }

/* =============================================================================
   Phones and small tablets
   The pages reshaped for a narrow screen held in one hand: less chrome above
   the task, controls a thumb can hit (44 px and up), the form edge to edge,
   and a step's main action first and full width.
   ========================================================================== */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a, button, summary, label, .btn { -webkit-tap-highlight-color: rgba(134, 104, 29, .14); touch-action: manipulation; }

/* The menu button: three drawn lines that turn into a cross when open. */
.nav-toggle { position: relative; }
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  position: absolute; width: 18px; height: 1.5px; border-radius: 1px;
  background: var(--gold); transition: transform .2s ease, background .2s ease;
}
.nav-toggle-bars { left: 50%; top: 50%; margin: -.75px 0 0 -9px; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; left: 0; }
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

/* The compact line at the top of each form step, shown only on small
   screens — where the summary sidebar has fallen below the form. */
.apply-mini { display: none; }
.apply-mini {
  align-items: baseline; gap: 12px; margin: 0 0 18px; padding: 0 0 12px;
  border-bottom: 1px solid var(--line-soft); font-size: 14px; color: var(--ink-soft);
}
.apply-mini-what { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apply-mini-price { margin-left: auto; flex: none; font-weight: 600; color: var(--gold); }

@media (max-width: 1024px) {
  .nav a { padding: 14px 4px; font-size: 16px; }
  .nav a.nav-cta { padding: 16px 12px; font-size: 11.5px; }
}

@media (max-width: 980px) {
  .apply-mini { display: flex; }
  #apply-summary { display: none; }
  /* The finder's path card is empty until an answer is given, and it sits
     below the tool on a narrow screen anyway; the tool itself shows the step. */
  .sidebar-card:has(#finder-map) { display: none; }
}

@media (max-width: 620px) {
  .wrap { padding-inline: 18px; }
  .header-inner { gap: 10px; padding-block: 8px; }
  .brand { font-size: 14px; letter-spacing: .15em; gap: 9px; }
  .brand-sub { font-size: 9.5px; letter-spacing: .1em; }

  .section { padding: 36px 0; }
  .section-head { margin-bottom: 22px; }
  .section-head p { font-size: 15.5px; }

  .hero h1 { font-size: 23px; letter-spacing: .12em; margin-bottom: 18px; }
  .hero h1::after { width: 24px; height: 24px; margin-top: 18px; }
  .hero-actions { flex-direction: column; align-items: stretch; max-width: 420px; margin-inline: auto; }
  .eyebrow { font-size: 10.5px; letter-spacing: .14em; margin-bottom: 14px; }

  .page-head { padding: 22px 0; }
  .page-head h1 { font-size: 21px; margin-bottom: 10px; }
  .page-head p { font-size: 15.5px; line-height: 1.55; }
  .breadcrumb { font-size: 11px; gap: 6px; margin-bottom: 12px; }
  /* Where the page is a task — applying, tracking — the task comes first. */
  .page-head.is-task { padding: 16px 0 14px; }
  .page-head.is-task p, .page-head.is-task .breadcrumb { display: none; }
  .page-head.is-task h1 { margin-bottom: 0; }
  /* …and its card sits straight under the heading, without a band of white. */
  .page-head.is-task + .section { padding-top: 0; }
  .page-head.is-task + .section .tool-shell { border-top: 0; }

  .btn { min-height: 48px; padding: 14px 20px; }
  .btn-sm { padding: 10px 16px; }

  .grid { gap: 12px; }
  .card { padding: 22px 20px; }
  .card-step { margin-bottom: 12px; }
  .card-foot { padding-top: 14px; }

  /* The task card runs edge to edge: its frame cost forty pixels of form. */
  .tool-shell { margin-inline: -18px; border-left: 0; border-right: 0; border-radius: 0; scroll-margin-top: 64px; }
  .tool-body { padding: 24px 18px 26px; }
  .result-head { padding: 22px 18px; }
  .tool-body > .result-head:first-child { margin: -24px -18px 0; }
  .step-meta { margin-bottom: 8px; }
  .step-q { font-size: 21px; line-height: 1.3; }
  .step-hint { font-size: 15.5px; margin-bottom: 22px; }
  .field { margin-bottom: 22px; }
  .field label { font-size: 10.5px; }
  .opt { padding: 15px 16px; }

  /* Choices a thumb can hit: two to a row, or one per row with its price. */
  .yesno { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .yesno-btn { min-width: 0; min-height: 48px; padding: 12px 14px; }
  .yesno.choice-list { grid-template-columns: 1fr; }
  .choice-list .yesno-btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; padding: 14px 16px; }

  /* A step's main action first and full width; the way back beneath it. */
  .tool-actions { flex-direction: column-reverse; align-items: stretch; gap: 10px; }
  .tool-actions .spacer { display: none; }
  .tool-actions .btn { width: 100%; }

  .fact-grid, .rec-card .fact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; margin-bottom: 22px; }
  .fact dt { font-size: 10px; letter-spacing: .13em; }
  .fact dd { font-size: 16px; }
  /* A purpose's facts run long ("Einmalige Einreise (3 Monate)"): one per row there. */
  .purpose-body .fact-grid { grid-template-columns: 1fr; gap: 12px; }

  .price-box .btn { width: 100%; }
  .price-value { font-size: 24px; }
  .sidebar-card { padding: 18px 16px; }
  .review-block { padding: 16px; }
  .consent { padding: 14px 0; }
  .consent input[type="checkbox"] { width: 20px; height: 20px; margin-top: 1px; }
  .consent input[type="checkbox"]:checked::after { left: 6.5px; top: 2px; width: 5px; height: 10px; }
  .doc-list li { font-size: 16px; }
  .file-add { padding: 0 16px; }
  .file-chip { min-height: 36px; }

}

/* The smallest phones (320–380 px): brand, language and menu still share one row. */
@media (max-width: 380px) {
  .wrap { padding-inline: 14px; }
  .tool-shell { margin-inline: -14px; }
  .tool-body { padding-inline: 14px; }
  .result-head { padding-inline: 14px; }
  .tool-body > .result-head:first-child { margin-inline: -14px; }
  .header-inner { gap: 8px; }
  .brand { letter-spacing: .1em; gap: 8px; }
  .brand-sub { display: none; }
  .lang-toggle button { padding: 0 9px; }
}

/* =============================================================================
   Mobile refinements, by area. Each block below belongs to one part of the site.
   ========================================================================== */

/* MOBILE-SECTION: global (header, menu, headings, footer, content pages) */

/* --- at every width --------------------------------------------------------- */

/* A German compound ("Familienaufenthaltsvisa") breaks rather than running
   off the screen and making the page scroll sideways. */
h1, h2, h3 { overflow-wrap: break-word; }

/* A link to a section lands below the sticky header, not under it. */
.section[id] { scroll-margin-top: 66px; }

/* Two grey groups in a row (the visa types page) keep a rule between them
   instead of running into one block. */
.section-soft + .section-soft { border-top: 1px solid var(--line); }

/* Visa pages: the apply button under each price box, and the processing time. */
.purpose-cta { margin: 14px 0 0; }
.proc-note { margin-top: 1.6rem; }

/* Shown only on narrow screens, below. */
.apply-bar, .jump-nav { display: none; }

/* --- header and menu: whenever the menu button shows ----------------------- */

@media (max-width: 1024px) {
  /* Brand, language and menu button stay in one row at any width; the menu
     drops over the page instead of pushing it down, and scrolls on its own
     when it is taller than the screen (a phone held sideways). */
  .header-inner { flex-wrap: nowrap; position: relative; }
  .brand { min-width: 0; }
  .lang-toggle button { min-height: 44px; min-width: 44px; padding: 0 10px; }
  .nav-toggle { flex: none; width: 44px; height: 44px; }
  .nav {
    position: absolute; left: 0; right: 0; top: calc(100% + 1px);
    padding: 4px 0 18px; padding-inline: inherit;
    background: var(--bg); border-top: 0; border-bottom: 1px solid var(--line);
    max-height: calc(100vh - 66px); max-height: calc(100dvh - 66px);
    overflow-y: auto; overscroll-behavior: contain;
  }
}

/* --- tablets and phones: where the sidebar falls below the page ------------ */

@media (max-width: 980px) {
  /* Headings hyphenate (the page's lang is the language shown) and share
     their words out evenly instead of leaving one on a line of its own. */
  h1, h2, h3 { -webkit-hyphens: auto; hyphens: auto; }
  h1, h2, .eyebrow { text-wrap: balance; }

  .btn-sm { min-height: 44px; }

  /* Visa types: the groups to jump to, held under the header while scrolling. */
  .jump-nav {
    display: block; position: sticky; top: 64px; z-index: 50;
    background: var(--bg); border-bottom: 1px solid var(--line);
  }
  .jump-nav .wrap {
    display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
  }
  .jump-nav .wrap::-webkit-scrollbar { display: none; }
  /* Room at the end, so the last group can scroll clear of the fade. */
  .jump-nav .wrap::after { content: ""; flex: none; width: 14px; }
  .jump-nav a {
    flex: none; display: flex; align-items: center; min-height: 46px;
    white-space: nowrap; text-decoration: none;
    font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted);
  }
  .jump-nav ~ .section[id] { scroll-margin-top: 110px; }

  /* Visa pages: the processing time before the purposes, not after all of
     them; the apply card and the list of purposes leave the sidebar (the apply
     bar and the closed purposes do their work); the apply bar itself. */
  .visa-purposes { display: flex; flex-direction: column; }
  .visa-purposes > h2, .visa-purposes > .purpose-intro { order: -2; }
  .visa-purposes > .proc-note { order: -1; margin: 0 0 18px; }
  .sidebar-apply { display: none; }

  .apply-bar {
    display: block; position: sticky; bottom: 0; z-index: 90;
    padding: 10px 28px; padding-bottom: max(10px, env(safe-area-inset-bottom));
    text-align: center;
    background: rgba(255,255,255,.96);
    -webkit-backdrop-filter: saturate(1.4) blur(8px); backdrop-filter: saturate(1.4) blur(8px);
    border-top: 1px solid var(--line);
  }
  .apply-bar .btn { width: 100%; max-width: 480px; min-height: 48px; }
}

/* --- phones ----------------------------------------------------------------- */

@media (max-width: 620px) {
  .jump-nav { top: 60px; }

  .hero h1 { max-width: none; }
  .page-head h1 { letter-spacing: .08em; }

  /* The breadcrumb is a way back: its links get a thumb-sized hit area, and
     the last crumb, which repeats the heading below it, goes. */
  .breadcrumb a { padding: 14px 4px; margin: -14px -4px; }
  .breadcrumb > span:not(.sep):last-child,
  .breadcrumb > .sep:nth-last-child(2) { display: none; }

  .btn-sm { min-height: 44px; }
  .file-add { min-height: 44px; }

  /* Home: each step's number beside its title rather than on a row above. */
  .grid-steps .card-link { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 14px; align-content: start; }
  .grid-steps .card-step { grid-column: 1; grid-row: 1 / span 3; margin: 0; }
  .grid-steps .card-link > :not(.card-step) { grid-column: 2; }
  .grid-steps .card p { font-size: 15.5px; }
  .grid-steps .card-foot { padding-top: 12px; }

  /* Visa cards show the start of their summary; the whole card is the link,
     and the full text is on the page it opens. */
  .card-visa p {
    display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
  }

  /* Visa pages: the purposes as a compact list to choose from. */
  .purpose-intro { display: none; }
  .purpose { scroll-margin-top: 72px; margin-bottom: 10px; }
  .purpose > summary { padding: 16px 14px; gap: 10px; }
  .purpose-title { font-size: 16.5px; line-height: 1.35; }
  .purpose-num { width: 24px; height: 24px; margin-top: 0; }
  .purpose-chevron { width: 9px; height: 9px; margin: 3px 4px 0 auto; }
  .purpose[open] .purpose-chevron { margin-top: 8px; }
  .purpose-body { padding: 18px 14px 20px; }
  .price-box { margin: 18px 0 4px; padding: 16px; }
  .purpose-cta .btn, .sidebar-card .btn {
    width: 100%; min-height: 48px; padding: 14px 18px;
    font-size: 11.5px; letter-spacing: .14em;
  }
  .apply-bar { padding-inline: 18px; }

  /* Footer: the brand without its tagline (the hero says it), the visa groups
     full width, tools and service side by side, every link a 44 px row. */
  .site-footer { padding: 36px 0 22px; }
  .site-footer .label-head { margin-bottom: 4px; }
  .footer-disclaimer { margin-top: 26px; padding: 0; border: 0; background: none; font-style: italic; }
  /* The legal links as separate targets; the " · " between them is hidden
     with the row's font size, and the admin desk keeps its distance. */
  .footer-bottom { flex-direction: column; gap: 4px; font-size: 13px; }
  .footer-legal { display: flex; flex-wrap: wrap; column-gap: 22px; font-size: 0; }
  .footer-legal a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; font-size: 13px; }
  .footer-legal .footer-admin { margin-left: auto; }
}

/* The smallest phones (Display Zoom renders at 320 px). */
@media (max-width: 380px) {
  .page-head h1 { font-size: 19px; }
  /* DE and EN as one joined control, to leave the brand its room. */
  .lang-toggle { gap: 0; }
  .lang-toggle button + button { margin-left: -1px; }
  .lang-toggle button[aria-pressed="true"] { position: relative; z-index: 1; }
  .apply-bar { padding-inline: 14px; }
}

/* --- touch screens: no hover look left behind by a tap ------------------------
   A touch browser keeps :hover on the last thing tapped, so a card stays gold
   after going back and an option only brushed looks chosen. Here each hover
   look is set back to the element's resting state. */

@media (hover: none) {
  .brand:hover { color: var(--gold); }
  .nav a:not(.nav-cta):hover { background: transparent; }
  .nav a:not(.nav-cta):not(.is-active):hover { color: var(--muted); }
  .nav a.nav-cta:hover { background: var(--gold); border-color: var(--gold); }
  .lang-toggle button:not([aria-pressed="true"]):hover { color: var(--muted); border-color: var(--line); background: transparent; }
  .btn:not(.btn-ghost):hover { background: var(--gold); border-color: var(--gold); }
  .btn-ghost:hover { background: transparent; border-color: var(--line); }
  .card-link:hover { border-color: var(--line); background: var(--bg); }
  .card-link:hover .card-step { border-color: var(--line); background: var(--gold-wash); }
  .card-link:hover .card-foot span { transform: none; }
  .rec-card:not(.is-top):hover { border-color: var(--line); background: transparent; }
  .purpose > summary:hover { background: transparent; }
  .opt:not(.is-selected):hover { border-color: var(--line); background: transparent; }
  .opt:not(.is-selected):hover .opt-mark { border-color: var(--line); }
  .yesno-btn:not(.is-on):hover { border-color: var(--line); color: var(--muted); background: transparent; }
  .file-add:hover { background: transparent; }
  .site-footer a:hover, .breadcrumb a:hover { color: var(--muted); }
}

@media (hover: hover) {
  .jump-nav a:hover { color: var(--gold); }
}

@media print {
  .apply-bar, .jump-nav { display: none !important; }
}

/* MOBILE-SECTION: application form */
/* Fields that read as fields: a gold rule under each box and a darker frame
   on the consent squares, 3:1 against white (WCAG 1.4.11). Focus and errors
   keep their own colours. Direct children only, so an invalid detail box
   inside a valid question keeps its red. */
#apply-root .field:not(.is-invalid) > :is(select, textarea, input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="number"]):not(:focus) {
  border-bottom-color: var(--gold-soft);
}
#apply-root .consent input[type="checkbox"]:not(:checked) { border-color: var(--gold-soft); }
#apply-root .consent.is-invalid input[type="checkbox"]:not(:checked) { border-color: var(--danger); }

/* A field brought into view after a failed check clears the sticky header. */
#apply-root .field, #apply-root .consent { scroll-margin-top: 96px; }

/* The purposes as a list of choices; the field below them sets the spacing. */
#apply-root .purpose-list { margin-bottom: 0; }

/* A note outside a field (the processing time on the review) in the same
   italic voice as the hints under the fields. */
#apply-root > .help { font-size: 14px; font-style: italic; line-height: 1.5; color: var(--faint); }
#apply-root > .help strong { font-style: normal; font-weight: 600; color: var(--muted); }

/* Long answers (an e-mail address, a company name) wrap instead of running out. */
#apply-root .review-block dd { overflow-wrap: anywhere; }

/* The one-line summary is a button back to step 1; a drawn arrow says so. */
#apply-root .apply-mini {
  position: relative; width: 100%; min-height: 44px; align-items: center;
  appearance: none; background: none; border: 0; border-bottom: 1px solid var(--line-soft); border-radius: 0;
  font: inherit; font-size: 14px; line-height: 1.4; letter-spacing: 0; text-transform: none; text-align: left;
  color: var(--ink-soft); cursor: pointer;
}
#apply-root .apply-mini::after {
  content: ""; flex: none; width: 7px; height: 7px; margin: 0 3px 0 -4px;
  border: solid var(--gold-soft); border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg);
}
#apply-root .apply-mini:hover .apply-mini-what { color: var(--gold); }

@media (max-width: 980px) {
  /* The review: the purpose, often a long sentence, gets the full row, and the
     applicant's name is not repeated above "Name und Kontakt". */
  #apply-root .fact-wide { grid-column: 1 / -1; }
  #apply-root .fact-applicant { display: none; }
  #apply-root .fact dd, #apply-root .purpose-list .opt-text { -webkit-hyphens: auto; hyphens: auto; }
}

@media (max-width: 620px) {
  /* Labels at the base size: on most inputs they are the only name. */
  #apply-root .field label { font-size: 11px; }
  #apply-root .fact dt { font-size: 10.5px; letter-spacing: .13em; }
  #apply-root .field, #apply-root .consent { scroll-margin-top: 76px; }

  #apply-root .purpose-list .opt { font-size: 16px; line-height: 1.45; }

  /* The review as plain rows under 1px rules, not boxes inside the card. */
  #apply-root .review-grid { gap: 0; }
  #apply-root .review-block { border: 0; border-top: 1px solid var(--line-soft); border-radius: 0; padding: 16px 0 18px; }
  #apply-root .review-block h5 { justify-content: space-between; align-items: center; }
  /* "ändern" a thumb can hit, without taking more room in its line. */
  #apply-root .review-edit {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; min-width: 44px; padding: 0 10px; margin: -12px -10px;
    font-size: 13px; letter-spacing: .02em; color: var(--gold);
  }

  /* Steps 1-3: Back and Continue side by side, Continue the wider, in a bar
     that stays at the foot of the screen while the step scrolls. */
  #apply-root .tool-actions.is-step {
    flex-direction: row; position: sticky; bottom: 0; z-index: 5;
    margin: 28px -18px -26px; padding: 10px 18px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .97); border-top: 1px solid var(--line-soft);
  }
  #apply-root .tool-actions.is-step [data-back] { width: auto; flex: 0 0 auto; padding-inline: 16px; }
  #apply-root .tool-actions.is-step [data-next] { width: auto; flex: 1 1 0; }
  /* While typing, the bar would ride on the keyboard: back into the flow then. */
  #apply-root:has(input:focus, textarea:focus) .tool-actions.is-step { position: static; }
  /* The entries question, scrolled into view after a purpose is picked, clears that bar. */
  #apply-root #option-field { scroll-margin-bottom: 96px; }

  /* The pay button's label runs to two lines: give them room. */
  #apply-root .tool-actions .btn { line-height: 1.3; }
  #apply-root .tool-actions [data-submit] { padding-block: 12px; }
}

@media (max-width: 520px) {
  /* The total under its label, as the facts are set, not adrift mid-row. */
  #apply-root .price-main { flex-direction: column; align-items: flex-start; gap: 4px; }
}

@media (max-width: 380px) {
  #apply-root .tool-actions.is-step { margin-inline: -14px; padding-inline: 14px; }
}

/* MOBILE-SECTION: tracking page */
/* Once signed in, the sign-in words above and below the card are out of date. */
body.is-signed-in .page-head-status p,
body.is-signed-in .status-foot { display: none; }

/* Notes on this page read as notes, not as body text. */
#status-root .help, .status-foot { font-size: 14.5px; line-height: 1.5; font-style: italic; color: var(--muted); }
#status-root .help .link-button { font-style: normal; }

/* The status box: code, status and note on the left, Refresh on the right. */
.status-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.status-head .status-refresh { flex: none; }

/* The trail shows how far it has come: the rail after a finished step is gold. */
.track-steps li.is-done::after { background: var(--gold-soft); }

/* The receipt of the details that phones show after the documents. */
.status-facts-phone { display: none; }
.fact-rows { margin: 0 0 8px; border-top: 1px solid var(--line-soft); }
.fact-rows > div {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px;
  padding: 11px 0; border-bottom: 1px solid var(--line-soft);
}
.fact-rows dt { font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.fact-rows dd { margin: 0 0 0 auto; font-size: 16px; line-height: 1.4; text-align: right; color: var(--ink); }
.fact-rows .is-full dd { flex-basis: 100%; margin-left: 0; text-align: left; }
.fact-sub { display: block; font-size: 15px; font-style: italic; color: var(--ink-soft); }

/* The issued visa: a real button. */
#status-root .visa-files li { padding-bottom: 0; border-bottom: 0; }

/* A document with a file in it: its number turns gold, as an open purpose's does. */
#status-root .doc-upload-list li.has-file::before {
  content: counter(doc); top: 3px; width: 18px; height: 18px; display: grid; place-items: center;
  background: var(--gold); color: #fff; border-radius: var(--radius); font-size: 11px; line-height: 1;
}
#status-root .doc-upload-list li + li.has-file::before { top: 18px; }
/* Who a variant is for ("Für deutsche Staatsangehörige:"), on its own line. */
#status-root .doc-list li .sub-lead { display: block; font-style: normal; font-weight: 600; font-size: 14.5px; color: var(--ink); }
#status-root .doc-upload { -webkit-hyphens: manual; hyphens: manual; }

/* The file picker: the input is only visually hidden, so a keyboard reaches it
   and the label shows where focus is. */
:is(#status-root, #tdac-root) .file-add { position: relative; justify-content: center; line-height: 1.2; }
:is(#status-root, #tdac-root) .file-add input[type="file"] {
  position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0;
  opacity: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
}
:is(#status-root, #tdac-root) .file-add:focus-within { outline: 2px solid var(--gold); outline-offset: 2px; }
/* A ring only for the keyboard, where the browser can tell. */
:is(#status-root, #tdac-root) .file-add:focus-within:not(:has(:focus-visible)) { outline: none; }
:is(#status-root, #tdac-root) .file-add.is-disabled { opacity: .55; cursor: default; pointer-events: none; }
:is(#status-root, #tdac-root) .file-add.is-busy { opacity: 1; border-style: solid; background: var(--gold-wash); }

/* An uploaded file: the name gives way (ellipsis) before the remove button does. */
#status-root .file-chip { align-items: stretch; gap: 0; padding: 0; min-height: 32px; overflow: visible; white-space: normal; }
#status-root .file-name { flex: 1 1 auto; min-width: 0; align-self: center; padding: 0 10px 0 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#status-root .file-remove {
  flex: none; width: 32px; padding: 0; border-left: 1px solid var(--line);
  color: var(--muted); font-size: 18px; line-height: 1;
}
#status-root .file-remove:disabled { opacity: .4; cursor: default; }

@media (max-width: 980px) {
  :is(#status-root, #tdac-root) .file-add { min-height: 44px; padding: 0 18px; font-size: 11px; }
  #status-root .file-chip { min-height: 44px; font-size: 14px; }
  #status-root .file-remove { width: 44px; font-size: 20px; }
}

@media (max-width: 620px) {
  /* A little more width for the documents, and German that breaks cleanly. */
  #status-root .doc-list li { padding-left: 24px; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
  #status-root .doc-list li .sub { padding-left: 10px; margin-top: 6px; }

  /* Picker and files take the full width under each document. */
  #status-root .doc-upload { margin-top: 12px; }
  :is(#status-root, #tdac-root) .doc-upload .file-add,
  #status-root .doc-upload .file-chip { flex: 1 1 100%; }

  /* The details as a receipt after the documents, not a grid before them. */
  #status-root .status-facts-wide { display: none; }
  #status-root .status-facts-phone { display: block; }

  /* Sign out alone, full width, at the foot. */
  #status-root .status-actions .btn { width: 100%; min-height: 48px; }

  #status-root .file-download { width: 100%; }

  /* Straight after payment: the tracking code large, on a line of its own. */
  #status-root .code-issued > br,
  #status-root .code-issued-verb,
  #status-root .code-issued-stop,
  #status-root .code-issued-more { display: none; }
  #status-root .code-issued-line { display: block; margin: 12px 0 10px; }
  #status-root .code-issued-label {
    display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
  }
  #status-root .code-issued .tracking-code {
    display: block; margin-top: 2px; font-size: 34px; font-weight: 300; line-height: 1.2;
    letter-spacing: .3em; color: var(--gold-deep); white-space: nowrap;
  }

  #status-root .track-steps li { font-size: 15.5px; }
  #status-root .track-steps li:not(:last-child) { padding-bottom: 16px; }
}

/* MOBILE-SECTION: FAQ tools (visa check, Visa Finder) */

/* Both tools bring their card back into view after an answer when it has
   scrolled up under the sticky header (toTop in visa-check.js and
   visa-finder.js). Phones use the 64 px set in the block above. */
@media (min-width: 621px) {
  .tool-shell:has(#check-root), .tool-shell:has(#finder-root) { scroll-margin-top: 72px; }
}

/* The "change" button in the Finder's "Your path" card, formerly inline
   styles; 24 px is the smallest target a pointer should have to hit. */
.flow-change { margin-top: 6px; padding: 3px 10px; font-size: .78rem; min-height: 24px; }

/* Shown only where the page head's lede is hidden (is-task, below 620 px):
   it says the Finder is our own guide. */
.finder-disclosure { display: none; }

/* The answers given so far, inside the Finder. Only where the "Your path"
   card is hidden; each row changes that answer. */
.finder-trail { display: none; margin: 0 0 20px; }
.finder-trail .label-head { margin-bottom: 8px; }
.finder-trail ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-soft); }
.finder-trail li { border-bottom: 1px solid var(--line-soft); }
.finder-trail button {
  appearance: none; background: none; border: 0; border-radius: 0;
  width: 100%; min-height: 44px; padding: 8px 0;
  display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer;
  font: 400 15px/1.35 var(--ui); letter-spacing: 0; text-transform: none; color: var(--ink-soft);
}
.finder-trail-a { flex: 1; min-width: 0; }
.finder-trail-edit { flex: none; font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }

/* The Finder's apply link under the visa card (narrow screens); the copy at
   the end of the button row serves wide ones. */
.finder-apply { display: none; }

@media (max-width: 980px) {
  .finder-trail { display: block; }
  .finder-apply { display: inline-flex; margin: 0 0 24px; }
  .finder-apply-end { display: none; }
  /* The "Check first" card follows the tool directly here and says the same. */

  /* A tap on an option moves on at once. A chevron says so; the checkbox
     suggested ticking several and then confirming. */
  #check-root .opt, #finder-root .opt { align-items: center; }
  #check-root .opt-mark, #finder-root .opt-mark { display: none; }
  #check-root .opt::after, #finder-root .opt::after {
    content: ""; flex: none; margin: 0 4px 0 auto; width: 7px; height: 7px;
    border-top: 1.5px solid var(--gold-soft); border-right: 1.5px solid var(--gold-soft);
    transform: rotate(45deg);
  }
  #check-root .opt.is-selected::after, #finder-root .opt.is-selected::after { border-color: var(--gold); }
}

@media (max-width: 620px) {
  .finder-disclosure { display: block; }

  .opt-list { gap: 8px; margin-bottom: 24px; }
  .opt { min-height: 52px; }

  .finder-apply { display: flex; width: 100%; }
  /* Back and start again share one row: neither is the main action here. */
  #finder-root .tool-actions { flex-direction: row; }
  #finder-root .tool-actions .btn { flex: 1 1 0; width: auto; padding-inline: 10px; }

  /* Long German words in narrow columns: hyphenate in the page's language. */
  #check-root :is(.step-q, .opt-text, .rec-card, .reason-list li, .result-head h2),
  #finder-root :is(.step-q, .opt-text, .rec-card, .result-head h2, .result-head p, .finder-trail-a) {
    -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word;
  }
  /* "Staatsangehörigkeit" needs a row of its own; purpose and stay share the next. */
  #check-root .fact-grid .fact:first-child { grid-column: 1 / -1; }
}

/* Admin: the files uploaded for a required document, listed under it. */
.doc-files { display: grid; gap: 4px; margin-top: 8px; font-size: 14.5px; }
.doc-files a { overflow-wrap: anywhere; }
.doc-files .muted { color: var(--faint); }

/* --- missing documents and the expected decision -------------------------- */

/* Admin: present or missing, per document, with a comment where missing. */
.doc-row { display: flex; align-items: flex-start; gap: 16px; }
.doc-row-main { flex: 1; min-width: 0; }
.doc-check { display: inline-flex; gap: 6px; flex: none; }
.check-btn {
  appearance: none; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--faint);
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.check-btn:hover { border-color: var(--gold-soft); color: var(--ink); }
.check-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.check-btn.is-ok.is-on { background: var(--ok); border-color: var(--ok); color: #fff; }
.check-btn.is-missing.is-on { background: var(--danger); border-color: var(--danger); color: #fff; }
.check-note { margin-top: 10px; }
.check-note[hidden] { display: none; }
.doc-item-other { padding: 12px 0 14px; border-bottom: 1px solid var(--line-soft); }
.doc-other-hint { display: block; margin-top: 3px; font-size: 13.5px; font-style: italic; color: var(--muted); }
.missing-note {
  width: 100%; font: 400 14px/1.4 var(--ui); color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px;
}
.missing-note:focus { outline: none; border-color: var(--gold); }
.doc-item.is-missing .missing-note { border-color: var(--danger-line); }
.save-hint { font-size: 13px; font-style: italic; color: var(--muted); }

/* The home page hero: the checks as a line under the buttons, and the note for anyone in a hurry. */
.hero-checks { margin: 18px 0 0; font-size: 15.5px; font-style: italic; color: var(--muted); }
.hero-checks a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 2px; }
.hero-checks .sep { margin: 0 6px; color: var(--faint); }
.hero-urgent {
  display: inline-block; margin: 28px auto 0; padding: 14px 20px; max-width: 680px; text-align: left;
  border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: var(--radius);
  background: var(--bg); font-size: 15.5px; line-height: 1.55; color: var(--ink-soft);
}
.hero-urgent strong { display: block; margin-bottom: 4px; color: var(--gold-deep); }
.hero-urgent a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; margin-left: 4px; }

/* The FAQ: the two checks first, then the questions in groups, each folded. */
.faq-tools { margin-bottom: 8px; }
.faq-group { margin-top: 38px; }
.faq-group > h2 { margin-bottom: 14px; }
.faq-item > summary { justify-content: space-between; }
.faq-item .purpose-chevron { flex: none; }
.faq-item .purpose-body p, .faq-item .purpose-body ol { margin: 0; font-size: 16px; line-height: 1.6; }
.faq-steps { padding-left: 22px; }
.faq-steps li { margin: 6px 0; }
.faq-steps li::marker { color: var(--gold); }

/* The contact page: one card per way to reach us, its button at the foot. */
.contact-card { display: flex; flex-direction: column; }
.contact-card .label-head { margin-bottom: 14px; }
.contact-card p { margin-bottom: 12px; }
.contact-card .contact-value { font-style: normal; font-size: 19px; color: var(--ink); margin-bottom: 18px; }
.contact-card .contact-value a { color: var(--ink); text-decoration: none; }
.contact-card .contact-value a:hover { color: var(--gold); }
.contact-btn { margin-top: auto; align-self: flex-start; }
.contact-note { margin-top: 26px; }

/* The application's timeline: one line per action, newest first. */
.timeline { list-style: none; margin: 0; padding: 0; font-size: 14px; line-height: 1.5; }
.timeline li { display: grid; grid-template-columns: 150px 1fr; gap: 4px 14px; padding: 7px 0; border-top: 1px solid var(--line-soft); }
.timeline li:last-child { border-bottom: 1px solid var(--line-soft); }
.timeline time { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.timeline li.is-bad > span { color: var(--danger); }
.timeline-more { margin: 10px 0 0; }
.timeline-fold { margin-top: 26px; }
.timeline-fold[open] > summary .subhead { margin-bottom: 10px; }
@media (max-width: 620px) {
  .timeline li { grid-template-columns: 1fr; gap: 2px; }
}

/* Admin: the status emails, one fold each. */
.status-mail { border-top: 1px solid var(--line-soft); padding: 12px 0; }
.status-mail:last-of-type { border-bottom: 1px solid var(--line-soft); margin-bottom: 18px; }
.status-mail summary { cursor: pointer; font-size: 16px; }
.status-mail[open] summary { margin-bottom: 8px; }

/* Tracking page. */
.missing-list ul { margin: 8px 0 10px; padding-left: 20px; }
.missing-list li { margin: 4px 0; }
.missing-comment { display: block; font-style: italic; }
.doc-missing { display: block; margin-top: 6px; font-size: 14px; font-style: italic; color: var(--danger); }
/* Missing documents stand out in red: the warning, and each row in the upload list. */
.missing-deadline, .missing-warning { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--danger-line); font-weight: 600; }
/* A red layer behind the row, reaching a little past it, so the red bar sits
   left of the number and the red runs on below the upload button. */
.doc-upload-list li.is-missing { isolation: isolate; }
.doc-upload-list li.is-missing::after {
  content: ""; position: absolute; z-index: -1; top: 6px; bottom: -10px; left: -14px; right: -10px;
  background: var(--danger-wash); border-left: 3px solid var(--danger); border-radius: var(--radius);
}
.doc-upload-list li.is-missing:first-child::after { top: -10px; }
.doc-upload-list li.is-missing .doc-missing { font-weight: 600; font-style: normal; }
.other-missing { margin: -4px 0 10px; }

/* Admin: Back and Save side by side above an application. */
.app-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* Application form: the total, straight above the pay button (§ 312j BGB). */
.pay-total {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px;
  margin-top: 28px; padding: 14px 18px;
  border: 1px solid var(--gold-soft); border-radius: var(--radius); background: var(--gold-wash);
}
.pay-total-label { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.pay-total-value { font-size: 22px; color: var(--ink); }
.pay-total + .tool-actions { margin-top: 16px !important; }

/* Admin: a second group in the same answer box (Contact, then Occupation). */
.review-block dl + h5 { margin-top: 24px; }

/* Admin: the visa section's heading keeps its space above, inside its wrapper. */
#visa-send > .subhead:first-child { margin-top: 30px; }

/* Tracking page, phone: the details keep their space above, whatever comes before. */
.status-facts-phone > .subhead:first-child { margin-top: 30px; }

/* Admin: upload a document on the applicant's behalf, under its document. */
.file-add-admin { margin-top: 10px; }
.file-add-admin[hidden] { display: none; }
.doc-other-hint + .file-add-admin { margin-top: 8px; }

/* Admin: the document list folds away once the documents are settled. */
.docs-fold { margin-top: 30px; }
.docs-fold > summary { list-style: none; cursor: pointer; }
.docs-fold > summary::-webkit-details-marker { display: none; }
.docs-fold > summary .subhead { margin: 0 0 14px; }
.docs-fold:not([open]) > summary .subhead { margin-bottom: 0; }
.docs-fold > summary .subhead::before {
  content: ""; flex: none; width: 7px; height: 7px; margin: 0 2px 0 1px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s ease;
}
.docs-fold[open] > summary .subhead::before { transform: rotate(45deg); }
.docs-fold > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

/* Admin desk: no site header, so the logo stands in the title band. */
/* Logo on the left at the size of the title; the title and its line on the right. */
.admin-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; }
.page-head-admin .brand {
  display: inline-flex; margin: 0; gap: .55em;
  font-size: clamp(23px, 1.1rem + 1.6vw, 30px); letter-spacing: .14em;   /* as h1 */
}
.page-head-admin .brand-mark { width: 1.6em; height: 1.6em; }
.page-head-admin .brand-sub { font-size: .4em; letter-spacing: .16em; margin-top: .45em; }
.admin-head-title { margin-left: auto; text-align: right; }
.admin-head-title h1 { margin-bottom: 10px; }
.admin-head-title p { margin-left: auto; }
/* The same steps as .page-head h1 on phones. */
@media (max-width: 620px) {
  .page-head-admin .brand { font-size: 21px; }
}
@media (max-width: 380px) {
  .page-head-admin .brand { font-size: 19px; }
}

/* Admin: correct the telephone number or email address in place. */
.pen-btn {
  appearance: none; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin-left: 6px; padding: 0; vertical-align: -6px; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--radius); background: none; color: var(--muted);
  transition: color .14s ease, border-color .14s ease, background .14s ease;
}
.pen-btn:hover { color: var(--gold); border-color: var(--gold-soft); background: var(--gold-wash); }
.pen-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.answer-value { overflow-wrap: anywhere; }
.answer-edit { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 2px; }
.answer-input {
  flex: 1 1 200px; min-width: 0; font: 400 15px/1.4 var(--ui); color: var(--ink);
  background: var(--bg); border: 1px solid var(--gold-soft); border-radius: var(--radius); padding: 8px 10px;
}
.answer-input:focus { outline: none; border-color: var(--gold); }
.review-block .answer-note { margin: 10px 0 0; font-size: 12.5px; font-style: italic; color: var(--faint); }
.review-block .answer-note + h5 { margin-top: 24px; }

/* Admin: the tabs and, on an application, Back and Save stay in view. */
.admin-sticky {
  position: sticky; top: 0; z-index: 30;
  background: var(--bg); padding-top: 14px; margin-top: -14px;
}
.admin-sticky.is-static { position: static; }
.admin-sticky > .app-actions { padding: 14px 0; border-bottom: 1px solid var(--line); }
.admin-sticky > .admin-bar:not(:last-child) { margin-bottom: 0; }

/* =============================================================================
   MOBILE-SECTION: phone redesign
   Reading and choosing on a phone, in the site's own manner: the menu as a
   short list with the two checks in it, the hero's checks as a pair of
   buttons, visa types as rows to tap, one way to apply on a visa page (the
   bar at the foot, naming the open purpose), and the admin list as cards.
   Everything here lives inside the phone breakpoints; wider screens keep
   their layout to the pixel.
   ========================================================================== */

/* The quick checks in the menu, wherever the menu button shows; and a
   chevron on each row, as the site's own lists have. */
.nav-more { display: none; }
@media (max-width: 1024px) {
  .nav a.nav-cta { order: 10; }
  .nav-more { display: block; margin-top: 12px; }
  .nav-more-head {
    display: block; padding: 6px 4px 4px;
    font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
  }
  .nav-more a { display: block; }
  .nav a:not(.nav-cta) { position: relative; padding-right: 30px; }
  .nav a:not(.nav-cta)::after {
    content: ""; position: absolute; right: 10px; top: 50%; width: 7px; height: 7px; margin-top: -4px;
    border-top: 1.5px solid var(--gold-soft); border-right: 1.5px solid var(--gold-soft); transform: rotate(45deg);
  }
}

@media (max-width: 980px) {
  /* Visa and TDAC pages: the bar at the foot is the way to apply — it follows
     the open purpose — so the button inside a purpose said the same twice. */
  .purpose-cta { display: none; }
  /* Apply: the card that tells the visitor to choose sat under the very
     question that asks them to. */
  .sidebar > [data-service="choice"] { display: none !important; }
}

@media (max-width: 620px) {
  /* Buttons: a touch more type, a touch less tracking, for a thumb's distance. */
  .btn { font-size: 12px; letter-spacing: .13em; }
  .btn-sm { font-size: 11px; }

  /* Home: a shorter cover, and the two checks as a pair of buttons rather than
     a line of small links. */
  .hero { padding: 28px 0 26px; }
  .hero-lede { font-size: 16px; line-height: 1.55; margin-bottom: 20px; }
  .hero-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; font-style: normal; }
  .hero-checks > span { display: none; }
  .hero-checks a {
    display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 8px 10px;
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg);
    font-size: 13px; line-height: 1.3; text-align: center; text-decoration: none; color: var(--gold-deep);
    -webkit-hyphens: auto; hyphens: auto;
  }
  .hero-urgent { margin-top: 18px; padding: 12px 14px; font-size: 15px; }
  .hero-urgent a { display: inline-block; padding: 6px 0; }
  .home-all .btn { width: 100%; }

  /* Visa types, on the home page and the overview: rows to tap, a chevron
     each, two lines of the summary — the page they open has the rest. */
  .grid:has(> .card-visa) { gap: 8px; }
  .card-visa { position: relative; padding: 15px 42px 15px 18px; }
  .card-visa h3 { font-size: 17px; margin-bottom: 3px; }
  .card-visa p { font-size: 14.5px; line-height: 1.45; -webkit-line-clamp: 2; line-clamp: 2; }
  .card-visa .card-foot { display: none; }
  .card-visa::after {
    content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; margin-top: -5px;
    border-top: 1.5px solid var(--gold-soft); border-right: 1.5px solid var(--gold-soft); transform: rotate(45deg);
  }

  /* Contact: the buttons across their cards. */
  .contact-btn { width: 100%; align-self: stretch; }

  /* Admin desk: the tabs in one row that scrolls sideways, and the list of
     applications as cards — reference, date, applicant, visa, status — rather
     than a table cut off at its third column. */
  .admin-tabs {
    flex: 1 1 100%; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }
  .admin-tabs::-webkit-scrollbar { display: none; }
  .admin-tabs::after { content: ""; flex: none; width: 20px; }
  .admin-tab { flex: none; min-height: 40px; }
  /* Thumb-sized targets on the desk: the document buttons grow, and the pencil
     keeps its drawn size but answers to a touch anywhere around it. */
  .check-btn { width: 40px; height: 40px; }
  .pen-btn { position: relative; }
  .pen-btn::after { content: ""; position: absolute; inset: -8px; }
  /* The countdown gets a line of its own under the tabs; the badge and the
     two buttons keep their row, right-aligned, as before. */
  /* Three lines that each start at the left edge: the tabs, the countdown,
     then the badge and the two buttons. The spacer would push whatever fits
     on the second line to the right and leave the rest hanging at the left. */
  .admin-tabs { order: -2; }
  .idle-clock { order: -1; flex: 1 1 100%; margin-top: -2px; }
  .admin-bar .spacer { display: none; }
  .app-table thead { display: none; }
  .app-table, .app-table tbody, .app-table tr, .app-table td { display: block; width: 100%; }
  .app-table tr { padding: 12px 14px 13px; border-bottom: 1px solid var(--line-soft); }
  .app-table tr:last-child { border-bottom: 0; }
  .app-table td { padding: 1px 0; border: 0; }
  .app-table td:first-child { font-size: 17px; }
  .app-table td:nth-child(2) { font-size: 13px; color: var(--muted); }
  .app-table td:last-child { padding-top: 7px; }
}