/* Kanzleiklar — App-Bühne (Marken-Design, abgenommen 28.07.2026).
   Gestalt-Referenz: marketing/demo-app/kanzleiklar-demo.html
   Nur System-Schriften, keine externen Ressourcen (kein CDN, keine Webfonts). */

:root{
  --gruen-dunkel:#0F5C46;
  --gruen-tief:#0A3D2F;
  --gruen:#17795E;
  --gruen-hell:#54BA93;
  --papier:#F8F9F4;
  --creme:#F1E3CD;
  --bernstein:#E0A15C;
  --tinte:#10201B;
}

*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}

body{
  min-height:100vh;
  background:radial-gradient(140% 100% at 50% 0%, var(--gruen-dunkel) 0%, var(--gruen-tief) 78%);
  color:var(--papier);
  font-family:"Avenir Next","Avenir",system-ui,-apple-system,sans-serif;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 24px;
}

.buehne{
  width:100%;
  max-width:400px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:28px;
}

/* Wortmarke (Anmelde-Screen) */
.wortmarke{
  font-family:"Iowan Old Style","Avenir Next",Georgia,serif;
  font-weight:800;
  font-size:clamp(32px, 9vw, 46px);
  letter-spacing:-.5px;
  color:var(--papier);
  line-height:1.1;
}
.wortmarke .punkt{color:var(--gruen-hell);}

.subline{
  font-family:"Avenir Next",system-ui,sans-serif;
  font-size:14px;
  font-weight:600;
  color:var(--papier);
  opacity:.7;
  max-width:280px;
  line-height:1.5;
  letter-spacing:.01em;
}

/* Großer Satz mit Punkt (z. B. Monats-Screen) */
.gross{
  font-family:"Iowan Old Style","Avenir Next",Georgia,serif;
  font-weight:800;
  font-size:clamp(30px, 8vw, 42px);
  letter-spacing:-.5px;
  color:var(--papier);
  line-height:1.1;
}

.nebenzeile{
  font-family:"Avenir Next",system-ui,sans-serif;
  font-size:14px;
  font-weight:600;
  color:var(--papier);
  opacity:.75;
  max-width:280px;
  line-height:1.5;
}

/* Anmelde-Formular */
form.anmelden{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:16px;
}

input[type="email"]{
  width:100%;
  padding:17px 20px;
  border-radius:999px;
  border:1.5px solid rgba(248,249,244,.35);
  background:rgba(248,249,244,.08);
  color:var(--papier);
  font-family:"Avenir Next",system-ui,sans-serif;
  font-size:16px;
}
input[type="email"]::placeholder{color:rgba(248,249,244,.5);}
input[type="email"]:focus{outline:none;border-color:var(--gruen-hell);}

/* Pille = breiter Primär-Knopf, Papierweiß auf Flächen-Grün, atmet sanft */
.pille{
  width:100%;
  border:none;
  border-radius:999px;
  padding:18px;
  cursor:pointer;
  font-family:"Avenir Next",system-ui,sans-serif;
  font-size:17px;
  font-weight:800;
  background:var(--gruen);
  color:var(--papier);
  box-shadow:0 14px 34px rgba(0,0,0,.35);
  animation:pillenatmen 2.4s ease-in-out infinite;
}
@keyframes pillenatmen{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.02);}
}

/* Abmelden — klein, unauffällig */
form.abmelden{
  margin-top:8px;
}
form.abmelden button{
  background:none;
  border:none;
  color:var(--papier);
  opacity:.55;
  font-family:"Avenir Next",system-ui,sans-serif;
  font-size:13px;
  cursor:pointer;
  text-decoration:underline;
  padding:8px;
}
form.abmelden button:hover{opacity:.8;}