/* ============================================================
   Die Foto-Brücke — Präfix fb-

   Ein Kasten, der in zwei Formularen steht (Lost & Found, Marktplatz).
   Deshalb eigenes Blatt und eigener Präfix: Zwei Kopien derselben Regeln
   unter zwei Namen laufen früher oder später auseinander, und ein Name,
   den zwei Blätter kennen, ist ein Namenskonflikt mit Anlauf.

   Die Optik ist die von Lost & Found (20.08.2026): weiße Karte auf Mint,
   der Code in einer Ecke-Klammer wie auf einem Aushang.
   ============================================================ */

html:not(.js) .nur-js{display:none}

/* Den Abstand setzt der Kasten, in dem die Brücke steht (.fs-foto,
   .mk-foto) — nicht die Überschrift selbst. */
.fb-titel{color:var(--nav) !important}
.fb{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:center;
  padding:20px;background:#fff;border:1px solid #cbd6cd;border-radius:8px}

/* Der Code steht in einer Ecke-Klammer — vier Winkel, sonst nichts.
   Das stille Detail des Formulars. */
.fb-qr{position:relative;width:124px;height:124px;padding:9px}
.fb-qr::before,.fb-qr::after{content:"";position:absolute;width:14px;height:14px;
  border:2px solid var(--gruen)}
.fb-qr::before{top:0;left:0;border-right:0;border-bottom:0}
.fb-qr::after{bottom:0;right:0;border-left:0;border-top:0}
.fb-qr svg{display:block;width:100%;height:100%}

.fb-text{display:flex;flex-direction:column;gap:8px}
.fb-erklaerung{font-size:15.5px;font-weight:300;line-height:1.5;color:var(--sekundaer);
  max-width:44ch}
.fb-status{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:400;
  color:var(--muted)}
.fb-status::before{content:"";width:7px;height:7px;border-radius:50%;
  background:#b9c4bc;flex:none}
.fb-status.ist-warm::before{background:#E5C33C;animation:fbPuls 2s infinite}
.fb-status.ist-gut{color:var(--gruen)}
.fb-status.ist-gut::before{background:var(--gruen)}
@keyframes fbPuls{0%,100%{opacity:1}50%{opacity:.35}}
.fb-adresse a{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent;
  transition:color var(--t-schnell) ease-out,border-color var(--t-schnell) ease-out}
.fb-adresse a:hover{color:var(--gruen);border-color:var(--gruen)}

/* Die Abzüge: bei einem Bild ein Abzug, bei dreien eine Reihe. */
.fb-vorschau{grid-column:1/-1;display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;
  padding-top:16px;border-top:1px solid var(--hairline)}
.fb-abzug{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.fb-abzug img{width:104px;height:78px;object-fit:cover;display:block}
.fb-weg{background:none;border:0;padding:0;cursor:pointer;
  font-family:'Hanken Grotesk',sans-serif;font-size:14px;font-weight:400;color:var(--muted);
  text-transform:none;letter-spacing:0;border-bottom:1px solid var(--hairline)}
.fb-weg:hover{color:#8c2f28;border-color:#8c2f28}

@media (max-width:700px){
  /* Wer auf dem Telefon meldet, soll keinen QR-Code sehen, den er mit
     demselben Telefon scannen müsste. Hier führt der direkte Weg über
     das Dateifeld — Android und iOS bieten dort die Kamera an. */
  .fb,.fb-titel{display:none}
}
@media (prefers-reduced-motion:reduce){
  .fb-status.ist-warm::before{animation:none}
}