/* Theme-neutral: erbt Schrift- und Textfarbe vom Theme, funktioniert in hellem und dunklem Design.
   Akzentfarbe optional im Theme setzen: :root { --vmx-accent: #1fb5a0; } */
.vmx-apo {
	--a: var(--vmx-accent, #1fb5a0); --line: rgba(127, 127, 127, .35); --fill: rgba(127, 127, 127, .09); color: inherit; font: inherit; max-width: 760px; margin: 0 auto;
	/* Ohne color-scheme rendert Firefox native Formularelemente (Checkboxen, Select-Text) teils im
	   hellen System-Standard, unabhaengig von den eigenen Farben hier. Dieses Projekt ist durchgehend
	   dunkel gestaltet (kein helles Theme im Einsatz), daher fest auf dark setzen statt "light dark". */
	color-scheme: dark;
}
.vmx-apo fieldset { border: 1px solid var(--line); border-radius: 12px; padding: 1.25rem 1.25rem 1rem; margin: 0; min-width: 0; }
.vmx-apo legend { font-weight: 700; padding: 0 .5rem; }
.vmx-apo [hidden] { display: none !important; }
.vmx-apo__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.vmx-apo__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .85rem; }
.vmx-apo__field { display: flex; flex-direction: column; gap: .3rem; margin: 0 0 .85rem; }
.vmx-apo__field > span { font-size: .9em; font-weight: 600; color: var(--text-primary, inherit); }
.vmx-apo__field small { opacity: .75; line-height: 1.4; }
.vmx-apo input[type="text"], .vmx-apo input[type="email"], .vmx-apo input[type="tel"], .vmx-apo input[type="number"], .vmx-apo select {
	width: 100%; box-sizing: border-box; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 8px; background: var(--fill); color: var(--text-primary, inherit); font: inherit;
	/* appearance zuruecksetzen: ohne das erzwingt Firefox teilweise eine eigene (dunkle) System-Textfarbe
	   fuer Formularfelder, unabhaengig von "color: inherit" oben, und macht den Text auf dunklem
	   Hintergrund unlesbar. Chromium-basierte Browser zeigten das Problem nicht, Firefox schon. */
	appearance: none; -webkit-appearance: none; -moz-appearance: none;
}
.vmx-apo select {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238892A4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
	background-repeat: no-repeat; background-position: right .7rem center; background-size: 18px; padding-right: 2.2rem;
}
.vmx-apo input:focus, .vmx-apo select:focus, .vmx-apo summary:focus-visible, .vmx-apo__btn:focus-visible { outline: 2px solid var(--a); outline-offset: 2px; }
.vmx-apo__check { display: flex; gap: .6rem; align-items: flex-start; margin: 0 0 .7rem; line-height: 1.45; cursor: pointer; color: var(--text-primary, inherit); }
.vmx-apo__check input { margin-top: .25rem; flex: 0 0 auto; }
.vmx-apo__more { margin: .25rem 0 1rem; }
.vmx-apo__more summary { cursor: pointer; font-weight: 600; margin-bottom: .75rem; }
.vmx-apo__actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.vmx-apo__btn { appearance: none; border: 0; border-radius: 8px; padding: .8rem 1.3rem; font: inherit; font-weight: 700; cursor: pointer; background: var(--a); color: #04110f; }
.vmx-apo__btn:disabled { opacity: .6; cursor: wait; }
.vmx-apo__btn--ghost { background: transparent; color: inherit; border: 1px solid var(--line); }
.vmx-apo__error { margin: 0 0 .85rem; padding: .6rem .8rem; border-radius: 8px; border: 1px solid #d9534f; background: rgba(217, 83, 79, .12); }
.vmx-apo__result { border: 1px solid var(--line); border-radius: 12px; padding: 1.25rem; }
.vmx-apo__result h3 { margin: 0 0 1rem; }
.vmx-apo__result table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.vmx-apo__result td { padding: .5rem .25rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.vmx-apo__num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vmx-apo__sum td { font-weight: 600; }
.vmx-apo__total td { font-weight: 800; font-size: 1.1em; border-bottom: 0; }
.vmx-apo__notes { margin: 0 0 1rem; padding-left: 1.1rem; font-size: .9em; opacity: .85; line-height: 1.45; }
@media (max-width: 480px) { .vmx-apo fieldset { padding: 1rem .85rem; } .vmx-apo__btn { width: 100%; } }