/** * MM Praxis Rx – Formular (Frontend). * * @package MM_Praxis_Rx */ .mm-prx-alert { box-sizing: border-box; max-width: 48rem; padding: 0.75rem 1rem; margin-bottom: 1rem; border-radius: 4px; } .mm-prx-alert--success { background: #ecf7ed; border: 1px solid #46b450; color: #1e4620; } .mm-prx-alert--error { background: #fef7f1; border: 1px solid #dc3232; color: #721c24; } /* WP-Core-kompatibel, falls Theme keine .screen-reader-text bereitstellt */ .mm-prx-alert .screen-reader-text, .mm-prx-form .screen-reader-text { position: absolute; overflow: hidden; clip-path: inset(50%); width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; word-wrap: normal !important; clip: rect(1px, 1px, 1px, 1px); } .mm-prx-form { box-sizing: border-box; max-width: 48rem; padding: 0; margin: 0 0 1.5rem; background: transparent; border: none; border-radius: 0; /* * Praxis Akzentfarbe (übersteuert vorheriges WP-Admin-Blau). */ --mm-prx-primary: #1a4a4d; --mm-prx-primary-hover: #153d40; --mm-prx-soft-bg: rgba(26, 74, 77, 0.1); --mm-prx-ring: rgba(26, 74, 77, 0.35); --mm-prx-rule: rgba(0, 0, 0, 0.12); } /** * Uncode: globales `form p { … }`; Formularfelder oft mit `input-underline` (Klasse * liegt typischerweise auf ``) — dann nur untere Linie. Voller Rahmen erzwingen. */ .mm-prx-form.mm-prx-form > p.mm-prx-form__row { margin: 0 0 1rem; font-weight: inherit; } .mm-prx-form.mm-prx-form .mm-prx-form__fieldset--type { margin: 0 0 1rem; padding: 0.75rem 1rem; background: transparent; border-style: dashed; } /* `.input-underline` kann `` oder ein Wrapper sein — nicht `body .input-underline` (falsch). */ .input-underline .mm-prx-form.mm-prx-form input[type="text"], .input-underline .mm-prx-form.mm-prx-form input[type="email"], .input-underline .mm-prx-form.mm-prx-form input[type="tel"], .input-underline .mm-prx-form.mm-prx-form input[type="date"], .input-underline .mm-prx-form.mm-prx-form textarea, .input-underline .mm-prx-form.mm-prx-form .mm-prx-repeater__input, body.input-background .mm-prx-form.mm-prx-form input[type="text"], body.input-background .mm-prx-form.mm-prx-form input[type="email"], body.input-background .mm-prx-form.mm-prx-form input[type="tel"], body.input-background .mm-prx-form.mm-prx-form input[type="date"], body.input-background .mm-prx-form.mm-prx-form textarea, body.input-background .mm-prx-form.mm-prx-form .mm-prx-repeater__input { border-width: 1px !important; border-style: solid !important; border-color: #ccc !important; border-radius: 4px !important; padding: 0.5rem 0.65rem !important; font-family: inherit !important; font-size: 1rem !important; font-weight: 400 !important; line-height: 1.375 !important; background-color: #fff !important; box-shadow: none !important; } .input-underline .mm-prx-form.mm-prx-form input[type="text"]:focus, .input-underline .mm-prx-form.mm-prx-form input[type="email"]:focus, .input-underline .mm-prx-form.mm-prx-form input[type="tel"]:focus, .input-underline .mm-prx-form.mm-prx-form input[type="date"]:focus, .input-underline .mm-prx-form.mm-prx-form textarea:focus, .input-underline .mm-prx-form.mm-prx-form .mm-prx-repeater__input:focus, body.input-background .mm-prx-form.mm-prx-form input[type="text"]:focus, body.input-background .mm-prx-form.mm-prx-form input[type="email"]:focus, body.input-background .mm-prx-form.mm-prx-form input[type="tel"]:focus, body.input-background .mm-prx-form.mm-prx-form input[type="date"]:focus, body.input-background .mm-prx-form.mm-prx-form textarea:focus, body.input-background .mm-prx-form.mm-prx-form .mm-prx-repeater__input:focus { border-width: 1px !important; border-style: solid !important; border-color: var(--mm-prx-primary) !important; box-shadow: 0 0 0 1px var(--mm-prx-ring) !important; outline-offset: 2px; } body.input-underline:not(.uncode-accessible) .mm-prx-form.mm-prx-form input:focus, body.input-underline:not(.uncode-accessible) .mm-prx-form.mm-prx-form textarea:focus, body.input-underline:not(.uncode-accessible) .mm-prx-form.mm-prx-form .mm-prx-repeater__input:focus, body:not(.uncode-accessible) .input-underline .mm-prx-form.mm-prx-form input:focus, body:not(.uncode-accessible) .input-underline .mm-prx-form.mm-prx-form textarea:focus, body:not(.uncode-accessible) .input-underline .mm-prx-form.mm-prx-form .mm-prx-repeater__input:focus { outline: 0; } .mm-prx-form__heading { margin-top: 0; margin-bottom: 1rem; } .mm-prx-form__section--identity { margin: 0; padding: 0; } .mm-prx-form__section--identity .mm-prx-form__row:last-of-type { margin-bottom: 0; } .mm-prx-form .mm-prx-form__divider { box-sizing: border-box; flex-shrink: 0; align-self: stretch; width: 100%; height: 0; margin: 1rem 0; padding: 0; border: 0; border-top: 1px solid var(--mm-prx-rule); } .mm-prx-form.mm-prx-form .mm-prx-form__section--identity + .mm-prx-form__fieldset--type { margin-top: 1rem; } .mm-prx-form.mm-prx-form .mm-prx-form__tail > .mm-prx-form__divider { margin-top: 1rem; margin-bottom: 1rem; } .mm-prx-form.mm-prx-form .mm-prx-form__tail > .mm-prx-form__block--rezept[hidden] + .mm-prx-form__divider { display: none !important; } /** * Bei nur „Rezept“ ist Überweisung [hidden]; der Divider davor bliebe sichtbar und doppelt * sich mit dem vor der Einwilligung — ausblenden, wenn dahinter kein sichtbarer Uber-Block folgt. */ .mm-prx-form.mm-prx-form .mm-prx-form__tail > .mm-prx-form__divider:has(+ .mm-prx-form__block--ueberweisung[hidden]) { display: none !important; } .mm-prx-form.mm-prx-form .mm-prx-form__tail + .mm-prx-form__divider { margin-top: 1rem; margin-bottom: 1rem; } .mm-prx-form__fieldset:not(.mm-prx-form__fieldset--type) { background: #fff; } .mm-prx-form__fieldset { margin: 0 0 1.25rem; padding: 1rem; border: 1px dashed #ccc; border-radius: 4px; } .mm-prx-form.mm-prx-form .mm-prx-form__block--consent { margin-bottom: 0; } .mm-prx-form .mm-prx-form__consent-title { margin: 0 0 0.75rem; padding: 0; font-weight: 600; font-size: inherit; line-height: 1.35; } .mm-prx-form__legend { margin: 0 0 0.5rem; font-weight: 600; } .mm-prx-form__radio { display: block; margin: 0.35rem 0; cursor: pointer; } .mm-prx-form__row label:not(.mm-prx-form__checkbox):not(.mm-prx-form__radio), .mm-prx-form__block label:not(.mm-prx-form__checkbox):not(.mm-prx-form__radio), .mm-prx-form__field label:not(.mm-prx-form__checkbox):not(.mm-prx-form__radio) { display: block; font-weight: 600; font-size: 1rem; line-height: 1.375; margin-bottom: 0.25rem; } .mm-prx-form.mm-prx-form .mm-prx-form__block--consent label.mm-prx-form__checkbox { font-weight: 400; margin-bottom: 0; } .mm-prx-form__names { box-sizing: border-box; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem 1rem; margin: 0 0 1.1rem; } .mm-prx-form__field input[type="text"], .mm-prx-form__field input[type="email"], .mm-prx-form__field input[type="tel"], .mm-prx-form__field input[type="date"], .mm-prx-form__row input[type="text"], .mm-prx-form__row input[type="email"], .mm-prx-form__row input[type="tel"], .mm-prx-form__row input[type="date"], .mm-prx-form textarea { box-sizing: border-box; width: 100%; max-width: 100%; padding: 0.5rem 0.65rem; border: 1px solid #ccc; border-radius: 4px; font-family: inherit; font-size: 1rem; font-weight: 400; line-height: 1.375; } .mm-prx-form.mm-prx-form input:focus-visible, .mm-prx-form.mm-prx-form textarea:focus-visible, .mm-prx-form.mm-prx-form .mm-prx-repeater__input:focus-visible { outline: 2px solid var(--mm-prx-primary); outline-offset: 2px; } .mm-prx-form .description { display: block; font-size: 0.875rem; font-weight: normal; color: #555; margin-bottom: 0.35rem; } .mm-prx-form__block { margin-bottom: 1.25rem; } .mm-prx-form__tail { box-sizing: border-box; display: flex; flex-direction: column; gap: 0; padding-top: 0.75rem; margin-top: 0.75rem; border-top: 1px solid var(--mm-prx-rule); } .mm-prx-form__tail[hidden] { display: none !important; } @media (max-width: 560px) { .mm-prx-form__names { grid-template-columns: 1fr; } } .mm-prx-form__block-title { display: block; margin: 0 0 0.5rem; padding: 0; font-weight: 600; font-size: inherit; line-height: 1.35; } .mm-prx-form.mm-prx-form .mm-prx-form__block--rezept .mm-prx-form__block-title + .description { margin-top: 0; margin-bottom: 0.65rem; max-width: 100%; } .mm-prx-form.mm-prx-form h3.mm-prx-form__block-title, .mm-prx-form.mm-prx-form h3.mm-prx-form__consent-title { margin-block-start: 0; line-height: 1.35; } .mm-prx-form.mm-prx-form .mm-prx-form__block--rezept { box-sizing: border-box; display: flex; flex-direction: column; align-items: stretch; margin-bottom: 0; } .mm-prx-form.mm-prx-form .mm-prx-form__block--ueberweisung { margin-bottom: 0; } .mm-prx-form.mm-prx-form .mm-prx-form__med-lines { box-sizing: border-box; width: 100%; margin: 0; } .mm-prx-form.mm-prx-form .mm-prx-form__block--rezept .mm-prx-repeater { margin-top: 0; } .mm-prx-repeater { margin-top: 0.35rem; } .mm-prx-repeater__rows { display: flex; flex-direction: column; gap: 0.85rem; } .mm-prx-repeater__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; align-items: center; padding: 0.65rem; border: 1px solid #ddd; border-radius: 4px; } /* Uncode `.style-color-331255-bg` (#f2f6f2); Fallback falls Skin nach Plugin-CSS lädt. */ .mm-prx-form.mm-prx-form .mm-prx-repeater__row.style-color-331255-bg { background-color: #f2f6f2; } .mm-prx-repeater__cell { min-width: 0; } .mm-prx-repeater__cell--line { min-width: 0; } .mm-prx-repeater__input { box-sizing: border-box; width: 100%; max-width: 100%; margin: 0 !important; padding: 0.5rem 0.65rem; border: 1px solid #ccc; border-radius: 4px; font-family: inherit; font-size: 1rem; font-weight: 400; line-height: 1.375; } .mm-prx-repeater__cell--actions { display: flex; align-items: center; align-self: center; justify-content: flex-end; padding: 0; } .mm-prx-repeater__remove { box-sizing: border-box; flex-shrink: 0; align-self: center; min-height: 2.25rem; padding: 0.25rem 0.5rem; font: inherit; font-size: 0.875rem; line-height: 1.25; cursor: pointer; border: 1px solid #c3c4c7; background: #f6f7f7; border-radius: 4px; } .mm-prx-repeater__remove:hover:not(:disabled) { border-color: #8c8f94; background: #f0f0f1; } .mm-prx-repeater__remove:disabled { opacity: 0.45; cursor: not-allowed; } .mm-prx-repeater__toolbar { margin: 0.65rem 0 0; } .mm-prx-repeater__add { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; cursor: pointer; font: inherit; font-size: 0.9rem; font-weight: 500; line-height: 1.35; padding: 0.45rem 0.85rem; border-radius: 4px; border: 1px solid var(--mm-prx-primary); background: transparent; color: var(--mm-prx-primary); } .mm-prx-repeater__add-icon { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.15em; line-height: 1; } .mm-prx-repeater__add:hover:not(:disabled) { background: var(--mm-prx-soft-bg); border-color: var(--mm-prx-primary-hover); color: var(--mm-prx-primary-hover); } .mm-prx-repeater__add:disabled { opacity: 0.45; cursor: not-allowed; } @media (max-width: 640px) { .mm-prx-repeater__row { grid-template-columns: minmax(0, 1fr); } .mm-prx-repeater__cell--actions { justify-content: flex-start; } } .mm-prx-form__block[hidden] { display: none !important; } .mm-prx-form .mm-prx-form__divider + .mm-prx-form__notice { margin-top: 0; } .mm-prx-form__notice--emergency { box-sizing: border-box; margin: 1.25rem 0 0; clear: both; font-size: 0.9rem; color: #333; background: #fff8e5; border: 1px solid #e5c100; padding: 0.75rem 1rem; border-radius: 4px; } .mm-prx-form__checkbox { box-sizing: border-box; display: flex; align-items: flex-start; gap: 0.5rem; cursor: pointer; font-weight: normal; line-height: 1.375; max-width: 100%; } .mm-prx-form__checkbox > span { flex: 1 1 auto; min-width: 0; } .mm-prx-form.mm-prx-form .mm-prx-form__checkbox input[type="checkbox"] { box-sizing: border-box; flex: 0 0 auto; width: 1.125rem; min-width: 1.125rem; height: 1.125rem; min-height: 1.125rem; margin: 0.15rem 0 0 !important; align-self: flex-start; vertical-align: top; border-width: 1px; } .mm-prx-form__med-lines[hidden] { display: none !important; } .mm-prx-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .mm-prx-form__actions { margin: 1rem 0 0; } .mm-prx-form__actions--fixed { margin-top: 0.65rem; } .mm-prx-form.mm-prx-form button.mm-prx-form__submit[type="submit"] { box-sizing: border-box; display: inline-block !important; width: auto !important; max-width: none; padding: 0.6rem 1.25rem !important; margin: 0 !important; font: inherit !important; font-weight: 600 !important; line-height: 1.25 !important; text-align: center !important; white-space: nowrap; color: #fff !important; background-color: var(--mm-prx-primary) !important; background-image: none !important; border: 1px solid var(--mm-prx-primary) !important; border-radius: 4px !important; box-shadow: none !important; cursor: pointer !important; appearance: none; -webkit-appearance: none; vertical-align: middle; } .mm-prx-form.mm-prx-form button.mm-prx-form__submit[type="submit"]:hover:not(:disabled), .mm-prx-form.mm-prx-form button.mm-prx-form__submit[type="submit"]:focus:not(:disabled) { color: #fff !important; background-color: var(--mm-prx-primary-hover) !important; border-color: var(--mm-prx-primary-hover) !important; } .mm-prx-form.mm-prx-form button.mm-prx-form__submit[type="submit"]:focus { outline: 2px solid var(--mm-prx-primary) !important; outline-offset: 2px !important; } body:not(.uncode-accessible) .mm-prx-form.mm-prx-form button.mm-prx-form__submit:focus { box-shadow: none !important; } .mm-prx-form.mm-prx-form button.mm-prx-form__submit[type="submit"]:disabled { opacity: 0.55 !important; cursor: not-allowed !important; } .mm-prx-form .required { color: #c00; font-weight: 700; }