/* =========================================================
   CK Login – wp-login.php im Stil von carolinkania.com
   Mobile first. Präfix: ck-. Farben aus den Divi-Seiten:
   Text #57515f · Rosé #AB9395 · Koralle #F35E60 · Nebel #DCDCE6
   ========================================================= */

/* ---- Schrift lokal (SIL OFL), keine Anfrage an Google ---- */
@font-face{
  font-family:"Inria Serif";font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/inria-serif-latin-400-normal.woff2) format("woff2");
}
@font-face{
  font-family:"Inria Serif";font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/inria-serif-latin-700-normal.woff2) format("woff2");
}

body.login{
  --ck-ink:#57515f;
  --ck-ink-soft:rgba(87,81,95,.72);
  --ck-rose:#AB9395;
  --ck-coral:#F35E60;
  --ck-coral-dark:#e04a4c;
  --ck-mist:#DCDCE6;
  --ck-field:#f2f2f2;
  --ck-serif:"Inria Serif",Georgia,"Times New Roman",serif;

  min-height:100vh;min-height:100dvh;
  background:
    radial-gradient(720px 440px at 50% -8%, rgba(171,147,149,.20), transparent 64%),
    radial-gradient(560px 480px at 108% 104%, rgba(243,94,96,.08), transparent 60%),
    linear-gradient(170deg, transparent 0 74%, rgba(255,255,255,.8) 74.15% 100%),
    linear-gradient(180deg,#f5f4f7 0%,var(--ck-mist) 100%) !important;
  background-attachment:fixed !important;
  color:var(--ck-ink);
  font-family:var(--ck-serif);
  -webkit-font-smoothing:antialiased;
}

/* ---- Rahmen ---- */
body.login #login{
  width:auto;max-width:400px;
  padding:8vh 16px 48px;margin:0 auto;
  box-sizing:border-box;
}

/* ---- Logo, Unterzeile, Rosé-Balken ---- */
body.login h1{text-align:center}
body.login h1 a{
  display:block;
  width:100% !important;max-width:300px;
  height:96px !important;
  margin:0 auto !important;
  background-image:var(--ck-logo) !important;
  background-size:contain !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  font:700 26px/1.2 var(--ck-serif);color:var(--ck-ink) !important;
  text-transform:uppercase;letter-spacing:.06em;
  box-shadow:none !important;outline-offset:6px;
}
body.login h1:after{
  content:"Style \00B7  Personality \00B7  Business";
  display:block;
  margin:18px 0 28px;padding-bottom:20px;
  font:700 11px/1.6 var(--ck-serif);
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--ck-ink-soft);
  background:linear-gradient(var(--ck-rose),var(--ck-rose)) center bottom/56px 4px no-repeat;
}

/* ---- Karte ---- */
body.login form{
  margin:0 !important;
  padding:26px 20px !important;
  background:#fff !important;
  border:0 !important;border-radius:0 !important;
  box-shadow:0 22px 40px -22px rgba(87,81,95,.35),0 2px 6px rgba(87,81,95,.06) !important;
}

/* ---- Beschriftungen ---- */
body.login label{
  color:var(--ck-ink);
  font:700 12px/1.5 var(--ck-serif);
  letter-spacing:.14em;text-transform:uppercase;
}
body.login form p,
body.login form .user-pass-wrap{margin:0 0 20px !important}
body.login label[for=user_login],
body.login label[for=user_pass],
body.login label[for=user_email],
body.login label[for=pass1]{display:block;margin-bottom:6px}

/* ---- Felder ---- */
body.login input[type=text],
body.login input[type=email],
body.login input[type=password]{
  width:100% !important;height:52px !important;min-height:52px;
  margin:0 !important;padding:0 14px !important;
  background:var(--ck-field) !important;
  border:1px solid transparent !important;border-radius:0 !important;
  color:var(--ck-ink) !important;
  font:400 17px/1.2 var(--ck-serif) !important;
  box-shadow:none !important;outline:none !important;
  transition:border-color .15s,box-shadow .15s,background-color .15s;
}
body.login input[type=text]:focus,
body.login input[type=email]:focus,
body.login input[type=password]:focus{
  background:#fff !important;
  border-color:var(--ck-rose) !important;
  box-shadow:0 0 0 3px rgba(171,147,149,.28) !important;
}
body.login input:-webkit-autofill{
  -webkit-box-shadow:0 0 0 100px var(--ck-field) inset !important;
  -webkit-text-fill-color:var(--ck-ink) !important;
}

/* Passwort anzeigen */
body.login .wp-pwd{position:relative}
body.login .button.wp-hide-pw{
  height:52px !important;width:48px !important;min-width:48px;
  top:0 !important;right:0 !important;
  background:transparent !important;border:0 !important;box-shadow:none !important;
}
body.login .button.wp-hide-pw .dashicons{color:var(--ck-rose) !important;top:.3rem}
body.login .button.wp-hide-pw:focus{outline:2px solid var(--ck-rose);outline-offset:-4px}
body.login .wp-pwd input[type=password],
body.login .wp-pwd input[type=text]{padding-right:52px !important}

/* ---- Angemeldet bleiben: eigenes Kästchen (Divi-/Core-Optik neutralisiert) ---- */
body.login .forgetmenot{float:none !important;margin:4px 0 20px !important;display:flex;align-items:center}
body.login .forgetmenot label{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;margin-left:8px;
  font:400 15px/1.4 var(--ck-serif);letter-spacing:0;text-transform:none;color:var(--ck-ink);
}
body.login input[type=checkbox]{
  -webkit-appearance:none;appearance:none;
  width:20px !important;height:20px !important;min-width:20px;margin:0 !important;
  border:1.5px solid var(--ck-rose) !important;border-radius:0 !important;
  background:#fff !important;box-shadow:none !important;cursor:pointer;
  display:inline-grid;place-content:center;
}
body.login input[type=checkbox]:before{content:none !important}
body.login input[type=checkbox]:checked{
  background:var(--ck-coral) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='square'/%3E%3C/svg%3E") center/16px no-repeat !important;
  border-color:var(--ck-coral) !important;
}
body.login input[type=checkbox]:focus-visible{outline:2px solid var(--ck-rose);outline-offset:2px}

/* Hilfe-Symbol neben „Angemeldet bleiben“ (WordPress 7.1 Toggletip) */
body.login .forgetmenot .wp-tooltip__toggle{
  background:none !important;border:0 !important;box-shadow:none !important;
  padding:0 !important;margin-left:6px;cursor:pointer;line-height:1;
}
body.login .forgetmenot .wp-tooltip__toggle .dashicons{color:var(--ck-rose) !important;transition:color .15s}
body.login .forgetmenot .wp-tooltip__toggle:hover .dashicons,
body.login .forgetmenot .wp-tooltip__toggle:focus-visible .dashicons{color:var(--ck-coral) !important}
body.login .forgetmenot .wp-tooltip__toggle:focus-visible{outline:2px solid var(--ck-rose);outline-offset:2px}
body.login .wp-tooltip__bubble{
  background:#fff !important;color:var(--ck-ink) !important;
  border:0 !important;border-left:4px solid var(--ck-rose) !important;border-radius:0 !important;
  box-shadow:0 14px 28px -14px rgba(87,81,95,.45) !important;
  font:400 14px/1.5 var(--ck-serif);
}
body.login .wp-tooltip__close .dashicons{color:var(--ck-ink-soft) !important}

/* ---- Knopf (wie „Erfahre mehr“ auf der Seite) ---- */
body.login .submit{display:block;margin:0 !important;padding:0 !important}
body.login .button-primary{
  float:none !important;width:100% !important;
  height:54px !important;min-height:54px;margin:0 !important;padding:0 16px !important;
  background:var(--ck-coral) !important;
  border:0 !important;border-radius:0 !important;
  color:#fff !important;
  font:700 15px/1 var(--ck-serif) !important;
  letter-spacing:.16em;text-transform:uppercase;text-shadow:none !important;
  box-shadow:0 14px 22px -12px rgba(243,94,96,.65) !important;
  cursor:pointer;transition:background-color .15s,transform .15s,box-shadow .2s;
}
body.login .button-primary:hover,
body.login .button-primary:focus{
  background:var(--ck-coral-dark) !important;color:#fff !important;
  transform:translateY(-1px);
  box-shadow:0 16px 24px -12px rgba(243,94,96,.75) !important;
}
body.login .button-primary:focus-visible{outline:2px solid var(--ck-ink);outline-offset:3px}

/* Zweitknöpfe (z. B. „Passwort generieren“) */
body.login .button:not(.button-primary):not(.wp-hide-pw){
  border-radius:0 !important;border-color:var(--ck-rose) !important;color:var(--ck-ink) !important;
  background:#fff !important;font-family:var(--ck-serif) !important;box-shadow:none !important;
}

/* ---- Hinweise und Fehler ---- */
body.login .message,
body.login .notice,
body.login .success{
  margin:0 0 16px !important;padding:12px 14px !important;
  background:rgba(171,147,149,.14) !important;
  border:0 !important;border-left:4px solid var(--ck-rose) !important;border-radius:0;
  color:var(--ck-ink) !important;box-shadow:none !important;
  font:400 15px/1.5 var(--ck-serif);
}
body.login #login_error{
  margin:0 0 16px !important;padding:12px 14px !important;
  background:rgba(243,94,96,.10) !important;
  border:0 !important;border-left:4px solid var(--ck-coral) !important;border-radius:0;
  color:#7a2c2d !important;box-shadow:none !important;
  font:400 15px/1.5 var(--ck-serif);
}
body.login .message a,body.login #login_error a,body.login .notice a{color:inherit !important;text-decoration:underline}
body.login p#reg_passmail,body.login .description,body.login .indicator-hint{color:var(--ck-ink-soft);font-size:14px}

/* ---- Links unter der Karte ---- */
body.login #nav,
body.login #backtoblog{
  margin:22px 0 0 !important;padding:0 !important;text-align:center;
  font:400 15px/1.5 var(--ck-serif);
}
body.login #nav{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 20px}
body.login #backtoblog{margin-top:12px !important}
body.login #nav a,
body.login #backtoblog a,
body.login .privacy-policy-page-link a{
  color:var(--ck-ink) !important;text-decoration:none !important;
  border-bottom:1px solid var(--ck-rose);padding-bottom:1px;
  transition:color .15s,border-color .15s;
}
body.login #nav a:hover,
body.login #backtoblog a:hover,
body.login .privacy-policy-page-link a:hover{color:var(--ck-coral) !important;border-color:var(--ck-coral)}
body.login .privacy-policy-page-link{margin:28px 0 0;font:400 13px/1.5 var(--ck-serif)}
body.login .language-switcher{display:none}

/* ---- Grössere Bildschirme ---- */
@media (min-width:768px){
  body.login #login{max-width:440px;padding-top:11vh}
  body.login form{padding:34px 32px !important}
  body.login h1 a{height:110px !important;max-width:340px}
}

@media (prefers-reduced-motion:reduce){
  body.login *{transition:none !important}
  body.login .button-primary:hover{transform:none}
}