.branchforms.bf-theme{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#0f172a;background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:18px;box-shadow:0 8px 24px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.05)}
.bf-title{margin:0 0 8px;font-size:28px}
.bf-step-title{margin:6px 0 12px;font-size:20px}
.bf-field{margin-bottom:14px}
.bf-label{display:block;font-weight:600;margin-bottom:6px}

.branchforms input[type=text],
.branchforms input[type=email],
.branchforms select,
.branchforms textarea{width:100%;padding:12px;border:1px solid #e5e7eb;border-radius:12px;background:#fff;font:inherit}
.branchforms input:focus,
.branchforms select:focus,
.branchforms textarea:focus{outline:none;border-color:#0a84ff;box-shadow:0 0 0 3px rgba(10,132,255,.12)}

/* Kartenlayout */
.bf-cards{display:flex;gap:10px;flex-wrap:wrap}
.bf-cards.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.bf-cards.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.bf-cards.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}

.bf-input-hidden{position:absolute;left:-9999px;opacity:0}
.bf-card{display:inline-block;border:1px solid #e5e7eb;border-radius:14px;padding:12px 14px;background:#fff;cursor:pointer;user-select:none;box-shadow:0 2px 8px rgba(0,0,0,.05)}

/* Inhalt der Karte: NICHT abschneiden, linksbündig, Umbruch erlauben */
.bf-card-inner{
  display:flex;
  align-items:center;
  justify-content:flex-start;   /* statt center */
  flex-wrap:wrap;               /* Zeilenumbruch innerhalb der Karte */
  gap:10px;
  min-height:44px;
  min-width:0;                  /* wichtig gegen Abschneiden in Grids */
  max-width:100%;
  width:100%;
  text-align:left;
  font-weight:600;
  line-height:1.25;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
  hyphens:auto;
}
.bf-card.is-selected,.bf-card:hover{border-color:#0a84ff;box-shadow:0 0 0 3px rgba(10,132,255,.12)}
.bf-icon{flex:0 0 auto;margin-right:.4em;font-size:1.1em;line-height:1;display:inline-block}

.bf-nav{display:flex;gap:8px;margin-top:8px}
.bf-prev,.bf-next,.bf-submit{background:linear-gradient(#fdfdfd,#eceff3);color:#0b1020;border:1px solid #e5e7eb;border-radius:12px;padding:10px 16px;font-weight:600;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.08)}

.bf-progress{height:8px;background:#f3f4f6;border-radius:999px;margin-top:12px;overflow:hidden}
.bf-progress-bar{background:#0a84ff;height:100%;width:0%;transition:width .3s ease}
.bf-msg{margin-top:10px;font-weight:600;color:#475569}

/* ========= Mobile-Optimierung (Karten & Buttons) ========= */
/* Buttons unten gleichbreit & ohne Überlauf */
.branchforms .bf-nav{display:flex;gap:12px;flex-wrap:wrap}
.branchforms .bf-nav .bf-prev,
.branchforms .bf-nav .bf-next,
.branchforms .bf-nav .bf-submit{flex:1 1 0;min-width:0}

/* Auf mittleren Screens lieber 2 Spalten statt 3/4 */
@media (max-width: 900px){
  .bf-cards.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bf-cards.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Auf sehr schmalen Screens 1 Spalte, Text etwas kompakter */
@media (max-width: 520px){
  .bf-cards,
  .bf-cards.grid-2,
  .bf-cards.grid-3,
  .bf-cards.grid-4{grid-template-columns:1fr}
  .bf-card-inner{padding:12px 14px}
  .bf-title{font-size:28px;line-height:1.25}
}

/* Fallback: falls Grid-Spalten zu schmal werden, sorge für min 150–160px Breite */
@supports (grid-template-columns: subgrid) or (display: grid){
  .bf-cards.grid-3{grid-template-columns:repeat(3,minmax(150px,1fr))}
  .bf-cards.grid-4{grid-template-columns:repeat(4,minmax(150px,1fr))}
}
/* universeller Fallback, falls Klassen anders heißen */
.branchforms [class*="cards"] > *{min-width:0}

/* verhindert horizontales Scrollen auf sehr kleinen Screens */
.branchforms{overflow-x:clip}

/* === HARTE MOBILE-REGELN (erzwingen Umbruch) === */

/* Grid immer aktivieren (falls irgendwo Flex greift) */
.branchforms .bf-cards{ display:grid !important; grid-auto-rows:1fr; }
.branchforms .bf-cards > *{ min-width:0; }          /* Kinder dürfen schrumpfen */
.bf-card{ width:auto; box-sizing:border-box; }      /* keine Breitenüberläufe */

/* Ab mittelbreit auf 2 Spalten zwingen */
@media (max-width: 1024px){
  .branchforms .bf-cards.grid-3,
  .branchforms .bf-cards.grid-4{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap:12px !important;
  }
}

/* Auf schmalen Geräten 1 Spalte zwingen */
@media (max-width: 640px){
  .branchforms .bf-cards,
  .branchforms .bf-cards.grid-2,
  .branchforms .bf-cards.grid-3,
  .branchforms .bf-cards.grid-4{
    grid-template-columns: 1fr !important;
    gap:12px !important;
  }
}

/* Sicherheit: Alles innerhalb BranchForms rechnet inkl. Padding/Borders */
.branchforms *, .branchforms *::before, .branchforms *::after{ box-sizing:border-box; }