/* Kaufansicht (Flora 10.10.2026): Auswahl (_kauf_auswahl.html) und Kauf-Overlay (_kaufen.html).
   Nur Farben/Masse aus style.css (--k-*), Schrift Bricolage von body, Pille-Knopf = .btn.primary. */

/* ---------- Auswahl ---------- */
.kauf-auswahl { display: flex; flex-direction: column; gap: 0; font-family: inherit; color: var(--k-text); }
.kauf-auswahl [hidden] { display: none !important; }

.kauf-reiter { display: flex; gap: var(--k-5); border-bottom: 1px solid var(--k-linie); margin: var(--k-5) 0 var(--k-4); }
.kauf-reiter-knopf {
  appearance: none; background: transparent; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: var(--k-3) 0; font: inherit; font-size: var(--k-t-basis); font-weight: 500; color: var(--k-text-leise);
  cursor: pointer; border-radius: 0;
}
.kauf-reiter-knopf.aktiv { color: var(--k-ink); border-bottom-color: var(--k-kobalt); font-weight: 600; }
.kauf-reiter-knopf:focus-visible { outline: none; box-shadow: var(--k-fokus); border-radius: var(--k-r-klein); }

.kauf-ueberschrift { margin: var(--k-4) 0 var(--k-3); font-size: var(--k-t-gross); font-weight: 600; color: var(--k-ink); }
.kauf-reiter + .kauf-flaeche .kauf-ueberschrift { margin-top: var(--k-2); }

.kauf-liste { display: flex; flex-direction: column; gap: var(--k-2); }
.kauf-zeile {
  display: flex; align-items: center; gap: var(--k-3); padding: var(--k-3) var(--k-4);
  border: 1px solid var(--k-linie); border-radius: var(--k-r); background: var(--k-panel); cursor: pointer;
  position: relative;
}
.kauf-zeile.gewaehlt { background: var(--k-flieder); border-color: var(--k-flieder-rand); }
.kauf-radio { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.kauf-kreis {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--k-linie-stark);
  background: var(--k-panel); display: inline-flex; align-items: center; justify-content: center;
}
.kauf-radio:checked + .kauf-kreis { border-color: var(--k-kobalt); }
.kauf-radio:checked + .kauf-kreis::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--k-kobalt); }
.kauf-radio:focus-visible + .kauf-kreis { box-shadow: var(--k-fokus); }
.kauf-name { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: var(--k-t-basis); color: var(--k-ink); overflow-wrap: anywhere; }
.kauf-name strong { font-weight: 600; font-size: 16px; }
.kauf-name-klein { font-size: var(--k-t-klein); color: var(--k-text-leise); }
.kauf-preis { flex: 0 0 auto; font-size: 16px; font-weight: 600; color: var(--k-ink); white-space: nowrap; }

.kauf-hinweis { margin: var(--k-3) 0 0; font-size: var(--k-t-basis); color: var(--k-text-leise); }
.kauf-gesamt {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--k-3);
  margin-top: var(--k-4); padding-top: var(--k-4); border-top: 1px solid var(--k-linie);
}
.kauf-gesamt-label { font-size: var(--k-t-gross); font-weight: 600; color: var(--k-ink); }
.kauf-gesamt-wert { text-align: right; }
.kauf-gesamt-preis { font-size: var(--k-t-zahl); font-weight: 600; color: var(--k-ink); white-space: nowrap; }
.kauf-ust { font-size: var(--k-t-klein); color: var(--k-text-leise); white-space: nowrap; }
.kauf-weiter { width: 100%; margin-top: var(--k-5); padding: 14px 20px; font-size: 1rem; }
.kauf-meldung { margin: var(--k-3) 0 0; color: var(--k-rot); }
.kauf-offer-missing { margin: var(--k-3) 0 0; }
.kauf-klein { margin: var(--k-4) 0 0; font-size: var(--k-t-klein); color: var(--k-text-leise); text-align: center; }
.kauf-nicht-eingerichtet { margin: var(--k-3) 0 0; }

/* In den Einstellungen: etwas schmaler und linksbuendig */
.settings-content .kauf-auswahl { max-width: 520px; }

/* ---------- Overlay auf /app ---------- */
body.k-kauf-offen { overflow: hidden; }
.k-kauf {
  position: fixed; inset: 0; z-index: 220; display: flex; align-items: center; justify-content: center;
  padding: var(--k-5); background: rgba(22, 29, 56, 0.28);
}
.k-kauf[hidden] { display: none; }
.k-kauf-blatt {
  display: flex; flex-direction: column; width: min(560px, 100%); max-height: 100%;
  background: var(--k-panel); border: 1px solid var(--k-linie); border-radius: var(--k-r-gross);
  overflow-y: auto; overscroll-behavior: contain;
}
.k-kauf-blatt:focus { outline: none; }
.k-kauf-kopf { display: flex; align-items: center; justify-content: space-between; padding: var(--k-4) var(--k-5) 0; }
.k-kauf-logo { display: inline-flex; align-items: center; gap: var(--k-2); }
.k-kauf-logo-icon { width: 26px; height: 26px; display: block; }
.k-kauf-logo-wort { font-family: "Syne", "Helvetica Neue", Helvetica, sans-serif; font-weight: 600; font-size: 18px; letter-spacing: 0.02em; color: var(--k-ink); }
.k-kauf-x {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: -8px;
  border: 0; background: transparent; color: var(--k-text-leise); border-radius: var(--k-knopf-radius); cursor: pointer;
}
.k-kauf-x svg { width: 18px; height: 18px; }
.k-kauf-x:hover { background: var(--k-grund-tief); }
.k-kauf-x:focus-visible, .k-kauf-zurueck:focus-visible { outline: none; box-shadow: var(--k-fokus); }
.k-kauf-inhalt { padding: var(--k-3) var(--k-5) var(--k-6); }
.k-kauf-zurueck {
  appearance: none; background: transparent; border: 0; padding: var(--k-2) 0; margin: 0 0 var(--k-3);
  font: inherit; font-size: var(--k-t-basis); color: var(--k-text-leise); cursor: pointer; border-radius: var(--k-r-klein);
}
.k-kauf-zurueck:hover { color: var(--k-ink); }
.k-kauf-titel { margin: 0 0 var(--k-2); font-size: clamp(28px, 7vw, 36px); line-height: 1.1; font-weight: 600; color: var(--k-ink); letter-spacing: -0.01em; }
.k-kauf-unter { margin: 0 0 var(--k-5); font-size: 16px; color: var(--k-text); }

.k-kauf-motiv {
  display: flex; align-items: center; gap: var(--k-4); padding: var(--k-3);
  border: 1px solid var(--k-linie); border-radius: var(--k-r); background: var(--k-panel);
}
.k-kauf-bild { flex: 0 0 auto; width: 72px; height: 72px; object-fit: contain; background: var(--k-canvas); border-radius: var(--k-r-klein); }
.k-kauf-motiv-text { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
/* Werkname immer vollstaendig: umbrechen, nie abschneiden */
.k-kauf-werkname { font-size: 16px; font-weight: 600; color: var(--k-ink); white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.k-kauf-motiv-zeile { font-size: var(--k-t-basis); color: var(--k-text-leise); }

/* Handy: vollflaechiges Blatt (100dvh), innen scrollbar */
@media (max-width: 768px) {
  .k-kauf { padding: 0; align-items: stretch; background: var(--k-panel); }
  .k-kauf-blatt { width: 100%; height: 100vh; height: 100dvh; max-height: none; border: 0; border-radius: 0; }
  .k-kauf-kopf { padding: var(--k-3) var(--k-4) 0; }
  .k-kauf-inhalt { padding: var(--k-2) var(--k-4) calc(var(--k-6) + env(safe-area-inset-bottom, 0px)); }
}