/* Melde-Knopf — in jede Familien-App kopierbar */
.melde-knopf {
  position: fixed; right: 14px; bottom: 14px; z-index: 900;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(15,23,42,.08); background: #fff;
  box-shadow: 0 6px 18px rgba(15,23,42,.16);
  font-size: 20px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: .75; transition: opacity .15s, transform .12s;
}
.melde-knopf:hover { opacity: 1; }
.melde-knopf:active { transform: scale(.94); }

/* Muss vor der display-Regel stehen und !important tragen:
   eine Klassenregel mit display:flex schlägt sonst das hidden-Attribut. */
.melde-overlay[hidden] { display: none !important; }

.melde-overlay {
  position: fixed; inset: 0; z-index: 950;
  background: rgba(15,23,42,.45);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0;
}
@media (min-width: 620px) { .melde-overlay { align-items: center; padding: 1rem; } }
.melde-box {
  width: 100%; max-width: 520px; background: #fff;
  border-radius: 18px 18px 0 0; padding: 1rem 1.1rem 1.1rem;
}
@media (min-width: 620px) { .melde-box { border-radius: 18px; } }
.melde-kopf {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 1.02rem; font-weight: 700; color: #0f172a; margin-bottom: .8rem;
}
.melde-zu { border: 0; background: none; font-size: 1.5rem; color: #94a3b8; cursor: pointer; line-height: 1; }
.melde-arten { display: flex; gap: .5rem; margin-bottom: .7rem; }
.melde-art {
  flex: 1 1 0; padding: .55rem .4rem; border-radius: 10px; cursor: pointer;
  border: 1.5px solid #e2e8f0; background: #fff; color: #475569; font-size: .88rem;
}
.melde-art.aktiv { border-color: #2563eb; background: #eff6ff; color: #1d4ed8; font-weight: 600; }
.melde-text {
  width: 100%; padding: .7rem .8rem; font-size: 1rem; font-family: inherit;
  border: 1px solid #d8dee9; border-radius: 12px; resize: vertical;
}

/* Foto/Screenshot — Hauptweg ist das Handy, darum grosse Tippflaeche */
.melde-bildzeile { margin-top: .6rem; }
.melde-foto {
  width: 100%; padding: .6rem .8rem; border-radius: 10px; cursor: pointer;
  border: 1.5px dashed #cbd5e1; background: #f8fafc; color: #64748b;
  font-size: .88rem; font-family: inherit;
}
.melde-foto:active { background: #f1f5f9; }
.melde-foto[hidden] { display: none !important; }
.melde-vorschau { position: relative; display: inline-block; max-width: 100%; }
.melde-vorschau[hidden] { display: none !important; }
.melde-vorschau-bild {
  display: block; max-width: 100%; max-height: 190px;
  border-radius: 10px; border: 1px solid #e2e8f0;
}
.melde-bild-weg {
  position: absolute; top: -8px; right: -8px;
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid #e2e8f0; background: #fff; color: #64748b;
  font-size: 1.1rem; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 8px rgba(15,23,42,.18);
}
.melde-seite { font-size: .72rem; color: #94a3b8; margin-top: .4rem; }
.melde-fuss { display: flex; gap: .5rem; margin-top: .9rem; }
.melde-abbruch {
  flex: 0 0 auto; padding: .65rem 1rem; border-radius: 10px;
  border: 1px solid #e2e8f0; background: #fff; color: #64748b; cursor: pointer;
}
.melde-senden {
  flex: 1 1 auto; padding: .65rem 1rem; border-radius: 10px; border: 0;
  background: #2563eb; color: #fff; font-weight: 600; font-size: .95rem; cursor: pointer;
}
.melde-box.gesendet .melde-arten,
.melde-box.gesendet .melde-text,
.melde-box.gesendet .melde-bildzeile,
.melde-box.gesendet .melde-seite,
.melde-box.gesendet .melde-fuss { display: none; }
.melde-danke { padding: 1rem .2rem; text-align: center; font-size: 1rem; color: #16a34a; font-weight: 600; }