/* ==========================================================================
   „Bild hochladen" - schwebender Knopf links + Fenster (16.09.2026)
   ========================================================================== */

.bildknopf {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 890;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .6rem 1.05rem .6rem .65rem;
  font: inherit;
  font-weight: 700;
  font-size: .95rem;
  color: #fff;
  text-decoration: none;
  background: var(--orange, #FE8A00);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0, 21, 49, .28);
  cursor: pointer;
}
.bildknopf:hover,
.bildknopf:focus-visible { background: #E67C00; color: #fff; text-decoration: none; }
.bildknopf:focus-visible { outline: 2px solid var(--brand-navy, #001531); outline-offset: 2px; }
.bildknopf__symbol {
  display: grid;
  place-items: center;
  width: 2.1rem; height: 2.1rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
}
.bildknopf__symbol svg { display: block; }

@media (max-width: 640px) {
  .bildknopf {
    left: 10px;
    /* über der Fußleiste der App */
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    padding: .5rem .9rem .5rem .5rem;
    font-size: .9rem;
  }
}

/* ------------------------------------------------------------- Fenster */

.bildfenster {
  width: min(560px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  padding: 1.2rem 1.3rem 1.3rem;
  color: var(--text, #001531);
  background: #fff;
  border: 0;
  border-top: 4px solid var(--orange, #FE8A00);
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 21, 49, .3);
  overflow-y: auto;
}
.bildfenster::backdrop { background: rgba(0, 21, 49, .5); }
.bildfenster [hidden] { display: none !important; }

.bildfenster__zu {
  float: right;
  margin: -.5rem -.5rem 0 0;
  padding: .2rem .6rem;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--text-muted, #5F6874);
  background: none;
  border: 0;
  cursor: pointer;
}
.bildfenster__titel { margin: 0 0 .9rem; font-size: 1.3rem; }

.bildfenster__wahl {
  display: block;
  margin-bottom: .9rem;
  cursor: pointer;
}
.bildfenster__wahl-leer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  padding: 2.2rem 1rem;
  text-align: center;
  color: var(--orange-dark, #A85400);
  background: var(--orange-soft, #FFEBD1);
  border: 2px dashed rgba(254, 138, 0, .7);
  border-radius: 10px;
}
.bildfenster__wahl-leer strong { font-size: 1.1rem; color: var(--text, #001531); }
.bildfenster__wahl-leer span { font-size: .85rem; color: var(--text-muted, #5F6874); }
.bildfenster__wahl:hover .bildfenster__wahl-leer { background: #FFE0B8; }

.bildfenster__vorschau {
  display: block;
  width: 100%;
  max-height: 46vh;
  object-fit: contain;
  background: #0b1a2e;
  border-radius: 10px;
}
.bildfenster__vorschau--klein { max-height: 26vh; margin-bottom: .8rem; }

.bildfenster__feld { display: block; margin-bottom: .75rem; }
.bildfenster__feld > span {
  display: block;
  margin-bottom: .25rem;
  font-weight: 700;
  font-size: .9rem;
}
.bildfenster__feld em { font-style: normal; font-weight: 400; color: var(--text-muted, #5F6874); }
.bildfenster__feld input,
.bildfenster__feld select,
.bildfenster__feld textarea {
  width: 100%;
  box-sizing: border-box;
  padding: .55rem .65rem;
  font: inherit;
  font-size: 1rem;           /* 16 px: kein Zoomen am iPhone */
  border: 1px solid rgba(0, 21, 49, .25);
  border-radius: 8px;
  background: #fff;
}
.bildfenster__feld textarea { resize: vertical; line-height: 1.45; }

.bildfenster__zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .75rem; }
@media (max-width: 520px) { .bildfenster__zeile { grid-template-columns: 1fr; } }

.bildfenster__haken {
  display: flex;
  gap: .55rem;
  align-items: flex-start;
  margin: .4rem 0;
  font-size: .92rem;
  cursor: pointer;
}
.bildfenster__haken input { width: 1.2rem; height: 1.2rem; margin-top: .1rem; flex: 0 0 auto; }

.bildfenster__hinweis {
  margin: 0 0 .8rem;
  padding: .55rem .7rem;
  font-size: .9rem;
  background: #EEF3FA;
  border-left: 3px solid var(--brand-navy, #001531);
  border-radius: 6px;
}
.bildfenster__hinweis.ist-warnung { background: var(--orange-soft, #FFEBD1); border-left-color: var(--orange, #FE8A00); }

.bildfenster__fehler { margin: .3rem 0 .6rem; color: #B42318; font-weight: 700; font-size: .92rem; }

.bildfenster__los { width: 100%; padding-top: .8rem; padding-bottom: .8rem; font-size: 1.05rem; }

.bildfenster__knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end; margin: .8rem 0 0; }
.bildfenster__ergebnis { margin: .2rem 0 .5rem; font-size: 1.2rem; }

.bildfenster__laeuft {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 2rem .5rem;
  font-size: 1rem;
}
.bildfenster__punkte { display: inline-flex; gap: .3rem; }
.bildfenster__punkte i {
  width: .55rem; height: .55rem;
  border-radius: 50%;
  background: var(--orange, #FE8A00);
  animation: bild-punkte 1s infinite ease-in-out;
}
.bildfenster__punkte i:nth-child(2) { animation-delay: .15s; }
.bildfenster__punkte i:nth-child(3) { animation-delay: .3s; }
@keyframes bild-punkte { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }