/* ks-login.css 2026-10-08
   Login / checkout entry page (login.php, module/login.html).
   Same look as the brand page (ks-markenwelt.css): colors, radii, Lato headings.
   All selectors are scoped to .lg (prefix lg-) so nothing leaks into Bootstrap 2 / shop CSS.
   Colors are variables on .lg; shops with their own palette override them in <SHOPIDF>-special.css
   with `body .lg { --lg-accent: ...; }` (body raises specificity, this file is loaded later).
   Breakpoints follow the shop: <768 mobile, 768-979 tablet, >=980 desktop. */

.lg {
  --lg-accent: #00498f; --lg-accent-dark: #003a73; --lg-ink: #1b1f27; --lg-ink-2: #3f4652; --lg-muted: #5a6270;
  --lg-line: #e1e4e9; --lg-line-2: #edeff2; --lg-ground: #f6f7f9; --lg-tint: #f4f8fd; --lg-tint-2: #e4eef9;
  --lg-on-accent: #fff; --lg-focus: rgba(0, 73, 143, .15);
  color: var(--lg-ink); font-size: 14px; line-height: 1.4; margin: 0 0 32px;
}
.lg *, .lg *::before, .lg *::after { box-sizing: border-box; }
.lg [hidden] { display: none !important; }
.lg-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* The shop forces `body main a { color: #626262 !important }`, so link colors inside .lg need !important too. */
.lg a { color: var(--lg-accent) !important; text-decoration: none; }
.lg a:hover { text-decoration: underline; }
.lg a.lg-btn, .lg a.lg-btn:hover { color: var(--lg-on-accent) !important; text-decoration: none; }
.lg a.lg-pay-btn { color: var(--lg-ink) !important; text-decoration: none; }
.lg button { font-family: inherit; cursor: pointer; margin: 0; }
/* margin/padding reset needs the extra specificity against shop rules like body[id*="content"] h2 { margin: 50px 0 20px } */
.lg h1, .lg h2, .lg p, .lg ul { margin: 0; padding: 0; }
.lg h1, .lg h2 { font-family: "Lato", Arial, Helvetica, sans-serif; color: var(--lg-ink); text-transform: none; letter-spacing: 0; }

/* --- Head --- */
.lg-head { padding: 12px 0 18px; }
.lg .lg-h1 { font-size: 32px; line-height: 1.15; font-weight: 700; }
.lg .lg-sub { margin-top: 6px; font-size: 15px; color: var(--lg-ink-2); }
.lg-alert { margin: 0 0 14px; padding: 12px 16px; border: 1px solid #f0b8b8; border-radius: 10px; background: #fdf1f1; color: #9b1c1c; font-size: 14px; }

/* --- Cards --- */
.lg-card { position: relative; margin: 0 0 14px; padding: 18px 16px; background: #fff; border: 1px solid var(--lg-line); border-radius: 12px; }
.lg .lg-title { font-size: 18px; line-height: 1.25; font-weight: 700; }
.lg .lg-text { margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--lg-ink-2); }
.lg .lg-note p { margin: 0; }
.lg-ico { flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%; background: var(--lg-tint-2); color: var(--lg-accent); display: flex; align-items: center; justify-content: center; }
.lg-ico svg { width: 30px; height: 30px; }

/* Buttons */
.lg .lg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 46px; padding: 0 20px; border: 0; border-radius: 10px; background: var(--lg-accent); color: var(--lg-on-accent); font-size: 15px; font-weight: 700; line-height: 1; white-space: nowrap; }
.lg .lg-btn:hover { background: var(--lg-accent-dark); }
.lg .lg-btn svg, .lg .lg-row-link svg { flex-shrink: 0; }
.lg .lg-btn:focus-visible, .lg .lg-pay-btn:focus-visible, .lg .lg-eye:focus-visible { outline: 3px solid var(--lg-focus); outline-offset: 2px; }

/* --- Express checkout --- */
.lg-pay { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 14px; }
.lg .lg-pay-btn { display: flex; align-items: center; justify-content: center; gap: 6px; height: 46px; border: 1px solid #c9ced6; border-radius: 8px; background: #fff; font-size: 21px; font-weight: 600; line-height: 1; }
.lg a.lg-pay-btn:hover { border-color: var(--lg-accent); }
.lg-pp { font-family: Verdana, "DejaVu Sans", Arial, sans-serif; font-style: italic; font-weight: 700; letter-spacing: -.5px; }
.lg-pp b { color: #003087; } .lg-pp i { color: #009cde; }
.lg .lg-pay-apple { background: #000; border-color: #000; color: #fff; font-family: -apple-system, "Helvetica Neue", Arial, sans-serif; }
.lg .lg-pay-google { color: #5f6368; font-family: Arial, sans-serif; font-weight: 500; }
.lg .lg-pay-btn.is-soon { cursor: not-allowed; opacity: .45; }

/* --- Guest (recommended) --- */
.lg-guest, .lg-login { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; row-gap: 14px; align-items: start; }
.lg-guest .lg-action, .lg-login .lg-form { grid-column: 1 / -1; }
.lg-usps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px !important; }
.lg-usps li { display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; line-height: 1.3; color: var(--lg-ink-2); }
.lg-usps svg { flex-shrink: 0; color: var(--lg-accent); }
/* the USP list sits under the full card width on mobile */
.lg-guest .lg-main { display: contents; }
.lg-guest .lg-title, .lg-guest .lg-text { grid-column: 2; }
.lg .lg-express .lg-text, .lg .lg-guest .lg-text, .lg .lg-login .lg-text { font-size: 16px; }
.lg-guest .lg-text { margin-top: -10px; }
.lg-guest .lg-usps { grid-column: 1 / -1; margin-top: 0 !important; }
.lg-guest .lg-ico { grid-row: 1 / span 2; }

/* --- Login --- */
.lg-login .lg-main { display: contents; }
.lg-login .lg-title, .lg-login .lg-text { grid-column: 2; }
.lg-login .lg-text { margin-top: -10px; }
.lg-login .lg-note { grid-column: 1 / -1; margin-top: 0; }
.lg-login .lg-ico { grid-row: 1 / span 2; }
.lg-form { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.lg-field { position: relative; }
.lg .lg-input { display: block; width: 100%; height: 44px; margin: 0; padding: 0 14px; border: 1px solid #c9ced6; border-radius: 8px; background: #fff; box-shadow: none; color: var(--lg-ink); font: inherit; font-size: 16px; line-height: 1.2; }
.lg .lg-input:focus { border-color: var(--lg-accent); box-shadow: 0 0 0 3px var(--lg-focus); outline: 0; }
.lg .lg-input::placeholder { color: #7b828d; }
.lg .lg-pw .lg-input { padding-right: 48px; }
.lg .lg-eye { position: absolute; top: 2px; right: 2px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--lg-muted); display: flex; align-items: center; justify-content: center; }
.lg .lg-eye[aria-pressed="true"] { color: var(--lg-accent); }
.lg-submit { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.lg .lg-forgot { font-size: 14px; }

/* --- Slim rows: new customer / private customer shop / business registration --- */
.lg-row { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 4px; margin: 0 0 14px; padding: 12px 16px; background: var(--lg-ground); border: 1px solid var(--lg-line); border-radius: 12px; }
.lg-row-ico { flex-shrink: 0; color: var(--lg-ink-2); }
.lg .lg-row strong { font-size: 16px; font-weight: 700; color: var(--lg-ink); }
.lg .lg-row-link { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 600; white-space: nowrap; }

@media (min-width: 768px) {
  .lg-card { padding: 22px 24px; }
  .lg-pay { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .lg-usps li { font-size: 13px; }
}

@media (min-width: 980px) {
  .lg-head { padding-top: 16px; }
  .lg .lg-sub { font-size: 16px; }
  .lg-card { margin-bottom: 18px; padding: 24px 28px; }
  .lg .lg-title { font-size: 21px; }
  .lg-ico { width: 72px; height: 72px; }
  .lg-ico svg { width: 36px; height: 36px; }
  /* icon | content | action */
  .lg-guest, .lg-login { grid-template-columns: 72px minmax(0, 1fr) 220px; column-gap: 28px; row-gap: 0; align-items: center; }
  .lg-guest .lg-main, .lg-login .lg-main { display: block; grid-column: 2 / -1; }
  .lg-guest .lg-main { grid-column: 2; }
  .lg-guest .lg-ico, .lg-login .lg-ico { grid-row: auto; }
  .lg-guest .lg-text, .lg-login .lg-text { margin-top: 4px; }
  .lg-guest .lg-usps { margin-top: 16px !important; gap: 16px; }
  .lg-usps li { align-items: center; font-size: 13.5px; }
  .lg-guest .lg-action { grid-column: 3; }
  .lg-login .lg-ico { align-self: start; }
  .lg-login .lg-note { margin-top: 6px; }
  .lg-form { flex-direction: row; align-items: flex-start; gap: 16px; margin-top: 16px; }
  .lg-form .lg-field { flex: 1; min-width: 0; }
  .lg-submit { flex: 0 0 220px; }
  .lg-row { padding: 14px 28px; column-gap: 16px; }
  .lg-row-link { margin-left: 8px; }
}