@bigz-app/booking-widget 0.1.5 → 0.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/booking-widget.js +514 -485
  2. package/dist/booking-widget.js.map +1 -1
  3. package/dist/components/BookingForm.d.ts.map +1 -1
  4. package/dist/components/EventInstanceSelection.d.ts.map +1 -1
  5. package/dist/components/EventTypeSelection.d.ts.map +1 -1
  6. package/dist/components/Sidebar.d.ts.map +1 -1
  7. package/dist/index.cjs +515 -486
  8. package/dist/index.cjs.map +1 -1
  9. package/dist/index.esm.js +516 -487
  10. package/dist/index.esm.js.map +1 -1
  11. package/package.json +1 -1
package/dist/booking-widget.js CHANGED
@@ -6208,167 +6208,195 @@
6208
6208
  return text.length > maxLength ? `${text.slice(0, maxLength - 1)}…` : text;
6209
6209
  }
6210
6210
  function EventTypeSelection({ eventTypes, onEventTypeSelect }) {
6211
- if (eventTypes.length === 0) {
6212
- return (u$1("div", { style: {
6213
- minHeight: "400px",
6214
- background: `linear-gradient(135deg, var(--bw-background-color), var(--bw-surface-color))`,
6215
- color: "var(--bw-text-color)",
6216
- borderRadius: "var(--bw-border-radius)",
6217
- display: "flex",
6218
- alignItems: "center",
6219
- justifyContent: "center",
6220
- }, children: u$1("div", { style: { textAlign: "center" }, children: [u$1("div", { style: {
6221
- margin: "0 auto 16px",
6222
- width: "48px",
6223
- height: "48px",
6224
- color: "var(--bw-text-muted)",
6225
- fontSize: "48px",
6226
- }, children: u$1(IconTarget, { size: 48 }) }), u$1("h3", { style: {
6227
- marginBottom: "8px",
6228
- fontWeight: "600",
6229
- fontSize: "var(--bw-font-size-large)",
6230
- color: "var(--bw-text-muted)",
6231
- fontFamily: "var(--bw-font-family)",
6232
- }, children: "Keine Veranstaltungen verf\u00FCgbar" }), u$1("p", { style: {
6233
- color: "var(--bw-text-muted)",
6234
- fontFamily: "var(--bw-font-family)",
6235
- }, children: "Derzeit sind keine Veranstaltungen verf\u00FCgbar." })] }) }));
6236
- }
6237
- return (u$1("div", { style: { padding: "24px" }, children: u$1("div", { style: {
6238
- display: "flex",
6239
- flexWrap: "wrap",
6240
- justifyContent: "center",
6241
- gap: "32px",
6242
- }, children: eventTypes.map((eventType) => {
6243
- const isAvailable = eventType.hasAvailableInstances;
6244
- return (u$1("div", { style: {
6245
- position: "relative",
6246
- backgroundColor: "var(--bw-surface-color)",
6247
- border: `1px solid var(--bw-border-color)`,
6248
- borderRadius: "var(--bw-border-radius)",
6249
- overflow: "hidden",
6250
- transition: "all 0.3s ease",
6251
- cursor: isAvailable ? "pointer" : "not-allowed",
6252
- opacity: isAvailable ? 1 : 0.6,
6253
- boxShadow: "var(--bw-shadow-md)",
6254
- fontFamily: "var(--bw-font-family)",
6255
- maxWidth: "500px",
6256
- flex: "1 1 350px",
6211
+ // Responsive styles via a <style> tag
6212
+ // These styles will override inline styles for mobile
6213
+ return (u$1(k$2, { children: [u$1("style", { children: `
6214
+ @media (max-width: 600px) {
6215
+ .bw-event-type-list {
6216
+ padding: 8px !important;
6217
+ gap: 12px !important;
6218
+ }
6219
+ .bw-event-type-card {
6220
+ max-width: 100% !important;
6221
+ flex: 1 1 100% !important;
6222
+ padding: 0 !important;
6223
+ }
6224
+ .bw-event-type-img {
6225
+ height: 160px !important;
6226
+ }
6227
+ .bw-event-type-title {
6228
+ font-size: 1.1rem !important;
6229
+ }
6230
+ .bw-event-type-desc {
6231
+ font-size: 0.8rem !important;
6232
+ min-height: 100px !important;
6233
+ max-height: 100px !important;
6234
+ }
6235
+ .bw-event-type-price {
6236
+ font-size: 1.3rem !important;
6237
+ }
6238
+ .bw-event-type-content {
6239
+ padding: 12px !important;
6240
+ }
6241
+ }
6242
+ ` }), eventTypes.length === 0 ? (u$1("div", { style: {
6243
+ minHeight: "400px",
6244
+ background: `linear-gradient(135deg, var(--bw-background-color), var(--bw-surface-color))`,
6245
+ color: "var(--bw-text-color)",
6246
+ borderRadius: "var(--bw-border-radius)",
6247
+ display: "flex",
6248
+ alignItems: "center",
6249
+ justifyContent: "center",
6250
+ }, children: u$1("div", { style: { textAlign: "center" }, children: [u$1("div", { style: {
6251
+ margin: "0 auto 16px",
6252
+ width: "48px",
6253
+ height: "48px",
6254
+ color: "var(--bw-text-muted)",
6255
+ fontSize: "48px",
6256
+ }, children: u$1(IconTarget, { size: 48 }) }), u$1("h3", { style: {
6257
+ marginBottom: "8px",
6258
+ fontWeight: "600",
6259
+ fontSize: "var(--bw-font-size-large)",
6260
+ color: "var(--bw-text-muted)",
6261
+ fontFamily: "var(--bw-font-family)",
6262
+ }, children: "Keine Veranstaltungen verf\u00FCgbar" }), u$1("p", { style: {
6263
+ color: "var(--bw-text-muted)",
6264
+ fontFamily: "var(--bw-font-family)",
6265
+ }, children: "Derzeit sind keine Veranstaltungen verf\u00FCgbar." })] }) })) : (u$1("div", { className: "bw-event-type-list", style: { padding: "24px" }, children: u$1("div", { style: {
6257
6266
  display: "flex",
6258
- flexDirection: "column",
6259
- }, onClick: () => isAvailable && onEventTypeSelect(eventType), onMouseEnter: (e) => {
6260
- if (isAvailable) {
6261
- e.currentTarget.style.transform = "translateY(-2px)";
6262
- e.currentTarget.style.boxShadow = "var(--bw-shadow-lg)";
6263
- }
6264
- }, onMouseLeave: (e) => {
6265
- if (isAvailable) {
6266
- e.currentTarget.style.transform = "translateY(0)";
6267
- e.currentTarget.style.boxShadow = "var(--bw-shadow-md)";
6268
- }
6269
- }, children: [u$1("div", { style: { position: "absolute", top: "16px", left: "16px", zIndex: 10 }, children: u$1("div", { style: {
6270
- padding: "4px 8px",
6271
- borderRadius: "var(--bw-border-radius-small)",
6272
- fontSize: "12px",
6273
- fontWeight: "600",
6274
- backgroundColor: isAvailable
6275
- ? "var(--bw-success-color)"
6276
- : "var(--bw-error-color)",
6277
- color: "white",
6278
- fontFamily: "var(--bw-font-family)",
6279
- }, children: isAvailable ? "freie Plätze" : "Ausgebucht" }) }), u$1("div", { style: { position: "relative", width: "100%", height: "300px" }, children: eventType.images.length > 0 ? (u$1(k$2, { children: u$1("img", { src: eventType.images[0], alt: eventType.name, style: {
6280
- width: "100%",
6281
- height: "100%",
6282
- objectFit: "cover",
6283
- } }) })) : (u$1("div", { style: {
6284
- width: "100%",
6285
- height: "100%",
6286
- background: `linear-gradient(135deg, var(--bw-highlight-color), var(--bw-highlight-muted))`,
6287
- display: "flex",
6288
- alignItems: "center",
6289
- justifyContent: "center",
6290
- }, children: u$1("div", { style: {
6291
- fontSize: "64px",
6292
- color: "rgba(255, 255, 255, 0.8)",
6293
- }, children: u$1(IconTarget, { size: 64 }) }) })) }), u$1("div", { style: { padding: "24px" }, children: [u$1("div", { style: {
6294
- fontSize: "14px",
6295
- fontWeight: "600",
6296
- color: "var(--bw-highlight-color)",
6297
- marginBottom: "8px",
6298
- fontFamily: "var(--bw-font-family)",
6299
- }, children: eventType.category.name }), u$1("h2", { style: {
6300
- fontSize: "24px",
6301
- fontWeight: "700",
6302
- color: "var(--bw-text-color)",
6303
- marginBottom: "12px",
6304
- lineHeight: "1.3",
6305
- fontFamily: "var(--bw-font-family)",
6306
- margin: "0 0 12px 0",
6307
- }, children: eventType.name }), u$1("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [u$1(IconClock, { size: 16, color: "var(--bw-text-color)" }), u$1("span", { style: {
6308
- fontFamily: "var(--bw-font-family)",
6267
+ flexWrap: "wrap",
6268
+ justifyContent: "center",
6269
+ gap: "32px",
6270
+ }, children: eventTypes.map((eventType) => {
6271
+ const isAvailable = eventType.hasAvailableInstances;
6272
+ return (u$1("div", { className: "bw-event-type-card", style: {
6273
+ position: "relative",
6274
+ backgroundColor: "var(--bw-surface-color)",
6275
+ border: `1px solid var(--bw-border-color)`,
6276
+ borderRadius: "var(--bw-border-radius)",
6277
+ overflow: "hidden",
6278
+ transition: "all 0.3s ease",
6279
+ cursor: isAvailable ? "pointer" : "not-allowed",
6280
+ opacity: isAvailable ? 1 : 0.6,
6281
+ boxShadow: "var(--bw-shadow-md)",
6282
+ fontFamily: "var(--bw-font-family)",
6283
+ maxWidth: "500px",
6284
+ flex: "1 1 350px",
6285
+ display: "flex",
6286
+ flexDirection: "column",
6287
+ }, onClick: () => isAvailable && onEventTypeSelect(eventType), onMouseEnter: (e) => {
6288
+ if (isAvailable) {
6289
+ e.currentTarget.style.transform = "translateY(-2px)";
6290
+ e.currentTarget.style.boxShadow = "var(--bw-shadow-lg)";
6291
+ }
6292
+ }, onMouseLeave: (e) => {
6293
+ if (isAvailable) {
6294
+ e.currentTarget.style.transform = "translateY(0)";
6295
+ e.currentTarget.style.boxShadow = "var(--bw-shadow-md)";
6296
+ }
6297
+ }, children: [u$1("div", { style: { position: "absolute", top: "16px", left: "16px", zIndex: 10 }, children: u$1("div", { style: {
6298
+ padding: "4px 8px",
6299
+ borderRadius: "var(--bw-border-radius-small)",
6300
+ fontSize: "12px",
6301
+ fontWeight: "600",
6302
+ backgroundColor: isAvailable
6303
+ ? "var(--bw-success-color)"
6304
+ : "var(--bw-error-color)",
6305
+ color: "white",
6306
+ fontFamily: "var(--bw-font-family)",
6307
+ }, children: isAvailable ? "freie Plätze" : "Ausgebucht" }) }), u$1("div", { className: "bw-event-type-img", style: { position: "relative", width: "100%", height: "300px" }, children: eventType.images.length > 0 ? (u$1(k$2, { children: u$1("img", { src: eventType.images[0], alt: eventType.name, style: {
6308
+ width: "100%",
6309
+ height: "100%",
6310
+ objectFit: "cover",
6311
+ } }) })) : (u$1("div", { style: {
6312
+ width: "100%",
6313
+ height: "100%",
6314
+ background: `linear-gradient(135deg, var(--bw-highlight-color), var(--bw-highlight-muted))`,
6315
+ display: "flex",
6316
+ alignItems: "center",
6317
+ justifyContent: "center",
6318
+ }, children: u$1("div", { style: {
6319
+ fontSize: "64px",
6320
+ color: "rgba(255, 255, 255, 0.8)",
6321
+ }, children: u$1(IconTarget, { size: 64 }) }) })) }), u$1("div", { className: "bw-event-type-content", style: { padding: "24px" }, children: [u$1("div", { style: {
6309
6322
  fontSize: "14px",
6310
- color: "var(--bw-text-muted)",
6311
- }, children: [eventType.durationDays, " Tag", eventType.durationDays > 1 ? "e" : ""] })] }), u$1("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [u$1(IconCalendar, { size: 16, color: "var(--bw-text-color)" }), u$1("span", { style: {
6323
+ fontWeight: "600",
6324
+ color: "var(--bw-highlight-color)",
6325
+ marginBottom: "8px",
6312
6326
  fontFamily: "var(--bw-font-family)",
6313
- fontSize: "14px",
6327
+ }, children: eventType.category.name }), u$1("h2", { className: "bw-event-type-title", style: {
6328
+ fontSize: "clamp(1.1rem, 2.5vw, 24px)",
6329
+ fontWeight: "700",
6330
+ color: "var(--bw-text-color)",
6331
+ marginBottom: "12px",
6332
+ lineHeight: "1.3",
6333
+ fontFamily: "var(--bw-font-family)",
6334
+ margin: "0 0 12px 0",
6335
+ }, children: eventType.name }), u$1("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [u$1(IconClock, { size: 16, color: "var(--bw-text-color)" }), u$1("span", { style: {
6336
+ fontFamily: "var(--bw-font-family)",
6337
+ fontSize: "14px",
6338
+ color: "var(--bw-text-muted)",
6339
+ }, children: [eventType.durationDays, " Tag", eventType.durationDays > 1 ? "e" : ""] })] }), u$1("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [u$1(IconCalendar, { size: 16, color: "var(--bw-text-color)" }), u$1("span", { style: {
6340
+ fontFamily: "var(--bw-font-family)",
6341
+ fontSize: "14px",
6342
+ color: "var(--bw-text-muted)",
6343
+ }, children: eventType.nextAvailableDate
6344
+ ? `Freie Plätze ab ${formatDate(eventType.nextAvailableDate)}`
6345
+ : "Keine Termine frei" })] }), u$1("p", { className: "bw-event-type-desc", style: {
6314
6346
  color: "var(--bw-text-muted)",
6315
- }, children: eventType.nextAvailableDate
6316
- ? `Freie Plätze ab ${formatDate(eventType.nextAvailableDate)}`
6317
- : "Keine Termine frei" })] }), u$1("p", { style: {
6318
- color: "var(--bw-text-muted)",
6319
- fontSize: "16px",
6320
- lineHeight: "1.6",
6321
- fontFamily: "var(--bw-font-family)",
6322
- margin: "10px 0 10px 0",
6323
- display: "-webkit-box",
6324
- WebkitLineClamp: 5,
6325
- WebkitBoxOrient: "vertical",
6326
- overflow: "hidden",
6327
- textOverflow: "ellipsis",
6328
- minHeight: "128px",
6329
- maxHeight: "128px",
6330
- }, children: eventType.description ? truncateText(eventType.description, 300) : " " }), u$1("div", { style: {
6331
- display: "flex",
6332
- justifyContent: "space-between",
6333
- alignItems: "center",
6334
- marginTop: "20px",
6335
- }, children: [u$1("div", { children: u$1("div", { style: {
6336
- fontSize: "32px",
6337
- fontWeight: "700",
6338
- color: "var(--bw-text-color)",
6339
- fontFamily: "var(--bw-font-family)",
6340
- }, children: formatCurrency(eventType.basePrice) }) }), isAvailable && (u$1("div", { style: {
6341
- backgroundColor: "var(--bw-highlight-color)",
6342
- color: "white",
6343
- padding: "12px 24px",
6344
- borderRadius: "var(--bw-border-radius)",
6345
- fontSize: "16px",
6346
- fontWeight: "600",
6347
+ fontSize: "clamp(0.95rem, 2vw, 16px)",
6348
+ lineHeight: "1.6",
6347
6349
  fontFamily: "var(--bw-font-family)",
6350
+ margin: "10px 0 10px 0",
6351
+ display: "-webkit-box",
6352
+ WebkitLineClamp: 5,
6353
+ WebkitBoxOrient: "vertical",
6354
+ overflow: "hidden",
6355
+ textOverflow: "ellipsis",
6356
+ minHeight: "128px",
6357
+ maxHeight: "128px",
6358
+ }, children: eventType.description ? truncateText(eventType.description, 300) : " " }), u$1("div", { style: {
6348
6359
  display: "flex",
6360
+ justifyContent: "space-between",
6349
6361
  alignItems: "center",
6350
- gap: "8px",
6351
- border: "none",
6352
- cursor: "pointer",
6353
- }, children: [u$1(IconWave, { size: 20, color: "var(--bw-text-color)" }), " Jetzt buchen"] }))] })] }), !isAvailable && (u$1("div", { style: {
6354
- position: "absolute",
6355
- inset: 0,
6356
- backgroundColor: "rgba(0, 0, 0, 0.3)",
6357
- backdropFilter: "blur(2px)",
6358
- display: "flex",
6359
- alignItems: "center",
6360
- justifyContent: "center",
6361
- }, children: u$1("div", { style: {
6362
- backgroundColor: "rgba(255, 255, 255, 0.9)",
6363
- padding: "12px 24px",
6364
- borderRadius: "var(--bw-border-radius)",
6365
- color: "var(--bw-text-color)",
6366
- fontWeight: "600",
6367
- fontSize: "16px",
6368
- fontFamily: "var(--bw-font-family)",
6369
- boxShadow: "var(--bw-shadow-md)",
6370
- }, children: "Ausgebucht" }) }))] }, eventType.id));
6371
- }) }) }));
6362
+ marginTop: "20px",
6363
+ }, children: [u$1("div", { children: u$1("div", { className: "bw-event-type-price", style: {
6364
+ fontSize: "clamp(1.3rem, 4vw, 32px)",
6365
+ fontWeight: "700",
6366
+ color: "var(--bw-text-color)",
6367
+ fontFamily: "var(--bw-font-family)",
6368
+ }, children: formatCurrency(eventType.basePrice) }) }), isAvailable && (u$1("div", { style: {
6369
+ backgroundColor: "var(--bw-highlight-color)",
6370
+ color: "white",
6371
+ padding: "12px 24px",
6372
+ borderRadius: "var(--bw-border-radius)",
6373
+ fontSize: "16px",
6374
+ fontWeight: "600",
6375
+ fontFamily: "var(--bw-font-family)",
6376
+ display: "flex",
6377
+ alignItems: "center",
6378
+ gap: "8px",
6379
+ border: "none",
6380
+ cursor: "pointer",
6381
+ }, children: [u$1(IconWave, { size: 20, color: "var(--bw-text-color)" }), " Jetzt buchen"] }))] })] }), !isAvailable && (u$1("div", { style: {
6382
+ position: "absolute",
6383
+ inset: 0,
6384
+ backgroundColor: "rgba(0, 0, 0, 0.3)",
6385
+ backdropFilter: "blur(2px)",
6386
+ display: "flex",
6387
+ alignItems: "center",
6388
+ justifyContent: "center",
6389
+ }, children: u$1("div", { style: {
6390
+ backgroundColor: "rgba(255, 255, 255, 0.9)",
6391
+ padding: "12px 24px",
6392
+ borderRadius: "var(--bw-border-radius)",
6393
+ color: "var(--bw-text-color)",
6394
+ fontWeight: "600",
6395
+ fontSize: "16px",
6396
+ fontFamily: "var(--bw-font-family)",
6397
+ boxShadow: "var(--bw-shadow-md)",
6398
+ }, children: "Ausgebucht" }) }))] }, eventType.id));
6399
+ }) }) }))] }));
6372
6400
  }
6373
6401
 
6374
6402
  var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -8115,78 +8143,86 @@
8115
8143
  }, [isOpen, onClose]);
8116
8144
  if (!isVisible)
8117
8145
  return null;
8118
- const sidebarContent = (u$1("div", { style: {
8119
- position: "fixed",
8120
- top: 0,
8121
- left: 0,
8122
- right: 0,
8123
- bottom: 0,
8124
- zIndex: 1000,
8125
- fontFamily: "var(--bw-font-family)",
8126
- ...themedStyles, // Apply themed styles
8127
- }, children: [u$1("div", { style: {
8128
- position: "absolute",
8129
- inset: 0,
8130
- backgroundColor: "rgba(0, 0, 0, 0.5)",
8131
- opacity: isAnimating ? 1 : 0,
8132
- transition: "opacity 0.3s ease-in-out",
8133
- }, onClick: onClose }), u$1("div", { style: {
8134
- position: "absolute",
8146
+ const sidebarContent = (u$1(k$2, { children: [u$1("style", { children: `
8147
+ @media (max-width: 600px) {
8148
+ .bw-sidebar-mobile {
8149
+ width: 100vw !important;
8150
+ max-width: 100vw !important;
8151
+ min-width: 0 !important;
8152
+ }
8153
+ }
8154
+ ` }), u$1("div", { style: {
8155
+ position: "fixed",
8135
8156
  top: 0,
8157
+ left: 0,
8136
8158
  right: 0,
8137
8159
  bottom: 0,
8138
- width,
8139
- maxWidth: "90vw",
8140
- backgroundColor: "var(--bw-surface-color)",
8141
- borderLeft: `1px solid var(--bw-border-color)`,
8142
- boxShadow: "var(--bw-shadow-lg)",
8143
- transform: isAnimating ? "translateX(0)" : "translateX(100%)",
8144
- transition: "transform 0.3s ease-in-out",
8145
- display: "flex",
8146
- flexDirection: "column",
8147
- overflow: "hidden",
8160
+ zIndex: 1000,
8161
+ fontFamily: "var(--bw-font-family)",
8162
+ ...themedStyles, // Apply themed styles
8148
8163
  }, children: [u$1("div", { style: {
8149
- padding: "var(--bw-spacing)",
8150
- borderBottom: `1px solid var(--bw-border-color)`,
8164
+ position: "absolute",
8165
+ inset: 0,
8166
+ backgroundColor: "rgba(0, 0, 0, 0.5)",
8167
+ opacity: isAnimating ? 1 : 0,
8168
+ transition: "opacity 0.3s ease-in-out",
8169
+ }, onClick: onClose }), u$1("div", { className: "bw-sidebar-mobile", style: {
8170
+ position: "absolute",
8171
+ top: 0,
8172
+ right: 0,
8173
+ bottom: 0,
8174
+ width,
8175
+ maxWidth: "90vw",
8176
+ backgroundColor: "var(--bw-surface-color)",
8177
+ borderLeft: `1px solid var(--bw-border-color)`,
8178
+ boxShadow: "var(--bw-shadow-lg)",
8179
+ transform: isAnimating ? "translateX(0)" : "translateX(100%)",
8180
+ transition: "transform 0.3s ease-in-out",
8151
8181
  display: "flex",
8152
- alignItems: "center",
8153
- justifyContent: "space-between",
8154
- backgroundColor: "var(--bw-background-color)",
8155
- }, children: [u$1("h2", { style: {
8156
- fontSize: "var(--bw-font-size-large)",
8157
- fontWeight: "600",
8158
- color: "var(--bw-text-color)",
8159
- margin: 0,
8160
- fontFamily: "var(--bw-font-family)",
8161
- }, children: title }), u$1("button", { onClick: onClose, style: {
8162
- width: "32px",
8163
- height: "32px",
8164
- borderRadius: "var(--bw-border-radius-small)",
8165
- backgroundColor: "transparent",
8166
- border: `1px solid var(--bw-border-color)`,
8167
- color: "var(--bw-text-muted)",
8168
- cursor: "pointer",
8182
+ flexDirection: "column",
8183
+ overflow: "hidden",
8184
+ }, children: [u$1("div", { style: {
8185
+ padding: "var(--bw-spacing)",
8186
+ borderBottom: `1px solid var(--bw-border-color)`,
8169
8187
  display: "flex",
8170
8188
  alignItems: "center",
8171
- justifyContent: "center",
8172
- fontSize: "18px",
8173
- transition: "all 0.2s ease",
8174
- fontFamily: "var(--bw-font-family)",
8175
- }, onMouseEnter: (e) => {
8176
- e.currentTarget.style.backgroundColor = "var(--bw-border-color)";
8177
- e.currentTarget.style.color = "var(--bw-text-color)";
8178
- }, onMouseLeave: (e) => {
8179
- e.currentTarget.style.backgroundColor = "transparent";
8180
- e.currentTarget.style.color = "var(--bw-text-muted)";
8181
- }, children: "\u2715" })] }), u$1("div", { style: {
8182
- flex: 1,
8183
- overflow: "auto",
8184
- backgroundColor: "var(--bw-background-color)",
8185
- }, children: children })] })] }));
8189
+ justifyContent: "space-between",
8190
+ backgroundColor: "var(--bw-background-color)",
8191
+ }, children: [u$1("h2", { style: {
8192
+ fontSize: "var(--bw-font-size-large)",
8193
+ fontWeight: "600",
8194
+ color: "var(--bw-text-color)",
8195
+ margin: 0,
8196
+ fontFamily: "var(--bw-font-family)",
8197
+ }, children: title }), u$1("button", { onClick: onClose, style: {
8198
+ width: "32px",
8199
+ height: "32px",
8200
+ borderRadius: "var(--bw-border-radius-small)",
8201
+ backgroundColor: "transparent",
8202
+ border: `1px solid var(--bw-border-color)`,
8203
+ color: "var(--bw-text-muted)",
8204
+ cursor: "pointer",
8205
+ display: "flex",
8206
+ alignItems: "center",
8207
+ justifyContent: "center",
8208
+ fontSize: "18px",
8209
+ transition: "all 0.2s ease",
8210
+ fontFamily: "var(--bw-font-family)",
8211
+ }, onMouseEnter: (e) => {
8212
+ e.currentTarget.style.backgroundColor = "var(--bw-border-color)";
8213
+ e.currentTarget.style.color = "var(--bw-text-color)";
8214
+ }, onMouseLeave: (e) => {
8215
+ e.currentTarget.style.backgroundColor = "transparent";
8216
+ e.currentTarget.style.color = "var(--bw-text-muted)";
8217
+ }, children: "\u2715" })] }), u$1("div", { style: {
8218
+ flex: 1,
8219
+ overflow: "auto",
8220
+ backgroundColor: "var(--bw-background-color)",
8221
+ }, children: children })] })] })] }));
8186
8222
  const portalRoot = typeof window !== "undefined" ? document.getElementById("booking-widget-portal-root") : null;
8187
8223
  return portalRoot ? Rn.createPortal(sidebarContent, portalRoot) : null;
8188
8224
  }
8189
- function Accordion$1({ title, priceInfo, children, isOpen, onToggle }) {
8225
+ function Accordion({ title, priceInfo, children, isOpen, onToggle }) {
8190
8226
  return (u$1("div", { style: {
8191
8227
  backgroundColor: "var(--bw-surface-color)",
8192
8228
  border: `1px solid var(--bw-border-color)`,
@@ -8225,30 +8261,6 @@
8225
8261
  }, children: children }))] }));
8226
8262
  }
8227
8263
 
8228
- // Accordion component for the booking form
8229
- const Accordion = ({ title, children, isOpen, onToggle, }) => (u$1("div", { style: {
8230
- backgroundColor: "var(--bw-surface-color)",
8231
- border: `1px solid var(--bw-border-color)`,
8232
- backdropFilter: "blur(4px)",
8233
- borderRadius: "var(--bw-border-radius)",
8234
- }, children: [u$1("button", { type: "button", style: {
8235
- width: "100%",
8236
- display: "flex",
8237
- justifyContent: "space-between",
8238
- alignItems: "center",
8239
- padding: "var(--bw-spacing)",
8240
- textAlign: "left",
8241
- fontSize: "var(--bw-font-size-large)",
8242
- fontWeight: "600",
8243
- color: "var(--bw-text-color)",
8244
- backgroundColor: "transparent",
8245
- border: "none",
8246
- cursor: "pointer",
8247
- fontFamily: "var(--bw-font-family)",
8248
- }, onClick: onToggle, children: [u$1("span", { children: title }), u$1("span", { style: {
8249
- transform: isOpen ? "rotate(180deg)" : "rotate(0deg)",
8250
- transition: "transform 0.2s ease",
8251
- }, children: "\u25BC" })] }), isOpen && u$1("div", { style: { padding: "var(--bw-spacing)", paddingTop: 0 }, children: children })] }));
8252
8264
  // Form schemas
8253
8265
  const participantSchema = objectType({
8254
8266
  name: stringType().min(1, "Name ist erforderlich"),
@@ -8270,7 +8282,6 @@
8270
8282
  const [discountCode, setDiscountCode] = d(null);
8271
8283
  const [discountLoading, setDiscountLoading] = d(false);
8272
8284
  const [discountError, setDiscountError] = d(null);
8273
- const [openSection, setOpenSection] = d("contact");
8274
8285
  const form = useForm({
8275
8286
  resolver: t(bookingFormSchema),
8276
8287
  defaultValues: {
@@ -8335,13 +8346,6 @@
8335
8346
  }, 500);
8336
8347
  return () => clearTimeout(timer);
8337
8348
  }, [watchedDiscountCode, watchedParticipants, eventDetails, config]);
8338
- // Helper functions
8339
- const addParticipant = () => {
8340
- const currentParticipants = form.getValues("participants");
8341
- if (currentParticipants.length < (eventDetails?.availableSpots || 0)) {
8342
- form.setValue("participants", [...currentParticipants, { name: "", age: undefined }]);
8343
- }
8344
- };
8345
8349
  const removeParticipant = (index) => {
8346
8350
  const currentParticipants = form.getValues("participants");
8347
8351
  if (currentParticipants.length > 1) {
@@ -8425,18 +8429,6 @@
8425
8429
  marginBottom: "8px",
8426
8430
  fontFamily: "var(--bw-font-family)",
8427
8431
  };
8428
- const buttonStyle = {
8429
- color: "var(--bw-highlight-color)",
8430
- fontSize: "var(--bw-font-size)",
8431
- fontWeight: "500",
8432
- padding: "8px 12px",
8433
- borderRadius: "var(--bw-border-radius-small)",
8434
- backgroundColor: "var(--bw-surface-color)",
8435
- border: `1px solid var(--bw-border-color)`,
8436
- cursor: "pointer",
8437
- transition: "all 0.2s ease",
8438
- fontFamily: "var(--bw-font-family)",
8439
- };
8440
8432
  return (u$1(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `Buchung - ${eventDetails.name}`, width: "420px", config: config, children: u$1("div", { className: "booking-widget-container", style: { padding: "var(--bw-spacing)" }, children: [u$1("div", { style: {
8441
8433
  backgroundColor: "var(--bw-surface-color)",
8442
8434
  border: `1px solid var(--bw-border-color)`,
@@ -8485,58 +8477,65 @@
8485
8477
  color: "var(--bw-text-color)",
8486
8478
  fontWeight: "500",
8487
8479
  fontFamily: "var(--bw-font-family)",
8488
- }, children: [eventDetails.durationDays, " Tag", eventDetails.durationDays > 1 ? "e" : ""] })] })] })] }), u$1("div", { style: { display: "flex", flexDirection: "column", gap: "var(--bw-spacing-large)" }, children: [u$1("form", { style: { display: "flex", flexDirection: "column", gap: "var(--bw-spacing-large)" }, children: [u$1(Accordion, { title: "1. Kontaktdaten", isOpen: openSection === "contact", onToggle: () => setOpenSection(openSection === "contact" ? "contact" : "contact"), children: u$1("div", { style: { display: "flex", flexDirection: "column", gap: "var(--bw-spacing)" }, children: [u$1("div", { style: {
8489
- display: "grid",
8490
- gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
8491
- gap: "var(--bw-spacing)",
8492
- }, children: [u$1("div", { children: [u$1("label", { htmlFor: "customerName", style: labelStyle, children: "Name *" }), u$1("input", { id: "customerName", ...form.register("customerName"), type: "text", style: inputStyle, placeholder: "Dein vollst\u00E4ndiger Name", onFocus: (e) => {
8493
- e.target.style.borderColor = "var(--bw-highlight-color)";
8494
- e.target.style.boxShadow = "0 0 0 2px var(--bw-highlight-color)";
8495
- }, onBlur: (e) => {
8496
- e.target.style.borderColor = "var(--bw-border-color)";
8497
- e.target.style.boxShadow = "none";
8498
- } }), customerNameError && (u$1("p", { style: {
8499
- color: "var(--bw-error-color)",
8500
- fontSize: "var(--bw-font-size)",
8501
- marginTop: "4px",
8502
- fontFamily: "var(--bw-font-family)",
8503
- }, children: customerNameError.message }))] }), u$1("div", { children: [u$1("label", { htmlFor: "customerEmail", style: labelStyle, children: "E-Mail *" }), u$1("input", { id: "customerEmail", ...form.register("customerEmail"), type: "email", style: inputStyle, placeholder: "deine@email.de", onFocus: (e) => {
8504
- e.target.style.borderColor = "var(--bw-highlight-color)";
8505
- e.target.style.boxShadow = "0 0 0 2px var(--bw-highlight-color)";
8506
- }, onBlur: (e) => {
8507
- e.target.style.borderColor = "var(--bw-border-color)";
8508
- e.target.style.boxShadow = "none";
8509
- } }), customerEmailError && (u$1("p", { style: {
8510
- color: "var(--bw-error-color)",
8511
- fontSize: "var(--bw-font-size)",
8512
- marginTop: "4px",
8513
- fontFamily: "var(--bw-font-family)",
8514
- }, children: customerEmailError.message }))] })] }), u$1("div", { children: [u$1("label", { htmlFor: "customerPhone", style: labelStyle, children: "Telefon (optional)" }), u$1("input", { id: "customerPhone", ...form.register("customerPhone"), type: "tel", style: inputStyle, placeholder: "+49 123 456789", onFocus: (e) => {
8515
- e.target.style.borderColor = "var(--bw-highlight-color)";
8516
- e.target.style.boxShadow = "0 0 0 2px var(--bw-highlight-color)";
8517
- }, onBlur: (e) => {
8518
- e.target.style.borderColor = "var(--bw-border-color)";
8519
- e.target.style.boxShadow = "none";
8520
- } })] })] }) }), u$1(Accordion, { title: "2. Teilnehmer", isOpen: openSection === "participants", onToggle: () => setOpenSection(openSection === "participants" ? "participants" : "participants"), children: [u$1("div", { style: {
8521
- display: "flex",
8522
- justifyContent: "space-between",
8523
- alignItems: "center",
8524
- marginBottom: "var(--bw-spacing)",
8525
- }, children: [u$1("h2", { style: {
8526
- fontSize: "var(--bw-font-size-large)",
8527
- fontWeight: "600",
8528
- color: "var(--bw-text-color)",
8529
- fontFamily: "var(--bw-font-family)",
8530
- margin: 0,
8531
- }, children: "Teilnehmer" }), watchedParticipants.length < eventDetails.availableSpots && (u$1("button", { type: "button", onClick: addParticipant, style: {
8532
- ...buttonStyle,
8533
- fontSize: "var(--bw-font-size)",
8534
- padding: "4px 12px",
8535
- }, onMouseEnter: (e) => {
8536
- e.currentTarget.style.backgroundColor = "var(--bw-border-color)";
8537
- }, onMouseLeave: (e) => {
8538
- e.currentTarget.style.backgroundColor = "var(--bw-surface-color)";
8539
- }, children: "+ Hinzuf\u00FCgen" }))] }), u$1("div", { style: { display: "flex", flexDirection: "column", gap: "12px" }, children: watchedParticipants.map((participant, index) => (u$1("div", { style: { display: "flex", gap: "12px", alignItems: "end" }, children: [u$1("div", { style: { flex: 1 }, children: [u$1("label", { htmlFor: `participant-name-${index}`, style: labelStyle, children: "Name *" }), u$1("input", { id: `participant-name-${index}`, ...form.register(`participants.${index}.name`), type: "text", style: inputStyle, placeholder: "Teilnehmername", onFocus: (e) => {
8480
+ }, children: [eventDetails.durationDays, " Tag", eventDetails.durationDays > 1 ? "e" : ""] })] })] })] }), u$1("div", { style: { display: "flex", flexDirection: "column", gap: "var(--bw-spacing-large)" }, children: [u$1("form", { style: { display: "flex", flexDirection: "column", gap: "var(--bw-spacing-large)" }, children: [u$1("div", { style: {
8481
+ backgroundColor: "var(--bw-surface-color)",
8482
+ border: `1px solid var(--bw-border-color)`,
8483
+ backdropFilter: "blur(4px)",
8484
+ borderRadius: "var(--bw-border-radius)",
8485
+ padding: "var(--bw-spacing)",
8486
+ marginBottom: "var(--bw-spacing-large)",
8487
+ }, children: [u$1("h2", { style: {
8488
+ fontSize: "var(--bw-font-size-large)",
8489
+ fontWeight: "600",
8490
+ color: "var(--bw-text-color)",
8491
+ marginBottom: "12px",
8492
+ fontFamily: "var(--bw-font-family)",
8493
+ }, children: "1. Kontaktdaten" }), u$1("div", { style: { display: "flex", flexDirection: "column", gap: "var(--bw-spacing)" }, children: [u$1("div", { style: {
8494
+ display: "grid",
8495
+ gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
8496
+ gap: "var(--bw-spacing)",
8497
+ }, children: [u$1("div", { children: [u$1("label", { htmlFor: "customerName", style: labelStyle, children: "Name *" }), u$1("input", { id: "customerName", ...form.register("customerName"), type: "text", style: inputStyle, placeholder: "Dein vollst\u00E4ndiger Name", onFocus: (e) => {
8498
+ e.target.style.borderColor = "var(--bw-highlight-color)";
8499
+ e.target.style.boxShadow = "0 0 0 2px var(--bw-highlight-color)";
8500
+ }, onBlur: (e) => {
8501
+ e.target.style.borderColor = "var(--bw-border-color)";
8502
+ e.target.style.boxShadow = "none";
8503
+ } }), customerNameError && (u$1("p", { style: {
8504
+ color: "var(--bw-error-color)",
8505
+ fontSize: "var(--bw-font-size)",
8506
+ marginTop: "4px",
8507
+ fontFamily: "var(--bw-font-family)",
8508
+ }, children: customerNameError.message }))] }), u$1("div", { children: [u$1("label", { htmlFor: "customerEmail", style: labelStyle, children: "E-Mail *" }), u$1("input", { id: "customerEmail", ...form.register("customerEmail"), type: "email", style: inputStyle, placeholder: "deine@email.de", onFocus: (e) => {
8509
+ e.target.style.borderColor = "var(--bw-highlight-color)";
8510
+ e.target.style.boxShadow = "0 0 0 2px var(--bw-highlight-color)";
8511
+ }, onBlur: (e) => {
8512
+ e.target.style.borderColor = "var(--bw-border-color)";
8513
+ e.target.style.boxShadow = "none";
8514
+ } }), customerEmailError && (u$1("p", { style: {
8515
+ color: "var(--bw-error-color)",
8516
+ fontSize: "var(--bw-font-size)",
8517
+ marginTop: "4px",
8518
+ fontFamily: "var(--bw-font-family)",
8519
+ }, children: customerEmailError.message }))] })] }), u$1("div", { children: [u$1("label", { htmlFor: "customerPhone", style: labelStyle, children: "Telefon (optional)" }), u$1("input", { id: "customerPhone", ...form.register("customerPhone"), type: "tel", style: inputStyle, placeholder: "+49 123 456789", onFocus: (e) => {
8520
+ e.target.style.borderColor = "var(--bw-highlight-color)";
8521
+ e.target.style.boxShadow = "0 0 0 2px var(--bw-highlight-color)";
8522
+ }, onBlur: (e) => {
8523
+ e.target.style.borderColor = "var(--bw-border-color)";
8524
+ e.target.style.boxShadow = "none";
8525
+ } })] })] })] }), u$1("div", { style: {
8526
+ backgroundColor: "var(--bw-surface-color)",
8527
+ border: `1px solid var(--bw-border-color)`,
8528
+ backdropFilter: "blur(4px)",
8529
+ borderRadius: "var(--bw-border-radius)",
8530
+ padding: "var(--bw-spacing)",
8531
+ marginBottom: "var(--bw-spacing-large)",
8532
+ }, children: [u$1("h2", { style: {
8533
+ fontSize: "var(--bw-font-size-large)",
8534
+ fontWeight: "600",
8535
+ color: "var(--bw-text-color)",
8536
+ marginBottom: "12px",
8537
+ fontFamily: "var(--bw-font-family)",
8538
+ }, children: "2. Teilnehmer" }), u$1("div", { style: { display: "flex", flexDirection: "column", gap: "12px" }, children: watchedParticipants.map((participant, index) => (u$1("div", { style: { display: "flex", gap: "12px", alignItems: "end" }, children: [u$1("div", { style: { flex: 1 }, children: [u$1("label", { htmlFor: `participant-name-${index}`, style: labelStyle, children: "Name *" }), u$1("input", { id: `participant-name-${index}`, ...form.register(`participants.${index}.name`), type: "text", style: inputStyle, placeholder: "Teilnehmername", onFocus: (e) => {
8540
8539
  e.target.style.borderColor = "var(--bw-highlight-color)";
8541
8540
  e.target.style.boxShadow = "0 0 0 2px var(--bw-highlight-color)";
8542
8541
  }, onBlur: (e) => {
@@ -8766,180 +8765,210 @@
8766
8765
  onBackToEventTypes();
8767
8766
  };
8768
8767
  if (eventInstances.length === 0) {
8769
- return (u$1(Sidebar, { isOpen: isOpen, onClose: handleClose, title: "Keine verf\u00FCgbaren Termine", config: config, children: u$1("div", { style: {
8770
- display: "flex",
8771
- alignItems: "center",
8772
- justifyContent: "center",
8773
- minHeight: "400px",
8774
- textAlign: "center",
8775
- padding: "var(--bw-spacing)",
8776
- }, children: u$1("div", { children: [u$1("div", { style: {
8777
- margin: "0 auto 16px",
8778
- fontSize: "48px",
8779
- }, children: "\uD83D\uDCC5" }), u$1("h3", { style: {
8780
- marginBottom: "8px",
8781
- fontWeight: "600",
8782
- fontSize: "var(--bw-font-size-large)",
8783
- color: "var(--bw-text-muted)",
8784
- fontFamily: "var(--bw-font-family)",
8785
- }, children: "Keine verf\u00FCgbaren Termine" }), u$1("p", { style: {
8786
- color: "var(--bw-text-muted)",
8787
- fontFamily: "var(--bw-font-family)",
8788
- }, children: "F\u00FCr diesen Event-Typ sind derzeit keine Termine verf\u00FCgbar." })] }) }) }));
8789
- }
8790
- return (u$1(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `Terminauswahl - ${selectedEventType?.name || "Event"}`, width: "500px", config: config, children: [u$1("div", { style: { padding: "var(--bw-spacing)" }, children: u$1("div", { style: { display: "flex", flexDirection: "column", gap: "var(--bw-spacing)" }, children: monthsWithEvents.map(({ month, index, events, minPrice }) => (u$1(Accordion$1, { title: month, priceInfo: `ab ${formatCurrency(minPrice)}`, isOpen: openMonths.has(index), onToggle: () => toggleMonth(index), children: u$1("div", { style: {
8791
- display: "flex",
8792
- flexDirection: "column",
8793
- gap: "12px",
8794
- paddingTop: "12px",
8795
- }, children: events.map((event) => {
8796
- const availableSpots = event.maxParticipants - event.participantCount;
8797
- const isFullyBooked = availableSpots === 0;
8798
- const startDate = new Date(event.startTime);
8799
- const isFullAvailability = availableSpots / event.maxParticipants >= 0.8;
8800
- const isHighAvailability = availableSpots / event.maxParticipants >= 0.5;
8801
- const isMediumAvailability = availableSpots / event.maxParticipants >= 0.3;
8802
- const isLowAvailability = availableSpots / event.maxParticipants >= 0.15;
8803
- const isPastEvent = today.toISOString() >= startDate.toISOString();
8804
- const getAvailabilityColor = () => {
8805
- if (isFullAvailability)
8806
- return "var(--bw-success-color)";
8807
- if (isHighAvailability)
8808
- return "var(--bw-warning-color)";
8809
- if (isMediumAvailability)
8810
- return "var(--bw-availability-medium-color, #f97316)"; // orange fallback
8811
- if (isLowAvailability)
8812
- return "var(--bw-availability-low-color, #8b5cf6)"; // purple fallback
8813
- return "var(--bw-highlight-color)";
8814
- };
8815
- return (u$1("div", { style: {
8816
- position: "relative",
8817
- cursor: !isFullyBooked && !isPastEvent && event.bookingOpen
8818
- ? "pointer"
8819
- : "not-allowed",
8820
- border: "1px solid",
8821
- backgroundColor: "var(--bw-surface-color)",
8822
- borderRadius: "var(--bw-border-radius)",
8823
- padding: "8px 10px",
8824
- transition: "all 0.2s ease",
8825
- opacity: isFullyBooked || isPastEvent ? 0.3 : 1,
8826
- filter: isFullyBooked || isPastEvent ? "grayscale(100%)" : "none",
8827
- borderColor: getAvailabilityColor(),
8768
+ return (u$1(k$2, { children: [u$1("style", { children: `
8769
+ @media (max-width: 600px) {
8770
+ .bw-event-instance-list {
8771
+ padding: 8px !important;
8772
+ gap: 8px !important;
8773
+ }
8774
+ .bw-event-instance-card {
8775
+ padding: 6px 4px !important;
8776
+ font-size: 0.95rem !important;
8777
+ }
8778
+ .bw-event-instance-datebox {
8779
+ width: 32px !important;
8780
+ height: 32px !important;
8781
+ font-size: 1rem !important;
8782
+ }
8783
+ .bw-event-instance-title {
8784
+ font-size: 1rem !important;
8785
+ }
8786
+ .bw-event-instance-price {
8787
+ font-size: 1.1rem !important;
8788
+ }
8789
+ }
8790
+ ` }), u$1(Sidebar, { isOpen: isOpen, onClose: handleClose, title: "Keine verf\u00FCgbaren Termine", config: config, children: u$1("div", { className: "bw-event-instance-list", style: {
8791
+ display: "flex",
8792
+ alignItems: "center",
8793
+ justifyContent: "center",
8794
+ minHeight: "400px",
8795
+ textAlign: "center",
8796
+ padding: "var(--bw-spacing)",
8797
+ }, children: u$1("div", { children: [u$1("div", { style: {
8798
+ margin: "0 auto 16px",
8799
+ fontSize: "48px",
8800
+ }, children: "\uD83D\uDCC5" }), u$1("h3", { style: {
8801
+ marginBottom: "8px",
8802
+ fontWeight: "600",
8803
+ fontSize: "var(--bw-font-size-large)",
8804
+ color: "var(--bw-text-muted)",
8828
8805
  fontFamily: "var(--bw-font-family)",
8829
- }, onClick: () => {
8830
- if (!isFullyBooked && !isPastEvent && event.bookingOpen) {
8831
- handleEventInstanceSelect(event);
8832
- }
8833
- }, onMouseEnter: (e) => {
8834
- if (!isFullyBooked && !isPastEvent && event.bookingOpen) {
8835
- e.currentTarget.style.transform = "scale(1.02)";
8836
- e.currentTarget.style.backgroundColor =
8837
- "var(--bw-surface-hover, rgba(0, 0, 0, 0.05))";
8838
- }
8839
- }, onMouseLeave: (e) => {
8840
- if (!isFullyBooked && !isPastEvent && event.bookingOpen) {
8841
- e.currentTarget.style.transform = "scale(1)";
8842
- e.currentTarget.style.backgroundColor = "var(--bw-surface-color)";
8843
- }
8844
- }, children: [selectedEventInstanceId === event.id && (u$1("div", { style: {
8845
- position: "absolute",
8846
- top: 0,
8847
- left: 0,
8848
- width: "100%",
8849
- height: "100%",
8850
- backgroundColor: "var(--bw-overlay-color, rgba(15, 23, 42, 0.8))",
8851
- borderRadius: "var(--bw-border-radius)",
8852
- display: "flex",
8853
- alignItems: "center",
8854
- justifyContent: "center",
8855
- }, children: u$1("div", { style: {
8856
- width: "32px",
8857
- height: "32px",
8858
- color: "var(--bw-highlight-color-muted, rgba(59, 130, 246, 0.8))",
8859
- animation: "spin 1s linear infinite",
8860
- fontSize: "32px",
8861
- }, children: "\u27F3" }) })), u$1("div", { style: {
8862
- display: "flex",
8863
- justifyContent: "space-between",
8864
- width: "100%",
8865
- alignItems: "start",
8866
- gap: "12px",
8867
- marginBottom: "4px",
8868
- }, children: [u$1("div", { style: { display: "flex", alignItems: "start", gap: "12px" }, children: [u$1("div", { style: {
8869
- fontSize: "var(--bw-font-size)",
8870
- transition: "all 0.2s ease",
8871
- borderRadius: "var(--bw-border-radius-small)",
8872
- borderTop: `4px solid ${getAvailabilityColor()}`,
8873
- border: "1px solid",
8874
- width: "40px",
8875
- height: "40px",
8876
- display: "flex",
8877
- alignItems: "center",
8878
- justifyContent: "center",
8879
- fontWeight: "bold",
8880
- color: "var(--bw-text-color)",
8881
- borderColor: getAvailabilityColor(),
8882
- backgroundColor: "var(--bw-background-color)",
8883
- }, children: startDate.getDate() }), u$1("div", { style: {
8884
- fontSize: "var(--bw-font-size)",
8885
- color: "var(--bw-text-color)",
8886
- display: "flex",
8887
- flexDirection: "column",
8888
- alignItems: "start",
8889
- justifyContent: "start",
8890
- lineHeight: "1.2",
8891
- }, children: [u$1("span", { style: {
8892
- fontWeight: "600",
8893
- marginBottom: "2px",
8894
- }, children: formatWeekday(event.startTime) }), u$1("span", { style: {
8895
- color: "var(--bw-text-muted)",
8896
- fontSize: "14px",
8897
- }, children: formatTime(event.startTime) })] })] }), u$1("div", { style: {
8898
- textAlign: "right",
8899
- display: "flex",
8900
- flexDirection: "column",
8901
- alignItems: "end",
8902
- }, children: [u$1("div", { style: {
8903
- color: "var(--bw-highlight-color)",
8904
- fontSize: "var(--bw-font-size-large)",
8905
- fontWeight: "bold",
8906
- }, children: formatCurrency(event.price) }), event.deposit && event.deposit > 0 && (u$1("div", { style: {
8907
- fontSize: "12px",
8908
- color: "var(--bw-text-muted)",
8909
- }, children: ["ab ", formatCurrency(event.deposit)] }))] })] }), u$1("h4", { style: {
8910
- fontSize: "var(--bw-font-size)",
8911
- fontWeight: "600",
8912
- color: "var(--bw-text-color)",
8913
- lineHeight: "1.25",
8914
- margin: "0 0 2px 0",
8915
- display: "flex",
8916
- alignItems: "center",
8917
- gap: "8px",
8918
- }, children: [event.name, u$1("span", { style: {
8919
- fontSize: "12px",
8920
- fontWeight: 400,
8921
- color: "var(--bw-text-muted)",
8922
- marginLeft: "6px",
8923
- background: "var(--bw-surface-muted)",
8924
- borderRadius: "8px",
8925
- padding: "2px 8px",
8926
- }, children: [event.durationDays, " Tag", event.durationDays > 1 ? "e" : ""] })] }), event.notes && (u$1("p", { style: {
8927
- fontSize: "12px",
8928
- color: "var(--bw-text-muted)",
8929
- marginTop: "8px",
8930
- display: "-webkit-box",
8931
- WebkitBoxOrient: "vertical",
8932
- WebkitLineClamp: 2,
8933
- overflow: "hidden",
8934
- margin: "0",
8935
- lineHeight: "1.3",
8936
- }, children: event.notes }))] }, event.id));
8937
- }) }) }, month))) }) }), u$1("style", { children: `
8938
- @keyframes spin {
8939
- from { transform: rotate(0deg); }
8940
- to { transform: rotate(360deg); }
8806
+ }, children: "Keine verf\u00FCgbaren Termine" }), u$1("p", { style: {
8807
+ color: "var(--bw-text-muted)",
8808
+ fontFamily: "var(--bw-font-family)",
8809
+ }, children: "F\u00FCr diesen Event-Typ sind derzeit keine Termine verf\u00FCgbar." })] }) }) })] }));
8810
+ }
8811
+ return (u$1(k$2, { children: [u$1("style", { children: `
8812
+ @media (max-width: 600px) {
8813
+ .bw-event-instance-list {
8814
+ padding: 8px !important;
8815
+ gap: 8px !important;
8816
+ }
8817
+ .bw-event-instance-card {
8818
+ padding: 6px 4px !important;
8819
+ font-size: 0.95rem !important;
8820
+ }
8821
+ .bw-event-instance-datebox {
8822
+ width: 32px !important;
8823
+ height: 32px !important;
8824
+ font-size: 1rem !important;
8825
+ }
8826
+ .bw-event-instance-title {
8827
+ font-size: 1rem !important;
8828
+ }
8829
+ .bw-event-instance-price {
8830
+ font-size: 1.1rem !important;
8831
+ }
8941
8832
  }
8942
- ` })] }));
8833
+ ` }), u$1(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `Terminauswahl - ${selectedEventType?.name || "Event"}`, width: "500px", config: config, children: u$1("div", { className: "bw-event-instance-list", style: { padding: "var(--bw-spacing)" }, children: u$1("div", { style: { display: "flex", flexDirection: "column", gap: "var(--bw-spacing)" }, children: monthsWithEvents.map(({ month, index, events, minPrice }) => (u$1(Accordion, { title: month, priceInfo: `ab ${formatCurrency(minPrice)}`, isOpen: openMonths.has(index), onToggle: () => toggleMonth(index), children: u$1("div", { style: {
8834
+ display: "flex",
8835
+ flexDirection: "column",
8836
+ gap: "12px",
8837
+ paddingTop: "12px",
8838
+ }, children: events.map((event) => {
8839
+ const availableSpots = event.maxParticipants - event.participantCount;
8840
+ const isFullyBooked = availableSpots === 0;
8841
+ const startDate = new Date(event.startTime);
8842
+ const isFullAvailability = availableSpots / event.maxParticipants >= 0.8;
8843
+ const isHighAvailability = availableSpots / event.maxParticipants >= 0.5;
8844
+ const isMediumAvailability = availableSpots / event.maxParticipants >= 0.3;
8845
+ const isLowAvailability = availableSpots / event.maxParticipants >= 0.15;
8846
+ const isPastEvent = today.toISOString() >= startDate.toISOString();
8847
+ const getAvailabilityColor = () => {
8848
+ if (isFullAvailability)
8849
+ return "var(--bw-success-color)";
8850
+ if (isHighAvailability)
8851
+ return "var(--bw-warning-color)";
8852
+ if (isMediumAvailability)
8853
+ return "var(--bw-availability-medium-color, #f97316)"; // orange fallback
8854
+ if (isLowAvailability)
8855
+ return "var(--bw-availability-low-color, #8b5cf6)"; // purple fallback
8856
+ return "var(--bw-highlight-color)";
8857
+ };
8858
+ return (u$1("div", { className: "bw-event-instance-card", style: {
8859
+ position: "relative",
8860
+ cursor: !isFullyBooked && !isPastEvent && event.bookingOpen
8861
+ ? "pointer"
8862
+ : "not-allowed",
8863
+ border: "1px solid",
8864
+ backgroundColor: "var(--bw-surface-color)",
8865
+ borderRadius: "var(--bw-border-radius)",
8866
+ padding: "8px 10px",
8867
+ transition: "all 0.2s ease",
8868
+ opacity: isFullyBooked || isPastEvent ? 0.3 : 1,
8869
+ filter: isFullyBooked || isPastEvent ? "grayscale(100%)" : "none",
8870
+ borderColor: getAvailabilityColor(),
8871
+ fontFamily: "var(--bw-font-family)",
8872
+ }, onClick: () => {
8873
+ if (!isFullyBooked && !isPastEvent && event.bookingOpen) {
8874
+ handleEventInstanceSelect(event);
8875
+ }
8876
+ }, onMouseEnter: (e) => {
8877
+ if (!isFullyBooked && !isPastEvent && event.bookingOpen) {
8878
+ e.currentTarget.style.transform = "scale(1.02)";
8879
+ e.currentTarget.style.backgroundColor =
8880
+ "var(--bw-surface-hover, rgba(0, 0, 0, 0.05))";
8881
+ }
8882
+ }, onMouseLeave: (e) => {
8883
+ if (!isFullyBooked && !isPastEvent && event.bookingOpen) {
8884
+ e.currentTarget.style.transform = "scale(1)";
8885
+ e.currentTarget.style.backgroundColor = "var(--bw-surface-color)";
8886
+ }
8887
+ }, children: [selectedEventInstanceId === event.id && (u$1("div", { style: {
8888
+ position: "absolute",
8889
+ top: 0,
8890
+ left: 0,
8891
+ width: "100%",
8892
+ height: "100%",
8893
+ backgroundColor: "var(--bw-overlay-color, rgba(15, 23, 42, 0.8))",
8894
+ borderRadius: "var(--bw-border-radius)",
8895
+ display: "flex",
8896
+ alignItems: "center",
8897
+ justifyContent: "center",
8898
+ }, children: u$1("div", { style: {
8899
+ width: "32px",
8900
+ height: "32px",
8901
+ color: "var(--bw-highlight-color-muted, rgba(59, 130, 246, 0.8))",
8902
+ animation: "spin 1s linear infinite",
8903
+ fontSize: "32px",
8904
+ }, children: "\u27F3" }) })), u$1("div", { style: {
8905
+ display: "flex",
8906
+ justifyContent: "space-between",
8907
+ width: "100%",
8908
+ alignItems: "start",
8909
+ gap: "12px",
8910
+ marginBottom: "4px",
8911
+ }, children: [u$1("div", { style: { display: "flex", alignItems: "start", gap: "12px" }, children: [u$1("div", { className: "bw-event-instance-datebox", style: {
8912
+ fontSize: "var(--bw-font-size)",
8913
+ transition: "all 0.2s ease",
8914
+ borderRadius: "var(--bw-border-radius-small)",
8915
+ borderTop: `4px solid ${getAvailabilityColor()}`,
8916
+ border: "1px solid",
8917
+ width: "40px",
8918
+ height: "40px",
8919
+ display: "flex",
8920
+ alignItems: "center",
8921
+ justifyContent: "center",
8922
+ fontWeight: "bold",
8923
+ color: "var(--bw-text-color)",
8924
+ borderColor: getAvailabilityColor(),
8925
+ backgroundColor: "var(--bw-background-color)",
8926
+ }, children: startDate.getDate() }), u$1("div", { style: {
8927
+ fontSize: "var(--bw-font-size)",
8928
+ color: "var(--bw-text-color)",
8929
+ display: "flex",
8930
+ flexDirection: "column",
8931
+ alignItems: "start",
8932
+ justifyContent: "start",
8933
+ lineHeight: "1.2",
8934
+ }, children: [u$1("span", { className: "bw-event-instance-title", style: { fontWeight: "600", marginBottom: "2px" }, children: formatWeekday(event.startTime) }), u$1("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: formatTime(event.startTime) })] })] }), u$1("div", { className: "bw-event-instance-price", style: {
8935
+ textAlign: "right",
8936
+ display: "flex",
8937
+ flexDirection: "column",
8938
+ alignItems: "end",
8939
+ }, children: [u$1("div", { style: {
8940
+ color: "var(--bw-highlight-color)",
8941
+ fontSize: "var(--bw-font-size-large)",
8942
+ fontWeight: "bold",
8943
+ }, children: formatCurrency(event.price) }), event.deposit && event.deposit > 0 && (u$1("div", { style: { fontSize: "12px", color: "var(--bw-text-muted)" }, children: ["ab ", formatCurrency(event.deposit)] }))] })] }), u$1("h4", { className: "bw-event-instance-title", style: {
8944
+ fontSize: "var(--bw-font-size)",
8945
+ fontWeight: "600",
8946
+ color: "var(--bw-text-color)",
8947
+ lineHeight: "1.25",
8948
+ margin: "0 0 2px 0",
8949
+ display: "flex",
8950
+ alignItems: "center",
8951
+ gap: "8px",
8952
+ }, children: [event.name, u$1("span", { style: {
8953
+ fontSize: "12px",
8954
+ fontWeight: 400,
8955
+ color: "var(--bw-text-muted)",
8956
+ marginLeft: "6px",
8957
+ background: "var(--bw-surface-muted)",
8958
+ borderRadius: "8px",
8959
+ padding: "2px 8px",
8960
+ }, children: [event.durationDays, " Tag", event.durationDays > 1 ? "e" : ""] })] }), event.notes && (u$1("p", { style: {
8961
+ fontSize: "12px",
8962
+ color: "var(--bw-text-muted)",
8963
+ marginTop: "8px",
8964
+ display: "-webkit-box",
8965
+ WebkitBoxOrient: "vertical",
8966
+ WebkitLineClamp: 2,
8967
+ overflow: "hidden",
8968
+ margin: "0",
8969
+ lineHeight: "1.3",
8970
+ }, children: event.notes }))] }, event.id));
8971
+ }) }) }, month))) }) }) })] }));
8943
8972
  }
8944
8973
 
8945
8974
  function NextEventsPreview({ events, onEventSelect, onShowAll, showAllButtonText, showAllButton, }) {
@@ -10012,7 +10041,7 @@
10012
10041
  flex: "1 1 350px",
10013
10042
  display: "flex",
10014
10043
  flexDirection: "column",
10015
- minHeight: 560,
10044
+ minHeight: 650,
10016
10045
  boxSizing: "border-box",
10017
10046
  }, children: [u$1("div", { style: { position: "absolute", top: "16px", left: "16px", zIndex: 10 }, children: u$1("div", { style: {
10018
10047
  width: 80,