/* ============================================================
   Firmenmaske: das Blatt von rechts.

   Die Bauteile selbst kommen aus md3-kit.css — hier steht nur die
   Huelle, die Abschnitte und die Angabenliste am Firmenblatt.
   ============================================================ */

.fi-scrim {
  position: fixed;
  inset: 0;
  z-index: 1600;
  background: rgba(9, 17, 32, .4);
  opacity: 0;
  transition: opacity .2s;
}
.fi-scrim.an { opacity: 1; }

.fi-blatt {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: 1601;
  /* Die MASKE zum Bearbeiten, nicht das Blatt der Tabelle. Sie
     behaelt ihre feste Breite: ein Formular wird nicht besser,
     wenn seine Felder auf einem breiten Schirm auseinanderlaufen. */
  width: 580px;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: -14px 0 40px -18px rgba(18, 35, 58, .6);
  transform: translateX(100%);
  transition: transform .26s cubic-bezier(.2, 0, 0, 1);
}
.fi-blatt.an { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) { .fi-blatt { transition: none; } }

.fi-kopf {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--scrm-linie, #e7eef6);
}
.fi-kopf b { font-size: 15.5px; }
.fi-kopf .fi-weg { margin-inline-start: auto; }
.fi-rumpf { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 18px 22px; }
.fi-fuss {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  border-top: 1px solid var(--scrm-linie, #e7eef6);
}
.fi-luecke { flex: 1; }

/* Abschnitte statt einer Liste aus fünfundzwanzig Feldern. Oben
   steht, was man beim Anlegen wirklich einträgt, unten das, was
   man nachträgt, wenn es soweit ist. */
.fi-abschnitt {
  margin: 22px 0 12px;
  padding-top: 15px;
  border-top: 1px solid var(--scrm-linie, #e7eef6);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--scrm-mut, #8a97a8);
}
.fi-abschnitt:first-child { margin-top: 16px; border-top: 0; padding-top: 0; }

.fi-hinweis {
  display: flex;
  gap: 9px;
  padding: 10px 12px;
  border-radius: 11px;
  background: #f1f5fa;
  font-size: 12px;
  line-height: 1.5;
  color: #41556d;
}
.fi-hinweis .material-symbols-rounded { font-size: 17px; color: var(--scrm-mut, #8a97a8); flex: none; }

/* ============================================================
   Das Firmenblatt in zwei Spalten

   Links wird gearbeitet, rechts steht, was die Firma IST.
   Beide Spalten rollen fuer sich; der Kopf bleibt stehen.
   Vorher war alles untereinander, und die Angaben lagen ganz
   unten — hinter Produkten, Kaufrunde und Chancen.

   .crs-srumpf gehoert crm-suite.js (Kopie). Die Klasse
   fi-zweispaltig setzt firmen.js selbst dazu, damit die
   Aenderung nur dieses eine Blatt trifft.
   ============================================================ */
.crs-srumpf.fi-zweispaltig {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.fi-zwei {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 318px;
  gap: 16px;
}
.fi-haupt { min-width: 0; overflow-y: auto; padding-inline-end: 4px; }

/* Die Leiste rollt eigenstaendig: sonst waere sie bei einer
   gepflegten Firma laenger als das Fenster und man muesste an
   der Arbeit vorbeiscrollen, um die Anschrift zu lesen. */
.fi-leiste {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}
/* Drei Zahlen nebeneinander, auch in 318 Pixeln. Ohne das
   stapelt die Regel der Kopie (minmax 150px) sie untereinander
   und die halbe Leiste ist weg, bevor die erste Angabe kommt. */
.fi-leiste .crs-kzs {
  flex: none;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 0;
}
.fi-leiste .crs-kz { padding: 9px 10px; }
.fi-leiste .crs-kz b { font-size: 16px; }
.fi-leiste .crs-kz span { font-size: 10.5px; }

/* ---------- Die Angaben als Zeilen ---------- */
.fi-werte {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--scrm-linie, #e7eef6);
  overflow: hidden;
}
.fi-wkopf {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 8px 9px 14px;
  border-bottom: 1px solid var(--scrm-linie, #e7eef6);
}
.fi-wkopf b { font-size: 12.5px; font-weight: 800; }
.fi-wstand { font-size: 11.5px; color: var(--scrm-mut, #8a97a8); }
/* Hier stand der Knopf "Bearbeiten". Seit dem 04.11. ist jede
   Zeile selbst der Knopf, und an seiner Stelle steht nur noch,
   dass das so ist — einmal gelesen braucht es das niemand mehr,
   also leise. */
.fi-whinweis {
  margin-inline-start: auto;
  font-size: 10.5px;
  color: #b3bdcb;
  white-space: nowrap;
}
.fi-aliste { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 10px; }

/* Beschriftung links, Wert rechts. Die 108 Pixel sind die
   laengste Beschriftung (Strasse und Hausnummer) in zwei
   Zeilen — breiter waere Platzverschwendung, schmaler
   braechen auch kurze Woerter um. */
.fi-az {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 5px 14px;
}
.fi-az:hover { background: #f9fbfd; }
.fi-ak {
  flex: none;
  width: 108px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--scrm-mut, #8a97a8);
}
.fi-aw {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
/* Leer ist nicht nichts — aber auch nichts, worauf das Auge
   haengenbleiben soll. */
.fi-az.leer .fi-aw { color: #c3ccd8; font-weight: 400; }

/* ============================================================
   An Ort und Stelle bearbeiten

   Der Wert IST der Knopf. Im Ruhezustand darf man ihm das nicht
   ansehen — eine Leiste aus siebenundzwanzig Eingabefeldern
   waere wieder die Maske, die hier gerade abgeschafft wurde.
   Erst beim Zeigen taucht der Rahmen auf.
   ============================================================ */
.fi-aknopf {
  /* Alles, was ein Knopf mitbringt, wieder abräumen: er soll
     aussehen wie der Text, der er vorher war. */
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  padding: 1px 6px;
  /* 7 und 14, nicht 6 und 12: der durchsichtige Rahmen zaehlt bei
     border-box mit, und die fehlenden zwei Pixel reichten, um den
     Firmennamen in der Ueberschrift umbrechen zu lassen — 57 statt
     28 Pixel hoch. Je Seite also 1px Rahmen plus 6px Polster. */
  margin: -2px -7px;
  border-radius: 7px;
  cursor: text;
  width: calc(100% + 14px);
}
.fi-az.fi-bearb:hover .fi-aknopf,
.fi-nz:hover .fi-aknopf { border-color: #dde5ef; background: #fff; }

/* Der Firmenname in der Ueberschrift. Er ist dieselbe Mechanik
   wie eine Listenzeile, sieht aber nicht so aus: Schriftgroesse
   und Gewicht erbt der Knopf (font: inherit), und breit wie die
   ganze Zeile soll er nicht werden — sonst liegt beim Zeigen ein
   Rahmen quer ueber dem Blatt. */
/* Eine Zeile, Punkt. Der Knopf bringt Polster und Rahmen mit, die
   der blosse Text vorher nicht hatte — damit passte derselbe Name
   nicht mehr in dieselbe Zeile und die Ueberschrift wurde doppelt
   so hoch (57 statt 28 Pixel). Das gegen die Pixel auszurechnen
   ist die falsche Antwort: eine Ueberschrift bricht nicht um. Ein
   zu langer Name endet mit Puenktchen und steht vollstaendig im
   Titel und im offenen Feld. */
.fi-nz .fi-aknopf {
  width: fit-content;
  max-width: calc(100% + 14px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fi-nz .fi-aein { font-size: inherit; font-weight: inherit; width: 100%; }
.fi-aknopf:focus-visible {
  outline: 0;
  border-color: var(--accent, #2f7ad6);
  background: #fff;
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb, 47,122,214), .16);
}
/* Der Gedankenstrich eines leeren Feldes soll einladen, nicht
   bloss dastehen. */
.fi-az.fi-bearb:hover .fi-leerzeichen::after {
  content: " eintragen";
  font-size: 11.5px;
  color: #aab5c4;
}

/* Das offene Feld sitzt genau dort, wo der Wert stand — kein
   Sprung, keine neue Zeile, kein Dialog. */
.fi-aein {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--scrm-text, #12233a);
  background: #fff;
  border: 1px solid var(--accent, #2f7ad6);
  border-radius: 7px;
  padding: 1px 6px;
  margin: -1px -6px;
  outline: 0;
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb, 47,122,214), .16);
}
textarea.fi-aein { resize: vertical; line-height: 1.45; padding: 4px 6px; }
select.fi-aein { cursor: pointer; }
.fi-az.fi-offen { background: #f6f9fd; }
/* Die Notiz braucht die ganze Breite: zwölf Zeichen neben einer
   108 Pixel breiten Beschriftung sind kein Notizfeld. */
.fi-az.fi-lang { flex-wrap: wrap; }
.fi-az.fi-lang .fi-aw, .fi-az.fi-lang .fi-aein { flex-basis: 100%; }

/* Die Gruppenueberschrift sitzt in der Leiste enger als im
   Blatt und braucht keinen Trennstrich — die Luecke reicht. */
.fi-leiste .fi-abschnitt {
  margin: 12px 0 2px;
  padding: 0 14px;
  border-top: 0;
  font-size: 10px;
}
.fi-leiste .fi-abschnitt:first-child { margin-top: 10px; }

/* Schmales Fenster: die zweite Spalte haette dann weniger als
   440 Pixel fuer die Arbeit uebrig. Dann lieber untereinander,
   wie vorher. */
@media (max-width: 1240px) {
  .crs-srumpf.fi-zweispaltig { display: block; overflow-y: auto; }
  .fi-zwei { display: block; }
  .fi-haupt { overflow: visible; }
  .fi-leiste { overflow: visible; margin-top: 16px; }
  .fi-werte { max-height: none; }
  .fi-aliste { overflow: visible; }
}