/* Auftragsübersicht 8mm-dvd.de - große, gut lesbare Schrift, handytauglich, tastaturbedienbar */
html.eightmm-ov-open { overflow: hidden; }
.eightmm-ov {
  position: fixed; inset: 0; z-index: 2147483000; background: rgba(21, 23, 28, .72);
  overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px;
  display: flex; align-items: flex-start; justify-content: center;
}
.eightmm-ov__panel {
  background: #fff; color: #15171c; width: 100%; max-width: 780px; margin: 0 auto;
  border-radius: 10px; padding: 24px 22px 20px; box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
  font-family: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  font-size: 18px; line-height: 1.5; outline: none; border-top: 8px solid #7ab4e2;
}
.eightmm-ov__title { font-size: 28px; line-height: 1.2; margin: 0 0 8px; color: #15171c; }
.eightmm-ov__hint {
  margin: 0 0 18px; padding: 12px 14px; background: #f3f1ec; border-radius: 8px; color: #15171c;
}
.eightmm-ov__cards { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; }
.eightmm-ov__card {
  flex: 1 1 280px; border: 1px solid #b9b3a8; border-radius: 8px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere;
}
.eightmm-ov__h3 {
  margin: 0; font-size: 16px; text-transform: uppercase; letter-spacing: .06em; color: #4a4f59; font-weight: 700;
}
.eightmm-ov__card .eightmm-ov__h3 { padding-bottom: 4px; }
.eightmm-ov__line { display: block; }
.eightmm-ov__section { margin: 0 0 18px; }
.eightmm-ov__head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap;
  border-bottom: 2px solid #15171c; padding-bottom: 4px; margin-bottom: 2px;
}
.eightmm-ov__section .eightmm-ov__h3 { font-size: 20px; text-transform: none; letter-spacing: 0; color: #15171c; }
.eightmm-ov__count { font-weight: 700; }
.eightmm-ov__rows { margin: 0; display: grid; grid-template-columns: minmax(130px, 220px) minmax(0, 1fr); }
.eightmm-ov__rows dt, .eightmm-ov__rows dd { margin: 0; padding: 8px 0; border-bottom: 1px solid #d9d4cb; overflow-wrap: anywhere; }
.eightmm-ov__rows dt { color: #4a4f59; padding-right: 12px; }
.eightmm-ov__buttons { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; margin-top: 8px; }
.eightmm-btn {
  appearance: none; min-height: 54px; padding: 12px 22px; font: inherit; font-weight: 700; font-size: 18px;
  border-radius: 8px; border: 2px solid #15171c; cursor: pointer; flex: 1 1 220px;
}
.eightmm-btn--primary { background: #7ab4e2; color: #15171c; }
.eightmm-btn--secondary { background: #fff; color: #15171c; }
.eightmm-btn:focus-visible, .eightmm-ov__panel:focus-visible { outline: 4px solid #0b57d0; outline-offset: 2px; }
.eightmm-btn:hover { filter: brightness(.95); }
.eightmm-auftrag-form .ff-el-is-error .ff-el-form-control,
.eightmm-auftrag-form .ff-el-is-error input { border-color: #b3261e; }
.eightmm-auftrag-form .eightmm-error { color: #b3261e; font-size: 16px; margin-top: 4px; }
.eightmm-auftrag-form .eightmm-info {
  background: #f3f1ec; border-radius: 8px; padding: 12px 14px; font-size: 15px; font-style: italic; line-height: 1.5;
}
@media (max-width: 600px) {
  .eightmm-ov { padding: 0; }
  .eightmm-ov__panel { border-radius: 0; padding: 18px 14px 16px; min-height: 100%; }
  .eightmm-ov__title { font-size: 24px; }
  .eightmm-ov__rows { grid-template-columns: 1fr; }
  .eightmm-ov__rows dt { border-bottom: 0; padding-bottom: 0; font-size: 16px; }
  .eightmm-btn { flex-basis: 100%; }
}

/* Kompaktes Layout (Desktop): Felder nebeneinander im 24er-Raster; Beschriftungen bleiben über den Feldern.
   Greift nur bei Formularen, die Felder mit den Klassen eightmm-cN enthalten (:has). Ohne :has bleibt das Formular einspaltig. */
.frm-fluent-form fieldset:has(> [class*="eightmm-c"]){display:grid;grid-template-columns:repeat(24,minmax(0,1fr));column-gap:1rem;align-items:start}
.frm-fluent-form fieldset:has(> [class*="eightmm-c"])>*{grid-column:span 24;min-width:0}
.frm-fluent-form fieldset>.eightmm-c3{grid-column:span 3}
.frm-fluent-form fieldset>.eightmm-c4{grid-column:span 4}
.frm-fluent-form fieldset>.eightmm-c5{grid-column:span 5}
.frm-fluent-form fieldset>.eightmm-c8{grid-column:span 8}
.frm-fluent-form fieldset>.eightmm-c11{grid-column:span 11}
.frm-fluent-form fieldset>.eightmm-c12{grid-column:span 12}
.frm-fluent-form fieldset>.eightmm-c24{grid-column:span 24}
.frm-fluent-form fieldset:has(> [class*="eightmm-c"]) .ff-el-group{margin-bottom:.9rem}
@media (max-width:600px){
  .frm-fluent-form fieldset:has(> [class*="eightmm-c"]){display:block}
}
/* Mittlere Breiten: höchstens zwei Felder nebeneinander */
@media (min-width:601px) and (max-width:900px){
  .frm-fluent-form fieldset>.eightmm-c3,.frm-fluent-form fieldset>.eightmm-c4,.frm-fluent-form fieldset>.eightmm-c5,
  .frm-fluent-form fieldset>.eightmm-c8,.frm-fluent-form fieldset>.eightmm-c11{grid-column:span 12}
}
/* Auswahlfelder, deren Optionen nebeneinander stehen (Dateiformat, Laufzeit) */
.frm-fluent-form .eightmm-inline .ff-el-input--content{display:flex;flex-wrap:wrap;gap:.3rem 1.8rem}
.frm-fluent-form .eightmm-inline .ff-el-form-check{margin:0}
/* Titelinformationen: nummerierte Tabelle */
.eightmm-titel{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:.4rem .9rem;align-items:center;margin-top:.3rem}
.eightmm-titel label{margin:0;font-weight:400}
.eightmm-titel input{width:100%;min-width:0}
/* Erklärtexte im Formular: kursiv, etwas kleiner */
.frm-fluent-form .eightmm-info{font-size:.9rem;font-style:italic;line-height:1.5}