/* Basis */
.page-title { font-size:1.6rem; margin: 18px 0; }

/* Controls */
.hub-controls { display:flex; gap:12px; align-items:center; margin:18px 0; flex-wrap:wrap; }
.hub-search input { padding:10px; width:320px; max-width:100%; border-radius:6px; border:1px solid #ddd; }
.hub-filter select { padding:8px; border-radius:6px; }

/* Alphabet sticky */
.alphabet-nav {
  position: sticky;
  top: 64px; /* passe an deine Headerhöhe an */
  background: #fff;
  z-index: 30;
  padding: 10px 0;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  border-bottom:1px solid #eee;
}
.alphabet-nav .alphabet-link { padding:6px 8px; background:#f4f6f8; border-radius:6px; text-decoration:none; color:#222; font-weight:600; }

/* Layout */
.hub-layout { display:grid; grid-template-columns: 1fr 320px; gap:28px; margin-top:18px; }
@media (max-width:980px) { .hub-layout{grid-template-columns:1fr;} .alphabet-nav{position:static;} }

/* Liste */
.funktionen-section { margin-bottom:36px; }
.buchstaben-trenner { height:2px; background:#e9eef3; margin:8px 0 18px; }
.funktionen-liste { list-style:none; padding:0; margin:0; }
.funktion-item { padding:10px 8px; border-radius:6px; }
.funktion-link { display:block; text-decoration:none; color:inherit; }
.funktion-name { display:block; font-weight:700; }
.funktion-desc { display:block; color:#666; font-size:0.95rem; margin-top:4px; }

/* Sidebar */
.side-block { margin-bottom:18px; background:#fff; padding:12px; border-radius:8px; border:1px solid #eee; }
.karten-grid { display:grid; grid-template-columns:1fr; gap:8px; }
.karte { display:block; padding:10px; border:1px solid #eee; border-radius:6px; text-decoration:none; color:inherit; background:#fafafa; }

/* Neu-Liste */
.neu-liste { list-style:none; padding:0; margin:0; }

/* Kleine Helfer */
.muted { color:#888; font-size:0.95rem; }

/* Responsive tweaks */
@media (max-width:640px) {
  .hub-controls { flex-direction:column; align-items:flex-start; }
}