diff --git a/frontend/src/views/BrandingView.vue b/frontend/src/views/BrandingView.vue
index 1e511b2..33e3b10 100644
--- a/frontend/src/views/BrandingView.vue
+++ b/frontend/src/views/BrandingView.vue
@@ -131,7 +131,7 @@ onMounted(load)
         </div>
 
         <h3 style="margin-top:1.6rem">Slogan</h3>
-        <input class="input" v-model="data.tagline" maxlength="120" placeholder="z. B. Ihre Druckerei vor Ort" />
+        <input class="input slogan-input" v-model="data.tagline" maxlength="120" placeholder="z. B. Ihre Druckerei vor Ort" />
 
         <p v-if="error" class="error" style="margin-top:1rem">{{ error }}</p>
         <p v-if="saved" class="ok" style="margin-top:1rem">Gespeichert.</p>
@@ -155,7 +155,7 @@ onMounted(load)
 <style scoped>
 .page-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.4rem; }
 .page-head .muted { margin: .2rem 0 0; }
-.grid { display: grid; grid-template-columns: 1fr 320px; gap: 1.2rem; align-items: start; }
+.grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.2rem; align-items: start; max-width: 940px; }
 .card h3 { font-size: .95rem; margin-bottom: .7rem; }
 .sm { font-size: .8rem; }
 .error { color: var(--danger); font-size: .88rem; }
@@ -167,7 +167,8 @@ onMounted(load)
 .logo-actions { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
 .logo-actions .muted { margin: .2rem 0 0; }
 
-.colors { display: flex; flex-direction: column; gap: .7rem; }
+.colors { display: flex; flex-direction: column; gap: .7rem; max-width: 440px; }
+.slogan-input { max-width: 440px; }
 .color { display: flex; align-items: center; justify-content: space-between; font-size: .9rem; font-weight: 600; }
 .swatch { display: inline-flex; align-items: center; gap: .6rem; }
 .swatch input[type=color] { width: 38px; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: none; cursor: pointer; padding: 0; }