* {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

:root {
    --primary-color: rgba(235, 242, 234, 0.349);
    --secondary-color: black;
    --tertiary-color: white;
    --accent-color: #55a237;
    --accent-light-color: #e8f5e3;
    --accent-dark-color: #4d8736;

    --primary-border: solid 1px var(--accent-color);

    --primary-border-radius: 20px;
}


html[data-theme="dark"] {
    --primary-color: rgba(18, 18, 18, 0.95);
    --secondary-color: #e8e8e8;
    --tertiary-color: #1e1e1e;
    --accent-light-color: #1a2e14;
    --accent-dark-color: #7ec85f;
}

html[data-theme="dark"] body {
    background-color: #121212;
}

html[data-theme="dark"] #autocomplete-dropdown,
html[data-theme="dark"] .overlay-more {
    background-color: #1e1e1e;
}

html,
body {
    height: 100%;
    background-color: var(--primary-color);
    overflow: hidden;
}



.background-button-more {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--tertiary-color);
    z-index: 10;
    border: var(--primary-border);

}

.button-more {
    border: none;
    font-size: 15px;
    background-color: transparent;
    margin: 0;
    color: var(--secondary-color);
}

/*Overlay More*/
.overlay-more {
    position: absolute;
    right: 10px;
    display: flex;
    flex-direction: column;
    top: 50px;
    background-color: var(--tertiary-color);
    padding: 20px;
    border-radius: var(--primary-border-radius);
    transition: all 0.3s ease;
    visibility: hidden;
    opacity: 0;
    border: var(--accent-color);
    z-index: 10;
    border: var(--primary-border);


}

.overlay-more button {
    margin: 3px;
    background-color: transparent;
    color: var(--accent-dark-color) !important;
    text-align: left;
    background: rgba(255, 255, 255, 0.36);
    border-radius: var(--primary-border-radius);
    padding: 7px;
    border: var(--primary-border);
}

.recipe-overlay {
    height: 90vh;
    background-color: var(--tertiary-color);
    width: 100%;
    position: fixed;
    bottom: 0px;
    border-radius: 40px 40px 0px 0px;
    z-index: 10;
    transform: translateY(100%);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    flex-direction: column;
    z-index: 1000;
}

.drag-handle {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px 0 8px 0;
    height: 130px;
    cursor: grab;
    flex-shrink: 0;
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translate(-50%);
    display: none;
}

.drag-handle-bar {
    width: 60px;
    height: 4px;
    background-color: #ccc;
    border-radius: 100px;
}


#loadingTextRecipe {
    top: 40%;
}

.overlay-content {
    padding: 0px 30px;
    overflow-y: auto;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

#overlayTitle {
    font-size: 20px;
    margin-bottom: 20px;
    color: var(--accent-color);
}

#overlayDescription {
    font-size: 14px;
    margin-bottom: 20px;
    font-weight: 500;
}

#recipeDuration {
    background-color: var(--accent-light-color);
    border: var(--primary-border);
    color: var(--accent-color);
    padding: 5px;
    text-align: center;
    border-radius: var(--primary-border-radius);
    font-weight: 500;
    margin-top: 30px;
    font-size: 13px;
    width: 40%
}

.title-recipe {
    margin-bottom: 10px;
    margin-top: 40px;
    color: var(--accent-color);
}

#overlayIngredients {
    margin-bottom: 30px;
    list-style: none;
    padding: 0px;
}

#overlayIngredients li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.ingredient-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--accent-light-color);
    border: var(--primary-border);
    flex-shrink: 0;
}

#recipeSteps {
    counter-reset: step-counter;
    padding: 0;
    margin-top: 10px;
    list-style: none;
}


#recipeSteps li {
    counter-increment: step-counter;
    list-style: none;
    margin-bottom: 20px;
    padding-left: 50px;
    position: relative;
}

#recipeSteps li::before {
    content: counter(step-counter);
    position: absolute;
    left: 0;
    width: 32px;
    height: 32px;
    background-color: var(--accent-light-color);
    border: var(--primary-border);
    color: var(--accent-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
}

.overlay-content button {
    background: transparent !important;
    border: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0px !important;
    margin: 5px -15px 0px 0px !important;
}

#overlayContent {
    height: 100%;
    width: 100%;
    overflow: hidden;
    padding-top: 50px
}



#loadingTextRecipe {
    position: absolute;
    top: 5%;
}

#loadingAnimationRecipe {
    top: 11%;
    position: absolute;
}


.recipe-overlay.open {
    transform: translateY(0%);
    box-shadow: 0px 50px 70px 0px rgba(0, 0, 0, 0.75);
}

.recipe-overlay.loading {
    transform: translateY(70%);
    box-shadow: 0px 50px 70px 0px rgba(0, 0, 0, 0.75);

}

/* cardMoreOverlay open state: matches recipeOverlay loading-state height */
#cardMoreOverlay.open-more {
    transform: translateY(70%);
    box-shadow: 0px 50px 70px 0px rgba(0, 0, 0, 0.75);
}




/*Main-content-recepies*/
.container-toggle-recepies {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5%;
    width: 100%;
    flex-direction: row;
    position: fixed;
    top: 55px;
    z-index: 1;
    flex-wrap: wrap;
}

.toggle-recepies {
    padding: 8px 20px !important;
    background-color: var(--accent-dark-color);
    width: 40%;
}

.button-filter {
    margin-top: 20px;
    border-radius: var(--primary-border-radius);
    font-weight: 600;
    font-size: 12px;
    padding: 5px 20px !important;
    width: 80px;
    text-align: center;
    padding: 8px 10px
}

details[open] .button-filter {
    background-color: var(--accent-color);
    border: none;
    color: var(--tertiary-color);
    animation: Pop 0.3s ease forwards;

}

#favoritesSection {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
    margin-top: 55px;
    height: calc(var(--vh, 1vh) * 100);
    overflow-y: auto;
    padding-top: 80px;
    align-content: flex-start;
}




.background-button-back {
    position: absolute;
    top: 90px !important;
    left: 30px !important;
}

.favorite-recipe-container {
    background: rgba(157, 221, 151, 0.133);
    font-size: 10px;
    width: 40%;
    height: 160px;
    /* feste Höhe für alle Karten */
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    border: var(--primary-border);

    border-radius: var(--primary-border-radius);
    padding: 10px;
    position: relative;
    background-color: var(--tertiary-color);
}

.favorite-recipe-container:last-child {
    margin-bottom: 250px;
}

button.pop-animate {
    animation: Pop 0.3s ease forwards;
}

.overlay-filter {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: absolute;
    background-color: var(--tertiary-color);
    border: var(--primary-border);
    flex-direction: row !important;
    padding: 20px 10px;
    width: 70%;
    border-radius: var(--primary-border-radius);
    left: 50%;
    transform: translateX(-50%);
    margin-top: 20px;
    width: 60vw !important;
}


.filter-container {
    background-color: var(--accent-light-color);
    font-weight: 600;
    font-size: 12px;
    padding: 5px 20px;
    border-radius: var(--primary-border-radius);
    border: var(--primary-border);
    color: var(--accent-dark-color);
    background: rgba(255, 255, 255, 0.36);
    border-radius: var(--primary-border-radius);
    width: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 50px;
    text-align: center;
}

.filter-container i {
    margin-bottom: 5px;
}

.overlay-filter label {
    font-size: 10px
}

.filter-container.pop-animate {
    animation: Pop 0.3s ease forwards;

}

.filter-container:has(input[type="checkbox"]:checked) {
    background-color: var(--accent-light-color);
    border-color: var(--accent-dark-color);
    color: var(--accent-dark-color);
}

.overlay-filter input[type="checkbox"] {
    display: none;
}

.activated-toggle-recepies {
    background-color: var(--accent-color) !important;
    color: var(--tertiary-color) !important;
}

.loading-text-index {
    margin-top: 360px;
}

.generated-recepies {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    display: none;

}

#generatedFeed,
#suggestedFeed {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 120px;
    height: calc(var(--vh, 1vh) * 100);
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}

.noGeneratedFeed {
    display: none;
}

.noFavorites {
    display: none;
    margin-top: 40vh;
}

.noIngredients {
    display: none;
    margin-top: 20vh;
}

#suggestedRecipes {
    overflow-y: scroll;
    height: calc(var(--vh, 1vh) * 100);
    ;
    width: 100%;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#loadingAnimationSuggested {
    position: absolute;
    top: 380px;
}

#suggestedFeed .card-generated {
    height: calc(var(--vh, 1vh) * 100 - 145px);
}

#suggestedFeed .card-generated:last-child {
    margin-bottom: calc(var(--vh, 1vh) * 100 - 125px);
}

#generatedFeed .card-generated:last-child {
    margin-bottom: 1205px;
}


#suggestedRecipes {
    padding-bottom: 0px;
}

#suggestedRecipes .card-generated {
    height: calc(var(--vh, 1vh) * 100 - 145px);
}

#suggestedRecipes .card-generated:last-child {
    margin-bottom: calc(var(--vh, 1vh) * 100 - 125px);
}

h3,
p {
    color: var(--secondary-color);
    margin-bottom: 10px;
}

.favorite-recipe-container h3 {
    color: var(--accent-dark-color);
    flex-shrink: 0;
    margin-bottom: 8px;
}

.card-generated h3 {
    color: var(--accent-dark-color);
    margin-bottom: 30px;
    width: 85%;
}

.favorite-recipe-container p {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 7;
    /* max. 3 Zeilen, dann "..." */
    -webkit-box-orient: vertical;
    font-size: 10px;
    margin: 0;
}

.card-generated p {
    width: 85%;
    font-size: 14px;
}

.card-generated {
    /* From https://css.glass */
    background: rgba(157, 221, 151, 0.133);
    width: 90%;
    height: calc(var(--vh, 1vh) * 100 - 140px);
    /* entspricht Feed-Höhe → 1 Karte = 1 Snap */
    display: flex;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    margin-top: 25px;
    border-radius: var(--primary-border-radius);
    padding: 0px 70px 0px 20px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    /* verhindert Überspringen von Karten */
    flex-shrink: 0;
    box-sizing: border-box;
    position: relative;
    background-color: var(--tertiary-color);
    border: var(--primary-border);
    display: flex;
    flex-direction: column;
}

.card-generated-like,
.card-generated-share,
.card-generated-more {
    border: none;
    font-size: 20px;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    background: rgba(255, 255, 255, 0.36);

    border: var(--primary-border)
}

.card-generated-btn-container {
    position: absolute;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    top: 83%;
    transform: translateY(-83%);
}

.card-generated-like.liked {
    color: var(--tertiary-color);
    border: none;
    background-color: var(--accent-color);
}


#generatedFeed .card-generated:last-child {
    margin-bottom: 1205px;
}

.background-button-back {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--tertiary-color);
    z-index: 9;
    border: var(--primary-border);
}

#favoriteCardScreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 8;
    background-color: rgba(235, 242, 234, 0.349);
    display: none;
    flex-direction: column;
    align-items: center;
    height: 100vh;
}


#favoriteCardFeed {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 80px;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}


#favoriteCardFeed .card-generated:last-child {
    margin-bottom: calc(var(--vh, 1vh) * 100 - 100px);
}

#favoriteCardFeed .card-generated {
    height: calc(var(--vh, 1vh) * 100 - 100px);
}

.button-card-generated.pop-animate {
    background-color: var(--accent-color) !important;
    color: var(--tertiary-color) !important;
    animation: Pop 0.3s ease forwards;
}

/*main-content-camera*/

main {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    overflow: hidden;
}

h1 {
    color: black;
    font-size: 20px;
    position: absolute;
    top: 15px;
    left: 20px;
    z-index: 10;
    font-family: "DM Serif Display", serif;
    font-weight: 400;

}


#searchRecipesButton {
    border-radius: 50px;
    font-weight: 600;
    margin-top: 20px;
}


main div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.loading-camera-text {
    margin-top: 330px;
}


video {
    display: none;
}

video {
    width: 95%;
    border-radius: var(--primary-border-radius);
    height: 75vh;
    margin-top: 80px;
    object-fit: cover;
    top: 0;
    left: 0;
    z-index: 0;
}


#photo {
    display: none;
    width: 80%;
    margin-top: 100px;
    height: 80%;
    border-radius: var(--primary-border-radius);
}

.button-filter,
button:not(.background-button-more, .button-more, .card-generated-like, .card-generated-share, .card-generated-more, .capture, .overlay-more button) {
    /* From https://css.glass */
    background-color: var(--tertiary-color);
    border-radius: 50px;

    margin-top: 20px;
    border-radius: var(--primary-border-radius);
    color: var(--secondary-color);
    font-weight: 600;
    padding: 13px 20px;
    border: var(--primary-border);

}




.imageCaptured-buttons {
    padding: 13px 20px;
    display: none;
}



.capture {
    height: 70px;
    width: 70px;
    border-radius: 100%;
    display: none;
    position: absolute;
    bottom: 18%;
    border: solid 5px var(--accent-color);
    background-color: var(--tertiary-color);
}



h2 {
    color: var(--secondary-color);
    margin-top: 10px;
    font-size: 15px;
}

.loading-animation {
    border-radius: 100%;
    height: 50px;
    width: 50px;
    border: solid 6px var(--accent-color);
    border-top-color: #266015;
    animation: loading 1s linear infinite;
    margin-top: 15px;
    display: none;
}

@keyframes loading {
    100% {
        transform: rotate(360deg);
    }
}

/*Main-content-checklist*/
.main-checklist {
    padding: 70px 0px 200px 0px;
    height: 90vh;
    overflow-y: auto !important;
    box-sizing: border-box;
    margin-top: 108px;
    justify-content: flex-start;
}

.search-ingredients {
    width: auto;
    display: flex;
    justify-content: center;
    gap: 3%;
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    padding-left: 0;
    z-index: 2;
}

.search-ingredients input {
    width: 65vw;
    padding: 20px 15px;
    border: var(--primary-border);
    border-radius: var(--primary-border-radius);
    background-color: var(--tertiary-color);
    opacity: 1;
    pointer-events: all;
    margin-top: 0;
    box-sizing: border-box;
}

.search-ingredients .search-recipe-button {
    position: static;
    top: auto;
    right: auto;
    background-color: var(--accent-color) !important;
    color: var(--tertiary-color) !important;
    border: none !important;
    padding: 20px 20px !important;
    margin-top: 0 !important;
}

.search-ingredients .search-recipe-button i {
    color: var(--tertiary-color);
}

input {
    width: 100%;
    padding: 15px;
    border: none;
    background-color: transparent;
    border-bottom: solid 0.5px var(--secondary-color);
}

.search-ingredients input::placeholder {
    color: var(--secondary-color);
}

input:focus {
    outline: none;
}

.reset-button {
    position: absolute;
    top: 115px;
    z-index: 0;
}

#added-ingredients li {
    background-color: var(--accent-light-color);
    padding: 13px 20px;
    border-radius: var(--primary-border-radius);
    margin-top: 10px;
    color: var(--accent-dark-color);
    border: var(--primary-border);
    display: flex;
    align-items: center;
    justify-content: space-between
}

#added-ingredients li:first-child {
    margin-top: 20px;
}

#added-ingredients {
    list-style: none;
    padding: 0;
    width: 80%;
}


.find-recepies-button {
    position: fixed;
    bottom: 100px;

}

footer {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    width: 100%;
    background-color: var(--tertiary-color);
    position: fixed;
    left: 50%;
    transform: translate(-50%);
    bottom: 10px;
    width: 80%;
    border-radius: 100px;
    box-shadow: 4px 4px 0px 0px var(--accent-color);
    border: var(--primary-border);
    z-index: 100;

}



nav {
    display: flex;
    justify-content: space-between;
    width: 95%;
    align-items: center;
    text-decoration: none;
}

nav a {
    color: var(--secondary-color);
    display: flex;
    align-items: center;
    flex-direction: column;
    text-decoration: none;
    font-size: 19px;
    transition: all 0.2s;
    width: 50px;
    /* ← gleiche Größe für alle */
    height: 50px;
    border-radius: 100%;
    justify-content: center;
    background-color: transparent;
    /* ← wichtig für die Transition */
}

.nav-active {
    background-color: var(--accent-color);
    font-weight: 600;
    animation: Pop 0.3s ease forwards;
    color: var(--tertiary-color);
}


@keyframes Pop {
    0% {
        transform: scale(1);
    }

    60% {
        transform: scale(0.8);
    }

    100% {
        transform: scale(1);
    }
}

#autocomplete-dropdown {
    position: absolute;
    top: calc(100% + 30px);
    left: 10%;
    right: 10%;
    background-color: var(--tertiary-color);
    border: var(--primary-border);
    border-radius: var(--primary-border-radius);
    overflow: hidden;
    z-index: 99999;
    display: none;
}

.autocomplete-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    font-size: 14px;
    color: var(--secondary-color);
    border-bottom: solid 0.5px rgba(85, 162, 55, 0.2);
    cursor: pointer;
    transition: background-color 0.15s;
}

.autocomplete-item:last-child {
    border-bottom: none;
}

.autocomplete-item.pop-animate {
    background-color: var(--accent-light-color);
}

.autocomplete-item mark {
    background: transparent;
    color: var(--accent-color);
    font-weight: 700;
}

.autocomplete-item .item-add-icon {
    color: var(--accent-color);
    font-size: 13px;
    opacity: 0.7;
}



.search-ingredients i {
    color: var(--secondary-color);
}


.find-recepies-button {
    position: fixed;
    bottom: 100px;
    transition: opacity 0s ease 0.1s;
}

body:has(#inputSearchIngredients:focus) .find-recepies-button {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0s;
}

body:has(#inputSearchIngredients:focus) footer,
body:has(#searchRecipesInput:focus) footer,
body:has(#searchCardInput:focus) footer {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0s;
}

footer {
    transition: opacity 0s ease 0.1s;
}

.offline-page-main {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100vh;
}

.offline-page {
    padding: 20px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.offline-page button {
    padding: 10px 30px !important;
}

.offline-page h1 {
    position: static !important;
}

.offline-page h2 {
    font-weight: 500;
    width: 90%;
    margin-top: 20px;
    margin-bottom: 10px;
}

.offline-icon {
    width: 30%;
    margin-bottom: 10px;
}

.buttons-global-overlay {
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-top: 0px !important;
}

.global-overlay {
    z-index: 1000;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    justify-content: center;
    align-items: center;
    display: none;
}

#globalOverlayTitle {
    margin-bottom: 10px;
}


/* Die eigentliche Dialog-Box darin */
.global-overlay-box {
    background-color: var(--tertiary-color);
    width: 70%;
    padding: 20px;
    border-radius: 20px;
    border: var(--primary-border);
    text-align: center;
    display: none;

}


.search-recipes-container {
    display: flex;
    align-items: center;
    height: 30px;
    gap: 10px;
    flex-direction: row;
}


.search-recipes-container.expanded~* #buttonFilter,
.search-recipes-container.expanded+.container-toggle-recepies #buttonFilter {
    opacity: 0;
    pointer-events: none;
}

/* NEU HINZUFÜGEN: margin-top von button-filter im top-bar aufheben */
.top-bar .button-filter {
    margin-top: 0;
}


/* ERSETZEN: .search-recipe-button */
.search-recipe-button {
    order: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0 !important;
    width: 30px !important;
    height: 30px !important;
    box-sizing: border-box;
    flex-shrink: 0;
    padding: 10px 25px !important;

}

.search-recipes-container input {
    order: 1;
    width: 0;
    min-width: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
    background-color: var(--tertiary-color);
    height: 30px;
    box-sizing: border-box;
    border-radius: var(--primary-border-radius);
    border: var(--primary-border);
    border-color: transparent;
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.25s ease,
        padding 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.35s ease;
}

.search-recipes-container.expanded button {
    background-color: var(--accent-color);
    color: var(--tertiary-color);
    border: none;
    padding: 20px 20px !important;
    margin-top: 20px !important;
}


.search-recipes-container.expanded input {
    width: 55vw;
    padding: 20px 15px;
    border-color: var(--accent-color);
    opacity: 1;
    pointer-events: all;
    margin-top: 20px;
}


/* ERSETZEN: .filter-hidden */
.filter-hidden {
    opacity: 0 !important;
    pointer-events: none !important;
    max-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-width: 0 !important;
    overflow: hidden !important;
}

/* ERSETZEN: #buttonFilter */
#buttonFilter {
    transition: opacity 0.3s ease, transform 0.3s ease,
        max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        padding 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        margin 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    max-width: 200px;
    overflow: hidden;
    white-space: nowrap;
    transform: translateX(0);
    opacity: 1;
}

.top-bar {
    position: fixed;
    top: 130px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0px;
    z-index: 5;
    flex-direction: row-reverse;
    /* Suche rechts, Filter links */
}


.top-bar-favorites.box-overview {
    position: absolute;
    top: 65px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0px;
    z-index: 5;
    flex-direction: row-reverse;
    /* Suche rechts, Filter links */
}

/* ── Card-Ansicht Suchleiste: sitzt am oberen Rand der ersten Karte ── */
.top-bar-favorites.card-overview {
    position: fixed;
    top: 90px;
    display: flex;
    align-items: center;
    z-index: 9;
    right: 7%;
    transform: translateX(-7%);
}

/* ── Kein-Ergebnis-Meldung für Suche (ohne Ladeanimation) ── */
.no-search-results {
    display: none;
    text-align: center;
    margin-top: 40vh;
    color: var(--secondary-color);
    font-size: 15px;
    width: 80%;
    padding: 0 20px;
}

/* In der Card-Ansicht: fest in der Bildschirmmitte */
.no-search-results-card {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: 0;
    z-index: 9;
    width: 80%;
    text-align: center;
}

/* ── Box-Overview Suchleiste: immer expanded ── */
.top-bar-favorites.box-overview .search-recipes-container input {
    width: 55vw;
    padding: 20px 15px;
    border-color: var(--accent-color);
    opacity: 1;
    pointer-events: all;
    margin-top: 20px;
}

.top-bar-favorites.box-overview .search-recipes-container button {
    background-color: var(--accent-color) !important;
    color: var(--tertiary-color) !important;
    border: none !important;
    padding: 20px 20px !important;
    margin-top: 20px !important;
}

/* ── Personen-Stepper ── */
.persons-selector {
    display: flex;
    width: 50%;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    margin-bottom: 5px;
    background-color: var(--accent-light-color);
    border: var(--primary-border);
    border-radius: 20px;
    padding: 5px;
}

.persons-selector button {
    background-color: var(--accent-light-color) !important;
    border: var(--primary-border) !important;
    color: var(--accent-color) !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: static !important;
    flex-shrink: 0;
}

.persons-selector span {
    font-size: 13px;
    font-weight: 500;
    color: var(--accent-color);
}

.container-card-open-more-overlay {
    display: flex;
    flex-direction: column;
    width: 80%;
}



#cardMoreOverlay.open-more {
    transform: translateY(63%);
    /* vorher: 70% */
}


/* ── Card-More Overlay: Drag-Handle oben sichtbar ── */
.drag-handle-card-open-more {
    display: flex;
    position: static;
    transform: none;
    height: 30px;
    top: auto;
    left: auto;
    padding: 8px 0;
}

.card-open-more-download-save {
    display: flex;
    width: 100%;
    justify-content: space-between;

}


.container-card-open-more-overlay button {
    margin-top: 15px !important;
}

.card-open-more-download-save button {
    width: 48%;

}



.main-settings {
    padding: 90px 20px;
}

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--tertiary-color);
    border: var(--primary-border);
    border-radius: var(--primary-border-radius);
    padding: 16px 0px;
    width: 90%;
    margin-bottom: 15px;
}

.settings-label {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: var(--secondary-color);
    margin-bottom: 10px;
}


/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.toggle-switch input {
    display: none;
}

.theme-toggle {
    display: flex;
    margin-top: 10px;
    flex-direction: row;
    background-color: var(--accent-light-color);
    border: var(--primary-border);
    border-radius: 100px;
    padding: 4px;
    gap: 2px;
}

.theme-btn {
    width: 20vw !important;
    height: 34px !important;
    border-radius: 100px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    color: var(--secondary-color) !important;
}



.theme-btn.active {
    background-color: var(--accent-color) !important;
    color: white !important;
}


.background-button-back-more {
    top: 15px !important;
    left: 20px !important;
}

.site-indicator-more {
    left: 60px;
}