/* =====================================================================
   PPDMc v2 – Anmelden / Registrieren / Passwort (Design "Anmelden.dc.html")
   ===================================================================== */
.au { min-height: 100vh; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); background: #F4F2ED; color: #111111; font-size: 16px; }
.au__main { display: flex; flex-direction: column; padding: 28px clamp(20px, 5vw, 64px) 40px; }
.au__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.au-logo { display: flex; align-items: center; gap: 9px; text-decoration: none; color: #111111; }
.au-logo__mark { width: 26px; height: 26px; flex-shrink: 0; background: url('/assets/img/brand/dmc-zeichen.svg') center / contain no-repeat; }
.au-logo__text { font-family: var(--pp-font-display); font-size: 17px; font-weight: 600; letter-spacing: -0.03em; }
.au__back { font-size: 14.5px; font-weight: 600; color: #5E5A53; text-decoration: none; }
.au__center { flex: 1; display: flex; align-items: center; justify-content: center; padding: 48px 0; }
.au__box { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 28px; }
.au-tabs { display: flex; padding: 4px; border-radius: 16px; background: #E9E5DD; }
.au-tabs__btn { flex: 1; height: 44px; border-radius: 12px; border: 0; background: transparent; color: #111111; font-size: 15px; font-weight: 700; cursor: pointer; transition: background 0.25s ease; display: flex; align-items: center; justify-content: center; text-decoration: none; }
.au-tabs__btn.is-active { background: #FFFFFF; box-shadow: 0 1px 4px rgba(17, 17, 17, 0.1); }
.au-tabs__btn:hover { color: #111111; }
.au-head { display: flex; flex-direction: column; gap: 10px; }
.au-title { margin: 0; font-family: var(--pp-font-display); font-weight: 500; font-size: clamp(34px, 4vw, 46px); line-height: 1; letter-spacing: -0.05em; }
.au-sub { margin: 0; font-size: 16px; line-height: 1.55; color: #5E5A53; }
.au-form { display: flex; flex-direction: column; gap: 14px; }
.au-label { display: flex; flex-direction: column; gap: 7px; font-size: 14px; font-weight: 600; }
.au-label__row { display: flex; justify-content: space-between; }
.au-label__row a { font-weight: 600; color: #5E5A53; }
.au-input { height: 52px; padding: 0 16px; border-radius: 14px; border: 1px solid #E3DFD6; background: #FFFFFF; color: #111111; font-size: 16px; outline: 0; width: 100%; min-width: 0; transition: border-color 0.2s, box-shadow 0.2s; }
.au-input:focus { border-color: var(--pp-accent); box-shadow: 0 0 0 4px oklch(0.93 0.04 255); }
.au-input.is-invalid { border-color: oklch(0.6 0.17 25); }
.au-pw { position: relative; display: flex; }
.au-pw .au-input { padding-right: 96px; }
.au-pw__toggle { position: absolute; right: 8px; top: 8px; height: 36px; padding: 0 10px; border-radius: 10px; border: 0; background: #F4F2ED; font-size: 13px; font-weight: 700; color: #5E5A53; cursor: pointer; }
.au-strength { display: flex; flex-direction: column; gap: 8px; }
.au-strength__bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.au-strength__bars span { height: 4px; border-radius: 2px; background: #E3DFD6; transition: background 0.25s ease; }
.au-strength__text { font-size: 13px; color: #7A766D; }
.au-check { display: flex; align-items: flex-start; gap: 12px; padding: 0; border: 0; background: transparent; font-size: 14px; line-height: 1.5; color: #5E5A53; text-align: left; cursor: pointer; }
.au-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.au-check__box { width: 22px; height: 22px; flex-shrink: 0; border-radius: 7px; border: 1.5px solid #CFCAC0; background: #FFFFFF; color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; transition: background 0.2s ease; }
.au-check input:checked + .au-check__box { background: var(--pp-accent); border-color: var(--pp-accent); }
.au-check input:checked + .au-check__box::before { content: '✓'; }
.au-check input:focus-visible + .au-check__box { outline: 2px solid var(--pp-accent); outline-offset: 2px; }
.au-error { padding: 12px 14px; border-radius: 12px; background: oklch(0.95 0.03 25); color: oklch(0.45 0.14 25); font-size: 14px; font-weight: 600; }
.au-notice { padding: 12px 14px; border-radius: 12px; background: var(--pp-success-soft); color: oklch(0.38 0.09 155); font-size: 14px; font-weight: 600; line-height: 1.5; }
.au-submit { margin-top: 6px; height: 56px; border-radius: 16px; border: 0; background: #111111; color: #FFFFFF; font-size: 16.5px; font-weight: 700; cursor: pointer; transition: background 0.25s ease, opacity 0.2s; display: flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; }
.au-submit:hover { color: #FFFFFF; background: #2A2A2A; }
.au-submit--blue { background: var(--pp-accent); }
.au-submit--blue:hover { background: var(--pp-accent-hover); }
.au-submit.is-loading { opacity: 0.6; pointer-events: none; }
.au-submit.is-loading::after { content: ''; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: pp-spin 0.7s linear infinite; }
.au-perks { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13.5px; font-weight: 600; color: #5E5A53; }
.au-alt { font-size: 14.5px; color: #5E5A53; }
.au-alt a { font-weight: 700; }
.au-foot { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13.5px; color: #7A766D; }
.au-foot a { color: #7A766D; text-decoration: none; }
.au-foot .au-foot__strong { color: #5E5A53; font-weight: 600; }
.au-done { display: flex; flex-direction: column; gap: 22px; }
.au-done__mark { width: 56px; height: 56px; border-radius: 18px; background: var(--pp-accent); color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 700; }
.au-code { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.au-code input { height: 60px; width: 100%; min-width: 0; text-align: center; font-family: var(--pp-font-display); font-size: 26px; font-weight: 600; border-radius: 14px; border: 1px solid #E3DFD6; background: #FFFFFF; outline: 0; }
.au-code input:focus { border-color: var(--pp-accent); box-shadow: 0 0 0 4px oklch(0.93 0.04 255); }
.au-linkbtn { padding: 0; border: 0; background: none; font: inherit; font-size: 14.5px; font-weight: 700; color: #111111; text-decoration: underline; cursor: pointer; }
.au-linkbtn[disabled] { color: #8A857C; text-decoration: none; cursor: default; }
.au-hint { font-size: 13.5px; line-height: 1.5; color: #7A766D; }

/* showcase panel (≥ 980px) */
.au__panel { display: none; position: sticky; top: 0; height: 100vh; padding: 14px; }
@media (min-width: 980px) { .au__panel { display: block; } }
.au-show { height: 100%; border-radius: 32px; background: #111111; color: #F4F2ED; padding: clamp(32px, 4vw, 56px); display: flex; flex-direction: column; justify-content: space-between; gap: 40px; overflow: hidden; }
.au-show__title { font-family: var(--pp-font-display); font-size: clamp(30px, 3.2vw, 48px); font-weight: 500; line-height: 1.02; letter-spacing: -0.05em; max-width: 480px; }
.au-show__title span { color: oklch(0.72 0.15 250); }
.au-show__cards { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.au-show__dish { width: min(100%, 340px); padding: 18px 20px; border-radius: 22px; background: #FFFFFF; color: #111111; display: flex; flex-direction: column; gap: 6px; transform: rotate(-1.5deg); }
.au-show__dish-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.au-show__dish-row b { font-size: 16px; font-weight: 700; }
.au-show__dish-row span { font-family: var(--pp-font-display); font-weight: 600; }
.au-show__dish small { font-size: 13.5px; color: #7A766D; }
.au-show__langs { margin-left: 40px; padding: 12px 16px; border-radius: 14px; background: var(--pp-accent); color: #FFFFFF; font-size: 14px; font-weight: 700; transform: rotate(1deg); }
.au-show__live { margin-left: 10px; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: oklch(0.78 0.13 150); }
.au-show__live i { width: 8px; height: 8px; border-radius: 50%; background: oklch(0.78 0.13 150); }
.au-show__points { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; border-top: 1px solid #2A2A2A; }
.au-show__points div { display: flex; gap: 12px; font-size: 15px; color: #C9C5BC; }
.au-show__points b { color: oklch(0.72 0.15 250); font-weight: 700; }