/* =========================================================
   CK – Anmeldung auf „Mein Bereich“ (für Gäste)
   Gleiche Gestaltung wie die Anmeldeseite (assets/login.css):
   Nebel-Verlauf, Logo, Rosé-Balken, weisse Karte, Koralle-Knopf.
   Mobile first. Präfix: ckl-. Nur auf „Mein Bereich“ geladen, nur für Gäste.
   ========================================================= */

@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{overflow-x:clip}

.ckl{
  --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;

  /* volle Breite, auch wenn Divi einen Rahmen um den Inhalt legt */
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  position:relative;
  min-height:78vh;min-height:78dvh;
  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(180deg,#f5f4f7 0%,var(--ck-mist) 100%);
  color:var(--ck-ink);
  font-family:var(--ck-serif);
  -webkit-font-smoothing:antialiased;
  box-sizing:border-box;
}
.ckl *,.ckl *:before,.ckl *:after{box-sizing:border-box}

/* ---- Dunkle Kurve unten: wie über dem Seitenfuss der anderen Seiten (Divi-Trenner „Ramp“, Farbe #57515F) ----
   Statt der hellen Schräge im Hintergrund. Links läuft sie bei null aus, rechts steigt sie an; sie wächst mit der Breite mit.
   Der Seitenfuss von Divi schliesst direkt darunter an. */
.ckl:after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;
  height:clamp(56px,5vw,100px);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100C450 98 900 72 1280 0V100H0z' fill='%2357515F'/%3E%3C/svg%3E") left bottom/100% 100% no-repeat;
  pointer-events:none;
}

.ckl-inner{max-width:400px;margin:0 auto;padding:7vh 16px 100px}

/* ---- Logo und Rosé-Balken ---- */
.ckl .ckl-head{margin:0 !important;padding:0 !important;text-align:center;line-height:1}
.ckl .ckl-logo{display:block;width:100%;max-width:260px;height:90px;margin:0 auto;object-fit:contain}
.ckl .ckl-wordmark{display:block;font:700 26px/1.2 var(--ck-serif);color:var(--ck-ink);text-transform:uppercase;letter-spacing:.06em}
.ckl .ckl-head:after{
  content:"";display:block;margin:22px 0 34px;height:4px;
  background:linear-gradient(var(--ck-rose),var(--ck-rose)) center/56px 4px no-repeat;
}
.ckl .screen-reader-text{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* ---- Hinweis (z. B. „Bitte melde dich an, um … zu öffnen“) ---- */
.ckl .ckl-message{
  margin:0 0 16px !important;padding:12px 14px !important;
  background:rgba(171,147,149,.14);border-left:4px solid var(--ck-rose);
  color:var(--ck-ink);font:400 15px/1.5 var(--ck-serif);
}

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

/* ---- Beschriftungen ---- */
.ckl label{
  display:block;margin:0 0 6px;
  color:var(--ck-ink);font:700 12px/1.5 var(--ck-serif);
  letter-spacing:.14em;text-transform:uppercase;
}

/* ---- Felder ---- */
.ckl input[type=text],
.ckl 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;
}
.ckl input[type=text]:focus,
.ckl 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;
}
.ckl input:-webkit-autofill{
  -webkit-box-shadow:0 0 0 100px var(--ck-field) inset !important;
  -webkit-text-fill-color:var(--ck-ink) !important;
}

/* ---- Angemeldet bleiben ---- */
.ckl .login-remember{margin:4px 0 20px !important}
.ckl .login-remember label{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;margin:0;
  font:400 15px/1.4 var(--ck-serif);letter-spacing:0;text-transform:none;color:var(--ck-ink);
}
.ckl 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;
}
.ckl 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;
}
.ckl input[type=checkbox]:focus-visible{outline:2px solid var(--ck-rose);outline-offset:2px}

/* ---- Knopf ---- */
.ckl .login-submit{margin:0 !important}
.ckl #ckm-submit{
  display:block;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;
}
.ckl #ckm-submit:hover,
.ckl #ckm-submit:focus{
  background:var(--ck-coral-dark) !important;
  transform:translateY(-1px);
  box-shadow:0 16px 24px -12px rgba(243,94,96,.75) !important;
}
.ckl #ckm-submit:focus-visible{outline:2px solid var(--ck-ink);outline-offset:3px}

/* ---- Links unter der Karte ---- */
.ckl .ckl-nav{
  display:flex;justify-content:center;flex-wrap:wrap;gap:6px 20px;
  margin:22px 0 0 !important;padding:0 !important;text-align:center;
  font:400 15px/1.5 var(--ck-serif);
}
.ckl .ckl-nav 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;
}
.ckl .ckl-nav a:hover{color:var(--ck-coral) !important;border-color:var(--ck-coral)}

/* ---- Grössere Bildschirme ---- */
@media (min-width:768px){
  .ckl-inner{max-width:440px;padding-top:9vh}
  .ckl .ckl-card{padding:34px 32px}
  .ckl .ckl-logo{height:100px;max-width:290px}
}

@media (prefers-reduced-motion:reduce){
  .ckl *{transition:none !important}
  .ckl #ckm-submit:hover{transform:none}
}