/* MojnMojn – Fotos, Marktplatz, Wohnen (Market-Modul). Nutzt die Farben aus app.css. */
[hidden] { display: none !important; }   /* upload.js blendet per hidden-Attribut aus – auch Flex-Elemente */

/* Fotos an Beiträgen: Raster mit 1–6 Bildern ------------------------------------------------ */
.pics { display: grid; gap: 4px; margin: 10px 0; border-radius: 10px; overflow: hidden; max-width: 760px; }
.pics .pic { position: relative; margin: 0; background: var(--line); min-height: 0; }
.pics .pic > a { display: block; height: 100%; }
.pics img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pics-1 { grid-template-columns: 1fr; }
.pics-1 img { height: auto; max-height: 560px; object-fit: contain; background: var(--bg); }
.pics-2 { grid-template-columns: 1fr 1fr; grid-auto-rows: clamp(140px, 30vw, 300px); }
.pics-3 { grid-template-columns: 2fr 1fr; grid-template-rows: repeat(2, clamp(90px, 18vw, 180px)); }
.pics-3 .pic:first-child { grid-row: span 2; }
.pics-4 { grid-template-columns: 1fr 1fr; grid-auto-rows: clamp(110px, 22vw, 220px); }
.pics-5, .pics-6 { grid-template-columns: repeat(3, 1fr); grid-auto-rows: clamp(90px, 20vw, 200px); }
.pics-5 .pic:first-child { grid-column: span 2; grid-row: span 2; }
.pic-more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .45); color: #fff; font-size: 1.6rem; font-weight: 700; pointer-events: none; }
.pic-report { position: absolute; right: 6px; bottom: 6px; background: rgba(0, 0, 0, .55); color: #fff; font-size: .75rem; border-radius: 6px; padding: 1px 7px; opacity: .75; }
.pic-report:hover, .pic-report:focus { opacity: 1; text-decoration: none; }
@media (max-width: 480px) { .pic-report span { display: none; } }

/* Lightbox (upload.js) */
.lightbox { position: fixed; inset: 0; z-index: 50; background: rgba(8, 12, 14, .93); display: grid; place-items: center; padding: 44px 8px; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }
.lightbox button { position: absolute; background: rgba(255, 255, 255, .14); color: #fff; border: 0; border-radius: 50%; width: 44px; height: 44px; font-size: 1.7rem; line-height: 1; cursor: pointer; }
.lightbox button:hover, .lightbox button:focus-visible { background: rgba(255, 255, 255, .3); }
.lightbox-close { top: 8px; right: 8px; }
.lightbox-prev { left: 8px; top: calc(50% - 22px); }
.lightbox-next { right: 8px; top: calc(50% - 22px); }
.lightbox.single .lightbox-prev, .lightbox.single .lightbox-next { display: none; }
.lightbox-count { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; color: #ddd; font-size: .9rem; }
html.lightbox-open { overflow: hidden; }

/* Foto-Auswahl ----------------------------------------------------------------------------- */
.upload { display: flex; flex-direction: column; gap: 6px; border: 1px dashed var(--line); border-radius: 10px; padding: 10px 12px; }
.upload-label { font-weight: 600; }
.upload-input { font: inherit; max-width: 100%; }
.upload-input::file-selector-button { font: inherit; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; margin-right: 10px; cursor: pointer; }
.upload-preview { display: flex; flex-wrap: wrap; gap: 8px; }
.upload-thumb { position: relative; width: 96px; display: flex; flex-direction: column; gap: 4px; font-weight: 400; font-size: .8rem; }
.upload-thumb img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); }
.upload-del { position: absolute; top: -6px; right: -6px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--alarm); color: #fff; font-size: 1rem; line-height: 1; cursor: pointer; }
.upload.is-busy .upload-preview { opacity: .6; }
.upload-msg { margin: 0; }
.upload-hint { margin: 0; font-size: .85rem; }
.upload-current { display: flex; align-items: center; gap: 12px; }
.avatar-img { border-radius: 50%; width: 80px; height: 80px; object-fit: cover; border: 1px solid var(--line); }
.ad-photos-edit .check { display: flex; gap: 4px; align-items: center; }

/* Marktplatz & Wohnen: Übersicht --------------------------------------------------------- */
.market .lead { margin-top: 6px; }
.ad-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; margin: 8px 0; }
.ad-tabs a { white-space: nowrap; padding: 6px 12px; border-radius: 20px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: .92rem; }
.ad-tabs a.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.ad-tabs a:hover { text-decoration: none; border-color: var(--accent); }
.ad-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 12px; align-items: end; }
.ad-filters label { display: flex; flex-direction: column; gap: 3px; font-size: .85rem; font-weight: 600; color: var(--muted); }
.ad-filters-go { display: flex; gap: 12px; align-items: center; }
input[type=number] { width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }

.ad-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 12px; }
@media (max-width: 520px) { .ad-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }
.ad-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; color: var(--ink); }
.ad-card:hover { text-decoration: none; border-color: var(--accent); box-shadow: 0 2px 10px rgba(0, 0, 0, .06); }
.ad-pic { position: relative; aspect-ratio: 4 / 3; background: var(--bg); }
.ad-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ad-noimg { position: absolute; inset: 0; display: grid; place-items: center; font-size: 3rem; opacity: .55; }
.ad-pic .ad-badge { position: absolute; left: 8px; top: 8px; }
.ad-count { position: absolute; right: 8px; bottom: 8px; background: rgba(0, 0, 0, .55); color: #fff; font-size: .75rem; border-radius: 6px; padding: 0 6px; }
.ad-body { padding: 8px 11px 11px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ad-price { font-weight: 700; font-size: 1.05rem; }
.ad-body h2 { font-size: .98rem; font-weight: 500; margin: 0; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.ad-facts { font-size: .85rem; }
.ad-meta { color: var(--muted); font-size: .8rem; overflow-wrap: anywhere; }
@media (max-width: 520px) { .ad-price { font-size: .95rem; } .ad-body { padding: 6px 8px 9px; } }

.ad-badge { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .02em; border-radius: 6px; padding: 1px 7px; background: var(--card); color: var(--ink); border: 1px solid var(--line); white-space: nowrap; }
.ad-badge.type-offer, .ad-badge.deal-rent, .ad-badge.deal-sale { background: #e6eef6; color: #1f3d5a; border-color: #c7d8ea; }
.ad-badge.type-wanted, .ad-badge.deal-wanted { background: #fdf0d8; color: #6b4a00; border-color: #f0d9a6; }
.ad-badge.type-free { background: #e3f1e6; color: #1d4d2a; border-color: #bfdcc6; }
.ad-badge.deal-holiday { background: #e2f3f5; color: #164a52; border-color: #bde0e5; }
.ad-badge.deal-swap { background: #efe7f6; color: #4a2a63; border-color: #d9c8e8; }
.ad-badge.status-reserved { background: #fff4d6; color: #6b4a00; border-color: var(--warn); }
.ad-badge.status-done, .ad-badge.status-expired { background: #f3e2e0; color: #6b1a14; border-color: #e5c1bc; }
a.ad-badge:hover { text-decoration: none; filter: brightness(.97); }

.ad-mine summary { cursor: pointer; font-weight: 600; }
.ad-mine ul { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.ad-mine li { overflow-wrap: anywhere; }
.ad-mine li > * + * { margin-left: 6px; }
.ad-foot { margin-top: 20px; font-size: .85rem; }
.ad-fraud { background: #fdf0d8; color: #5a3d00; border: 1px solid #f0d9a6; border-radius: 8px; padding: 9px 12px; font-size: .92rem; }

/* Anzeigen-Formular */
.ad-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .ad-cols { grid-template-columns: 1fr; } }
.ad-choice { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.ad-choice label.check { flex-direction: row; align-items: center; }
.ad-choice label.locked { color: var(--muted); }
.field-hint { font-weight: 400; font-size: .8rem; }
.ad-private { background: var(--bg); border-radius: 8px; padding: 9px 12px; }

/* Anzeigen-Box in Beiträgen ------------------------------------------------------------- */
.adbox { border: 1px solid var(--line); background: var(--bg); border-radius: 10px; padding: 8px 12px; margin: 8px 0; display: flex; flex-direction: column; gap: 4px; }
.adbox-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adbox-price { font-weight: 700; font-size: 1.1rem; }
.adbox-facts { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); font-size: .88rem; }
.adbox-closed .adbox-price { text-decoration: line-through; color: var(--muted); }
.adbox-note { margin: 0; font-size: .88rem; }
.adbox-detail { padding: 12px 14px; gap: 10px; }
.adbox-detail .adbox-price { font-size: 1.35rem; }
.adbox-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; margin: 0; font-size: .95rem; }
.adbox-dl dt { color: var(--muted); }
.adbox-dl dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 420px) { .adbox-dl { grid-template-columns: 1fr; gap: 0; } .adbox-dl dd { margin-bottom: 6px; } }
.adbox-owner { border-top: 1px solid var(--line); padding-top: 8px; }
.adbox-owner h3 { font-size: .95rem; margin: 0 0 6px; }
.adbox-owner .hint { margin: 6px 0 0; font-size: .85rem; }
.adbox-contact { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.adbox-contact .hint { margin: 0; font-size: .85rem; }
.adbox-safety { margin: 0; font-size: .85rem; color: var(--muted); }
.adbox-housing .adbox-safety { background: #fdf0d8; color: #5a3d00; border-radius: 8px; padding: 8px 10px; }
.adbox .flash { margin: 0; }

@media (prefers-color-scheme: dark) {
  .ad-badge.type-offer, .ad-badge.deal-rent, .ad-badge.deal-sale { background: #1d3142; color: #cfe2f3; border-color: #2f4b63; }
  .ad-badge.type-wanted, .ad-badge.deal-wanted, .ad-badge.status-reserved { background: #3a2f12; color: #f3dfaa; border-color: #5d4a1a; }
  .ad-badge.type-free { background: #1c3524; color: #cdebd5; border-color: #2c5236; }
  .ad-badge.deal-holiday { background: #163338; color: #c8eaee; border-color: #25525a; }
  .ad-badge.deal-swap { background: #2d2238; color: #e3d3f1; border-color: #4a3a5c; }
  .ad-badge.status-done, .ad-badge.status-expired { background: #3b1f1c; color: #f0cdc8; border-color: #5d302b; }
  .ad-fraud, .adbox-housing .adbox-safety { background: #3a2f12; color: #f3dfaa; border-color: #5d4a1a; }
}