@import url("slot_request_modals.css");

html, body { margin: 0; padding: 0; font-family: system-ui, sans-serif; width: 100%; }
main { padding: var(--space-2, 24px); }

:root{
  --ink-bg:#070b14; --ink-bg-2:#0c1220;
  --ink-panel:rgba(12,18,32,.65); --ink-panel-2:rgba(16,24,42,.58);
  --ink-txt:#e9efff; --ink-muted:#9aa3b2;
  --ink-accent:#8a5cff; --ink-accent-2:#1dd1a1;
  --ink-danger:#ff5c7c; --ink-warning:#ffb84d; --ink-success:#34d399;
  --ink-border:rgba(120,130,170,.22); --ring:0 0 0 3px rgba(138,92,255,.35);
  --space-1: clamp(6px, 1.2vw, 10px);
  --space-2: clamp(10px, 1.8vw, 16px);
  --space-3: clamp(14px, 2.6vw, 24px);
  --radius: clamp(12px, 1.8vw, 20px);
  /* Abstand für .ink-navbar.fixed-top — Mobile-Breakpoint wie main_menu (52px) */
  --ink-navbar-offset: 62px;
  /* iOS-Statusleiste / Notch: zusätzlich zum Navbar-Innenmaß */
  --ink-safe-top: env(safe-area-inset-top, 0px);
  --ink-navbar-stack: calc(var(--ink-navbar-offset) + var(--ink-safe-top));
  /* Logo: nutzt fast die volle Navbar-Zeile (Abzug wegen Navbar-Padding) */
  --ink-logo-h: calc(var(--ink-navbar-offset) - 12px);
  /* Abo-/Testphase-Zeile über der Navbar (main_menu setzt bei Bedarf > 0) */
  --ink-top-banner-h: 0px;
  /* Globale Layer-Skala (Bootstrap-nah, kein 6-stelliges Wettrüsten mit der Navbar):
     Top-Banner > Navbar > Dropdowns/Nav-Floating > Modal-Backdrop > Modal > Slot-Overlay (raise) > 2. Backdrop > Confirm/Alert.
     Zweit-Modal (--ink-z-modal-2) liegt über .slot-detail-modal / .picker-modal (--ink-z-modal-raise).
     Drittanbieter (Flatpickr, Toasts) nutzen oft 9999+ und bleiben darüber. */
  --ink-z-top-banner: 1041;
  --ink-z-navbar: 1030;
  --ink-z-navbar-dropdown: 1040;
  --ink-z-navbar-floating: 1045;
  --ink-z-modal-backdrop: 1050;
  --ink-z-modal: 1060;
  /* Über erstem Modal + über Kalender-Slot-Overlay (--ink-z-modal-raise), unter Popovers */
  --ink-z-modal-backdrop-2: 1140;
  --ink-z-modal-2: 1150;
  /* Vollflächige Seiten-Overlays (über Navbar; Kalender-Slot-Overlay siehe --ink-z-modal-raise) */
  --ink-z-page-overlay: 1048;
  --ink-z-page-overlay-2: 1049;
  /* Zeiterfassung / Voll-Picker: unter verschachteltem Confirm (--ink-z-modal-2) */
  --ink-z-modal-raise: 1100;
  /* Popovers (Flatpickr-Kalender, o. Ä.) über .ink-z-modal-raise */
  --ink-z-popover-max: 1200;
  /* Admin: Overlay im eingebetteten Iframe-Dokument (über dem gesamten Seiten-Stack im Frame) */
  --ink-z-iframe-internal-overlay: 999999;
  /* Lokale Vorschau: Overlay über dem iframe im gleichen Wrapper (nur relativ zur Box, kein Wettrüsten mit der Navbar) */
  --ink-z-preview-frame-overlay: 1;
  /* Sticky-Werbeleiste (unter --ink-z-navbar, über normalem Content) */
  --ink-z-sticky-ad-bar: 999;
  /* Studio Homepage-Builder: gezogene Sektion über Geschwistern (lokaler Stack) */
  --ink-z-studio-builder-drag: 100;
  /* Kalender/Dashboard: „Jetzt“-Linie + Label innerhalb der Raster-Zelle (lokaler Stack) */
  --ink-z-cal-time-line: 100;
  --ink-z-cal-time-label: 101;
  /* Nachrichten: sticky Chat-Kopfzeile über der Bubble-Liste (lokal) */
  --ink-z-messages-chat-header: 100;
  /* Lokale Micro-Stacks (1–2: Bild/Grid-Schichten in Karten) */
  --ink-z-local-0: 0;
  --ink-z-local-1: 1;
  --ink-z-local-2: 2;
  --ink-z-local-3: 3;
  --ink-z-local-5: 5;
  /* Lokale Mini-Stack-Ebenen (Kacheln, Sticky-Zeilen, Toolbars – nicht global vs. Navbar) */
  --ink-z-local-10: 10;
  --ink-z-local-15: 15;
  --ink-z-local-20: 20;
  --ink-z-local-30: 30;
  --ink-z-local-50: 50;
  /* Unterer Seitenabstand: Mindestreserve + dynamisch per JS (--ink-bottom-ui-clearance) */
  --ink-content-bottom-reserve: 148px;
  --ink-bottom-ui-clearance: 148px;
  --ink-fab-footer-overlap: 0px;
  --ink-hint-stack-clearance: 0px;
  /* Zusatzluft .wrap unter fixer Navbar (v. a. wenn Templates margin:0 auto setzen) */
  --ink-wrap-top-gap: clamp(12px, 2.5vh, 24px);
}
@media (max-width: 991.98px){
  :root{
    --ink-navbar-offset: 52px;
    /* Mobile: kein vertikales Navbar-Padding → Logo fast volle 52px-Zeile */
    --ink-logo-h: calc(var(--ink-navbar-offset) - 4px);
  }
}
html{
  width:100%;
  overflow-x:clip;
  overflow-y:auto;
  scrollbar-gutter: stable;
}
/* scroll-padding fest an Reserve — ändert sich nicht beim Scroll (kein Ruckeln) */
body:not(.page-messages) {
  scroll-padding-bottom: calc(
    clamp(16px, 3vw, 36px)
    + var(--ink-content-bottom-reserve, 148px)
    + env(safe-area-inset-bottom, 0px)
  );
}
/* Flex-Abstand zwischen Hauptinhalt und Footer (Höhe per JS) */
body:not(.page-messages) .ink-bottom-ui-spacer {
  flex-shrink: 0;
  width: 100%;
  height: var(--ink-bottom-ui-clearance, var(--ink-content-bottom-reserve, 148px));
  min-height: var(--ink-content-bottom-reserve, 148px);
  pointer-events: none;
}
body.page-messages .ink-bottom-ui-spacer {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
}
/* Sanfte Übergänge zwischen Seiten (Chrome 126+ MPA, meta view-transition same-origin) */
@supports (view-transition-name: none){
  ::view-transition-old(root),
  ::view-transition-new(root){
    animation-duration: 0.18s;
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  nav.ink-navbar.navbar.fixed-top{
    view-transition-name: ink-navbar;
  }
  ::view-transition-old(ink-navbar),
  ::view-transition-new(ink-navbar){
    animation-duration: 0.22s;
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
    mix-blend-mode: normal;
    height: 100%;
    overflow: clip;
  }
  /* PWA standalone: Navbar-Morph erzeugt sichtbares Logo/Titel-Rutschen */
  @media (display-mode: standalone){
    nav.ink-navbar.navbar.fixed-top{
      view-transition-name: none;
    }
  }
}
body{height:100%; width:100%; max-width:100vw; overflow-x:clip; min-width:0; padding-top:var(--ink-navbar-stack, calc(var(--ink-navbar-offset, 62px) + env(safe-area-inset-top, 0px)));}
/* Feste Navbar-Höhe = body-padding → weniger Sprung beim Reload (inkl. Safe Area) */
nav.ink-navbar.navbar.fixed-top{
  min-height:var(--ink-navbar-stack, calc(var(--ink-navbar-offset) + env(safe-area-inset-top, 0px)));
  box-sizing:border-box;
  /* Kein Layout-Containment: verhindert fehlerhafte Hitboxen bei absoluten Dropdowns */
  contain:none;
  backface-visibility:hidden;
}
/* Logo-Box: alle Menü-Varianten (main_menu, auth_public, verify) — vor erstem Paint in global.css */
.ink-navbar-logo-wrap{
  display:inline-flex;
  align-items:center;
  flex-shrink:0;
  height:var(--ink-logo-h, 48px);
  max-height:var(--ink-logo-h, 48px);
  max-width:min(220px, 55vw);
  overflow:hidden;
  line-height:0;
}
.ink-navbar .navbar-brand .ink-navbar-logo{
  height:100% !important;
  max-height:100%;
  width:auto !important;
  max-width:none !important;
  display:block;
  object-fit:contain;
  object-position:left center;
}
@media (max-width: 991.98px){
  /* Fester Logo-Slot: Titel startet immer an derselben X-Position (PWA/Seitenwechsel) */
  .ink-navbar-logo-wrap{
    width:var(--ink-logo-h);
    min-width:var(--ink-logo-h);
    max-width:var(--ink-logo-h);
    margin-right:4px;
  }
  .ink-navbar .navbar-brand.ink-navbar-brand{
    max-width:calc(100dvw - 108px);
  }
}
.ink-navbar .nav-link i.bi{
  display:inline-block;
  min-width:1em;
  text-align:center;
  flex-shrink:0;
}
/* Glocke/Badge: feste Box — kein horizontales Springen beim Nachladen der Zahl */
.ink-nav-bell-btn,
.notif-trigger{
  min-width:2.25rem;
  min-height:2.25rem;
  flex-shrink:0;
}
.notif-badge{
  min-width:1.15rem;
  min-height:1.15rem;
  padding:0 .28rem;
  line-height:1.15rem;
  font-size:.62rem;
  font-variant-numeric:tabular-nums;
  box-sizing:border-box;
}
body{
  min-height:100vh; display:flex; flex-direction:column;
  position:relative;
  background:transparent !important;
  color:var(--ink-txt);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
/* Hintergrund-Spots als fixes Pseudo-Element – funktioniert Desktop + Mobile */
body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(40rem 25rem at 20% 10%, rgba(138,92,255,.32), transparent 60%),
    radial-gradient(45rem 30rem at 85% 15%, rgba(29,209,161,.29), transparent 65%),
    radial-gradient(30rem 20rem at 25% 90%, rgba(255,92,124,.24), transparent 60%),
    radial-gradient(35rem 22rem at 90% 90%, rgba(255,184,77,.25), transparent 65%),
    radial-gradient(50rem 35rem at 10% 50%, rgba(138,92,255,.18), transparent 55%),
    radial-gradient(45rem 30rem at 95% 55%, rgba(29,209,161,.16), transparent 58%),
    radial-gradient(60rem 40rem at 50% 40%, rgba(100,116,255,.14), transparent 70%),
    radial-gradient(35rem 28rem at 5% 50%, rgba(138,92,255,.2), transparent 55%),
    radial-gradient(38rem 25rem at 70% 5%, rgba(46,168,255,.22), transparent 60%),
    radial-gradient(32rem 24rem at 15% 75%, rgba(233,76,90,.2), transparent 55%),
    radial-gradient(40rem 30rem at 75% 70%, rgba(52,211,153,.2), transparent 58%),
    radial-gradient(45rem 28rem at 55% 10%, rgba(255,184,77,.22), transparent 62%),
    radial-gradient(46rem 30rem at 12% 22%, rgba(138,92,255,.28), transparent 62%),
    radial-gradient(42rem 28rem at 88% 28%, rgba(29,209,161,.26), transparent 64%),
    radial-gradient(38rem 24rem at 52% 82%, rgba(255,184,77,.22), transparent 62%),
    radial-gradient(34rem 22rem at 30% 55%, rgba(46,168,255,.2), transparent 60%),
    radial-gradient(42rem 26rem at 50% 14%, rgba(124,108,255,.2), transparent 63%),
    radial-gradient(36rem 24rem at 18% 50%, rgba(138,92,255,.18), transparent 60%),
    radial-gradient(36rem 24rem at 82% 50%, rgba(29,209,161,.17), transparent 60%),
    radial-gradient(40rem 26rem at 50% 92%, rgba(255,184,77,.16), transparent 64%),
    radial-gradient(38rem 26rem at 6% 94%, rgba(138,92,255,.24), transparent 62%),
    radial-gradient(32rem 22rem at 14% 88%, rgba(29,209,161,.2), transparent 58%),
    linear-gradient(90deg, #070b14 0%, #070c14 25%, #070b15 50%, #080b14 75%, #070b14 100%);
  background-size:100% 100%;
  background-repeat:no-repeat;
  background-position:0 0;
}
body::after{
  content:'';
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(55rem 38rem at 50% -5%, rgba(138,92,255,.16), transparent 70%),
    radial-gradient(50rem 35rem at 50% 105%, rgba(29,209,161,.14), transparent 72%);
  mix-blend-mode:screen;
}
@media (max-width: 768px){
  body::before{
    background:
      radial-gradient(clamp(20rem, 80vw, 40rem) clamp(12rem, 50vw, 25rem) at 20% 10%, rgba(138,92,255,.32), transparent 60%),
      radial-gradient(clamp(22rem, 90vw, 45rem) clamp(15rem, 60vw, 30rem) at 85% 15%, rgba(29,209,161,.29), transparent 65%),
      radial-gradient(clamp(15rem, 60vw, 30rem) clamp(10rem, 40vw, 20rem) at 25% 90%, rgba(255,92,124,.24), transparent 60%),
      radial-gradient(clamp(17rem, 70vw, 35rem) clamp(11rem, 44vw, 22rem) at 90% 90%, rgba(255,184,77,.25), transparent 65%),
      radial-gradient(clamp(25rem, 100vw, 50rem) clamp(17rem, 70vw, 35rem) at 10% 50%, rgba(138,92,255,.18), transparent 55%),
      radial-gradient(clamp(22rem, 90vw, 45rem) clamp(15rem, 60vw, 30rem) at 95% 55%, rgba(29,209,161,.16), transparent 58%),
      radial-gradient(clamp(30rem, 120vw, 60rem) clamp(20rem, 80vw, 40rem) at 50% 40%, rgba(100,116,255,.14), transparent 70%),
      radial-gradient(clamp(17rem, 70vw, 35rem) clamp(14rem, 56vw, 28rem) at 5% 50%, rgba(138,92,255,.2), transparent 55%),
      radial-gradient(clamp(19rem, 76vw, 38rem) clamp(12rem, 50vw, 25rem) at 70% 5%, rgba(46,168,255,.22), transparent 60%),
      radial-gradient(clamp(16rem, 64vw, 32rem) clamp(12rem, 48vw, 24rem) at 15% 75%, rgba(233,76,90,.2), transparent 55%),
      radial-gradient(clamp(20rem, 80vw, 40rem) clamp(15rem, 60vw, 30rem) at 75% 70%, rgba(52,211,153,.2), transparent 58%),
      radial-gradient(clamp(22rem, 90vw, 45rem) clamp(14rem, 56vw, 28rem) at 55% 10%, rgba(255,184,77,.22), transparent 62%),
      radial-gradient(clamp(23rem, 92vw, 46rem) clamp(15rem, 60vw, 30rem) at 12% 22%, rgba(138,92,255,.28), transparent 62%),
      radial-gradient(clamp(21rem, 84vw, 42rem) clamp(14rem, 56vw, 28rem) at 88% 28%, rgba(29,209,161,.26), transparent 64%),
      radial-gradient(clamp(19rem, 76vw, 38rem) clamp(12rem, 48vw, 24rem) at 52% 82%, rgba(255,184,77,.22), transparent 62%),
      radial-gradient(clamp(17rem, 68vw, 34rem) clamp(11rem, 44vw, 22rem) at 30% 55%, rgba(46,168,255,.2), transparent 60%),
      radial-gradient(clamp(21rem, 84vw, 42rem) clamp(13rem, 52vw, 26rem) at 50% 14%, rgba(124,108,255,.2), transparent 63%),
      radial-gradient(clamp(18rem, 72vw, 36rem) clamp(12rem, 48vw, 24rem) at 18% 50%, rgba(138,92,255,.18), transparent 60%),
      radial-gradient(clamp(18rem, 72vw, 36rem) clamp(12rem, 48vw, 24rem) at 82% 50%, rgba(29,209,161,.17), transparent 60%),
      radial-gradient(clamp(20rem, 80vw, 40rem) clamp(13rem, 52vw, 26rem) at 50% 92%, rgba(255,184,77,.16), transparent 64%),
      radial-gradient(clamp(19rem, 76vw, 38rem) clamp(13rem, 52vw, 26rem) at 6% 94%, rgba(138,92,255,.24), transparent 62%),
      radial-gradient(clamp(16rem, 64vw, 32rem) clamp(11rem, 44vw, 22rem) at 14% 88%, rgba(29,209,161,.2), transparent 58%),
      linear-gradient(90deg, #070b14 0%, #070c14 25%, #070b15 50%, #080b14 75%, #070b14 100%);
  }
  body::after{
    background:
      radial-gradient(clamp(26rem, 105vw, 55rem) clamp(18rem, 72vw, 38rem) at 50% -5%, rgba(138,92,255,.16), transparent 70%),
      radial-gradient(clamp(24rem, 96vw, 50rem) clamp(17rem, 68vw, 35rem) at 50% 105%, rgba(29,209,161,.14), transparent 72%);
  }
}
/* Bootstrap-Modals über Navbar (main_menu: --ink-z-navbar) */
.modal {
  --bs-modal-zindex: var(--ink-z-modal);
  z-index: var(--ink-z-modal) !important;
  box-sizing: border-box;
  /*
    Safe Area (viewport-fit=cover): Dialog-Inhalt nicht unter Statusleiste / neben Notch /
    über Home-Indikator. Nur Padding am .modal — z-index, Backdrop, Flex-Zentrierung
    und Scroll-Verhalten von Bootstrap bleiben unverändert.
  */
  padding-top: env(safe-area-inset-top, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
}
/*
  Bootstrap setzt Fullscreen-Dialoge auf width:100vw — das ragt bei inset-padding aus dem
  .modal heraus. Nur in denselben Breakpoints wie BS „*-down“ auf 100% (Elternbreite) begrenzen.
*/
.modal .modal-dialog.modal-fullscreen{
  width: 100%;
  max-width: none;
}
@media (max-width: 575.98px){
  .modal .modal-dialog.modal-fullscreen-sm-down{
    width: 100%;
    max-width: none;
  }
}
@media (max-width: 767.98px){
  .modal .modal-dialog.modal-fullscreen-md-down{
    width: 100%;
    max-width: none;
  }
}
@media (max-width: 991.98px){
  .modal .modal-dialog.modal-fullscreen-lg-down{
    width: 100%;
    max-width: none;
  }
}
@media (max-width: 1199.98px){
  .modal .modal-dialog.modal-fullscreen-xl-down{
    width: 100%;
    max-width: none;
  }
}
@media (max-width: 1399.98px){
  .modal .modal-dialog.modal-fullscreen-xxl-down{
    width: 100%;
    max-width: none;
  }
}
.modal-backdrop {
  --bs-backdrop-zindex: var(--ink-z-modal-backdrop);
  z-index: var(--ink-z-modal-backdrop) !important;
}
/* Zwei gleichzeitige Backdrops (Hauptmodal + Confirm): zweiter liegt über dem ersten Modal */
.modal-backdrop.show ~ .modal-backdrop.show {
  z-index: var(--ink-z-modal-backdrop-2) !important;
}
/* Bestätigungs- / Zweitmodale immer über Hauptmodal, Slot-Detail-Overlay und zweitem Backdrop */
#finalizeConfirmModal.modal,
#hardShiftConfirmModal.modal,
#providerLegalDocModal.modal,
#confirmationModal.modal,
#alertModal.modal,
#completeTodoModal.modal,
#awardPointsModal.modal,
#cancelBookingModal.modal,
#cancelBookingArtistConfirmModal.modal,
#storyReportModal.modal,
#imgPreviewModal.modal,
#createTicketModal.modal,
#banUserModal.modal,
#roleChangeModal.modal {
  z-index: var(--ink-z-modal-2) !important;
}

/* Bildvorschau-Lightbox (img_preview_modal.js) */
.mic-img-preview-modal .modal-dialog {
  max-width: min(96vw, 1100px);
  margin: 0.75rem auto;
}
.mic-img-preview-modal.show .modal-dialog {
  animation: mic-img-preview-in 0.28s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes mic-img-preview-in {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.mic-img-preview-modal + .modal-backdrop.show {
  background: rgba(6, 8, 14, 0.88) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
/* Studio-Public: body::after ist viewport-fixed — kein Blur-Backdrop (wirkt sonst „kaputt“) */
body.studio-public-page #imgPreviewModal.show ~ .modal-backdrop.show {
  background: rgba(6, 8, 14, 0.78) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.mic-img-preview-content {
  position: relative;
  background: linear-gradient(165deg, rgba(22, 24, 34, 0.98), rgba(10, 12, 18, 0.99)) !important;
  border: 1px solid rgba(138, 92, 255, 0.45) !important;
  border-radius: 20px !important;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.55),
    0 0 40px rgba(138, 92, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  overflow: hidden;
}
.mic-img-preview-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.18);
  opacity: 0.92;
}
.mic-img-preview-close:hover {
  opacity: 1;
  background: rgba(138, 92, 255, 0.35) !important;
}
.mic-img-preview-body {
  padding: 2.5rem 1rem 1rem;
  text-align: center;
}
.mic-img-preview-frame {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  margin: 0 auto;
}
.mic-img-preview-glow {
  position: absolute;
  inset: -12%;
  background: radial-gradient(circle at 50% 45%, rgba(138, 92, 255, 0.22), transparent 68%);
  pointer-events: none;
}
.mic-img-preview-img {
  position: relative;
  z-index: 1;
  max-width: 100%;
  max-height: min(82vh, 880px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
.mic-img-preview-footer {
  padding: 0.65rem 1rem 1rem;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.25));
}
.mic-img-preview-action,
.mic-img-preview-dismiss {
  border-radius: 999px !important;
  font-weight: 600;
  font-size: 0.82rem;
}
.mic-img-preview-action {
  color: #eef2ff !important;
  border: 1px solid rgba(138, 92, 255, 0.5) !important;
  background: linear-gradient(135deg, rgba(138, 92, 255, 0.28), rgba(138, 92, 255, 0.12)) !important;
}
.mic-img-preview-action:hover {
  filter: brightness(1.08);
  color: #fff !important;
}
.mic-img-preview-dismiss {
  color: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}
@media (max-width: 575.98px) {
  .mic-img-preview-modal .modal-dialog {
    margin: 0.35rem;
    max-width: calc(100vw - 0.7rem);
  }
  .mic-img-preview-body {
    padding: 2.25rem 0.5rem 0.5rem;
  }
  .mic-img-preview-img {
    max-height: min(78vh, 720px);
    border-radius: 10px;
  }
}

.card,.modal-content,.offcanvas,.dropdown-menu,.list-group-item,.toast,
.table,.table-bordered,.alert,.badge,.nav-tabs .nav-link,.popover{
  background:var(--ink-panel);
  backdrop-filter:blur(12px) saturate(120%); -webkit-backdrop-filter:blur(12px) saturate(120%);
  border:1px solid var(--ink-border);
  box-shadow:0 8px 30px rgba(0,0,0,.35), 0 0 22px rgba(138,92,255,.15);
  color:var(--ink-txt);
}

/* Geschäftsadresse-Hilfe: Modals außerhalb backdrop-filter-Eltern; Klicks auf Dialog sicherstellen */
body:has(.mic-artist-biz-address-modal.show) .modal-backdrop.show {
  background: rgba(6, 8, 14, 0.78) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.mic-artist-biz-address-modal.show,
.mic-artist-biz-address-modal .modal-dialog,
.mic-artist-biz-address-modal .modal-content,
.mic-artist-biz-address-modal .modal-body,
.mic-artist-biz-address-modal .modal-footer,
.mic-artist-biz-address-modal button {
  pointer-events: auto !important;
}
.mic-artist-biz-address-modal.show {
  z-index: var(--ink-z-modal, 1060) !important;
}
.mic-biz-addr-modal-content {
  background: linear-gradient(165deg, rgba(24, 26, 36, 0.98), rgba(14, 16, 24, 0.99)) !important;
  border: 1px solid rgba(255, 193, 7, 0.42) !important;
  border-radius: 14px !important;
  color: #fff;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.62), 0 0 48px rgba(255, 193, 7, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
.mic-biz-addr-modal-header {
  border-bottom: 1px solid rgba(255, 193, 7, 0.22) !important;
  background: linear-gradient(90deg, rgba(255, 193, 7, 0.1), transparent);
}
.mic-biz-addr-modal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.22), rgba(167, 139, 250, 0.15));
  border: 1px solid rgba(255, 193, 7, 0.35);
  color: #ffc107;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.mic-biz-addr-modal-title {
  color: #ffe6a8;
  font-size: 1rem;
  line-height: 1.35;
  font-weight: 600;
}
.mic-biz-addr-modal-sub {
  color: rgba(255, 255, 255, 0.55);
}
.mic-biz-addr-modal-lead {
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.5;
}
.mic-biz-addr-modal-footer .btn-outline-light {
  border-color: rgba(255, 255, 255, 0.25);
}
.mic-artist-biz-address-help-wrap .mic-biz-addr-help-trigger {
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.14), rgba(167, 139, 250, 0.1));
  border: 1px solid rgba(255, 193, 7, 0.45) !important;
  color: #ffe6a8 !important;
  font-weight: 500;
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.mic-artist-biz-address-help-wrap .mic-biz-addr-help-trigger:hover {
  box-shadow: 0 6px 20px rgba(255, 193, 7, 0.2);
  transform: translateY(-1px);
  color: #fff !important;
}

/* Termin-Bestätigen-Modal: Spots wie Hintergrund, aufgewertet */
#finalizeAppointmentModal .modal-content {
  background:
    radial-gradient(30rem 20rem at 15% 10%, rgba(138,92,255,.22), transparent 55%),
    radial-gradient(28rem 18rem at 88% 12%, rgba(29,209,161,.18), transparent 55%),
    radial-gradient(24rem 16rem at 25% 92%, rgba(255,92,124,.16), transparent 50%),
    radial-gradient(26rem 17rem at 92% 88%, rgba(255,184,77,.15), transparent 50%),
    radial-gradient(35rem 22rem at 50% 45%, rgba(100,116,255,.08), transparent 65%),
    linear-gradient(165deg, #0f1115 0%, #0a0c12 50%, #0c0e16 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(138,92,255,.3) !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.55), 0 0 80px rgba(138,92,255,.06) !important;
  backdrop-filter: blur(16px) saturate(130%); -webkit-backdrop-filter: blur(16px) saturate(130%);
}
#finalizeAppointmentModal .modal-header {
  border-bottom: 1px solid rgba(138,92,255,.2) !important;
  background: rgba(0,0,0,.2) !important;
  border-radius: 16px 16px 0 0 !important;
}
#finalizeAppointmentModal .modal-footer {
  border-top: 1px solid rgba(138,92,255,.2) !important;
  background: rgba(0,0,0,.15) !important;
  border-radius: 0 0 16px 16px !important;
}
#finalizeAppointmentModal .modal-body .card {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(138,92,255,.15) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.2) !important;
}

/* Termin-Bestätigen-Confirm-Modal: Spots wie Hintergrund */
#finalizeConfirmModal .modal-content {
  background:
    radial-gradient(28rem 18rem at 15% 10%, rgba(138,92,255,.2), transparent 55%),
    radial-gradient(26rem 16rem at 88% 12%, rgba(29,209,161,.16), transparent 55%),
    radial-gradient(22rem 14rem at 25% 92%, rgba(255,92,124,.12), transparent 50%),
    radial-gradient(24rem 15rem at 92% 88%, rgba(255,184,77,.12), transparent 50%),
    linear-gradient(165deg, #0f1115 0%, #0a0c12 50%, #0c0e16 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(138,92,255,.28) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.5), 0 0 60px rgba(138,92,255,.05) !important;
  backdrop-filter: blur(14px) saturate(130%); -webkit-backdrop-filter: blur(14px) saturate(130%);
}
#finalizeConfirmModal .modal-header {
  border-bottom: 1px solid rgba(138,92,255,.2) !important;
  background: rgba(0,0,0,.2) !important;
  border-radius: 16px 16px 0 0 !important;
}
#finalizeConfirmModal .modal-footer {
  border-top: 1px solid rgba(138,92,255,.2) !important;
  background: rgba(0,0,0,.15) !important;
  border-radius: 0 0 16px 16px !important;
}

/* App-Bestätigung & Hinweis (showConfirmModal / showAlertModal — Dashboard, Kalender) */
#confirmationModal .modal-dialog.mic-ink-confirm-dialog,
#alertModal .modal-dialog.mic-ink-confirm-dialog {
  max-width: min(440px, calc(100vw - 1.5rem));
}
#confirmationModal .modal-content,
#alertModal .modal-content {
  background:
    radial-gradient(28rem 18rem at 10% 0%, rgba(45, 212, 191, 0.22), transparent 55%),
    radial-gradient(26rem 16rem at 92% 8%, rgba(138, 92, 255, 0.24), transparent 52%),
    radial-gradient(22rem 14rem at 18% 100%, rgba(99, 102, 241, 0.14), transparent 50%),
    linear-gradient(168deg, #10141f 0%, #0a0d14 48%, #0c1018 100%) !important;
  color: #f1f5f9 !important;
  border: 1px solid rgba(45, 212, 191, 0.3) !important;
  border-radius: 18px !important;
  box-shadow:
    0 20px 52px rgba(0, 0, 0, 0.58),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 0 72px rgba(16, 185, 129, 0.09) !important;
  backdrop-filter: blur(16px) saturate(135%);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  overflow: hidden;
}
#confirmationModal .modal-header,
#alertModal .modal-header {
  border-bottom: 1px solid rgba(148, 163, 184, 0.14) !important;
  background: rgba(0, 0, 0, 0.22) !important;
  border-radius: 18px 18px 0 0 !important;
  padding: 1rem 1.25rem;
}
#confirmationModal .modal-title,
#alertModal .modal-title {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: #f8fafc !important;
}
#confirmationModal .modal-body,
#alertModal .modal-body {
  padding: 1.25rem 1.25rem 1.1rem;
}
#confirmationModal .modal-footer,
#alertModal .modal-footer {
  border-top: 1px solid rgba(148, 163, 184, 0.12) !important;
  background: rgba(0, 0, 0, 0.18) !important;
  border-radius: 0 0 18px 18px !important;
  padding: 0.9rem 1.1rem 1rem !important;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
#confirmationModal .mic-confirm-header-row {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  flex: 1;
  min-width: 0;
}
#confirmationModal .mic-confirm-header-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, rgba(45, 212, 191, 0.22), rgba(99, 102, 241, 0.18));
  border: 1px solid rgba(45, 212, 191, 0.35);
  box-shadow: 0 0 24px rgba(16, 185, 129, 0.15);
}
#confirmationModal .mic-confirm-header-icon .bi {
  font-size: 1.35rem;
  color: #5eead4;
  filter: drop-shadow(0 0 10px rgba(45, 212, 191, 0.45));
}
#confirmationModal .mic-confirm-header-text {
  flex: 1;
  min-width: 0;
}
#confirmationModal .mic-confirm-kicker {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.95);
  margin-bottom: 0.2rem;
}
.mic-confirm-body {
  margin: 0;
}
.mic-confirm-text {
  margin: 0 0 0.65rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #cbd5e1;
}
.mic-confirm-text:last-child {
  margin-bottom: 0;
}
.mic-confirm-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.mic-confirm-title-wrap .bi {
  font-size: 1.2rem;
  opacity: 0.95;
  filter: drop-shadow(0 0 10px rgba(45, 212, 191, 0.4));
}
#confirmationModal #confirmationModalConfirm {
  font-weight: 600;
  border: none;
  border-radius: 10px;
  padding: 0.5rem 1.1rem;
  color: #042f2e !important;
  background: linear-gradient(135deg, #5eead4 0%, #14b8a6 45%, #0d9488 100%) !important;
  box-shadow: 0 4px 16px rgba(20, 184, 166, 0.35);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
#confirmationModal #confirmationModalConfirm:hover {
  filter: brightness(1.06);
  box-shadow: 0 6px 22px rgba(20, 184, 166, 0.45);
  transform: translateY(-1px);
}
#confirmationModal #confirmationModalCancel {
  font-weight: 500;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.55);
  color: #e2e8f0 !important;
  padding: 0.5rem 1rem;
}
#confirmationModal #confirmationModalCancel:hover {
  background: rgba(30, 41, 59, 0.8);
  border-color: rgba(226, 232, 240, 0.28);
  color: #fff !important;
}
#alertModal #alertModalOk {
  font-weight: 600;
  border-radius: 10px;
  border: none;
  padding: 0.5rem 1.25rem;
  color: #f8fafc !important;
  background: linear-gradient(135deg, rgba(138, 92, 255, 0.95), rgba(99, 102, 241, 0.92)) !important;
  box-shadow: 0 4px 18px rgba(99, 102, 241, 0.35);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
#alertModal #alertModalOk:hover {
  filter: brightness(1.05);
  box-shadow: 0 6px 22px rgba(99, 102, 241, 0.42);
  transform: translateY(-1px);
}

.navbar{
  background:linear-gradient(180deg, rgba(12,18,32,.85), rgba(12,18,32,.35)) !important;
  border-bottom:1px solid var(--ink-border); box-shadow:0 6px 20px rgba(0,0,0,.25);
  max-width: 100%;
  overflow-x: clip;
}
.navbar .container-fluid { max-width: 100%; min-width: 0; }
#inkDesktopMenu{flex-wrap:nowrap;gap:6px;min-width:0;overflow:visible;}
#inkDesktopMenu .nav-link{font-size:clamp(0.75rem, 1.2vw, 0.84rem);padding:6px 8px;white-space:nowrap;word-break:normal;overflow-wrap:normal;}
.navbar .nav-link{ position:relative; color:var(--ink-txt); }
.navbar .nav-link:not(.dropdown-toggle)::after{
  content:""; position:absolute; left:10%; right:10%; bottom:-6px; height:2px;
  background:linear-gradient(90deg, transparent, var(--ink-accent), transparent); opacity:0; transform:translateY(2px);
  transition:all .25s ease;
}
.navbar .nav-link:not(.dropdown-toggle):hover::after,
.navbar .nav-link:not(.dropdown-toggle):focus::after{ opacity:1; transform:translateY(0); }
.navbar .dropdown-toggle{
  background:none;border:none;cursor:pointer;
}
.navbar .dropdown-toggle::after{
  display:inline-block;content:"";
  margin-left:5px;vertical-align:0.2em;
  border-top:5px solid;border-right:4px solid transparent;border-left:4px solid transparent;
  opacity:0.5;transition:transform .2s,opacity .2s;
}
.navbar .dropdown-toggle:hover::after{opacity:1;}
.navbar .dropdown-toggle[aria-expanded="true"]::after{transform:rotate(180deg);}
.navbar .nav-item.dropdown{position:relative;}
.ink-dropdown{
  position:absolute !important;top:100% !important;left:0 !important;
  z-index:var(--ink-z-navbar-dropdown);
  background:linear-gradient(180deg, rgba(16,20,32,.97), rgba(12,16,28,.98)) !important;
  border:1px solid rgba(138,92,255,.2) !important;
  border-radius:12px !important;
  box-shadow:0 12px 36px rgba(0,0,0,.5), 0 0 20px rgba(138,92,255,.1) !important;
  padding:6px !important;min-width:min(200px,90vw);
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
  margin-top:4px !important;
}
.ink-dropdown .dropdown-item{
  color:rgba(233,239,255,.85);font-size:0.84rem;font-weight:500;
  padding:8px 14px;border-radius:8px;transition:all .15s;
}
.ink-dropdown .dropdown-item:hover,.ink-dropdown .dropdown-item:focus{
  background:rgba(138,92,255,.12);color:#fff;
}
.ink-dropdown .dropdown-item i{
  color:rgba(138,92,255,.6);font-size:0.85rem;width:18px;text-align:center;
}
.ink-dropdown .dropdown-item:hover i{color:rgba(138,92,255,.9);}

.btn{ border-radius:999px !important; border:1px solid var(--ink-border);
  box-shadow:0 8px 18px rgba(0,0,0,.25); transition:transform .15s ease, box-shadow .15s ease, background .2s ease;
  min-height:42px;
}
.btn:hover,.btn:focus{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.28), 0 0 18px rgba(138,92,255,.25); }
.btn-primary{ background:linear-gradient(135deg, var(--ink-accent), #6a5cff); color:#fff; border:none; }
.btn-success{ background:linear-gradient(135deg, #34d399, #15b981); color:#fff; border:none; }
.btn-danger{  background:linear-gradient(135deg, #ff5c7c, #ff4671); color:#fff; border:none; }
.btn-warning{ background:linear-gradient(135deg, #ffb84d, #ff9a1f); color:#1b1206; border:none; }
.btn-info{    background:linear-gradient(135deg, #4db6ff, #3aa1ff); color:#06121b; border:none; }

.form-control,.form-select,.input-group-text,.form-check-input{
  background:var(--ink-panel-2); color:var(--ink-txt);
  border:1px solid var(--ink-border); border-radius:12px;
}
.form-control:focus,.form-select:focus{ outline:none; border-color:rgba(138,92,255,.55); box-shadow:var(--ring); }
::placeholder{ color:rgba(255,255,255,.75); opacity:1; }

/* iOS/Android: kein Auto-Zoom beim Fokus auf Inputs (Schrift >= 16px) */
@media screen and (max-width: 820px), (hover: none) and (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="image"]),
  select,
  textarea,
  .form-control,
  .form-select,
  .form-control-sm,
  .input-group-sm .form-control,
  [contenteditable="true"] {
    font-size: 16px !important;
  }
}

input[type="date"],input[type="datetime-local"]{color-scheme:dark;}
input[type="date"]:hover,input[type="datetime-local"]:hover{
  border-color:rgba(138,92,255,.4);box-shadow:0 0 0 1px rgba(138,92,255,.15);
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator{
  cursor:pointer;filter:invert(1) brightness(1.2);opacity:.75;padding:4px;margin-left:8px;
  transition:opacity .2s,filter .2s;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover{
  opacity:1;filter:invert(1) brightness(1.5);
}
input[type="date"]:focus,input[type="datetime-local"]:focus{
  border-color:rgba(138,92,255,.55);box-shadow:var(--ring),0 0 14px rgba(138,92,255,.2);outline:none;
}
input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field,
input[type="datetime-local"]::-webkit-datetime-edit-text,
input[type="datetime-local"]::-webkit-datetime-edit-month-field,
input[type="datetime-local"]::-webkit-datetime-edit-day-field,
input[type="datetime-local"]::-webkit-datetime-edit-year-field,
input[type="datetime-local"]::-webkit-datetime-edit-hour-field,
input[type="datetime-local"]::-webkit-datetime-edit-minute-field{
  color:var(--ink-txt);padding:2px;
}
input[type="date"]::-webkit-datetime-edit-month-field:focus,
input[type="date"]::-webkit-datetime-edit-day-field:focus,
input[type="date"]::-webkit-datetime-edit-year-field:focus,
input[type="datetime-local"]::-webkit-datetime-edit-month-field:focus,
input[type="datetime-local"]::-webkit-datetime-edit-day-field:focus,
input[type="datetime-local"]::-webkit-datetime-edit-year-field:focus,
input[type="datetime-local"]::-webkit-datetime-edit-hour-field:focus,
input[type="datetime-local"]::-webkit-datetime-edit-minute-field:focus{
  background:rgba(138,92,255,.2);color:#c4b5fd;border-radius:4px;
}

.table{ --bs-table-bg:transparent; --bs-table-color:var(--ink-txt); border-color:var(--ink-border); }
.table thead th{ background:linear-gradient(180deg, rgba(138,92,255,.08), rgba(138,92,255,0)); color:var(--ink-txt); }
.table tbody tr:hover{ background:linear-gradient(90deg, rgba(138,92,255,.06), rgba(29,209,161,.05)); }

.badge{
  padding:.5rem .7rem; border-radius:999px; border:1px solid var(--ink-border);
  background:linear-gradient(135deg, rgba(138,92,255,.25), rgba(29,209,161,.18));
  box-shadow:inset 0 0 10px rgba(255,255,255,.04), 0 0 14px rgba(138,92,255,.28);
}

.alert{ border-radius:14px; border:1px solid var(--ink-border); }
.alert-primary{ background:rgba(138,92,255,.18); color:var(--ink-txt); }
.alert-success{ background:rgba(52,211,153,.18); color:var(--ink-txt); }
.alert-danger{  background:rgba(255,92,124,.20); color:var(--ink-txt); }
.alert-warning{ background:rgba(255,184,77,.20); color:var(--ink-txt); }

.details-card{ background:linear-gradient(180deg, var(--ink-panel), var(--ink-panel-2)); border:1px solid var(--ink-border); border-radius:16px; }
.wrap{ max-width:min(1180px,98vw); margin:clamp(10px, 2vw, 28px) auto; padding:0 var(--space-1); }
/* Abstand Hauptblock unter Navbar (auch wenn Seiten-CSS margin:0 auto setzt) */
body:not(.page-messages) .wrap,
body:not(.page-messages) main.wrap{
  padding-top:var(--ink-wrap-top-gap);
}
/* Leichter Rand im Hauptblock; funktionaler Abstand: .ink-bottom-ui-spacer + scroll-padding */
body:not(.page-messages) .wrap,
body:not(.page-messages) main.wrap,
body:not(.page-messages) .ad-page,
body:not(.page-messages) main.page-wrap,
body:not(.page-messages) main.sfin-page-shell .sfin-wrap,
body:not(.page-messages) .sd-page,
body.page-chat-inbox .wrap {
  padding-bottom: calc(clamp(16px, 3vw, 36px) + env(safe-area-inset-bottom, 0px));
}
/* Flex-Sticky-Footer: main wächst, Footer volle Breite am Seitenende (ohne 100vh-Überlappung) */
body:not(.page-messages) > main.ad-page,
body:not(.page-messages) > main.page-wrap,
body:not(.page-messages) > main.sfin-page-shell {
  flex: 1 0 auto;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
}
body:not(.page-messages) > footer.ic-footer {
  flex-shrink: 0;
  align-self: stretch;
  width: 100%;
  max-width: none;
  margin-top: auto;
}
footer.ic-footer{ margin-top:auto; }
/* Leaflet fixes in Kombination mit Bootstrap */
.leaflet-container { width:100%; height:100%; font: inherit; }
.leaflet-container img { max-width: none !important; }
.leaflet-pane, .leaflet-top, .leaflet-bottom { z-index: var(--ink-z-local-10,10); }
.map-card { position: relative; height: clamp(200px, 28vh, 360px); border-radius: 16px; overflow: hidden; }
.map-card--small { height: clamp(160px, 20vh, 240px); }
.map-card--tall { height: clamp(280px, 35vh, 420px); }
.map-embed { position:absolute; inset:0; }

/* ─── Global Scrollbar ─── */
*{scrollbar-width:thin;scrollbar-color:rgba(138,92,255,.45) rgba(12,18,32,.3);}
::-webkit-scrollbar{width:7px;height:7px;}
::-webkit-scrollbar-track{background:rgba(12,18,32,.3);border-radius:8px;}
::-webkit-scrollbar-thumb{background:rgba(138,92,255,.4);border-radius:8px;border:1px solid rgba(12,18,32,.4);}
::-webkit-scrollbar-thumb:hover{background:rgba(138,92,255,.65);}
::-webkit-scrollbar-corner{background:transparent;}

/* ─── Global Responsive Safety Net ─── */

.container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl, .container-fluid {
  overflow-x: clip;
}
.container-fluid { max-width: 100%; }
.wrap, main.wrap,
.mat-wrap, .fin-wrap, .ast-wrap, .feed-wrap, .inbox-wrap,
.page-wrap, .studio-wrap, .form-wrap {
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
}

.offcanvas { max-width: 100vw; }
.dropdown-menu { max-width: min(92vw, 420px); }
.offcanvas-backdrop-fallback { inset: 0 !important; }

@media (max-width: 991.98px){
  html, body { overflow-x: clip !important; }
  main { padding: var(--space-1) !important; }
  .wrap {
    padding-left: var(--space-1) !important;
    padding-right: var(--space-1) !important;
  }
  body:not(.page-messages) .wrap,
  body:not(.page-messages) main.wrap{
    margin-top:clamp(16px, 3vh, 36px) !important;
    padding-top:clamp(12px, 2vw, 20px) !important;
  }
  body:not(.page-messages) .ad-page,
  body:not(.page-messages) main.page-wrap,
  body:not(.page-messages) main.sfin-page-shell .sfin-wrap,
  body:not(.page-messages) .sd-page {
    padding-bottom: calc(clamp(12px, 3vw, 28px) + env(safe-area-inset-bottom, 0px)) !important;
  }

  .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl, .container-fluid {
    padding-left: var(--space-1) !important;
    padding-right: var(--space-1) !important;
  }

  .btn { white-space: normal; }
}

@media (max-width: 576px){
  .btn { min-height: 40px; }
  .badge { font-size: .75rem; }
}

/* ─── Project-wide responsive baseline ─── */
:root{
  /* Breakpoints (min-width) */
  --bp-xs: 320px;
  --bp-sm-min: 360px;
  --bp-375: 375px;
  --bp-390: 390px;
  --bp-430: 430px;
  --bp-md: 768px;
  --bp-lg: 992px;
  --bp-xl: 1024px;
  --bp-1280: 1280px;
  --bp-1440: 1440px;
  --bp-1920: 1920px;
  /* Legacy aliases */
  --bp-sm: 576px;
}

/* Robust box-sizing for all elements */
*, *::before, *::after { box-sizing: border-box !important; }

/* Media: responsive by default */
img, picture, video {
  max-width: 100%;
  height: auto;
}
svg, canvas, iframe {
  max-width: 100%;
}

/* Safe text wrapping: prevent overflow from long words/URLs */
p, span, td, th, label, .form-control, .badge, .btn {
  overflow-wrap: break-word;
  word-wrap: break-word;
}
input, textarea, [contenteditable] {
  overflow-wrap: break-word;
}

/* Container utilities: responsive, centered */
.rsp-container {
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(12px, 3vw, 24px);
  padding-right: clamp(12px, 3vw, 24px);
}
.rsp-container--narrow { max-width: 640px; }
.rsp-container--content { max-width: 900px; }
.rsp-container--wide { max-width: 1280px; }

/* Modals: fluid responsive für alle Breiten */
.modal-dialog { max-width: min(96vw, 640px); margin: 0.5rem auto; }
.modal-dialog.modal-lg { max-width: min(94vw, 800px); }
@media (min-width: 768px) {
  .modal-dialog.modal-lg { max-width: min(90vw, 800px); }
}
@media (min-width: 1920px) {
  .modal-dialog.modal-lg { max-width: min(85vw, 1000px); }
}
.modal-content { max-width: 100%; }
.modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.modal-footer { flex-wrap: wrap; gap: 0.5rem; }

/* Horizontal overflow protection for typical wrappers */
[class*="wrap"], [class*="container"] {
  min-width: 0;
}

/* Projektweit: Filter-Panels & Grids (Mobile/Desktop) */
[class*="filters-panel"],
[class*="filter-panel"] {
  width: 100%;
  max-width: min(1500px, 100%);
  box-sizing: border-box;
}
[class*="filter-grid"] {
  display: grid;
  gap: 10px;
}
@media (max-width: 768px) {
  [class*="filter-grid"] {
    grid-template-columns: 1fr !important;
  }
}
/* Toolbars mit Buttons: kein Überlappen auf Mobile */
[class*="filters-toolbar"],
[class*="filter-toolbar"],
[class*="filter-toggle"],
[class*="page-header"] {
  flex-wrap: wrap;
  gap: 8px;
}
/* Checkboxen/Labels: nicht abschneiden auf Mobile */
@media (max-width: 576px) {
  .service-checkbox-label,
  .event-type-label,
  [class*="filter-section"] label,
  [class*="filter-item"] label {
    white-space: normal !important;
    overflow-wrap: break-word;
    min-width: 0;
  }
}

.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Touch-friendly defaults */
a, button, .btn, [role="button"] {
  touch-action: manipulation;
}

@media (max-width: 991.98px){
  .wrap, [class*="wrap"]:not(.ea-wrap):not(.mfa-wrap):not(.setup-wrap) {
    max-width: 100% !important;
  }

  .card {
    border-radius: 16px;
  }

  .page-header,
  [class*="page-header"] {
    gap: 10px;
  }
}

@media (max-width: 767.98px){
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  main {
    padding-top: 12px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-bottom: 0 !important;
  }

  body:not(.page-messages) main.ad-page,
  body:not(.page-messages) main.page-wrap,
  body:not(.page-messages) main.sfin-page-shell .sfin-wrap,
  body:not(.page-messages) main.sd-page {
    padding-bottom: calc(clamp(12px, 3vw, 28px) + env(safe-area-inset-bottom, 0px)) !important;
  }

  .wrap, [class*="wrap"]:not(.ea-wrap):not(.mfa-wrap):not(.setup-wrap) {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .page-header,
  [class*="page-header"] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .stats-grid,
  [class*="stats-grid"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  /* Nur horizontale Filter-Chips, NICHT .filters-panel */
  .filter-bar,
  .sub-filters,
  .filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 4px;
    min-width: 0;
    max-width: 100%;
  }

  .filter-bar > *,
  .sub-filters > *,
  .filter-chips > * {
    flex: 0 1 auto;
    min-width: 0;
  }

  .pagination,
  [class*="pagination"] {
    gap: 6px;
  }

  .modal-dialog { max-width: min(96vw, 640px) !important; margin: 0.5rem auto !important; }
  .modal-content { max-width: 100% !important; }
  .modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .modal-footer { flex-wrap: wrap; gap: 0.5rem; }

  .btn,
  button {
    min-height: 40px;
  }

  /* Carousel-Punkte: globale Touch-Mindesthöhe nicht anwenden (sonst ~9×40px-Ovale) */
  .carousel-indicators button,
  .carousel-indicators [data-bs-target] {
    min-height: unset;
    min-width: unset;
    padding: 0;
    box-sizing: border-box;
  }
}

@media (max-width: 575.98px){
  .stats-grid,
  [class*="stats-grid"] {
    grid-template-columns: 1fr;
  }

  .card {
    padding: 14px !important;
  }

  .table-wrap {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Stack tables on mobile when cells provide data labels (nicht .compact-mobile-table) */
@media (max-width: 767.98px){
  @supports selector(table:has(td[data-label])) {
    table:has(td[data-label]):not(.compact-mobile-table) {
      min-width: 0 !important;
      border-collapse: separate;
      border-spacing: 0 10px;
    }

    table:has(td[data-label]):not(.compact-mobile-table) thead {
      display: none !important;
    }

    table:has(td[data-label]):not(.compact-mobile-table) tbody,
    table:has(td[data-label]):not(.compact-mobile-table) tbody tr,
    table:has(td[data-label]):not(.compact-mobile-table) td {
      display: block;
      width: 100%;
    }

    table:has(td[data-label]):not(.compact-mobile-table) tbody tr {
      background: rgba(16,22,36,.45);
      border: 1px solid var(--ink-border);
      border-radius: 14px;
      padding: 10px 12px;
      margin-bottom: 10px;
    }

    table:has(td[data-label]):not(.compact-mobile-table) td {
      border-bottom: 0 !important;
      padding: 7px 0 !important;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
      font-size: .82rem;
    }

    table:has(td[data-label]):not(.compact-mobile-table) td::before {
      content: attr(data-label);
      color: var(--ink-muted);
      font-size: .72rem;
      text-transform: uppercase;
      letter-spacing: .3px;
      flex: 0 0 106px;
    }

    /*
     * Admin compact-mobile: echte Tabelle + horizontaler Scroll (Benutzer, Studios, Supporter).
     */
    .table-wrapper.compact-mobile table.compact-mobile-table {
      width: max-content !important;
      border-collapse: collapse !important;
      border-spacing: 0 !important;
    }
    .table-wrapper.compact-mobile table.compact-mobile-table.users-table {
      min-width: 1320px !important;
    }
    .table-wrapper.compact-mobile table.compact-mobile-table.studios-table {
      min-width: 1280px !important;
    }
    .table-wrapper.compact-mobile table.compact-mobile-table.supporters-table {
      min-width: 1080px !important;
    }
    .table-wrapper.compact-mobile table.compact-mobile-table thead {
      display: table-header-group !important;
    }
    .table-wrapper.compact-mobile table.compact-mobile-table tbody {
      display: table-row-group !important;
      width: auto !important;
    }
    .table-wrapper.compact-mobile table.compact-mobile-table thead tr,
    .table-wrapper.compact-mobile table.compact-mobile-table tbody tr {
      display: table-row !important;
      width: auto !important;
      background: transparent !important;
      border: none !important;
      border-radius: 0 !important;
      padding: 0 !important;
      margin: 0 !important;
    }
    .table-wrapper.compact-mobile table.compact-mobile-table thead th,
    .table-wrapper.compact-mobile table.compact-mobile-table tbody td {
      display: table-cell !important;
      width: auto !important;
      max-width: none !important;
      white-space: nowrap !important;
      word-break: normal !important;
      border-bottom: 1px solid var(--ink-border) !important;
      padding: 8px 6px !important;
      justify-content: initial !important;
      align-items: initial !important;
      gap: initial !important;
      font-size: inherit;
    }
    .table-wrapper.compact-mobile table.compact-mobile-table.users-table tbody td[data-label="Nutzer-Nr."],
    .table-wrapper.compact-mobile table.compact-mobile-table.studios-table tbody td[data-label="Rechtliches"],
    .table-wrapper.compact-mobile table.compact-mobile-table.studios-table tbody td[data-label="Adresse"] {
      white-space: normal !important;
    }
    .table-wrapper.compact-mobile table.compact-mobile-table thead th::before,
    .table-wrapper.compact-mobile table.compact-mobile-table tbody td::before {
      content: none !important;
      display: none !important;
    }

    /* Gleiches Scroll-Verhalten wie admin_users (≤992): ein Port am Wrapper */
    .table-wrapper.compact-mobile {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-x: contain;
      min-width: 0;
      max-width: 100%;
    }
    .table-wrapper.compact-mobile .table-responsive {
      overflow-x: visible !important;
      width: max-content;
      min-width: 100%;
      max-width: none;
    }
  }
}

/* ─── 2K / 4K: fluid scaling für große Displays ─── */
@media (min-width: 1920px) {
  .wrap, [class*="wrap"]:not([class*="filter"]):not(.ea-wrap):not(.mfa-wrap):not(.setup-wrap) { max-width: min(1600px, 92vw) !important; }
  .rsp-container--wide { max-width: min(1600px, 90vw); }
  :root { --space-2: clamp(12px, 1.5vw, 24px); --space-3: clamp(16px, 2vw, 32px); }
}
@media (min-width: 2560px) {
  .wrap, [class*="wrap"]:not([class*="filter"]):not(.ea-wrap):not(.mfa-wrap):not(.setup-wrap) { max-width: min(1800px, 88vw) !important; }
  .rsp-container--wide { max-width: min(1800px, 85vw); }
}
@media (min-width: 3840px) {
  .wrap, [class*="wrap"]:not([class*="filter"]):not(.ea-wrap):not(.mfa-wrap):not(.setup-wrap) { max-width: min(2000px, 85vw) !important; }
  .rsp-container--wide { max-width: min(2000px, 80vw); }
}

/*
 * Custom-Vollbild-Overlays (nicht Bootstrap .modal): Safe Area für viewport-fit=cover.
 * !important: viele Seiten setzen eigenes padding (z. B. Kalender/Dashboard .slot-detail-modal).
 * Bootstrap-.modal bleibt separat oben geregelt.
 */
div.slot-detail-modal,
div.picker-modal,
div.specialty-picker-modal,
div.style-picker-modal,
#img-modal,
.ic-feedback-onboarding-overlay,
.ic-feedback-modal-overlay,
.report-modal-overlay,
.modal-overlay,
.photo-modal-overlay,
.modal-bg,
#impressumRequiredModalOverlay,
#liabilityModalOverlay,
#galleryEditModal,
#micVoucherCameraScanOverlay {
  box-sizing: border-box !important;
  padding-top: max(20px, env(safe-area-inset-top, 0px)) !important;
  padding-right: max(20px, env(safe-area-inset-right, 0px)) !important;
  padding-bottom: max(20px, env(safe-area-inset-bottom, 0px)) !important;
  padding-left: max(20px, env(safe-area-inset-left, 0px)) !important;
}
@media (max-width: 767.98px) {
  div.slot-detail-modal {
    padding-top: max(10px, env(safe-area-inset-top, 0px)) !important;
    padding-right: max(10px, env(safe-area-inset-right, 0px)) !important;
    padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
    padding-left: max(10px, env(safe-area-inset-left, 0px)) !important;
  }
}

/* Hintergrund-Scroll sperren bei offenen Modals (mic_scroll_lock.js, Soft-Lock) */
html.mic-scroll-locked,
body.mic-scroll-locked,
body.modal-open.mic-scroll-locked {
  overflow: hidden !important;
  overscroll-behavior: none;
}
html.mic-scroll-locked--studio-public,
body.studio-public-page.mic-scroll-locked--studio-public {
  overflow: hidden !important;
  overscroll-behavior: none;
}
/* Touch in Modals/Overlays: nicht von html/body blockieren (iOS PWA Hit-Testing) */
html.mic-scroll-locked .modal,
html.mic-scroll-locked .modal-dialog,
html.mic-scroll-locked .modal-content,
html.mic-scroll-locked .modal-body,
html.mic-scroll-locked .picker-modal,
html.mic-scroll-locked .picker-content,
html.mic-scroll-locked .slot-detail-modal,
html.mic-scroll-locked .slot-detail-content,
html.mic-scroll-locked .specialty-picker-modal,
html.mic-scroll-locked .ic-feedback-modal-overlay,
html.mic-scroll-locked .ic-feedback-modal,
html.mic-scroll-locked #inkNavCanvas,
html.mic-scroll-locked .modal-overlay,
html.mic-scroll-locked .modal-bg {
  touch-action: manipulation;
}

/* Pull-to-Refresh (Mobile) — unter fixer Navbar (pull_to_refresh.js) */
body.mic-ptr-active,
body.mic-ptr-refreshing {
  padding-top: calc(var(--ink-navbar-stack, calc(62px + env(safe-area-inset-top, 0px))) + var(--mic-ptr-extra, 0px)) !important;
}
body.mic-ptr-dragging,
body.mic-ptr-dragging #mic-ptr-indicator {
  transition: none !important;
}
body.mic-ptr-snap {
  transition: padding-top 0.24s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}
#mic-ptr-indicator {
  position: fixed;
  top: var(--ink-navbar-stack, calc(62px + env(safe-area-inset-top, 0px)));
  left: 0;
  right: 0;
  height: 0;
  overflow: hidden;
  z-index: 1029;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(12, 18, 32, 0.45), transparent);
  box-sizing: border-box;
  will-change: height;
  contain: layout style paint;
}
#mic-ptr-indicator.mic-ptr-dragging {
  will-change: height;
}
#mic-ptr-indicator.mic-ptr-snap {
  transition: height 0.24s cubic-bezier(0.22, 0.61, 0.36, 1);
}
#mic-ptr-indicator .mic-ptr-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 36px;
  padding: 4px 0;
}
#mic-ptr-indicator .mic-ptr-icon-i {
  font-size: 1.35rem;
  line-height: 1;
  color: var(--ink-muted, #9aa3b2);
  transform-origin: center center;
  will-change: transform;
}
#mic-ptr-indicator.mic-ptr-dragging .mic-ptr-icon-i {
  transition: color 0.12s ease;
}
#mic-ptr-indicator.mic-ptr-ready .mic-ptr-icon-i {
  color: var(--ink-accent-2, #1dd1a1);
}
#mic-ptr-indicator.mic-ptr-refreshing .mic-ptr-icon-i {
  color: var(--ink-accent, #8a5cff);
  transition: none;
  animation: mic-ptr-spin 0.65s linear infinite;
}
@keyframes mic-ptr-spin {
  to { transform: rotate(360deg); }
}
@media (min-width: 769px) {
  #mic-ptr-indicator { display: none !important; }
  body.mic-ptr-active,
  body.mic-ptr-refreshing,
  body.mic-ptr-dragging,
  body.mic-ptr-snap {
    padding-top: var(--ink-navbar-stack, calc(62px + env(safe-area-inset-top, 0px))) !important;
    transition: none !important;
  }
}

/* Cookie-Consent-Banner */
#cookieBanner.ic-cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--ink-z-popover-max, 1200);
  display: flex;
  justify-content: center;
  padding: 12px 16px max(16px, env(safe-area-inset-bottom, 0px));
  font-size: 14px;
  color: var(--ink-txt, #e9efff);
  animation: ic-cookie-slide-up 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: auto;
}

#cookieBanner .ic-cookie-banner__inner {
  width: fit-content;
  max-width: min(1100px, calc(100vw - 32px));
  margin: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 16px 20px;
  padding: 16px 18px;
  background: var(--ink-panel, rgba(12, 18, 32, 0.92));
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  border: 1px solid var(--ink-border, rgba(120, 130, 170, 0.22));
  border-radius: 16px 16px 0 0;
  box-shadow:
    0 -8px 40px rgba(0, 0, 0, 0.45),
    0 0 28px rgba(138, 92, 255, 0.12);
}

#cookieBanner .ic-cookie-banner__head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

#cookieBanner .ic-cookie-banner__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(138, 92, 255, 0.25), rgba(29, 209, 161, 0.12));
  border: 1px solid rgba(138, 92, 255, 0.35);
  font-size: 1.25rem;
  color: var(--ink-accent, #8a5cff);
}

#cookieBanner .ic-cookie-banner__body {
  flex: 0 1 auto;
  min-width: 0;
  text-align: left;
}

#cookieBanner .ic-cookie-banner__title {
  margin: 0 0 4px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-txt);
}

#cookieBanner .ic-cookie-banner__text {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ink-muted, #9aa3b2);
}

#cookieBanner .ic-cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  flex-shrink: 0;
}

#cookieBanner .ic-cookie-banner__btn-accept {
  background: linear-gradient(135deg, var(--ink-accent, #8a5cff), #6d3fe0);
  border: none;
  color: #fff;
  font-weight: 600;
  padding: 0.45rem 1.1rem;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(138, 92, 255, 0.35);
}

#cookieBanner .ic-cookie-banner__btn-accept:hover,
#cookieBanner .ic-cookie-banner__btn-accept:focus {
  background: linear-gradient(135deg, #9b6fff, #7d4ff0);
  color: #fff;
  box-shadow: 0 6px 18px rgba(138, 92, 255, 0.45);
}

#cookieBanner .ic-cookie-banner__btn-decline {
  border-color: var(--ink-border);
  color: var(--ink-muted);
  border-radius: 10px;
}

#cookieBanner .ic-cookie-banner__btn-decline:hover {
  color: var(--ink-txt);
  border-color: rgba(120, 130, 170, 0.45);
  background: rgba(255, 255, 255, 0.06);
}

#cookieBanner .ic-cookie-banner__link {
  font-size: 0.8125rem;
  color: var(--ink-accent, #8a5cff);
  text-decoration: none;
  white-space: nowrap;
}

#cookieBanner .ic-cookie-banner__link:hover {
  color: var(--ink-accent-2, #1dd1a1);
  text-decoration: underline;
}

@keyframes ic-cookie-slide-up {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  #cookieBanner.ic-cookie-banner {
    animation: none;
  }
}

@media (max-width: 576px) {
  #cookieBanner.ic-cookie-banner {
    padding: 8px 10px max(12px, env(safe-area-inset-bottom, 0px));
  }

  #cookieBanner .ic-cookie-banner__inner {
    width: 100%;
    max-width: 100%;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: stretch;
    border-radius: 14px 14px 0 0;
    padding: 10px 12px;
    gap: 8px;
  }

  #cookieBanner .ic-cookie-banner__head {
    gap: 10px;
  }

  #cookieBanner .ic-cookie-banner__body {
    flex: 0 0 auto;
  }

  #cookieBanner .ic-cookie-banner__icon {
    width: 32px;
    height: 32px;
    font-size: 1rem;
  }

  #cookieBanner .ic-cookie-banner__title {
    margin: 0;
    font-size: 0.875rem;
  }

  #cookieBanner .ic-cookie-banner__text {
    font-size: 0.75rem;
    line-height: 1.35;
  }

  #cookieBanner .ic-cookie-banner__actions {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    gap: 6px;
  }

  #cookieBanner .ic-cookie-banner__actions .btn {
    flex: 1 1 calc(50% - 4px);
    width: auto !important;
    margin: 0 !important;
    padding: 0.35rem 0.5rem;
    font-size: 0.8125rem;
  }

  #cookieBanner .ic-cookie-banner__link {
    flex: 1 1 100%;
    text-align: center;
    display: block;
    padding-top: 2px;
    font-size: 0.75rem;
    white-space: normal;
  }
}

/* Events-Carousel: feste Kachelhöhe + interner Scroll (Studio-Public + Artist-Profil) */
.mic-events-carousel {
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
.mic-events-carousel .carousel-inner {
  height: var(--mic-events-carousel-height, auto);
  max-height: var(--mic-events-carousel-max-height, 480px);
  overflow: hidden;
}
.mic-events-carousel .carousel-item {
  height: var(--mic-events-carousel-height, auto);
  max-height: var(--mic-events-carousel-max-height, 480px);
  overflow: hidden;
}
.mic-events-carousel .event-card {
  margin-bottom: 0 !important;
  height: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mic-events-carousel .event-card > .d-flex {
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  width: 100%;
}
.mic-events-carousel .event-card .flex-grow-1 {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.mic-events-carousel .mic-profile-event-card > .card-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.mic-events-carousel .mic-profile-event-card > .card-body > .d-flex {
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  width: 100%;
}
.mic-events-carousel .mic-studio-wannados-block {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.mic-events-carousel .mic-studio-wannados-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-right: 2px;
}

/* Wanna-Dos im Carousel: natürliche Slide-Höhe, Scroll nur im Kachel-Grid */
.mic-events-carousel.mic-events-carousel--wannados {
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
.mic-events-carousel.mic-events-carousel--wannados .carousel-inner {
  height: auto !important;
  max-height: none;
  overflow: hidden;
}
.mic-events-carousel.mic-events-carousel--wannados .carousel-item {
  height: auto !important;
  max-height: none;
  overflow: hidden;
}
.mic-events-carousel.mic-events-carousel--wannados .event-card,
.mic-events-carousel.mic-events-carousel--wannados .mic-profile-event-card > .card-body,
.mic-events-carousel.mic-events-carousel--wannados .mic-profile-event-card > .card-body > .d-flex,
.mic-events-carousel.mic-events-carousel--wannados .event-card .flex-grow-1 {
  height: auto;
  max-height: none;
  overflow: hidden;
}
.mic-events-carousel.mic-events-carousel--wannados .mic-studio-wannados-block {
  flex: 0 0 auto;
  min-height: 0;
}
.mic-events-carousel.mic-events-carousel--wannados .mic-studio-wannados-scroll {
  flex: 0 1 auto;
  min-height: min(calc(var(--mic-wannado-tile-h, 318px) + 1.25rem), 52vh);
  max-height: min(calc(var(--mic-wannado-tile-h, 318px) * 2.25 + 2rem), 72vh);
}

#artistSubnavContent .mic-profile-event-card .mic-studio-wannados-scroll,
.studio-public-event-card .mic-studio-wannados-scroll {
  min-height: min(calc(var(--mic-wannado-tile-h, 318px) + 0.5rem), 48vh);
  max-height: min(calc(var(--mic-wannado-tile-h, 318px) * 2.5 + 2rem), 68vh);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-right: 2px;
}
#artistSubnavContent .mic-events-carousel.mic-events-carousel--wannados .mic-studio-wannados-scroll {
  min-height: min(calc(var(--mic-wannado-tile-h, 318px) + 1rem), 55vh);
  max-height: min(calc(var(--mic-wannado-tile-h, 318px) * 2.5 + 2.5rem), 78vh);
}
.mic-events-carousel-indicators {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0.85rem 0 0 !important;
  padding: 0 !important;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  z-index: 2;
}
.mic-events-carousel-indicators [data-bs-target] {
  width: 9px;
  height: 9px;
  min-width: 9px;
  min-height: 9px;
  padding: 0;
  border-radius: 50%;
  border: none;
  margin: 0;
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 0.22);
  opacity: 0.75;
  transition: transform 0.22s ease, background 0.22s ease, box-shadow 0.22s ease, opacity 0.22s ease;
}
.mic-events-carousel-indicators [data-bs-target].active {
  opacity: 1;
  background: linear-gradient(135deg, #8a5cff, #1dd1a1);
  transform: scale(1.28);
  box-shadow: 0 0 14px rgba(138, 92, 255, 0.45);
}

/* Wanna-Do-Kacheln: feste Größe (Profil + Studio-Public) – Footer: Badge + 2 Meta-Zeilen + optional CTA */
#artistSubnavContent,
.studio-public-event-card {
  --mic-wannado-tile-h: 318px;
  --mic-wannado-visual-h: 158px;
  --mic-wannado-footer-min-h: 148px;
}

.mic-wannado-tiles-row > [class*='col-'] {
  display: flex;
}

/* Tablet/Desktop: breitere Kacheln (max. 3 pro Zeile statt 4 schmale Spalten) */
@media (min-width: 576px) and (max-width: 991.98px) {
  .mic-wannado-tiles-row > .col-sm-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
@media (min-width: 992px) {
  .mic-wannado-tiles-row > .col-lg-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
}

.mic-wannado-tile-fixed.studio-wannado-tile,
#artistSubnavContent .wanna-do-card.studio-wannado-tile.mic-wannado-tile-fixed {
  width: 100%;
  height: var(--mic-wannado-tile-h) !important;
  min-height: var(--mic-wannado-tile-h) !important;
  max-height: var(--mic-wannado-tile-h) !important;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(165deg, rgba(26, 28, 36, 0.95), rgba(14, 16, 24, 0.98));
  border: 1px solid rgba(138, 92, 255, 0.28);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.mic-wannado-tile-fixed .studio-wannado-tile-visual {
  position: relative;
  flex: 0 0 var(--mic-wannado-visual-h) !important;
  height: var(--mic-wannado-visual-h) !important;
  min-height: var(--mic-wannado-visual-h) !important;
  max-height: var(--mic-wannado-visual-h) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.15));
  cursor: pointer;
  text-align: inherit;
  color: inherit;
}

.mic-wannado-tile-fixed .studio-wannado-tile-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, rgba(138, 92, 255, 0.14), transparent 65%);
  pointer-events: none;
}

.mic-wannado-tile-fixed .studio-wannado-tile-img {
  width: 100%;
  height: 100%;
  max-height: var(--mic-wannado-visual-h);
  object-fit: contain;
  padding: 8px;
  position: relative;
  z-index: 1;
}

.mic-wannado-tile-fixed .studio-wannado-tile-footer {
  flex: 1 1 auto;
  min-height: var(--mic-wannado-footer-min-h);
  max-height: none;
  padding: 0.5rem 0.6rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: linear-gradient(180deg, rgba(22, 24, 32, 0.98), rgba(12, 14, 20, 1));
  border-top: 1px solid rgba(138, 92, 255, 0.18);
}

.mic-wannado-tile-fixed .studio-wannado-tile-cta {
  flex-shrink: 0;
  margin-top: auto;
  padding-top: 0.35rem;
}

.mic-wannado-tile-fixed .studio-wannado-pos-badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.25rem 0.45rem;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(138, 92, 255, 0.28), rgba(138, 92, 255, 0.14));
  color: #b9a3ff;
  border: 1px solid rgba(138, 92, 255, 0.35);
}

.mic-wannado-meta-block {
  min-height: 44px;
  flex-shrink: 0;
}

.mic-wannado-meta-icon {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 6px;
  flex-shrink: 0;
  font-size: 0.75rem;
}

.mic-wannado-meta-icon--size {
  background: linear-gradient(135deg, rgba(138, 92, 255, 0.2), rgba(138, 92, 255, 0.1));
  border: 1px solid rgba(138, 92, 255, 0.3);
  color: #8a5cff;
}

.mic-wannado-meta-icon--price {
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.25), rgba(255, 193, 7, 0.15));
  border: 1px solid rgba(255, 193, 7, 0.4);
  color: #ffc107;
  font-weight: 700;
}

.mic-wannado-meta-size .mic-wannado-meta-text {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mic-wannado-meta-price .mic-wannado-meta-text {
  color: #ffc107;
  font-size: 0.85rem;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mic-wannado-meta-spacer {
  height: 16px;
}

.studio-wannado-heading {
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0;
}

/* Wanna-Do-Kacheln: gemeinsame Basis (Profil + Studio – vorher nur studio_public.html) */
.studio-wannado-tile {
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.mic-wannado-tile-fixed.studio-wannado-tile:hover {
  transform: translateY(-3px);
  border-color: rgba(138, 92, 255, 0.48);
  box-shadow: 0 12px 32px rgba(138, 92, 255, 0.18), 0 4px 16px rgba(0, 0, 0, 0.4);
}
button.studio-wannado-tile-visual {
  cursor: pointer;
}
button.studio-wannado-tile-visual:focus-visible {
  outline: 2px solid rgba(138, 92, 255, 0.75);
  outline-offset: 2px;
}
.studio-wannado-tile-visual .studio-wannado-zoom-hint {
  position: absolute;
  bottom: 6px;
  right: 6px;
  z-index: 3;
  font-size: 0.65rem;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.15);
  pointer-events: none;
}
.studio-wannado-taken-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.65));
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
  z-index: 4;
}
.studio-wannado-taken-pill {
  background: linear-gradient(135deg, #ffc107, #ffb300);
  border-radius: 8px;
  padding: 8px 14px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(255, 193, 7, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.studio-wannado-taken-pill i {
  color: #000;
  font-size: 1.1rem;
}
.studio-wannado-taken-pill span {
  color: #000;
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  display: block;
}
.studio-wannado-tile-footer {
  position: relative;
  z-index: 5;
  pointer-events: auto;
}
.studio-wannado-tile-cta {
  position: relative;
  z-index: 6;
}
.studio-wannado-tile-action {
  position: relative;
  z-index: 6;
  pointer-events: auto !important;
  background: linear-gradient(135deg, rgba(138, 92, 255, 0.42), rgba(233, 76, 90, 0.42)) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(138, 92, 255, 0.22);
  text-decoration: none !important;
}
.studio-wannado-tile-action:hover {
  filter: brightness(1.08);
  color: #fff !important;
}

/* Artist-Profil: Event-Kachel mobil wie studio-public-event-card */
@media (max-width: 767.98px) {
  #artistSubnavContent .mic-profile-event-card {
    background: rgba(18,20,30,.75) !important;
    border: 1px solid rgba(138,92,255,0.2) !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 28px rgba(0,0,0,.35) !important;
  }

  #artistSubnavContent .mic-profile-event-card > .card-body {
    padding: 14px 16px !important;
  }

  /* Wanna-Dos mobil: eine Kachel pro Zeile, volle Breite */
  #artistSubnavContent .mic-profile-event-card .mic-wannado-tiles-row > [class*='col-'],
  .studio-public-event-card .mic-wannado-tiles-row > [class*='col-'] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  #artistSubnavContent,
  .studio-public-event-card {
    --mic-wannado-tile-h: 352px;
    --mic-wannado-visual-h: 172px;
    --mic-wannado-footer-min-h: 168px;
  }

  .mic-wannado-meta-size .mic-wannado-meta-text,
  .mic-wannado-meta-price .mic-wannado-meta-text {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    line-height: 1.25;
    word-break: break-word;
  }

  .mic-wannado-meta-icon {
    width: 22px;
    height: 22px;
    font-size: 0.8rem;
  }

  #artistSubnavContent .mic-profile-event-card .mic-studio-wannados-scroll {
    min-height: min(calc(var(--mic-wannado-tile-h) + 0.75rem), 62vh);
    max-height: min(calc(var(--mic-wannado-tile-h) * 2.75 + 2rem), 82vh);
  }

  #artistSubnavContent .mic-events-carousel.mic-events-carousel--wannados .mic-studio-wannados-scroll {
    min-height: min(calc(var(--mic-wannado-tile-h) + 1.25rem), 65vh);
    max-height: min(calc(var(--mic-wannado-tile-h) * 2.75 + 2.5rem), 85vh);
  }

  .mic-events-carousel:not(.mic-events-carousel--wannados) .carousel-inner,
  .mic-events-carousel:not(.mic-events-carousel--wannados) .carousel-item {
    max-height: min(560px, 68vh);
  }
}