/* Sport-/Skill-Chips: horizontale Reihe mit Abstand */
.contentModal.registration .mobileShoppingCart .contactData .inputContainer .bookingOfferModalSportGrid,
.contentModal.registration .mobileShoppingCart .contactData .inputContainer .bookingOfferModalSkillGrid{
    position: relative;
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    overflow-x:auto;
    align-items:center;
    align-content:flex-start;
    gap:9px;
    width:100%;
    padding-bottom:15px;
    margin-top:8px;
    -webkit-overflow-scrolling:touch;
}

.contentModal.registration .mobileShoppingCart .contactData .inputContainer .bookingOfferModalSportGrid::-webkit-scrollbar,
.contentModal.registration .mobileShoppingCart .contactData .inputContainer .bookingOfferModalSkillGrid::-webkit-scrollbar{
    display: block;
    height: 6px;
    width: 6px;
}

.contentModal.registration .mobileShoppingCart .contactData .inputContainer .bookingOfferModalSportGrid::-webkit-scrollbar-thumb,
.contentModal.registration .mobileShoppingCart .contactData .inputContainer .bookingOfferModalSkillGrid::-webkit-scrollbar-thumb { /* Foreground */
    background: var(--writeColorParagraph2);
    border-radius: 6px;
}
.contentModal.registration .mobileShoppingCart .contactData .inputContainer .bookingOfferModalSportGrid::-webkit-scrollbar-track,
.contentModal.registration .mobileShoppingCart .contactData .inputContainer .bookingOfferModalSkillGrid::-webkit-scrollbar-track { /* Background */
    background: transparent;
}

/* Chip-Basis: Sport- und Skill-Auswahl */
.contentModal .mobileShoppingCart .contactData .inputContainer .bookingOfferModalSportGrid button.bookingOfferModalChip,
.contentModal .mobileShoppingCart .contactData .inputContainer .bookingOfferModalSkillGrid button.bookingOfferModalChip{
    display:inline-flex;
    flex:0 0 auto;
    width:auto;
    min-width:auto;
    max-width:none;
    height:auto;
    min-height:40px;
    margin-top:0;
    flex-direction:row;
    align-items:center;
    gap:8px;
    padding:4px 12px 4px 4px;
    border:1.4px solid var(--secondaryColor);
    border-radius:999px;
    background:var(--cardColor);
    color:var(--writeColorHeader);
    cursor:pointer;
    text-align:left;
    line-height:1.25;
    font-size:13px;
    font-weight:600;
    box-shadow:none;
    transition:border-color 140ms ease,box-shadow 140ms ease,background-color 140ms ease;
}

.contentModal .mobileShoppingCart .contactData .inputContainer .bookingOfferModalSportGrid button.bookingOfferModalChip:hover,
.contentModal .mobileShoppingCart .contactData .inputContainer .bookingOfferModalSkillGrid button.bookingOfferModalChip:hover{
    border-color:color-mix(in srgb,var(--highlightColor) 45%,var(--secondaryColor));
    background:var(--cardColor);
    color:var(--writeColorHeader);
}

.contentModal .mobileShoppingCart .contactData .inputContainer .bookingOfferModalSportGrid button.bookingOfferModalChip--selected,
.contentModal .mobileShoppingCart .contactData .inputContainer .bookingOfferModalSkillGrid button.bookingOfferModalChip--selected{
    border-color:var(--highlightColor);
    background:color-mix(in srgb,var(--highlightColor) 8%,var(--cardColor));
    color:var(--writeColorHeader);
    box-shadow:0 0 0 1px color-mix(in srgb,var(--highlightColor) 25%,transparent);
}

.contentModal .mobileShoppingCart .contactData .inputContainer .bookingOfferModalSportGrid button.bookingOfferModalChip--selected:hover,
.contentModal .mobileShoppingCart .contactData .inputContainer .bookingOfferModalSkillGrid button.bookingOfferModalChip--selected:hover{
    background:color-mix(in srgb,var(--highlightColor) 8%,var(--cardColor));
    color:var(--writeColorHeader);
}

.contentModal .mobileShoppingCart .contactData .inputContainer .bookingOfferModalSportGrid .bookingOfferModalChipMedia,
.contentModal .mobileShoppingCart .contactData .inputContainer .bookingOfferModalSkillGrid .bookingOfferModalChipMedia,
.contentModal.registration .bookingOfferModalChipMedia{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    width:34px;
    height:34px;
    min-width:34px;
    min-height:34px;
    max-width:34px;
    max-height:34px;
    border-radius:50%;
    overflow:hidden;
    background:color-mix(in srgb,var(--highlightColor) 8%,var(--cardColor));
}

.contentModal.registration .bookingOfferModalChipMedia--fallback{
    font-size:14px;
    color:var(--highlightColor);
    opacity:.75;
}

.contentModal .mobileShoppingCart .contactData .inputContainer .bookingOfferModalSportGrid .bookingOfferModalChipImg,
.contentModal .mobileShoppingCart .contactData .inputContainer .bookingOfferModalSkillGrid .bookingOfferModalChipImg,
.contentModal.registration .bookingOfferModalChipImg{
    display:block;
    width:100%;
    height:100%;
    max-width:34px;
    max-height:34px;
    object-fit:cover;
}

.contentModal .mobileShoppingCart .contactData .inputContainer .bookingOfferModalSportGrid .bookingOfferModalChipLabel,
.contentModal .mobileShoppingCart .contactData .inputContainer .bookingOfferModalSkillGrid .bookingOfferModalChipLabel,
.contentModal.registration .bookingOfferModalChipLabel{
    flex:0 0 auto;
    font-size:13px;
    font-weight:600;
    line-height:1.25;
    white-space:nowrap;
}

/* Mitglieder-Picker: eigenes Grid-Layout, Chip-Optik wie Sport/Skill */
.contentModal.registration .mobileShoppingCart .contactData .inputContainer .registrationPersonPickerGrid{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:9px;
    width:100%;
    margin-top:8px;
    margin-bottom:4px;
}

.contentModal.registration .mobileShoppingCart .contactData .inputContainer .registrationPersonPickerGrid button.registrationPersonPickerChip{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    gap:8px;
    width:100%;
    min-width:0;
    max-width:none;
    height:auto;
    min-height:40px;
    margin-top:0;
    padding:4px 12px 4px 4px;
    border:1.4px solid var(--secondaryColor);
    border-radius:999px;
    background:var(--cardColor);
    color:var(--writeColorHeader);
    cursor:pointer;
    text-align:left;
    line-height:1.25;
    font-size:13px;
    font-weight:600;
    box-shadow:none;
    transition:border-color 140ms ease,box-shadow 140ms ease,background-color 140ms ease;
}

.contentModal.registration .mobileShoppingCart .contactData .inputContainer .registrationPersonPickerGrid button.registrationPersonPickerChip:hover:not(:disabled){
    border-color:color-mix(in srgb,var(--highlightColor) 45%,var(--secondaryColor));
    background:var(--cardColor);
    color:var(--writeColorHeader);
}

.contentModal.registration .mobileShoppingCart .contactData .inputContainer .registrationPersonPickerGrid button.registrationPersonPickerChip--selected,
.contentModal.registration .mobileShoppingCart .contactData .inputContainer .registrationPersonPickerGrid button.registrationPersonPickerChip--selected:disabled{
    border-color:var(--highlightColor);
    background:color-mix(in srgb,var(--highlightColor) 8%,var(--cardColor));
    color:var(--writeColorHeader);
    box-shadow:0 0 0 1px color-mix(in srgb,var(--highlightColor) 25%,transparent);
}

.contentModal.registration .mobileShoppingCart .contactData .inputContainer .registrationPersonPickerGrid button.registrationPersonPickerChip:disabled{
    cursor:default;
    opacity:.92;
}

.contentModal.registration .mobileShoppingCart .contactData .inputContainer .registrationPersonPickerGrid .registrationPersonPickerChipMedia{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    width:34px;
    height:34px;
    min-width:34px;
    min-height:34px;
    border-radius:50%;
    overflow:hidden;
    background:color-mix(in srgb,var(--highlightColor) 8%,var(--cardColor));
}

.contentModal.registration .mobileShoppingCart .contactData .inputContainer .registrationPersonPickerGrid .registrationPersonPickerChipMedia--fallback{
    font-size:14px;
    color:var(--highlightColor);
    opacity:.75;
}

.contentModal.registration .mobileShoppingCart .contactData .inputContainer .registrationPersonPickerGrid .registrationPersonPickerChipImg{
    display:block;
    width:100%;
    height:100%;
    max-width:34px;
    max-height:34px;
    object-fit:cover;
}

.contentModal.registration .mobileShoppingCart .contactData .inputContainer .registrationPersonPickerGrid .registrationPersonPickerChipLabel{
    flex:1 1 auto;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:13px;
    font-weight:600;
    line-height:1.25;
}

@media (min-width: 1024px) {
    .contentModal.registration .mobileShoppingCart .contactData .inputContainer .registrationPersonPickerGrid{
        grid-template-columns:repeat(3, minmax(0, 1fr));
    }
}

.bookingOfferExternalSlotBtn{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
    width:100%;
    min-height:40px;
    padding:8px 12px;
    border-radius:9px;
    border:1.4px solid var(--secondaryColor);
    background:var(--cardColor);
    color:var(--writeColorParagraph);
    cursor:pointer;
    text-align:left;
    transition:border-color 140ms ease,background-color 140ms ease;
}
.bookingOfferExternalSlotBtn:hover:not(:disabled){
    border-color:var(--highlightColor);
}
.bookingOfferExternalSlotBtn--selected{
    border-color:var(--highlightColor);
    background:color-mix(in srgb,var(--highlightColor) 12%,var(--cardColor));
    color:var(--writeColorHeader);
}
.bookingOfferExternalSlotLabel{
    font-size:14px;
    font-weight:600;
}
.bookingOfferExternalSlotTime{
    font-size:12px;
    opacity:.85;
}
.hutBookingCalBookBtn--disabled{
    opacity:.45;
    cursor:not-allowed;
}
.bookingRegBookedBlock{margin-top:11px}
.bookingRegBookedList{margin:6px 0 0;padding:0;list-style:none}
.bookingRegBookedItem{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    padding:7px 0;
    border-bottom:1px solid #e5e7eb;
    font-size:13px;
}
.bookingRegBookedItem:last-child{border-bottom:none}
.bookingRegBookedItemLabel{flex:1;min-width:0}
.bookingRegBookedItemPrice{font-weight:700;white-space:nowrap}
.bookingRegBookedSubtotal{margin:8px 0 0;font-size:13px;text-align:right}
.bookingRegBookedHint{margin:8px 0 0;font-size:13px}
.bookingOfferPrizePerSlotHint{font-size:12px;font-weight:400;opacity:.85}
.bookingOfferCategoryHint{margin:2px 0 0;font-size:12px}
.contentModal .registrationSummaryCard--bookingOffer{
    flex-direction:column;
    align-items:stretch;
}
.contentModal .registrationSummaryCard--bookingOffer .registrationSummaryImageWrap{
    width:100%;
    max-width:100%;
    flex:0 0 auto;
}
.contentModal .registrationSummaryCard--bookingOffer .registrationSummaryImageWrap img{
    width:100%;
    max-height:180px;
    object-fit:cover;
    border-radius:10px 10px 0 0;
}
.contentModal .registrationSummaryCard--bookingOffer .shoppingTextContainer{
    width:100%;
    padding-top:10px;
}
.bookingOfferPriceOverview{
    display:flex;
    flex-direction:column;
    gap:8px;
    width:100%;
}
.bookingOfferPriceHero{
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    gap:6px 8px;
    margin: 0 0 10px 5px;
}
.bookingOfferPriceHeroAmount{
    font-size:clamp(18px,4.5vw,22px);
    font-weight:800;
    color:var(--highlightColor,#2563eb);
}
.bookingOfferPriceHeroHint{
    font-size:12px;
    font-weight:600;
    opacity:.85;
}
.bookingOfferPriceGroup{
    margin:0;
    border:1px solid color-mix(in srgb,var(--registrationBorder,#e5e7eb) 90%,transparent);
    border-radius:9px;
    padding:6px 8px;
    background:color-mix(in srgb,var(--cardColor,#fff) 92%,var(--secondaryColor,#f3f4f6));
}
.bookingOfferPriceGroup summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    cursor:pointer;
    font-weight:700;
    font-size:13px;
    list-style:none;
}
.bookingOfferPriceGroup summary::-webkit-details-marker{display:none}
.bookingOfferPriceGroupLabel{flex:1 1 auto;min-width:0}
.bookingOfferPriceGroupIcon{
    flex:0 0 auto;
    font-size:12px;
    color:var(--writeColorParagraph);
    transition:transform 180ms ease;
}
.bookingOfferPriceGroup[open] .bookingOfferPriceGroupIcon{
    transform:rotate(180deg);
}
.bookingOfferPriceCategory{
    margin:8px 0 4px;
    font-size:12px;
    font-weight:700;
}
.bookingOfferPriceRowList{
    margin:0;
    padding:0;
    list-style:none;
}
.bookingOfferPriceRow{
    display:flex;
    justify-content:space-between;
    gap:8px;
    padding:4px 0;
    font-size:12px;
    border-bottom:1px solid color-mix(in srgb,var(--registrationBorder,#e5e7eb) 70%,transparent);
}
.bookingOfferPriceRow:last-child{border-bottom:none}
.bookingOfferPriceRowLabel{flex:1;min-width:0}
.bookingOfferPriceRowAmount{font-weight:700;white-space:nowrap}
.bookingOfferPriceExtra{
    margin:0;
    font-size:12px;
    opacity:.88;
}

.regLegalTextClamp__body{
    margin:0;
    line-height:1.45;
}
.regLegalTextClamp__more{
    color:var(--highlightColor,#2563eb);
    font-weight:600;
    cursor:pointer;
    white-space:nowrap;
    pointer-events:auto;
}
.contentModal .mobileShoppingCart .contactData .regLegalTextClamp__more{
    color:var(--highlightColor,#2563eb);
    cursor:pointer;
}
.regLegalTextClamp__more:hover{
    color:var(--highlightHoverColor,var(--highlightColor,#2563eb));
}

.stornoContainer{
    display:block;
}
.stornoRulesList{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin:9px 0 0;
}
.stornoRulesNote{
    margin:9px 0 0;
    font-size:14px;
    line-height:1.45;
    opacity:.88;
}
.stornoRulesItem{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:10px 12px;
    border:1px solid color-mix(in srgb,var(--registrationBorder,#e5e7eb) 90%,transparent);
    border-radius:9px;
    background:color-mix(in srgb,var(--cardColor,#fff) 92%,var(--secondaryColor,#f3f4f6));
}
.stornoRulesItem--active{
    --_btn-accent:var(--primaryColor,var(--highlightColor,#2563eb));
    border-color:color-mix(in srgb,var(--_btn-accent) 64%,var(--registrationBorder,#e5e7eb));
    background:color-mix(in srgb,var(--_btn-accent) 6%,var(--cardColor,#fff));
    box-shadow:
        0 1px 1.8px rgba(20,30,55,.05),
        0 10px 16px rgba(20,30,55,.08),
        inset 0 1px 0 color-mix(in srgb,#fff 46%,transparent);
}
.stornoRulesItem--active .stornoRulesDate,
.stornoRulesItem--active .stornoRulesFee{
    color:var(--_btn-accent);
}
.stornoRulesDate{
    flex:1 1 auto;
    min-width:0;
    font-size:14px;
    font-weight:500;
    color:var(--writeColorParagraph);
}
.stornoRulesDate,
.stornoRulesFee{
    cursor:default;
    pointer-events:none;
}
.stornoRulesFee{
    flex:1 1 auto;
    min-width:0;
    font-size:14px;
    font-weight:700;
    color:var(--writeColorHeader,var(--writeColorParagraph));
    text-align:right;
}