/**
 * ICOSIM Mandats-Upload — eigene Stile.
 *
 * Bewusst knapp: Farben und Abstaende kommen aus dem Theme. Fehlt das Theme,
 * greifen die Rueckfallwerte am Anfang, damit der Abschnitt trotzdem lesbar
 * bleibt.
 */
/* Rueckfallwerte: Die Farben kommen normalerweise aus dem Theme (:root). Sie
   duerfen hier NICHT ueber eine gleichnamige Eigenschaft gesetzt werden
   (--c-accent: var(--c-accent, …) verweist auf sich selbst und loescht den Wert);
   die Rueckfaelle stehen deshalb direkt an jeder Verwendung. */
.mandat-status.ist-fehler {
  background: rgba(176, 58, 46, 0.12);
  font-weight: 600;
}
.mandat-handy .field { max-width: 32rem; }

/* ---------- SEPA-Mandat im Aufnahmeantrag ----------
   Drei gleich gewichtete Schritte: herunterladen, mit dem Handy hochladen,
   am Rechner hochladen. Grosse Schrift, klare Nummern, hoher Kontrast. */
.mandat-schritte {
  display: grid;
  /* minmax(0, 1fr): ohne die Null als Untergrenze richtet sich die Spalte nach
     dem breitesten Kind (Schaltflaeche, Dateifeld) und ragt auf dem Handy aus
     dem Textbereich heraus. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}
.mandat-karte {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  min-width: 0;
  padding: var(--space-5);
  border: 1px solid var(--c-line, #d8e0e4);
  border-radius: var(--r-lg, 16px);
  background: var(--c-surface, #ffffff);
}
/* Auf schmalen Bildschirmen duerfen Schaltflaeche und Dateifeld umbrechen bzw.
   schrumpfen, damit die Karte nicht breiter wird als der Textbereich. */
.mandat-karte > *,
.mandat-karte .stack-2,
.mandat-karte .stack-3 {
  min-width: 0;
}
.mandat-karte .btn {
  white-space: normal;
  max-width: 100%;
}
.mandat-karte .input-datei,
.mandat-karte input[type="file"] {
  max-width: 100%;
  box-sizing: border-box;
}
.mandat-qr {
  flex-wrap: wrap;
}
.mandat-code {
  overflow-wrap: anywhere;
}

.mandat-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  background: var(--c-accent, #0b7fab);
  color: #ffffff;
  font-weight: 700;
  font-size: var(--text-lg);
}
.mandat-qr {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: center;
}
.mandat-qr img {
  width: 9.5rem; height: 9.5rem;
  border: 1px solid var(--c-line, #d8e0e4);
  border-radius: var(--r-md, 10px);
  background: #ffffff;
  padding: 0.4rem;
  box-sizing: border-box;
}
/* In der schmalen Formularspalte darf die Beschriftung des Codes nicht in
   eine Zeile laufen — daher ausdruecklich untereinander. */
.mandat-qr > .stack-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}
.mandat-code {
  font-size: var(--text-base);
  letter-spacing: 0.01em;
}
.mandat-qr-flaeche {
  width: 9.5rem;
  height: 9.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-line, #d8e0e4);
  border-radius: var(--r-md, 10px);
  background: #ffffff;
  padding: 0.4rem;
  box-sizing: border-box;
}
.mandat-qr-flaeche img,
.mandat-qr-flaeche canvas {
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
}
.mandat-status {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--r-md, 10px);
  background: var(--c-surface-2, #f2f5f7);
  font-size: var(--text-sm);
}
.mandat-status.ist-da {
  background: rgba(46, 125, 80, 0.12);
  color: var(--c-text, #17262c);
  font-weight: 600;
}
.input-datei { padding: var(--space-3); }


/* ---------- Die eigene Upload-Seite ----------
   Diese Seite wird ohne den sonst ueblichen Inhaltsrahmen ausgegeben: Titel und
   Text stehen sonst direkt an der Bildschirmkante. Der Rahmen wird deshalb hier
   gesetzt — vorrangig am umgebenden <main>, damit die Ueberschrift des Themes
   mitwandert, und als Rueckfall am Block selbst. */
main:has(> .mandat-handy) {
  max-width: 54rem;
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 5vw, 2rem);
  padding-bottom: clamp(2rem, 6vw, 4rem);
  box-sizing: border-box;
}
.mandat-handy {
  max-width: 46rem;
  margin-inline: auto;
  padding-block: clamp(1rem, 4vw, 2rem);
  box-sizing: border-box;
}
/* Browser ohne :has() bekommen den Abstand direkt am Block. */
@supports not selector(:has(*)) {
  .mandat-handy {
    padding-inline: clamp(1.1rem, 5vw, 2rem);
  }
}