@import url("rechner.css");

.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; background:#fff; border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:10;
}
.nav-brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit;}
.nav-brand .brand{font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); font-weight:800;}
.nav-right{display:flex; align-items:center; gap:14px;}
.nav-email{font-size:.78rem; color:var(--ink-soft);}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:1.5px solid var(--line); background:#fff; color:var(--ink);
  padding:9px 16px; border-radius:9px; font-weight:700; font-size:.85rem;
  cursor:pointer; text-decoration:none; font-family:inherit;
}
.btn-primary{background:var(--blue); border-color:var(--blue); color:#fff;}
.btn-danger{background:var(--red-tint); border-color:var(--red-tint); color:var(--red);}
.btn:disabled{opacity:.6; cursor:default;}

.wrap{max-width:900px; margin:0 auto; padding:32px 20px 80px;}
.wrap-wide{max-width:1180px; margin:0 auto; padding:32px 20px 80px;}

.page-title{display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; flex-wrap:wrap; gap:12px;}
.page-title h1{font-size:1.4rem; font-weight:800; margin:0; letter-spacing:-.5px;}
.crumb{font-size:.8rem; color:var(--ink-soft); margin-bottom:6px;}
.crumb a{color:var(--blue); text-decoration:none; font-weight:600;}

.list{display:flex; flex-direction:column; gap:10px;}
.list-item{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 20px; box-shadow:var(--shadow); text-decoration:none; color:inherit;
}
.list-item:hover{border-color:var(--blue);}
.list-item .name{font-weight:700; font-size:.95rem;}
.list-item .meta{font-size:.76rem; color:var(--ink-soft); margin-top:2px;}
.empty{color:var(--ink-soft); font-size:.88rem; padding:20px 0;}

.form-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow);}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:16px;}
.field label{font-size:.8rem; font-weight:600;}
.field input{
  border:1.5px solid var(--line); border-radius:10px; padding:10px 12px;
  font-size:.9rem; font-family:inherit; color:var(--ink);
}
.field input:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-tint);}
.error-box{background:var(--red-tint); color:var(--red); border-radius:10px; padding:10px 14px; font-size:.85rem; margin-bottom:16px; font-weight:600;}
.form-actions{display:flex; gap:10px; margin-top:20px;}

.save-bar{
  position:sticky; top:57px; z-index:9; display:flex; align-items:center; justify-content:space-between;
  background:var(--blue-tint); border-bottom:1px solid var(--line); padding:10px 20px; gap:12px; flex-wrap:wrap;
}
.save-status{font-size:.78rem; color:var(--ink-soft);}

@media (max-width: 640px){
  .nav{padding:12px 14px;}
  .nav-email{display:none;}
  .wrap, .wrap-wide{padding:20px 14px 60px;}
  .save-bar{top:53px;}

  /* Rechner-Header (aus rentenluecke-rechner.html übernommen) war für Desktop gebaut;
     hier nur Umbruch statt Überlauf auf schmalen Screens, Rechenlogik unangetastet. */
  #rechnerRoot .hdr{flex-wrap:wrap; align-items:flex-start; gap:10px;}
  #rechnerRoot .hdr .right{text-align:left;}
  #rechnerRoot .hdr h1{font-size:1.15rem;}
}