/* =================================================
   COMPONENTS – Formulare, Buttons, Hinweise
   ================================================= */

/* ---------- Labels ---------- */
label{
  display:block;
  font-size:14px;
  color:var(--muted);
  margin:8px 0 4px;        /* etwas mehr Luft */
}

/* ---------- Inputs ---------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select{
  width:100%;
  height:34px;             /* minimal höher (Touch & Ruhe) */
  padding:0 10px;
  border:1px solid var(--border);
  border-radius:8px;
  background:#fff;
  font-size:14px;
}

input[type="number"]{
  text-align:right;
}

/* Textarea (Kontaktformular) */
textarea{
  width:100%;
  min-height:120px;
  padding:10px;
  border:1px solid var(--border);
  border-radius:8px;
  background:#fff;
  font-size:14px;
  resize:vertical;
}

/* Fokus klar, aber dezent */
input:focus,
select:focus,
textarea:focus{
  outline:none;
  border-color:var(--primary, #2563eb);
  box-shadow:0 0 0 2px rgba(37,99,235,.08);
}

/* ---------- Formular-Gruppen ---------- */
/* z.B. Login, Registrierung, kleine Tools */
.form-group{
  display:flex;
  flex-direction:column;
  gap:18px;
  margin-bottom:6px;           /* wichtig für Login-Abstände */
}

/* kleine Tabellen-/Zeilen-Optik (Monatsbudget) */
.form-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:6px;
}

.form-row .label{ flex:1 }
.form-row .amount{ width:160px }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  padding:9px 16px;
  font-weight:600;
  font-size:14px;
  line-height:1;
  border:1px solid transparent;
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
}

.btn:disabled{
  opacity:.6;
  cursor:not-allowed;
}

/* Button-Varianten */
.btn-grey{
  background:var(--btn-grey);
}

.btn-green{
  background:var(--btn-green);
  color:#fff;
}

.btn-blue{
  background:var(--btn-blue);
  color:#fff;
}

.btn-outline{
  background:#fff;
  border-color:var(--border);
}

/* Buttons linksbündig unter Formularen */
.form-group .btn,
.login-card .btn{
  align-self:flex-start;
}

/* Abstand zwischen mehreren Buttons */
.btn + .btn{
  margin-left:8px;
}

/* ---------- Hinweise / Alerts ---------- */
.alert{
  padding:10px 12px;
  border-radius:8px;
  border:1px solid var(--border);
  background:#fffbea;
  font-size:14px;
}

.alert.error{
  background:#fff1f2;
  border-color:#fecdd3;
}

/* ---------- Notices (Kontakt: Erfolg/Fehler) ---------- */
.notice{
  padding:10px 12px;
  border-radius:8px;
  border:1px solid var(--border);
  background:#fffbea;
  font-size:14px;
  margin:0 0 12px;
}

.notice--ok{
  background:#effaf3;
  border-color:#bfe8cc;
}

.notice--error{
  background:#fff1f2;
  border-color:#fecdd3;
}

/* Honeypot verstecken */
.hp{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* ---------- Summenzeilen (Saldo / Σ) ---------- */
.sumline{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 12px;
  background:#f9fafb;
  border:1px dashed var(--border);
  border-radius:8px;
  margin-top:10px;
  font-weight:700;
}

/* =========================
   Login-Card Feinschliff
   ========================= */

/* Formular: vertikal + mehr Abstand */
.login-card .login-box{
  display:flex;
  flex-direction:column;
  align-items:stretch;     /* links / volle Breite */
  gap:16px;                /* Abstand Inputs/Button */
}

/* Inputs: etwas höher + mehr Innenabstand */
.login-card .login-box .input,
.login-card .login-box input[type="email"],
.login-card .login-box input[type="password"]{
  height:38px;             /* Feldhöhe */
  padding:0 12px;          /* Innenabstand */
  margin:0;                /* falls alte margins stören */
}

/* Button im Formular: linksbündig und mit etwas Luft */
.login-card .login-box .btn{
  align-self:flex-start;   /* links statt zentriert */
  margin-top:6px;          /* extra Abstand nach Inputs */
}

/* Links/Buttons unterhalb: linksbündig und untereinander */
.login-card .toolbar{
  display:flex;
  flex-direction:column;   /* untereinander */
  align-items:flex-start;  /* links */
  gap:10px;                /* Abstand zwischen Links */
  margin-top:16px;
}

/* damit die Link-Buttons nicht über die ganze Breite gehen (optional) */
.login-card .toolbar .btn{
  width:auto;
}

/* =========================
   Testphase-Hinweis
========================= */
.testphase-hinweis{
  color:#b42318;
  background:#fff1f0;
  border:1px solid #f5c2c7;
  border-radius:6px;
  padding:10px 12px;
  margin-bottom:14px;
  font-size:0.95rem;
}

/* =========================
   Preise (price-card)
========================= */
.grid.grid--2{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
@media (min-width:820px){
  .grid.grid--2{ grid-template-columns:1fr 1fr; }
}

.price{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin:8px 0 6px;
}
.price__amount{
  font-size:2rem;
  font-weight:800;
  letter-spacing:-0.02em;
}
.price__period{
  font-size:0.95rem;
  opacity:0.75;
}

.checklist{
  margin:0;
  padding-left:18px;
}

.price-card__cta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}

/* =========================
   FAQ
========================= */
.faq-card h3{
  margin-top:12px;
  margin-bottom:4px;
  font-size:1rem;
}
.faq-card p{
  margin-top:0;
}
/* =========================
   Textarea (Kontaktformular)
========================= */
textarea{
  width:100%;
  min-height: 120px;
  padding:10px;
  border:1px solid var(--border);
  border-radius:8px;
  background:#fff;
  font-size:14px;
  resize: vertical;
}

textarea:focus{
  outline:none;
  border-color:var(--primary, #2563eb);
  box-shadow:0 0 0 2px rgba(37,99,235,.08);
}

/* =========================
   Notices (Kontakt: Erfolg/Fehler)
========================= */
.notice{
  padding:10px 12px;
  border-radius:8px;
  border:1px solid var(--border);
  background:#fffbea;
  font-size:14px;
  margin:0 0 12px;
}

.notice--ok{
  background:#effaf3;
  border-color:#bfe8cc;
}

.notice--error{
  background:#fff1f2;
  border-color:#fecdd3;
}

/* Honeypot verstecken */
.hp{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}
/* =========================
   Formular-Abstände in Cards
========================= */

.card input,
.card select,
.card textarea{
  margin-bottom:8px;
}

/* Buttons neben Inputs nicht verschieben */
.card .btn{
  margin-bottom:0;
}