From 00074e408f2f621f0a885483af83fddbf9e8ec4e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Sun, 22 Mar 2026 19:49:56 +0100
Subject: [PATCH] Unify button styles

---
 index.html |  4 ++--
 styles.css | 23 +++++++++--------------
 2 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/index.html b/index.html
index 165002f..8e8b580 100644
--- a/index.html
+++ b/index.html
@@ -255,7 +255,7 @@
             <div class="contact-item__label">E-Mail</div>
             <div class="contact-item__value">fabienne@fabiennefoehn.ch</div>
             <button
-              class="copy-button"
+              class="button button--dark copy-button"
               type="button"
               data-copy-value="fabienne@fabiennefoehn.ch"
               aria-label="E-Mail kopieren"
@@ -276,7 +276,7 @@
             <div class="contact-item__label">Telefon</div>
             <div class="contact-item__value">+41 78 600 14 11</div>
             <button
-              class="copy-button"
+              class="button button--dark copy-button"
               type="button"
               data-copy-value="+41 78 600 14 11"
               aria-label="Telefonnummer kopieren"
diff --git a/styles.css b/styles.css
index 0a0c159..4280185 100644
--- a/styles.css
+++ b/styles.css
@@ -184,12 +184,15 @@ button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  gap: 0.55rem;
   width: fit-content;
   min-width: 13rem;
+  min-height: 4.25rem;
   padding: 1rem 1.7rem;
   border: 0;
   border-radius: var(--radius-button);
   font-weight: var(--font-weight-bold);
+  line-height: 1;
   cursor: pointer;
   transition: transform var(--transition-fast), box-shadow var(--transition-fast),
     background var(--transition-fast);
@@ -197,15 +200,12 @@ button {
 
 .button:hover,
 .button:focus-visible,
-.copy-button:hover,
-.copy-button:focus-visible,
 .contact-flyover__close:hover,
 .contact-flyover__close:focus-visible {
   transform: translateY(-1px);
 }
 
 .button:focus-visible,
-.copy-button:focus-visible,
 .contact-flyover__close:focus-visible {
   outline: 3px solid #ef49ae;
   outline-offset: 3px;
@@ -669,20 +669,13 @@ button {
 .copy-button {
   grid-column: 2;
   grid-row: 1 / span 2;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.55rem;
-  padding: 0.8rem 1rem;
-  border: 0;
-  border-radius: 999px;
-  background: var(--bg-dark);
-  color: var(--bg-light);
+  align-self: center;
+  justify-self: end;
+  min-width: 8.5rem;
   white-space: nowrap;
-  cursor: pointer;
-  transition: transform var(--transition-fast), background var(--transition-fast);
 }
 
-.copy-button svg {
+.button svg {
   width: 1.15rem;
   height: 1.15rem;
   fill: none;
@@ -913,5 +906,7 @@ button {
     grid-column: 1;
     grid-row: auto;
     justify-content: center;
+    justify-self: stretch;
+    width: 100%;
   }
 }