diff --git a/assets/styles/components/button.css b/assets/styles/components/button.css
index 2b31cb65..4a84c4a8 100644
--- a/assets/styles/components/button.css
+++ b/assets/styles/components/button.css
@@ -1,16 +1,19 @@
 .button {
-    @apply inline-flex items-center justify-center space-x-2 h-8 leading-8 md:h-10 md:leading-10 px-4 md:px-8 cursor-pointer;
-    @apply uppercase leading-none text-center text-sm md:text-base;
+    /* Same box as the @tailwindcss/forms inputs (1px border, py-2, 24px line), so a button lines up with a field beside it.
+       The line height is set with each font size (text-sm/6), because text-sm's own line height would override a plain leading-6. */
+    @apply inline-flex items-center justify-center space-x-2 px-4 md:px-8 py-2 border border-transparent bg-origin-border cursor-pointer;
+    @apply uppercase text-center text-sm/6 md:text-base/6;
     @apply transition-colors outline-none focus:outline-2 focus:outline-offset-2 focus:outline-primary-dark;
     @apply rounded-md;
 }
 
 .button--small {
-    @apply px-2 py-1 md:px-4 text-xs sm:text-sm;
+    @apply px-2 py-1 md:px-4 text-xs/6 sm:text-sm/6;
 }
 
 .button--primary {
-    background: linear-gradient(120deg, #960167 0%, #9e036a 40%, #fa1a8c 100%);
+    /* Only the image: the background shorthand would reset .button's background-origin */
+    background-image: linear-gradient(120deg, #960167 0%, #9e036a 40%, #fa1a8c 100%);
     @apply text-white;
     @apply hover:bg-none hover:bg-pink/80;
 }
diff --git a/templates/booking/_participant_form.html.twig b/templates/booking/_participant_form.html.twig
index 111bd7f2..3f8f989f 100644
--- a/templates/booking/_participant_form.html.twig
+++ b/templates/booking/_participant_form.html.twig
@@ -697,11 +697,11 @@
             </h3>
             <div class="mb-4">
                 {{ form_label(form.voucherCode) }}
-                <div class="flex items-center gap-2">
-                    <div class="grow">
+                <div class="flex items-end gap-2">
+                    <div class="grow min-w-0">
                         {{ form_widget(form.voucherCode) }}
                     </div>
-                    <button type="button" class="button button--secondary"
+                    <button type="button" class="button button--secondary shrink-0 whitespace-nowrap"
                         {% for name, value in voucherHx %} {{ name }}="{{ value }}"{% endfor %}>
                         Code einlösen
                     </button>