/* Anmeldeflächen (Login, Passwort zurücksetzen, Code-Bestätigung) – ab 0.50.0; seit 0.53.4 in der Farbwelt der Portale und der neuen Website (Grau statt Beige, Schibsted für Überschriften).
   Eine Karte in der Mitte, kein Kopf, kein Fuß der Website; unten nur Impressum & Datenschutz. */
:root{--gruen:#254436;--gruen2:#1b3228;--bg:#f3f5f3;--karte:#fff;--tinte:#1c271f;--grau:#5f6a62;--rot:#b3261e;--linie:#d3ddd6;--feld:#fff;--fokus:rgba(37,68,54,.15);--ring:#34a86b;--ring-t:rgba(52,168,107,.35);--glow:rgba(52,168,107,.4);--ok-bg:#2c7a52;--ok-fg:#fff}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{height:100%}
body{margin:0;min-height:100%;display:flex;flex-direction:column;background:var(--bg);color:var(--tinte);font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.4}
.ds-auth__main{flex:1 1 auto;display:flex;align-items:center;justify-content:center;padding:24px 16px}
.k{position:relative;isolation:isolate;width:min(400px,100%);background:var(--karte);border-radius:20px;padding:30px 28px 24px;box-shadow:0 10px 34px rgba(20,28,24,.10);text-align:center}
.k::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;background:radial-gradient(circle at 50% 58%,rgba(52,168,107,.32),rgba(52,168,107,0) 62%);opacity:0;transition:opacity .7s .5s}
.k.ok::before{opacity:1}
.k .logo{width:56px;height:56px;border-radius:14px;display:block;margin:0 auto 14px}
h1{font-family:"Schibsted Grotesk","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:1.35rem;margin:0 0 6px;font-weight:800;letter-spacing:-.015em;color:var(--gruen)}
.an{margin:0 0 18px;color:var(--grau);font-size:.92rem;line-height:1.5}
.m{margin:0 0 14px;padding:.55rem .7rem;border-radius:10px;font-size:.9rem;background:#e3efe8;color:var(--gruen)}
.m.f{background:#fbeceb;color:var(--rot)}
.m[hidden]{display:none}
.b{display:block;width:100%;margin-top:14px;padding:.8rem 1rem;border:0;border-radius:999px;background:var(--gruen);color:#fff;font:inherit;font-weight:700;cursor:pointer;text-decoration:none;text-align:center;transition:background-color .15s}
.b:hover{background:var(--gruen2)}
.b:disabled{opacity:.7;cursor:default}
.l{display:flex;justify-content:center;flex-wrap:wrap;gap:0 6px;margin:18px 0 0;font-size:.88rem;color:var(--grau)}
.l button,.l a{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--gruen);text-decoration:none;cursor:pointer}
.l button:hover,.l a:hover{text-decoration:underline}
.l button:disabled{color:var(--grau);font-weight:600;cursor:default;text-decoration:none;font-variant-numeric:tabular-nums}
.fz{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 16px;padding:12px 16px 18px;font-size:.8rem;color:var(--grau)}
.fz a{color:inherit;text-decoration:none}
.fz a:hover{color:var(--tinte);text-decoration:underline}

/* ---------- Code-Eingabe (2FA) ---------- */
input.code{width:100%;font:inherit;font-size:1.7rem;font-weight:700;letter-spacing:.45em;text-align:center;padding:.55rem .3rem .55rem .75em;border:1.5px solid var(--linie);border-radius:12px;color:var(--gruen);background:var(--feld);outline:none}
input.code:focus{border-color:var(--gruen);box-shadow:0 0 0 3px var(--fokus)}
.c{position:relative}
.c .cb{display:none}
.c.js input.code{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:1;-webkit-appearance:none;appearance:none;border-radius:0;box-shadow:none;color:transparent;-webkit-text-fill-color:transparent;caret-color:transparent;background:transparent;outline:none;text-shadow:none;font-size:16px;letter-spacing:0;cursor:text;z-index:2}
.c.js input.code::selection{background:transparent}
/* Seit 0.53.5 nicht mehr opacity:0 - ein unsichtbares Feld bekommt auf dem iPhone weder den Code-Vorschlag aus Mail/SMS noch zuverlaessig das Einfuegen */
.c.js.pr input.code,.c.js.ok input.code{pointer-events:none}
.c.js .cb{display:flex;gap:8px;justify-content:center}
.c.js .cb span{position:relative;z-index:0;overflow:hidden;flex:1 1 0;max-width:52px;height:58px;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--linie);border-radius:14px;background:var(--feld);font-size:1.65rem;font-weight:700;color:var(--gruen);transition:border-color .15s,box-shadow .15s}
.c.js .cb span.v{border-color:#9fb0a5}
.c.js.f .cb span.a{border-color:var(--gruen);box-shadow:0 0 0 3px var(--fokus)}
.c.js.f .cb span.a:empty::after{content:"";width:2px;height:26px;border-radius:2px;background:var(--gruen);animation:dsb 1s steps(1) infinite}
.c.js .cb span i{font-style:normal;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:opacity .2s .35s}
.c.js .cb span svg{width:28px;height:28px;fill:none;stroke:var(--ok-fg);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.c.js .cb span svg path{stroke-dasharray:22;stroke-dashoffset:22}
/* Prüfen: leuchtender Rand läuft um jedes Kästchen */
.c.js.pr .cb span{border:0;background:transparent;animation:dsg .9s ease-in-out infinite alternate}
.c.js.pr .cb span::before{content:"";position:absolute;z-index:-2;inset:-60%;background:conic-gradient(from 0deg,transparent 0 24%,var(--ring-t) 38%,var(--ring) 50%,transparent 50% 74%,var(--ring-t) 88%,var(--ring) 100%);animation:dsr .9s linear infinite}
.c.js.pr .cb span::after{content:"";position:absolute;z-index:-1;inset:2.5px;border-radius:12px;background:var(--feld)}
.c.js.pr .cb span:nth-child(2)::before{animation-delay:-.15s}
.c.js.pr .cb span:nth-child(3)::before{animation-delay:-.3s}
.c.js.pr .cb span:nth-child(4)::before{animation-delay:-.45s}
.c.js.pr .cb span:nth-child(5)::before{animation-delay:-.6s}
.c.js.pr .cb span:nth-child(6)::before{animation-delay:-.75s}
/* Bestätigt: Kästchen laufen in die Mitte, werden eins, Haken zeichnet sich */
.c.js.ok .cb span{transform:translateX(var(--dx,0));transition:transform .5s cubic-bezier(.5,0,.2,1),opacity .2s .32s,background-color .3s .5s,border-color .3s .5s,color .3s .5s}
.c.js.ok .cb span:not(.z){opacity:0}
.c.js.ok .cb span.z{background:var(--ok-bg);border-color:var(--ok-bg);color:var(--ok-fg);animation:dsp .5s .55s ease-out,dsgl 1.4s .5s ease-out forwards}
.c.js.ok .cb span.z i{opacity:0}
.c.js.ok .cb span.z svg path{animation:dsc .4s .8s ease-out forwards}
/* Bestätigt: Knopf und Zeile darunter treten zurück */
.c.js.ok ~ .b{opacity:0;transition:opacity .3s .3s}
.k.ok .l{opacity:0;transition:opacity .3s .3s}
/* Falsch: kurzes Rütteln, roter Rand */
.c.js.err .cb{animation:dss .4s cubic-bezier(.36,.07,.19,.97)}
.c.js.err .cb span{border-color:var(--rot)}
@keyframes dsb{50%{opacity:0}}
@keyframes dsr{to{transform:rotate(360deg)}}
@keyframes dsg{from{box-shadow:0 0 0 0 transparent}to{box-shadow:0 0 18px 2px var(--glow)}}
@keyframes dsc{to{stroke-dashoffset:0}}
@keyframes dsp{50%{scale:1.12}}
@keyframes dsgl{0%{box-shadow:0 0 0 0 rgba(52,168,107,0)}30%{box-shadow:0 0 0 6px rgba(52,168,107,.28),0 0 46px 12px rgba(52,168,107,.6)}100%{box-shadow:0 0 0 3px rgba(52,168,107,.2),0 0 28px 5px rgba(52,168,107,.38)}}
@keyframes dss{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-6px)}40%,60%{transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce){
  .c.js .cb,.c.js .cb span,.c.js .cb span::before,.c.js .cb span i,.c.js .cb span svg path,.c.js.f .cb span.a:empty::after,.k::before{animation:none!important;transition:none!important}
  .c.js.ok .cb span.z svg path{stroke-dashoffset:0}
}

/* ---------- Passwort geändert: grünes Häkchen wie bei der Code-Bestätigung (ab 0.55.0) ---------- */
.k.okk::before{opacity:.6;transition-delay:.2s}
.k.okk .logo{display:none}
.hk{display:flex;justify-content:center;margin:4px 0 20px}
.hk span{width:64px;height:64px;border-radius:18px;background:var(--ok-bg);display:flex;align-items:center;justify-content:center;animation:dsp .5s .15s ease-out,dsgl 1.4s .1s ease-out forwards}
.hk svg{width:34px;height:34px;fill:none;stroke:var(--ok-fg);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.hk svg path{stroke-dasharray:30;stroke-dashoffset:30;animation:dsc .45s .5s ease-out forwards}
.k.okk h1{margin-bottom:8px}
.k.okk .an{margin-bottom:6px}
@media (prefers-reduced-motion:reduce){.hk span,.hk svg path{animation:none!important}.hk svg path{stroke-dashoffset:0}}

/* ---------- Ultimate-Member-Formulare (Login, Passwort zurücksetzen) ---------- */
.um{text-align:left;max-width:none!important;margin:0!important}
.um .um-form{padding:0!important}
.um .um-form form{margin:0}
.um .um-row{margin:0!important}
.um .um-field{padding:0 0 14px!important;margin:0}
.um .um-field-label label{display:block;font-size:.8rem;font-weight:600;color:var(--tinte);margin:0 0 6px}
.um .um-clear{clear:both}
.um .um-form input[type=text],.um .um-form input[type=password],.um .um-form input[type=email]{width:100%;font:inherit;font-size:1rem;padding:.72rem .85rem;border:1.5px solid var(--linie);border-radius:12px;background:var(--feld);color:var(--tinte);outline:none;-webkit-appearance:none;transition:border-color .15s,box-shadow .15s}
.um .um-form input:focus{border-color:var(--gruen);box-shadow:0 0 0 3px var(--fokus)}
.um .um_request_name{display:none!important}
.um .um-col-alt{margin:0!important;padding:0!important}
.um .um-col-alt .um-field{padding:0!important}
.um .um-field-checkbox{display:inline-flex;align-items:center;gap:.5rem;font-size:.9rem;color:var(--grau);cursor:pointer;margin:0}
.um .um-field-checkbox input{-webkit-appearance:checkbox;appearance:auto;width:17px;height:17px;margin:0;accent-color:var(--gruen)}
.um .um-field-checkbox-state{display:none}
.um .um-center{margin:0!important}
.um input.um-button{display:block;width:100%;margin-top:14px;padding:.8rem 1rem;border:0;border-radius:999px;background:var(--gruen);color:#fff;font:inherit;font-weight:700;cursor:pointer;-webkit-appearance:none;transition:background-color .15s}
.um input.um-button:hover{background:var(--gruen2)}
.um .um-col-alt-b{text-align:center;margin:16px 0 0!important;padding:0!important;font-size:.88rem}
.um .um-col-alt-b a,.um .um-link-alt{color:var(--gruen);font-weight:600;text-decoration:none}
.um .um-col-alt-b a:hover,.um .um-link-alt:hover{text-decoration:underline}
.um .um-field-error{margin-top:8px;padding:.5rem .7rem;border-radius:10px;font-size:.86rem;line-height:1.4;background:#fbeceb;color:var(--rot)}
.um .um-field-arrow{display:none}
.um .um-notice,.um-notice{margin:0 0 14px;padding:.55rem .7rem;border-radius:10px;font-size:.9rem;background:#e3efe8;color:var(--gruen);text-align:left}
.um .um-notice.err,.um-notice.err{background:#fbeceb;color:var(--rot)}
.um .um-notice i,.um-notice i{display:none}
.um .um-field-block{color:var(--grau);font-size:.92rem;line-height:1.5;padding:0 0 14px!important}
.um .um-field-block div{text-align:left!important}
.um-login .um-button.um-alt,.um .um-button.um-alt,.um-login a[href*="register" i],.um-login a[href*="registrieren" i]{display:none!important}
.k .um + .l{margin-top:16px}

/* ---------- Dunkel ---------- */
@media (prefers-color-scheme:dark){
  :root{--bg:#141a16;--karte:#1d2520;--tinte:#e9ece9;--grau:#a9b3ac;--linie:#3a463f;--feld:#141a16;--fokus:rgba(111,177,142,.25);--ring:#3fbf7a;--ring-t:rgba(63,191,122,.35);--glow:rgba(63,191,122,.4);--ok-bg:#34a86b;--ok-fg:#0f1c15}
  .k{box-shadow:none}
  h1{color:#e9ece9}
  .k.okk::before{opacity:.45}
  .m{background:#22302a;color:#E8E1D4}
  .m.f{background:#3a2120;color:#f2b8b5}
  input.code,.c.js .cb span{color:#E8E1D4}
  .c.js .cb span.v{border-color:#5d6d63}
  .c.js.f .cb span.a{border-color:#E8E1D4}
  .c.js.f .cb span.a:empty::after{background:#E8E1D4}
  .l button,.l a,.um .um-col-alt-b a,.um .um-link-alt{color:#E8E1D4}
  .um .um-form input:focus{border-color:#E8E1D4}
  .um .um-field-checkbox input{accent-color:#E8E1D4}
  .um .um-field-error,.um .um-notice.err,.um-notice.err{background:#3a2120;color:#f2b8b5}
  .um .um-notice,.um-notice{background:#22302a;color:#E8E1D4}
  .fz a:hover{color:#e9ece9}
}