Aktueller Stand

web/style.css

@@ -35,6 +35,13 @@ header {
   gap: 12px;
 }
 
+.header-links {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
 .header-controls {
   display: flex;
   flex-wrap: wrap;
@@ -1061,6 +1068,166 @@ h1 {
   cursor: not-allowed;
 }
 
+.bookmark-inline {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  margin: 0;
+}
+
+.bookmark-inline__toggle {
+  padding: 8px 14px;
+  font-size: 14px;
+}
+
+.bookmark-panel {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  width: min(420px, 90vw);
+  background: #ffffff;
+  border-radius: 10px;
+  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
+  padding: 16px;
+  z-index: 20;
+  border: 1px solid rgba(229, 231, 235, 0.8);
+}
+
+.bookmark-panel__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.bookmark-panel__title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.bookmark-panel__close {
+  border: none;
+  background: transparent;
+  font-size: 20px;
+  line-height: 1;
+  cursor: pointer;
+  color: #4b5563;
+  padding: 2px 6px;
+}
+
+.bookmark-panel__close:hover,
+.bookmark-panel__close:focus {
+  color: #ef4444;
+}
+
+.bookmark-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.bookmark-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  background: #f0f2f5;
+  border-radius: 999px;
+}
+
+.bookmark-button {
+  border: none;
+  background: transparent;
+  color: #1d2129;
+  font-weight: 600;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0;
+  font-size: 14px;
+}
+
+.bookmark-button:hover,
+.bookmark-button:focus {
+  text-decoration: underline;
+}
+
+.bookmark-button:focus-visible {
+  outline: 2px solid #2563eb;
+  outline-offset: 2px;
+}
+
+.bookmark-remove-btn {
+  border: none;
+  background: transparent;
+  color: #7f8186;
+  cursor: pointer;
+  font-size: 16px;
+  line-height: 1;
+  padding: 0 2px;
+}
+
+.bookmark-remove-btn:hover,
+.bookmark-remove-btn:focus {
+  color: #c0392b;
+}
+
+.bookmark-form {
+  margin-top: 12px;
+  border-top: 1px solid #e4e6eb;
+  padding-top: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.bookmark-form__fields {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.bookmark-form__field {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 220px;
+  gap: 6px;
+}
+
+.bookmark-form__field span {
+  font-size: 13px;
+  color: #65676b;
+}
+
+.bookmark-form__field input {
+  border: 1px solid #d0d3d9;
+  border-radius: 6px;
+  padding: 8px 10px;
+  font-size: 14px;
+}
+
+.bookmark-form__actions {
+  display: flex;
+  gap: 10px;
+}
+
+.bookmark-form__hint {
+  margin: 0;
+  font-size: 12px;
+  color: #65676b;
+}
+
+.bookmark-empty {
+  font-size: 14px;
+  color: #65676b;
+  background: #f0f2f5;
+  border-radius: 8px;
+  padding: 12px;
+}
+
 .screenshot-modal {
   position: fixed;
   inset: 0;
@@ -1184,6 +1351,16 @@ h1 {
     padding: 14px;
   }
 
+  .header-main {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .header-links {
+    width: 100%;
+    justify-content: flex-start;
+  }
+
   .post-card {
     padding-left: 20px;
   }
@@ -1222,4 +1399,19 @@ h1 {
   .btn {
     width: 100%;
   }
+
+  .bookmark-inline {
+    display: block;
+    margin-bottom: 10px;
+  }
+
+  .bookmark-panel {
+    position: static;
+    width: 100%;
+    margin-top: 10px;
+  }
+
+  .bookmark-form__actions {
+    flex-direction: column;
+  }
 }