/* Application (/apply) and legitimation (/customer/verification/wizard) in the look of the portal: the bar on top, the
   contents with the progress on the left (as the training page), the current step as one card. Builds on maske.css,
   statistiken.css, model-ui.css and portal.css; the older component styles (dashboard.css, app.css) still carry the
   legitimation steps of verification_wizard.js and get the portal's tokens and shapes here. */

/* ---------- The older styles on the portal's tokens (light and dark follow the portal) ---------- */
:root {
  --font-outfit: "Outfit";
  --font-sofia: "Sofia Sans";
  --db-page: var(--page);
  --db-surface: var(--surface);
  --db-sunken: var(--sunken);
  --db-dark: #141413;
  --db-ink: var(--ink);
  --db-ink-2: var(--ink2);
  --db-ink-3: var(--ink3);
  --db-line: var(--line);
  --db-line-2: var(--line2);
  --db-accent: var(--accent);
  --db-accent-text: var(--accent-text);
  --db-accent-soft: var(--accent-soft);
  --db-accent-ring: var(--accent-soft);
  --db-on-accent: var(--on-accent);
  --db-ok: var(--ok);
  --db-ok-soft: var(--ok-soft);
  --db-warn: var(--warn);
  --db-warn-soft: var(--warn-soft);
  --db-bad: var(--bad);
  --db-bad-soft: var(--bad-soft);
  --db-btn-bg: var(--accent);
  --db-btn-bg-hover: var(--accent);
  --db-btn-ink: var(--on-accent);
  --db-radius: 14px;
  --db-shadow-2: var(--pop);
}
body.ap { min-height: 100vh; min-height: 100dvh; }
.ap a { color: inherit; }

/* ---------- Bar ---------- */
.ap-bar { position: sticky; top: 0; z-index: 30; }
.ap-bar-r { display: flex; align-items: center; gap: 12px; margin: 0 0 0 auto; color: var(--ink2); font-size: 13.5px; }
.ap-bar-r form { margin: 0; }

/* ---------- Layout: contents left, the step right ---------- */
.ap-wrap {
  display: grid; grid-template-columns: 264px minmax(0, 1fr); grid-template-areas: "toc main"; gap: 48px;
  padding: 36px 40px 96px;
}
.ap-toc { grid-area: toc; position: sticky; top: 96px; align-self: start; display: grid; gap: 20px; }
.ap-main { grid-area: main; min-width: 0; }

/* contents with progress (the training page's contents column) */
.ap-toc-h { display: grid; gap: 8px; }
.ap-toc-h b { font-family: var(--font-d); font-size: 18px; font-weight: 700; }
.ap-count { display: flex; justify-content: space-between; gap: 10px; color: var(--ink3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ap-count > span:first-child { color: var(--ink2); font-weight: 600; }
.bar-p { display: block; height: 6px; border-radius: 3px; background: var(--sunken); overflow: hidden; }
.bar-p i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--accent); transition: width .4s var(--ease); }

.ap-steps { position: static; margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; counter-reset: ap; }
.ap-steps::before { content: none; }
.ap-steps .apply-phase {
  margin: 12px 0 2px; padding: 0 10px; color: var(--ink3); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none;
}
.ap-steps .apply-phase:first-child { margin-top: 0; }
.ap-steps .apply-step {
  position: relative; display: grid; gap: 1px; padding: 7px 10px 7px 42px; border-radius: 9px; color: var(--ink2);
  counter-increment: ap; transition: background-color .15s, color .15s;
}
.ap-steps .apply-step::before {
  content: counter(ap); position: absolute; left: 10px; top: 7px; display: grid; place-items: center; box-sizing: border-box;
  width: 22px; height: 22px; border: 1px solid var(--line2); border-radius: 50%; background: none center / 12px no-repeat;
  box-shadow: none; color: var(--ink3); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1;
  transition: background-color .15s, border-color .15s, color .15s;
}
.ap-steps .apply-step b { font-size: 13.5px; font-weight: 500; line-height: 22px; color: inherit; }
.ap-steps .apply-step em { display: none; font-style: normal; font-size: 12.5px; line-height: 1.4; color: var(--ink3); }
.ap-steps .apply-step.is-active { background: var(--sunken); color: var(--ink); }
.ap-steps .apply-step.is-active b { font-weight: 600; color: var(--ink); }
.ap-steps .apply-step.is-active em { display: block; }
.ap-steps .apply-step.is-active::before { border-color: var(--accent); background-color: var(--accent); color: var(--on-accent); box-shadow: none; }
.ap-steps .apply-step.is-done::before {
  content: ""; border-color: var(--ok); background-color: var(--ok);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.ap-steps .apply-step.is-done b { color: var(--ink); }
.ap-notes { display: grid; gap: 8px; }
.ap-notes .note { margin: 0; font-size: 12.5px; }
.ap-notes .note > .ic { margin-top: 2px; color: var(--ink3); }

/* ---------- Page head ---------- */
.ap-head { display: block; margin-bottom: 22px; scroll-margin-top: 88px; }
.ap-head h1 { margin: 0; font-family: var(--font-d); font-size: 32px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.ap-head p { margin: 8px 0 0; max-width: 62ch; color: var(--ink2); font-size: 15px; line-height: 1.55; }
.ap-flash { margin-bottom: 16px; }

/* ---------- The step card ---------- */
.ap-card { padding: 0; }
.ap-step { padding: 24px 24px 0; }
.ap-card .m-fields { padding: 0; gap: 16px; }
.ap-card .m-fields.two { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; } /* statistiken.css has a .two helper with a margin */
.ap-street { grid-template-columns: minmax(0, 1fr) 140px; }
.ap-city { grid-template-columns: 140px minmax(0, 1fr); }
.ap-birth { max-width: 240px; }
.ap-code { max-width: 320px; }
.ap-code input { letter-spacing: .06em; text-transform: uppercase; }
.ap-code input::placeholder { letter-spacing: 0; text-transform: none; }
.ap-hint { margin: -6px 0 0; color: var(--ink3); font-size: 12.5px; line-height: 1.5; }
.m-field > span small { margin-left: 4px; }
.ap-card .m-field input:hover:not(:focus), .ap .db-select-btn:hover { border-color: color-mix(in srgb, var(--ink3) 45%, var(--line2)); }

/* password with the eye */
.apply-pwd-wrap { position: relative; display: block; }
.ap .apply-pwd-wrap input { padding-right: 44px; }
.ap .apply-pwd-toggle {
  position: absolute; right: 4px; top: 50%; display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: 8px; background: none; color: var(--ink3); cursor: pointer; transform: translateY(-50%);
}
.ap .apply-pwd-toggle:hover { background: var(--sunken); color: var(--ink); }
.ap .apply-pwd-toggle .wa-ic { font-size: 15px; }

/* address: search with suggestions, or by hand */
.ap-address { display: grid; gap: 10px; }
.ap-address > .m-field { gap: 6px; }
.ap-search { position: relative; display: block; }
.ap-search > .ic { position: absolute; left: 12px; top: 12px; color: var(--ink3); pointer-events: none; }
.ap-card .ap-search input { padding-left: 36px; }
.ap-link {
  justify-self: start; padding: 2px 0; border: 0; background: none; color: var(--accent-text); font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color .15s;
}
.ap-link:hover { text-decoration-color: currentColor; }
.ap-addr-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13.5px; font-weight: 600; }

/* billing address: a switch row */
.ap-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 12px; cursor: pointer; transition: border-color .15s;
}
.ap-row:hover { border-color: var(--line2); }
.ap-row-t { display: grid; gap: 2px; }
.ap-row-t b { font-size: 14px; font-weight: 600; }
.ap-row-t small { color: var(--ink3); font-size: 12.5px; line-height: 1.45; }
.ap-row .m-switch { position: relative; flex: none; }

/* consent: the declaration row of the rules page */
.ap-consent {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px;
  color: var(--ink2); font-size: 13.5px; line-height: 1.5; cursor: pointer; transition: border-color .15s, background-color .15s;
}
.ap-consent:hover { border-color: var(--line2); }
.ap-consent:has(input:checked) { border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: var(--ok-soft); color: var(--ink); }
.ap-consent input {
  appearance: none; -webkit-appearance: none; flex: none; width: 20px; height: 20px; margin: 1px 0 0; border: 1.5px solid var(--line2);
  border-radius: 6px; background: var(--surface) center / 14px no-repeat; cursor: pointer; transition: background-color .15s, border-color .15s;
}
.ap-consent input:checked {
  border-color: var(--ok); background-color: var(--ok);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.ap-consent input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ap-consent a, .ap-help a { color: var(--accent-text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* errors and the buttons at the foot of the card */
.ap-err { margin: 18px 24px 0; }
.ap-foot { display: flex; align-items: center; gap: 10px; padding: 24px; }
.ap-go { margin-left: auto; min-width: 132px; }
.ap-foot .btn:disabled, .ap-foot .btn2:disabled { opacity: .6; cursor: progress; }
.ap-help { margin: 20px 0 0; color: var(--ink3); font-size: 13px; }

/* ---------- Dropdowns (legal form, country, address suggestions): the portal's picker ---------- */
.ap .db-select-btn {
  height: 40px; padding: 0 12px; border: 1px solid var(--line2); border-radius: 10px; background: var(--page); color: var(--ink); font-size: 14px;
}
.ap .db-select-btn:focus-visible, .ap .db-select.is-open .db-select-btn { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--surface); }
.ap .db-select-btn::after {
  width: 16px; height: 16px; border: 0; transform: none; background-color: var(--ink3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: rotate .2s var(--ease);
}
.ap .db-select.is-open .db-select-btn::after { transform: none; rotate: 180deg; background-color: var(--accent-text); }
.ap .db-select-list { left: 0; right: auto; min-width: 100%; padding: 6px; border-radius: 12px; box-shadow: var(--pop); }
.ap .db-select-search { padding: 0 0 6px; margin-bottom: 6px; }
.ap .db-select-search input { height: 36px; padding: 0 10px; border: 1px solid var(--line2); border-radius: 8px; background: var(--page); }
.ap .db-select-list button { min-height: 38px; padding: 8px 10px; border-radius: 8px; }
.ap .db-select-list button.is-active { background: var(--accent-soft); }
.ap .apply-addr-suggest .apply-addr-option.is-on { background: var(--sunken); }

/* ---------- Toasts (cm.js) as in the portal ---------- */
.ap .db-toast {
  display: flex; align-items: center; gap: 12px; max-width: min(520px, calc(100vw - 32px)); padding: 12px 16px; border-radius: 14px;
  background: var(--toast); color: #f5f5f4; font-size: 13.5px; box-shadow: var(--pop);
}

/* ---------- Legitimation steps (verification_wizard.js) in the card ---------- */
.ap .ap-legit { padding: 24px; }
.ap .ap-legit .gw-body { padding: 0; border: 0; border-radius: 0; background: none; }
.ap .ap-legit :where(h3, h4) { font-family: var(--font); letter-spacing: 0; }
.ap .ap-legit .db-card-head { gap: 12px; margin-bottom: 14px; }
.ap .ap-legit .db-card-head h3 { font-size: 15px; font-weight: 600; }
.ap .ap-legit .db-card-icon { width: 36px; height: 36px; border-radius: 10px; }
.ap .ap-legit .db-card-head + .db-metric-note { margin: -4px 0 16px; }
.ap .ap-legit .db-metric-note { color: var(--ink2); font-size: 13.5px; line-height: 1.55; }
.ap .ap-legit .db-btn {
  height: 40px; padding: 0 18px; border-radius: 12px; background: var(--accent); color: var(--on-accent); font-size: 14px; font-weight: 600;
  justify-content: center; transition: filter .15s;
}
.ap .ap-legit .db-btn:hover { background: var(--accent); color: var(--on-accent); filter: brightness(1.06); }
.ap .ap-legit .db-btn-ghost { height: 40px; padding: 0 16px; border: 1px solid var(--line2); border-radius: 12px; background: var(--surface); font-size: 14px; }
.ap .ap-legit .db-btn-ghost:hover { border-color: var(--line2); background: var(--sunken); }
.ap .ap-legit .db-btn-ghost.is-small, .ap .ap-legit .db-btn.is-small { height: 32px; padding: 0 12px; border-radius: 9px; font-size: 13px; }
.ap .ap-legit .db-actions { justify-content: flex-end; gap: 10px; margin-top: 24px; }
.ap .ap-legit .db-note { gap: 10px; padding: 10px 14px; border: 0; border-radius: 12px; background: var(--sunken); color: var(--ink2); font-size: 13px; line-height: 1.5; }
.ap .ap-legit .db-note.is-bad { background: var(--bad-soft); color: var(--bad); }
.ap .ap-legit .db-note.is-quiet { padding: 10px 14px; background: var(--sunken); }
.ap .ap-legit .db-field > span { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.ap .ap-legit .db-field input { height: 40px; padding: 0 12px; border: 1px solid var(--line2); border-radius: 10px; background: var(--page); }
.ap .ap-legit .db-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--surface); }
.ap .ap-legit .vw-check-item { border-radius: 12px; }
.ap .ap-legit .vw-check-circle { width: 28px; height: 28px; border-width: 1px; font-size: 12px; }
.ap .ap-legit .vw-check-text b { font-size: 14px; font-weight: 600; }
.ap .ap-legit .vw-check-text span { font-size: 12.5px; line-height: 1.45; }
.ap .ap-legit .vw-captcha { margin-top: 20px; padding-top: 20px; }
.ap .ap-legit .vw-captcha-img { border-radius: 12px; border-color: var(--line2); }
.ap .ap-legit .vw-choice-opt { border-radius: 14px; }
.ap .ap-legit .vw-choice-opt:hover { background: var(--accent-soft); }
.ap .ap-legit .gw-summary h4 { font-size: 17px; font-weight: 700; }
.ap .ap-legit .gw-summary-icon { width: 52px; height: 52px; }

/* ---------- Phones and tablets ---------- */
@media (max-width: 900px) {
  /* the contents shrink to the progress on top; the note on the data goes below the card */
  .ap-wrap { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "toch" "main" "trust"; gap: 20px; padding: 20px 24px 64px; }
  .ap-toc { display: contents; }
  .ap-toc-h { grid-area: toch; }
  .ap-toc-h b { display: none; }
  .ap-steps { display: none; }
  .ap-notes { grid-area: trust; }
  .ap-head h1 { font-size: 26px; }
  .ap-head p { font-size: 14px; }
}
@media (max-width: 560px) {
  .ap-bar-r > span { display: none; }
  .ap-wrap { padding: 16px 16px 56px; }
  .ap-step { padding: 18px 16px 0; }
  .ap-card .m-fields.two, .ap-street, .ap-city { grid-template-columns: minmax(0, 1fr); }
  .ap-birth, .ap-code { max-width: none; }
  .ap-err { margin: 16px 16px 0; }
  .ap-foot { padding: 20px 16px; }
  .ap-go { min-width: 0; flex: 1; }
  .ap .ap-legit { padding: 18px 16px; }
  .ap .ap-legit .db-actions > * { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .bar-p i, .ap-steps .apply-step, .ap-steps .apply-step::before, .ap-consent, .ap-row { transition: none; }
}

/* security code before the account is created */
.ap-captcha { display: grid; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.ap-captcha-h { display: grid; gap: 2px; }
.ap-captcha-h b { font-size: 14px; font-weight: 600; }
.ap-captcha-h span { color: var(--ink3); font-size: 12.5px; line-height: 1.45; }
.ap-captcha-row { display: flex; align-items: center; gap: 10px; }
.ap-captcha-img { display: block; width: 260px; max-width: calc(100% - 50px); height: auto; aspect-ratio: 260 / 84; border: 1px solid var(--line2); border-radius: 12px; background: #f9f7f2; }
.ap-captcha-new { width: 40px; padding: 0; }
.ap-captcha-in { max-width: 260px; }
.ap-card .ap-captcha-in input { letter-spacing: .18em; text-transform: uppercase; font-weight: 600; }

/* wide screens: the card fills the width, so the short steps put their fields side by side */
@media (min-width: 1200px) {
  .ap-step[data-step="1"] > .m-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .ap-step[data-step="1"] > .m-fields > .ap-hint { grid-column: 1 / -1; }
  .ap-step[data-step="4"] > .m-fields { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .ap-step[data-step="4"] .ap-birth { max-width: none; }
}

/* ---------- Motion: steps slide in (forward from the right, back from the left), errors shake, ticks pop ---------- */
.ap-step.is-fwd { animation: ap-fwd .38s var(--ease); }
.ap-step.is-back { animation: ap-back .38s var(--ease); }
@keyframes ap-fwd { from { opacity: 0; transform: translateX(22px); } }
@keyframes ap-back { from { opacity: 0; transform: translateX(-22px); } }
.ap-shake { animation: ap-shake .4s ease; }
@keyframes ap-shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.ap-steps .apply-step.is-done::before { animation: ap-tick .45s cubic-bezier(.34, 1.56, .64, 1); }
.ap-steps .apply-step.is-active::before { animation: ap-now .5s var(--ease); }
@keyframes ap-tick { from { transform: scale(.3); } }
@keyframes ap-now { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } to { box-shadow: 0 0 0 8px transparent; } }
.ap .db-select-list:not([hidden]), .ap .apply-addr-suggest:not([hidden]) { animation: ap-pop .16s var(--ease); }
@keyframes ap-pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.ap-legit { animation: ap-fwd .45s var(--ease); }
.ap-captcha-img { transition: opacity .2s; }
.ap-captcha-img.is-loading { opacity: .35; }
.ap-card { transition: box-shadow .3s var(--ease); }
.ap-card:focus-within { box-shadow: 0 12px 40px var(--shadow-c); }
@media (prefers-reduced-motion: reduce) {
  .ap-step.is-fwd, .ap-step.is-back, .ap-shake, .ap-steps .apply-step.is-done::before, .ap-steps .apply-step.is-active::before,
  .ap .db-select-list:not([hidden]), .ap .apply-addr-suggest:not([hidden]), .ap-legit { animation: none; }
}