/**
 * css/konflikt.css — Der Hinweis bei gleichzeitigem Speichern
 *
 * Gehoert zu js/konflikt.js. Wird von index.php geladen.
 *
 * Abstaende, Radien und Schriftgroessen kommen aus css/system.css
 * (--nv-s*, --nv-r-*, --nv-t-*, --nv-tap). Keine eigenen Zahlen: ein System
 * mit Ausnahmen ist keines.
 *
 * Der Ton ist bewusst NICHT der einer Fehlermeldung. Es ist kein Fehler
 * passiert — zwei Leute haben zur selben Zeit gearbeitet, was im Salon
 * normal ist. Also kein Rot, kein Warndreieck; die Marke ist Nevanu-Rosé,
 * die Gegenueberstellung neutral.
 */

.kf-hinter {
  position: fixed;
  inset: 0;
  z-index: var(--z-blatt-hoch);
  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  animation: kf-ein .22s ease-out;
}
@media (min-width: 620px) {
  .kf-hinter { align-items: center; padding: var(--nv-s4, var(--nv-s4)); }
}
@keyframes kf-ein { from { opacity: 0 } to { opacity: 1 } }

.kf-karte {
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--k-bg2, var(--nv-flaeche-erhoben));
  border-radius: var(--nv-r-blatt, 26px) var(--nv-r-blatt, 26px) 0 0;
  padding: var(--nv-s5, var(--nv-s5)) var(--nv-s4, var(--nv-s4))
           calc(var(--nv-s5, 24px) + var(--nv-sockel-unten));
  box-shadow: 0 -8px 40px rgba(0, 0, 0, .18);
  animation: kf-hoch .28s cubic-bezier(.22, 1, .36, 1);
}
@media (min-width: 620px) {
  .kf-karte { border-radius: var(--nv-r-blatt, 26px); }
}
@keyframes kf-hoch { from { transform: translateY(14%) } to { transform: none } }

/* ── Kopf ──────────────────────────────────────────────────────────────── */
.kf-kopf {
  display: flex;
  gap: var(--nv-s3, var(--nv-s3));
  align-items: flex-start;
  margin-bottom: var(--nv-s4, var(--nv-s4));
}
.kf-zeichen {
  flex: 0 0 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--nv-r-eingabe);
  background: color-mix(in srgb, var(--k-brand) 14%, transparent);
  color: var(--k-brand);
  font-size: var(--k-fs-titel);
}
.kf-titel {
  font-size: var(--nv-t-kopf, 1.15rem);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--k-text);
}
.kf-unter {
  font-size: var(--k-fs-caption);
  color: var(--k-text3);
  margin-top: 2px;
  line-height: 1.45;
}

/* ── Gegenueberstellung ────────────────────────────────────────────────── */
.kf-liste { display: flex; flex-direction: column; gap: var(--nv-s3, var(--nv-s3)); margin-bottom: var(--nv-s4, var(--nv-s4)); }

.kf-feld-name {
  font-size: var(--k-fs-caption);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--k-text3);
  margin-bottom: var(--nv-s2, var(--nv-s2));
}

/* Untereinander, nicht nebeneinander: zwei Spalten zu je 160 px machen aus
   einer Notiz eine Schlucht aus Silbentrennungen. Untereinander liest man
   beide Fassungen in voller Breite, und die Reihenfolge (fremd oben, eigen
   unten) ist dieselbe wie im zusammengefuehrten Text. */
.kf-gegen { display: flex; flex-direction: column; gap: 2px; }

.kf-seite {
  padding: var(--nv-s3, var(--nv-s3));
  background: var(--k-bg3, rgba(0, 0, 0, .03));
  border-left: 3px solid var(--k-text4, rgba(0, 0, 0, .15));
}
.kf-seite:first-child { border-radius: var(--nv-r-s, 12px) var(--nv-r-s, 12px) 0 0; }
.kf-seite:last-child  { border-radius: 0 0 var(--nv-r-s, 12px) var(--nv-r-s, 12px); }
.kf-seite--fremd { border-left-color: var(--nv-blue, #3B82F6); }
.kf-seite--mein  { border-left-color: var(--k-brand); }

.kf-seite-kopf {
  font-size: var(--k-fs-caption);
  font-weight: 600;
  color: var(--k-text3);
  margin-bottom: var(--nv-s1);
}
.kf-seite--fremd .kf-seite-kopf { color: var(--nv-blue, #3B82F6); }
.kf-seite--mein  .kf-seite-kopf { color: var(--k-brand); }

.kf-seite-wert {
  font-size: var(--k-fs-body);
  color: var(--k-text);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Die drei Wege ─────────────────────────────────────────────────────── */
.kf-wege { display: flex; flex-direction: column; gap: var(--nv-s2, var(--nv-s2)); }

.kf-weg {
  display: flex;
  align-items: center;
  gap: var(--nv-s3, var(--nv-s3));
  width: 100%;
  min-height: var(--nv-tap, 44px);
  padding: var(--nv-s3, var(--nv-s3));
  border: 1px solid var(--k-line, rgba(0, 0, 0, .08));
  border-radius: var(--nv-r-karte, 18px);
  background: var(--k-bg2, var(--nv-flaeche-erhoben));
  color: var(--k-text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .16s cubic-bezier(.22, 1, .36, 1), background .16s;
}
.kf-weg:active { transform: scale(.98); }
@media (hover: hover) { .kf-weg:hover { background: var(--k-bg3, rgba(0, 0, 0, .03)); } }

.kf-weg .material-symbols-rounded { font-size: var(--k-fs-titel); color: var(--k-text3); flex: 0 0 auto; }
.kf-weg span:last-child { display: flex; flex-direction: column; min-width: 0; }
.kf-weg b { font-size: var(--k-fs-body); font-weight: 600; }
.kf-weg small { font-size: var(--k-fs-caption); color: var(--k-text3); margin-top: 1px; }

/* „Beide behalten" ist der einzige Weg, bei dem nichts verloren geht.
   Deshalb traegt er als einziger Farbe — nicht als Voreinstellung, sondern
   als Hinweis, dass es hier eine Antwort ohne Verlust gibt. */
.kf-weg--zusammen {
  border-color: color-mix(in srgb, var(--k-brand) 40%, transparent);
  background: color-mix(in srgb, var(--k-brand) 8%, transparent);
}
.kf-weg--zusammen .material-symbols-rounded { color: var(--k-brand); }