/* MarLou – Forms & Cards */

/* ---- Cards (universell) ---- */
.bb-card{
  background-color: var(--surface); /* NEU: Einfarbig statt Verlauf */
  border: 1px solid var(--border, rgba(255,255,255,.12));
  border-radius: 12px;
  padding: 14px;
}

/* ---- Formular-Wrapper ---- */
.bb-form{ }
.bb-form .row{ display:grid; gap:10px; grid-template-columns:1fr }
@media (min-width:640px){
  .bb-form .row.two{ grid-template-columns:1fr 1fr }
}

/* ---- Controls ---- */
.bb-form .input,
.bb-form .textarea,
.bb-form .select{
  width:100%;
  background: var(--bg, #152238);
  color: var(--text, #E7F0F9);
  border: 1px solid var(--border, rgba(255,255,255,.12));
  border-radius: 10px;
  padding: .8rem .95rem;
  font-family: inherit; /* Erbt Lato von Body */
  font-size: 1rem;
}
.bb-form .textarea{ min-height: 120px; resize: vertical }

.bb-form label{ display:block; font-weight:700; margin:.2rem 0 .35rem }
.bb-form .hint{ color: var(--muted, #AFC0D2); font-size:.92rem }

/* ---- Buttons (NEUES DESIGN) ---- */
.button{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 10px 22px;
  border-radius: 8px;
  border:1px solid transparent;
  background: var(--a2); /* Solides Kaminfeuer */
  color:#FFFFFF; font-weight:700; cursor:pointer; text-decoration:none;
  transition: background-color .2s ease;
  font-family: var(--font-base, 'Lato', sans-serif);
}
.button:hover {
  text-decoration: none;
  background-color: #D95D39; /* Etwas helleres Kaminfeuer zum Aufleuchten */
  filter: brightness(1.1);
}

.button.ghost{
  background: transparent;
  color: var(--text, #E7F0F9);
  border: 1px solid var(--border, rgba(255,255,255,.12));
}
.button.ghost:hover {
  background-color: var(--surface);
  color: var(--text);
}