/* Mobile layout for the visitor → code journey. Desktop module styles remain in charge. */
@media (max-width: 1199.98px) {
  .main-navigation.sticky-top nav.navbar {
    margin-block: .5rem;
    padding-block: .5rem;
    border-radius: 1.25rem;
  }
  .main-navigation nav.navbar > .navbar-nav > li { padding: 0; }
  .main-navigation nav.navbar .nav-icon-btn,
  .main-navigation nav.navbar .navbar-toggler { min-width: 44px; min-height: 44px; }
  .main-navigation #offcanvasNavbar .bc-mobile-start {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    white-space: normal;
    font-size: 1rem;
  }
  .main-navigation .btn-close { min-width: 24px; min-height: 24px; padding: 10px; }
}
@media (max-width: 767.98px) {
  body { font-size: 1rem; line-height: 1.5; }
  #backcode-start { border-radius: 1.25rem; }
  #backcode-start > .container { padding-inline: 0; }
  #backcode-start .bc-hero-teaser__bg { height: 112px; }
  #backcode-start .bc-hero-teaser__content { padding: 1.125rem; }
  #backcode-start .bc-hero-teaser__eyebrow {
    letter-spacing: .08em;
    font-size: .75rem;
    line-height: 1.5;
    margin-bottom: .75rem;
  }
  #backcode-start h1 { font-size: 1.75rem; font-weight: 600; line-height: 1.15; margin-bottom: .75rem; hyphens: none; word-break: normal; overflow-wrap: normal; text-wrap: balance; }
  #backcode-start .lead { font-size: 1rem; line-height: 1.5; }
  #backcode-start .lead p:last-child { margin-bottom: 0; }
  #backcode-start .bc-hero-teaser__actions { margin-top: 1rem; gap: .625rem; }
  #backcode-start .bc-hero-teaser__actions .btn { min-height: 48px; white-space: normal; }
  #backcode-start .bc-hero-teaser__proof { flex-wrap: wrap; overflow: visible; gap: .375rem .75rem; }
  #backcode-start .bc-hero-teaser__proof li {
    min-height: 0;
    padding: 0;
    background: none;
    border: 0;
    font-size: .8125rem;
    font-weight: 500;
    white-space: normal;
    max-width: 100%;
  }
  #backcode-start .bc-hero-teaser__costs { margin-top: 1rem; }
  #backcode-start .bc-hero-teaser__cost span { font-size: .875rem; }

  /* Keep the email form wide enough for typing, without nesting three gutters. */
  main .bc-login-progress { padding-inline: .25rem; margin-top: .75rem !important; }
  main .bc-login-progress p:last-child { margin-bottom: .75rem; }
  #bc-login { padding: 1.125rem !important; border-radius: 1.25rem; }
  #bc-login > .row { --bs-gutter-x: 0; }
  #bc-login .bc-login-form-panel { padding: 0 !important; }
  #bc-login .bc-login-explanation { padding: 1rem !important; }
  #bc-login .bc-login-explanation > div { padding: 0 !important; }
  #bc-login h1, #bc-login h2 { font-size: 1.5rem; line-height: 1.25; }
  #bc-login input.form-control { min-height: 48px; font-size: 1rem; }
  #bc-login #otp_code { letter-spacing: .2em; font-size: 1.25rem; }
  #bc-login .form-check { padding-left: 1.75rem; }
  #bc-login .form-check-input { width: 20px; height: 20px; margin-left: -1.75rem; }
  #bc-login .btn { width: 100%; min-height: 48px; white-space: normal; font-size: 1rem; }
  #bc-login form > .my-4 { margin-block: 1rem !important; }

  /* A single mobile field supports ordinary typing, correction and pasting. */
  #code-pruefen { padding: 1rem; border-radius: 1.25rem; scroll-margin-top: 5rem; }
  #code-pruefen .main-heading { font-size: 1.5rem !important; line-height: 1.2; }
  #code-pruefen .main-heading br { display: none; }
  #code-pruefen .main-heading span { font-size: 1.125rem; line-height: 1.3; }
  #code-pruefen .bc-finder-intro { font-size: 1rem; line-height: 1.5; margin-bottom: 1rem; }
  #code-pruefen #bc-code-grid { display: none; }
  #bc_code_mobile { min-height: 52px; font: 600 1.25rem/1.4 system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
  #code-pruefen .bc-lookup-form { display: flex; flex-direction: column; }
  #code-pruefen .bc-actions { order: 1; margin-top: .75rem !important; }
  #code-pruefen .bc-code-hint { order: 2; font-size: .875rem; }
  #code-pruefen .bc-steps { order: 3; margin-top: .75rem; }
  #code-pruefen .bc-steps li { padding: .375rem; font-size: .8125rem; }
  #code-pruefen .bc-btn { width: 100%; min-height: 48px; padding: .75rem; font-size: 1rem; }
  #code-pruefen .bc-card { padding: 1rem; overflow-wrap: anywhere; }
  #code-pruefen .bc-contact-anchor { scroll-margin-top: 5rem; }

  #usr .bc-create-panel { padding: 1.125rem; margin-block: 1rem !important; }
  #usr .bc-create-panel h1 { font-size: 1.65rem; line-height: 1.2; }
  #usr .bc-create-panel .bc-usage { flex: 0 0 auto; min-width: 0; }
  #usr .bc-create-panel .bc-create-panel__header { gap: 1rem; margin-bottom: 1rem; }
  #usr .bc-create-panel .bc-create-form { padding-top: 1rem; }
  #usr #bc-create-button { min-height: 48px; font-size: 1rem; white-space: normal; }
  #usr .form-control { font-size: 1rem; }
  #usr #bc-setup { padding: 0; margin-block: 1rem !important; scroll-margin-top: 5rem; }
  #usr #bc-setup > div { padding: 1.125rem !important; border-radius: 1.25rem; }
  #bc-setup h1 { font-size: 1.65rem; line-height: 1.2; }
  #bc-setup .lead { font-size: 1rem; line-height: 1.5; overflow-wrap: anywhere; }
  #bc-setup .btn { width: 100%; min-height: 48px; font-size: 1rem; white-space: normal; }
  #bc-setup img { width: 180px; }
  #usr .code-box__actions .btn { white-space: normal; font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  #backcode-start .bc-hero-teaser__bg img,
  .main-navigation.sticky-top { transition: none; }
}