html { scroll-behavior: smooth; }
/*h1, h2 { text-align: center; margin: 20px 0; }*/
.search-container { text-align: center; margin: 20px; }
.search-container input { width: 100%;
    background-color: white;
    padding: 1px 16px 1px 10px;
    margin-top: 0px;
    border: 1px solid #c6c6c6;
    font-weight: normal;
    height: 45px;
    -webkit-appearance: none;
    border-radius: 8px; }

/* Sticky Navbar oben */
.alphabet { position: sticky; top: 40px; background: #fff; display: flex; justify-content: center;
    flex-wrap: nowrap; padding: 10px 0; border-bottom: 1px solid #eee; z-index: 1;
    overflow-x: auto; overflow-y: hidden; width: 100%; box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}
.alphabet a { margin: 0 8px; text-decoration: none; color: #333; font-weight: bold;
    padding: 5px; white-space: nowrap;
}
.alphabet a.empty { text-decoration: line-through; color: #ccc; }
.alphabet a.active { color: #007acc; border-bottom: 2px solid #007acc; }

.products { padding: 0 20px 40px; }
.letter-section { scroll-margin-top: 110px; margin-bottom: 40px; }
.letter-section h2 { font-size: 1.6em; border-bottom: 1px solid #ccc;
    padding-bottom: 5px; margin-top: 40px; font-weight: bold;
    color: #000; text-align: left;
}
.columns { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
    gap: 15px; margin-top: 15px;
}
.columns ul { list-style: none; padding: 0; margin: 0; }
.columns li { margin-bottom: 5px; }

/* Mobile optimiert */
@media (max-width: 768px) {
    .columns { grid-template-columns: 1fr !important; font-size: 16px; gap: unset}
    .alphabet { top: 60px; padding: 8px; flex-wrap: nowrap; justify-content: flex-start; }
    .alphabet a { margin: 0 4px; padding: 8px; font-size:16px; }
    .search-container input { width: 90%; }
    .letter-section { scroll-margin-top: 125px; margin-bottom: 40px; }
    .letter-section h2 {font-size: 18px; font-weight: bold; color: #000000}
    #search {scroll-margin-top: 75px;}
}