diff --git a/app/templates/_link_card.html b/app/templates/_link_card.html
index cb0829c..73ba02c 100644
--- a/app/templates/_link_card.html
+++ b/app/templates/_link_card.html
@@ -10,12 +10,14 @@
         🕓 hinzugefügt am {{ link.created_at | datum }}
       </div>
     </div>
-    <div style="display:flex; gap:4px; flex-shrink:0;">
-      <button class="ghost" style="padding:4px 10px; font-size:.8rem;"
+    <div style="display:flex; gap:4px; flex-shrink:0; align-items:flex-start;">
+      <button class="ghost" style="padding:4px 9px; font-size:.85rem;"
+              title="Bearbeiten"
               hx-get="/links/{{ link.id }}/edit"
               hx-target="#link-{{ link.id }}"
-              hx-swap="outerHTML">✎ Bearbeiten</button>
+              hx-swap="outerHTML">✎</button>
       <button class="danger"
+              title="Löschen"
               hx-delete="/links/{{ link.id }}"
               hx-target="#link-{{ link.id }}"
               hx-swap="outerHTML"
diff --git a/app/templates/_link_card_edit.html b/app/templates/_link_card_edit.html
index 81d3eaf..cfebac3 100644
--- a/app/templates/_link_card_edit.html
+++ b/app/templates/_link_card_edit.html
@@ -18,12 +18,12 @@
       <textarea name="summary" rows="3" style="width:100%; background:var(--panel2); border:1px solid var(--border); color:var(--text); border-radius:8px; padding:10px 12px; font-size:.95rem; font-family:inherit;">{{ link.summary }}</textarea>
     </div>
 
-    <div style="display:flex; gap:12px;">
-      <div class="field" style="flex:1;">
+    <div style="display:flex; gap:12px; flex-wrap:wrap;">
+      <div class="field" style="flex:1 1 160px;">
         <label>Kategorie</label>
         <input type="text" name="category" value="{{ link.category }}">
       </div>
-      <div class="field" style="flex:1;">
+      <div class="field" style="flex:1 1 160px;">
         <label>Hersteller / Quelle</label>
         <input type="text" name="manufacturer" value="{{ link.manufacturer }}">
       </div>
@@ -34,7 +34,7 @@
       <input type="text" name="tags" value="{{ link.tag_list | join(', ') }}">
     </div>
 
-    <div style="display:flex; justify-content:space-between; gap:8px; margin-top:4px;">
+    <div style="display:flex; justify-content:space-between; gap:8px; margin-top:4px; flex-wrap:wrap;">
       <div style="display:flex; gap:8px;">
         <button type="submit">Speichern</button>
         <button type="button" class="ghost"
diff --git a/app/templates/base.html b/app/templates/base.html
index 2efb57a..f058187 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -44,10 +44,23 @@
       border-radius: 8px; padding: 6px 10px; font-size: .85rem; font-family: inherit;
       cursor: pointer;
     }
-    .layout { display: flex; gap: 24px; max-width: 1200px; margin: 24px auto; padding: 0 24px; }
+    .layout { display: flex; gap: 24px; margin: 24px auto; padding: 0 24px; }
     .sidebar { width: 240px; flex-shrink: 0; }
     .main { flex: 1; min-width: 0; }
     .panel { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 16px; }
+
+    /* Linkliste: bis zu drei Karten pro Zeile, je nach Fensterbreite. */
+    #links { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
+    #links > .panel { margin-bottom: 0; }
+    #links > #empty-state { grid-column: 1 / -1; }
+    @media (min-width: 1000px) { #links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+    @media (min-width: 1500px) { #links { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
+
+    /* Auf schmalen Geräten die Seitenleiste über den Inhalt stellen. */
+    @media (max-width: 800px) {
+      .layout { flex-direction: column; gap: 16px; padding: 0 16px; }
+      .sidebar { width: auto; }
+    }
     .facet-group h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 16px 0 8px; }
     .facet { display: flex; justify-content: space-between; padding: 5px 8px; border-radius: 6px; font-size: .9rem; }
     .facet:hover { background: var(--panel2); text-decoration: none; }
diff --git a/app/templates/index.html b/app/templates/index.html
index c3cdaa0..2c47afb 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -54,8 +54,9 @@
       <form hx-post="/links" hx-target="#links" hx-swap="afterbegin"
             hx-disabled-elt="button"
             hx-on::after-request="if(event.detail.successful){this.reset(); var e=document.getElementById('empty-state'); if(e) e.remove();}">
-        <div style="display:flex; gap:8px;">
-          <input type="url" name="url" placeholder="Link einfügen, z.B. https://hersteller.de/produkt" required>
+        <div style="display:flex; gap:8px; flex-wrap:wrap;">
+          <input type="url" name="url" placeholder="Link einfügen, z.B. https://hersteller.de/produkt" required
+                 style="flex:1 1 220px; width:auto;">
           <button type="submit" style="white-space:nowrap;">
             <span class="htmx-indicator">⏳</span> Hinzufügen
           </button>