/* --- Punkfish Mini-CSS: Checklist + Helpers ----------------------------- */
/* Ziel: lässt sich „on top“ zu deinem bestehenden /style.css legen,
   ohne viel zu zerstören. Klassen sind bewusst spezifisch. */

.pf-sec#dive-planning-flow h2,
.pf-sec#dive-planning-flow h3 {
  margin: 0 0 .6rem 0;
}

.pf-sec#dive-planning-flow h3 {
  margin-top: 1.2rem;
  font-size: 1.05rem;
  opacity: .95;
}

/* Checklist Container */
.pf-checklist {
  list-style: none;
  padding: 0;
  margin: .6rem 0 1rem 0;
  display: grid;
  gap: .55rem;
}

/* Each item as a small “card” */
.pf-checklist > li {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 14px;
  padding: .7rem .8rem;
  backdrop-filter: blur(6px);
}

/* Label layout */
.pf-checklist label {
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  gap: .55rem;
  align-items: start;
  cursor: pointer;
  line-height: 1.25;
}

/* Checkbox look (keine fancy custom checkbox, nur sauber positioniert) */
.pf-checklist input[type="checkbox"] {
  margin-top: .15rem;
  width: 1rem;
  height: 1rem;
}

/* Mini-Erklärung */
.pf-help {
  display: block;
  margin-left: calc(1.1rem + .55rem);
  margin-top: .25rem;
  font-size: .92rem;
  opacity: .78;
}

/* Note block */
.pf-note {
  margin-top: 1rem;
  padding: .85rem 1rem;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  line-height: 1.45;
}

/* Optional: „done“-Feeling (wenn du später per JS ein .is-done setzt) */
.pf-checklist > li.is-done {
  border-color: rgba(0, 255, 120, .25);
  background: rgba(0, 255, 120, .06);
}

/* Mobile: etwas kompakter */
@media (max-width: 640px) {
  .pf-checklist > li { padding: .65rem .75rem; }
  .pf-help { font-size: .9rem; }
}


#plan.pf-inline-wrapper{
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

#plan .pf-inline-text{
  flex: 1;
  min-width: 0;
}

#plan .pf-info-box{
  flex: 1;
  max-width: none; /* ganz wichtig, sonst bleibt die Box schmal */
}

@media (max-width: 800px){
  #plan.pf-inline-wrapper{ flex-direction: column; }
  #plan .pf-info-box{ width: 100%; }
}