/* RezeptPlaner Frontend – strukturierte Zutaten und Schrittzuordnung */
.rp-recipe-ingredients__heading {
    margin: 1.2em 0 .45em;
    font-size: 1.05em;
}

.rp-recipe-ingredients__list {
    margin-top: .35em;
}

.rp-recipe-step-ingredients {
    display: flex;
    flex-wrap: wrap;
    gap: .4em;
    margin: 0 0 .65em;
}

.rp-recipe-step-ingredient {
    display: inline-block;
    padding: .28em .65em;
    border: 1px solid rgba(50, 120, 70, .28);
    border-radius: 999px;
    background: rgba(60, 150, 80, .08);
    font-size: .88em;
    line-height: 1.3;
}

/* v0.7.0 – Unterrezepte und Ausgabemengen */
.rp-recipe-subrecipe-item {
    margin-top: .45em;
}

.rp-subrecipe-details {
    margin: .55em 0 1em;
    padding: .15em .8em;
    border: 1px solid rgba(80, 90, 100, .22);
    border-radius: 6px;
    background: rgba(245, 247, 249, .7);
}

.rp-subrecipe-details > summary {
    padding: .65em 0;
    font-weight: 600;
    cursor: pointer;
}

.rp-subrecipe-details__body {
    padding: 0 0 .8em;
}

.rp-subrecipe-details__body h5 {
    margin: .9em 0 .35em;
}

.rp-subrecipe-warning {
    color: #9a3412;
    font-size: .9em;
}


/* v0.7.3 – Umschaltung Originaleinheiten / Gramm */
.rp-recipe-quantity-toggle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4em;
    margin: .45em 0 .8em;
}

.rp-recipe-quantity-toggle__label {
    margin-right: .15em;
    font-size: .9em;
    color: #5d6670;
}

.rp-recipe-quantity-toggle__button {
    appearance: none;
    border: 1px solid rgba(50, 80, 100, .28);
    border-radius: 999px;
    background: #fff;
    color: inherit;
    padding: .34em .78em;
    font: inherit;
    font-size: .86em;
    line-height: 1.2;
    cursor: pointer;
}

.rp-recipe-quantity-toggle__button:hover,
.rp-recipe-quantity-toggle__button:focus-visible {
    border-color: rgba(40, 100, 130, .65);
}

.rp-recipe-quantity-toggle__button.is-active {
    border-color: rgba(35, 105, 135, .7);
    background: rgba(35, 105, 135, .09);
    font-weight: 600;
}

/* v0.7.6 – temporäre Portions-/Kalorienskalierung */
.rp-recipe-scaler {
    margin: .55em 0 1em;
    padding: .85em 1em;
    border: 1px solid rgba(50, 80, 100, .22);
    border-radius: 8px;
    background: rgba(245, 247, 249, .72);
}

.rp-recipe-scaler__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .25em 1em;
    margin-bottom: .65em;
}

.rp-recipe-scaler__header span {
    color: #68727d;
    font-size: .82em;
}

.rp-recipe-scaler__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .55em .8em;
}

.rp-recipe-scaler__modes {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid rgba(50, 80, 100, .3);
    border-radius: 999px;
    background: #fff;
}

.rp-recipe-scaler__mode,
.rp-recipe-scaler__reset {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    padding: .42em .8em;
    font: inherit;
    font-size: .86em;
    line-height: 1.2;
    cursor: pointer;
}

.rp-recipe-scaler__mode + .rp-recipe-scaler__mode {
    border-left: 1px solid rgba(50, 80, 100, .22);
}

.rp-recipe-scaler__mode.is-active {
    background: rgba(35, 105, 135, .11);
    font-weight: 600;
}

.rp-recipe-scaler__mode:disabled {
    cursor: not-allowed;
    opacity: .45;
}

.rp-recipe-scaler__input-wrap {
    display: grid;
    grid-template-columns: minmax(7em, 10em) auto;
    align-items: center;
    gap: .15em .45em;
}

.rp-recipe-scaler__input-label {
    grid-column: 1 / -1;
    color: #5d6670;
    font-size: .8em;
}

.rp-recipe-scaler__input-wrap input {
    width: 9em;
    max-width: 100%;
    min-height: 2.2em;
    padding: .3em .5em;
    border: 1px solid rgba(50, 80, 100, .35);
    border-radius: 5px;
    background: #fff;
    color: inherit;
    font: inherit;
}

.rp-recipe-scaler__input-wrap input.is-invalid {
    border-color: #b32d2e;
    box-shadow: 0 0 0 1px #b32d2e;
}

.rp-recipe-scaler__input-unit {
    color: #5d6670;
    font-size: .88em;
}

.rp-recipe-scaler__reset {
    border: 1px solid rgba(50, 80, 100, .28);
    border-radius: 999px;
    background: #fff;
}

.rp-recipe-scaler__mode:hover:not(:disabled),
.rp-recipe-scaler__mode:focus-visible,
.rp-recipe-scaler__reset:hover,
.rp-recipe-scaler__reset:focus-visible {
    background: rgba(35, 105, 135, .08);
}

.rp-recipe-scaler__status {
    margin: .65em 0 0;
    color: #46515d;
    font-size: .86em;
}

@media (max-width: 600px) {
    .rp-recipe-scaler__controls {
        align-items: stretch;
    }

    .rp-recipe-scaler__input-wrap {
        flex: 1 1 100%;
    }
}