/* Minutes of Meeting — Dokument-Layout nach Dennis' MoM_Layout.docx.
   Eigene Datei, weil dasselbe Stylesheet auch die Druckausgabe erzeugt.
   A4 hoch. Ränder 2 cm ringsum — enger als die 2,5 cm der Vorlage, damit mehr
   Text auf die Seite passt. */

.mom {
  position: relative;
  box-sizing: border-box;
  width: 21cm;
  min-height: 29.7cm;
  margin: 0 auto;
  padding: 2cm;
  background: #ffffff;
  color: #1a1a1a;
  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 10.5pt;
  line-height: 1.45;
  overflow: hidden;
}

/* Wabenmuster hinter dem Seitenkopf, wie in der Vorlage rechts angeschnitten. */
.mom::before {
  content: '';
  position: absolute;
  top: -1cm;
  right: -2cm;
  width: 12cm;
  height: 10.4cm;
  background: url('/assets/mom-watermark.png') no-repeat right top;
  background-size: contain;
  opacity: 0.5;
  pointer-events: none;
}
.mom > * { position: relative; }

.mom__head { margin-bottom: 1.2cm; text-align: right; }
.mom__logo { height: 0.75cm; width: auto; display: inline-block; }

.mom__title { margin: 0 0 0.9cm; font-size: 15pt; font-weight: 700; letter-spacing: -0.01em; }
.mom__label { margin: 0 0 0.35cm; font-size: 10.5pt; font-weight: 700; }
.mom__label + * { margin-top: 0; }
.mom__block + .mom__label { margin-top: 0.9cm; }

.mom__details { margin: 0 0 0 1.1em; padding: 0; list-style: disc; }
.mom__details li { margin-bottom: 0.15cm; }
.mom__key { font-weight: 700; }

.mom__agenda { margin: 0 0 0 1.1em; padding: 0; list-style: disc; }
.mom__agenda li { margin-bottom: 0.18cm; }

.mom__table { width: 100%; border-collapse: collapse; font-size: 9pt; line-height: 1.4; }
.mom__table th,
.mom__table td {
  border: 1px solid #a6a6a6;
  padding: 0.15cm 0.2cm;
  text-align: left;
  vertical-align: top;
}
.mom__table th { font-weight: 700; }
/* Spaltenbreiten: bewusste Abweichung von der docx (dort 10,9/18,1/33,0/20,4/17,6 %).
   Muss mit COLUMN_WIDTHS in js/mom-template.js übereinstimmen — dort steht die
   Begründung. Siehe DECISIONS.md D-2026-08-12-08. */
.mom__table col:nth-child(1) { width: 13%; }
.mom__table col:nth-child(2) { width: 30%; }
.mom__table col:nth-child(3) { width: 26%; }
.mom__table col:nth-child(4) { width: 17%; }
.mom__table col:nth-child(5) { width: 14%; }

.mom__foot {
  margin-top: 1.2cm;
  padding-top: 0.3cm;
  font-size: 9pt;
  color: #5f6f68;
}

/* --- Bearbeitbare Felder: nur im Editor sichtbar, nie im Dokument --- */
.mom--editable [contenteditable] {
  outline: none;
  border-radius: 2px;
  box-shadow: inset 0 -1px 0 rgba(95, 111, 104, 0.28);
}
/* Ein leeres Inline-Element hat keine Fläche und ist damit nicht anklickbar.
   In Zellen füllt das Feld die ganze Zelle, in Listen bekommt es eine
   Mindestbreite — sonst kann man leere Felder nicht ausfüllen. */
.mom--editable td [contenteditable] { display: block; min-height: 1.15em; }
/* Nur LEERE Felder brauchen eine Fläche. Ein gefülltes Feld bleibt inline,
   sonst wird es zur Zeilenbox und das Aufzählungszeichen rutscht bei
   mehrzeiligen Punkten auf die letzte Zeile. */
.mom--editable li [contenteditable]:empty { display: inline-block; min-width: 4em; }
.mom--editable [contenteditable]:hover { background: rgba(95, 167, 143, 0.07); }
.mom--editable [contenteditable]:focus {
  background: rgba(95, 167, 143, 0.11);
  box-shadow: 0 0 0 2px rgba(95, 167, 143, 0.45);
}
.mom--editable [contenteditable]:empty::before {
  content: attr(data-placeholder);
  color: #9aa3a0;
}

.mom__rowdrop {
  width: 0.9cm;
  border: none !important;
  padding: 0 0 0 0.15cm !important;
}
.mom__rowdrop button {
  background: none;
  border: none;
  padding: 2px 4px;
  font: inherit;
  font-size: 11pt;
  line-height: 1;
  color: #9aa3a0;
  cursor: pointer;
  border-radius: 2px;
}
.mom__rowdrop button:hover { color: #b2453a; background: rgba(178, 69, 58, 0.1); }
.mom__rowdrop button:focus-visible { outline: 2px solid #5fa78f; outline-offset: 1px; }

/* --- Druck ---
   Gedruckt wird eine Kopie des Blattes, die beim Klick direkt unter <body>
   gehängt wird. Der Versuch, die eingebettete Vorschau per CSS aus ihrer
   Verschachtelung zu lösen, brauchte position:absolute — und absolut
   positionierter Inhalt, der über die erste Seite hinausragt, wird von
   Browsern beim Drucken abgeschnitten. Eine Kopie an der richtigen Stelle
   umgeht das Problem, statt dagegen anzukämpfen. */
@media print {
  /* Seite 1 ohne Rand, weil das Blatt seinen eigenen 2-cm-Innenabstand hat und
     das Wabenmuster rechts oben bewusst angeschnitten ist. Ein Innenabstand
     gilt aber nur oben auf der ersten und unten auf der letzten Seite — ohne
     die zweite Regel klebt der Inhalt ab Seite 2 an der Blattkante und läuft in
     den nicht druckbaren Bereich. */
  @page { size: A4 portrait; margin: 2cm 0; }
  @page :first { margin: 0; }

  html, body { background: #fff !important; }
  body > *:not(.mom-print-sheet) { display: none !important; }

  .mom-print-sheet { display: block !important; }
  .mom-print-sheet .mom {
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 2cm;
    box-shadow: none;
  }

  .mom__table thead { display: table-header-group; }
  .mom__table tr { break-inside: avoid; page-break-inside: avoid; }
  .mom__foot { display: none; }
}