/* bricolage-grotesque-vietnamese-400-normal */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(54dce876d70c8dea2b52.woff2) format('woff2'), url(79fc5de93fe0245b2962.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* bricolage-grotesque-latin-ext-400-normal */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(0170d367bdf4e81d9a3f.woff2) format('woff2'), url(bb16ece1cbc6aa7a4622.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* bricolage-grotesque-latin-400-normal */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(0984ab843035b3a04920.woff2) format('woff2'), url(df66954bbdd03ce96701.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* bricolage-grotesque-vietnamese-600-normal */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(170c54e264f1425b5d5b.woff2) format('woff2'), url(6b4b291add68ffc6a67b.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* bricolage-grotesque-latin-ext-600-normal */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(55d6018fcd6ec213a514.woff2) format('woff2'), url(036071128e83536fb3b8.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* bricolage-grotesque-latin-600-normal */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(6870477745a95b6d3a48.woff2) format('woff2'), url(9e08a302038fbda1b622.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* bricolage-grotesque-vietnamese-700-normal */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(32bf4c5c3dd9c5caeb8a.woff2) format('woff2'), url(67663caf66061019131b.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* bricolage-grotesque-latin-ext-700-normal */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(78be76609c26cd4195a0.woff2) format('woff2'), url(769a6832a0a857d5b281.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* bricolage-grotesque-latin-700-normal */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(5bb1576e03638c613b0b.woff2) format('woff2'), url(72a20a651355f238efca.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* space-mono-vietnamese-400-normal */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(14f1baa9467c9d3dfdf5.woff2) format('woff2'), url(d6f619b1ad461c119ee4.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* space-mono-latin-ext-400-normal */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(b443a026278d222559a4.woff2) format('woff2'), url(57e57c333b1bf3fccf27.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* space-mono-latin-400-normal */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(9f0479b996ad804e7f46.woff2) format('woff2'), url(44f47718c73459b963cd.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* space-mono-vietnamese-700-normal */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(854c9a1dc0e6bdc23b0a.woff2) format('woff2'), url(4635ef2d6b15f7a1ee7c.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* space-mono-latin-ext-700-normal */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(db1d9c64e5ba15176a5e.woff2) format('woff2'), url(a858a947aa5eb2a62bb7.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* space-mono-latin-700-normal */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(e3ffa3c0f42fbe8914df.woff2) format('woff2'), url(6350d49263fef4f675f4.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* ── Variablen ──────────────────────────────────────────────── */
:root {
  --ift-bg:           #0e0e0e;
  --ift-surface:      #161616;
  --ift-card-bg:      #1c1c1c;
  --ift-card-hover:   #252525;
  --ift-accent:       #e94560;
  --ift-text:         #eeeeee;
  --ift-text-muted:   #a8a8a8; /* WCAG-AA: ~7.3:1 auf #0e0e0e (vorher #888888 ~4.48:1, grenzwertig) */
  --ift-border:       rgba(255,255,255,0.07);
  --ift-now-line:     #e94560;
  --ift-header-h:     48px;
  --ift-radius:       6px;
  --ift-font:         system-ui, -apple-system, sans-serif;
  /* Stage-Farbpalette (wird per inline style pro Spalte als --stage-color gesetzt) */
  --stage-0: #e94560;
  --stage-1: #ff7c3e;
  --stage-2: #f5c518;
  --stage-3: #43d9a0;
  --stage-4: #4a9eff;
  --stage-5: #c084fc;
  --stage-color: var(--stage-0);
}

/* ── App-Wrapper ────────────────────────────────────────────── */
.ift-app {
  background: var(--ift-bg);
  color: var(--ift-text);
  font-family: var(--ift-font);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

@media (max-width: 768px) {
  .ift-app { border-radius: 0; }

  /* Full-bleed: aus dem Theme-Content-Padding ausbrechen */
  #ift-root {
    position: relative;
    left: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    width: 100vw;
    background: var(--ift-bg);
    overflow: hidden;
  }
}

/* ── Header ─────────────────────────────────────────────────── */
.ift-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  background: var(--ift-surface);
  border-bottom: 1px solid var(--ift-border);
}

.ift-datepicker {
  background: var(--ift-card-bg);
  color: var(--ift-text);
  border: 1px solid var(--ift-border);
  border-radius: var(--ift-radius);
  padding: 8px 12px;
  font-size: 0.9rem;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s;
}
.ift-datepicker:focus { border-color: var(--ift-accent); }

/* ── Header-Left + Right ────────────────────────────────────── */
.ift-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.ift-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Site-Title als Link */
.ift-title {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ift-text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ift-title:hover { color: var(--ift-accent); }

.ift-back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: rgba(255,255,255,0.08);
  color: var(--ift-text-muted);
  border-radius: 50%;
  text-decoration: none;
  font-size: 1rem;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
}
.ift-back-btn:hover {
  background: rgba(255,255,255,0.16);
  color: var(--ift-text);
}

/* ── Hamburger Button ───────────────────────────────────────── */
.ift-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.08);
  border: none;
  border-radius: var(--ift-radius);
  cursor: pointer;
  padding: 8px;
  flex-shrink: 0;
  transition: background 0.15s;
}
.ift-hamburger:hover { background: rgba(255,255,255,0.16); }
.ift-hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--ift-text-muted);
  border-radius: 2px;
  transition: background 0.15s;
}
.ift-hamburger:hover span { background: var(--ift-text); }

/* ── Hamburger Menu Overlay ─────────────────────────────────── */
.ift-hmenu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 200;
  animation: ift-fade-in 0.15s ease;
}

.ift-hmenu-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 85vw);
  background: var(--ift-surface);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 20px 0 32px;
  animation: ift-slide-from-right 0.22s ease;
  -webkit-overflow-scrolling: touch;
}

@keyframes ift-slide-from-right {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

.ift-hmenu-close {
  align-self: flex-end;
  margin: 0 16px 16px;
  background: rgba(255,255,255,0.08);
  border: none;
  color: var(--ift-text-muted);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}
.ift-hmenu-close:hover { background: rgba(255,255,255,0.16); color: var(--ift-text); }

.ift-hmenu-section { padding: 0; }
.ift-hmenu-section--footer { margin-top: 8px; }

.ift-hmenu-divider {
  height: 1px;
  background: var(--ift-border);
  margin: 12px 16px;
}

.ift-hmenu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ift-hmenu-sub { padding-left: 16px; }

.ift-hmenu-link {
  display: block;
  padding: 13px 24px;
  color: var(--ift-text);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  transition: background 0.15s, color 0.15s;
  border-left: 3px solid transparent;
}
.ift-hmenu-link:hover {
  background: rgba(255,255,255,0.06);
  color: var(--ift-accent);
  border-left-color: var(--ift-accent);
}

.ift-hmenu-list--footer .ift-hmenu-link--footer {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ift-text-muted);
  padding: 10px 24px;
}
.ift-hmenu-list--footer .ift-hmenu-link--footer:hover { color: var(--ift-text); }

/* ── DayNav ──────────────────────────────────────────────────── */
.ift-daynav {
  display:         flex;
  align-items:     center;
  gap:             4px;
  overflow-x:      auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
  -webkit-overflow-scrolling: touch;
}
.ift-daynav::-webkit-scrollbar       { height: 3px; }
.ift-daynav::-webkit-scrollbar-track { background: transparent; }
.ift-daynav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }

.ift-daynav__btn {
  flex-shrink:    0;
  display:        inline-flex;
  align-items:    center;
  min-height:     44px; /* WCAG 2.5.5 */
  background:     transparent;
  color:          var(--ift-text-muted);
  border:         1px solid transparent;
  border-radius:  var(--ift-radius);
  padding:        7px 12px;
  font-size:      0.8rem;
  font-weight:    600;
  letter-spacing: 0.04em;
  white-space:    nowrap;
  cursor:         pointer;
  font-family:    var(--ift-font);
  transition:     background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ift-daynav__btn:hover {
  background:   var(--ift-card-bg);
  color:        var(--ift-text);
  border-color: var(--ift-border);
}
.ift-daynav__btn.is-active {
  background:   var(--ift-accent);
  color:        #fff;
  border-color: var(--ift-accent);
}

/* ── Vergangene Slots ────────────────────────────────────────── */
.ift-event-card--past {
  opacity: 0.35;
}

/* ── States ─────────────────────────────────────────────────── */
.ift-loading,
.ift-error,
.ift-empty {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 48px 24px;
  color: var(--ift-text-muted);
  font-size: 1rem;
}
.ift-error { color: var(--ift-accent); }
.ift-session-expired {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ift-surface);
  border: 1px solid var(--ift-accent);
  color: var(--ift-text);
  padding: 14px 24px;
  border-radius: 8px;
  font-size: 0.95rem;
  z-index: 9999;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  white-space: nowrap;
}

.ift-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--ift-border);
  border-top-color: var(--ift-accent);
  border-radius: 50%;
  animation: ift-spin 0.7s linear infinite;
}
@keyframes ift-spin { to { transform: rotate(360deg); } }

/* ── Timetable Layout ───────────────────────────────────────── */
.ift-timetable-wrapper {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  margin-top: 4px;
  position: relative;
}

/* ── Zoom-Indikator ─────────────────────────────────────────── */
.ift-zoom-indicator {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 8px 4px 10px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.15);
  pointer-events: auto;
  backdrop-filter: blur(4px);
}
.ift-zoom-reset {
  background: rgba(255,255,255,0.15);
  border: none;
  color: #fff;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 0.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.ift-zoom-reset:hover { background: rgba(255,255,255,0.3); }

.ift-scroll-area {
  overflow-y: auto;
  overflow-x: auto;
  height: 100%;
  scrollbar-width: thin;
  scrollbar-color: var(--ift-border) transparent;
}
.ift-scroll-area::-webkit-scrollbar { width: 6px; height: 6px; }
.ift-scroll-area::-webkit-scrollbar-thumb { background: var(--ift-border); border-radius: 3px; }

/* Gemeinsamer Container: Header + Body scrollen zusammen horizontal */
.ift-timetable-inner {
  display: inline-flex;
  flex-direction: column;
  min-width: 100%;
}

/* Stage-Header (sticky oben) */
.ift-stage-headers {
  display: flex;
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--ift-surface);
  border-bottom: 1px solid var(--ift-border);
}

.ift-time-corner {
  flex-shrink: 0;
  height: var(--ift-header-h);
  border-right: 1px solid var(--ift-border);
  /* sticky in beiden Richtungen */
  position: sticky;
  left: 0;
  z-index: 20;
  background: var(--ift-surface);
}

.ift-stage-header {
  flex-shrink: 0;
  height: var(--ift-header-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--ift-text);
  text-align: center;
  border-right: 1px solid var(--ift-border);
  border-bottom: 3px solid var(--stage-color, var(--ift-accent));
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

/* Leere Bühne (heute kein Programm) */
.ift-stage-header--empty {
  opacity: 0.4;
  font-style: italic;
  border-left: 1px dashed var(--ift-border);
}

/* Grid-Body */
.ift-grid-body {
  display: flex;
  position: relative;
}

/* Zeitleiste (sticky links) */
.ift-time-col {
  flex-shrink: 0;
  position: sticky;
  left: 0;
  background: var(--ift-surface);
  border-right: 1px solid var(--ift-border);
  z-index: 15;
}

.ift-hour-label {
  position: absolute;
  right: 8px;
  font-size: 0.72rem;
  color: var(--ift-text-muted);
  white-space: nowrap;
  transform: translateY(-50%);
  user-select: none;
}

/* Bühnen-Spalte */
.ift-stage-col {
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  pointer-events: none;
  border-right: 1px solid var(--ift-border);
  /* Stundengitter als Hintergrund (120px = 60min × 2px/min) */
  background-image: repeating-linear-gradient(
    180deg,
    transparent,
    transparent calc(120px - 1px),
    var(--ift-border) calc(120px - 1px),
    var(--ift-border) 120px
  );
}

.ift-stage-col--empty {
  border-left: 1px dashed var(--ift-border);
  opacity: 0.45;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ift-empty-stage-hint {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-size: 0.72rem;
  color: var(--ift-accent);
  text-align: center;
  padding: 12px 4px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
}

.ift-empty-stage-hint--none {
  color: var(--ift-text-muted);
}

.ift-empty-stage-arrow {
  font-size: 0.9rem;
}

.ift-hour-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--ift-border);
  opacity: 0.5;
  pointer-events: none;
}

/* Jetzt-Linie (horizontal, über alle Bühnen) */
.ift-now-line-h {
  position: absolute;
  right: 0;
  height: 2px;
  background: var(--ift-now-line);
  box-shadow: 0 0 8px 2px rgba(233,69,96,0.6);
  z-index: 6;
  pointer-events: none;
}
.ift-now-line-h::before {
  content: attr(data-label);
  position: absolute;
  top: -9px;
  background: var(--ift-accent);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  white-space: nowrap;
  animation: ift-jetzt-bounce 6s ease-in-out infinite alternate;
}

@keyframes ift-jetzt-bounce {
  from { left: 4px; }
  to   { left: calc(100% - 46px); }
}

/* ── Artist-Modal ───────────────────────────────────────────── */
.ift-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  animation: ift-fade-in 0.15s ease;
}

@keyframes ift-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.ift-modal {
  background: var(--ift-surface);
  border-radius: 16px 16px 0 0;
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
  animation: ift-slide-up 0.22s ease;
}

@keyframes ift-slide-up {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.ift-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255,255,255,0.1);
  border: none;
  color: var(--ift-text);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.9rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ift-modal-close:hover { background: rgba(255,255,255,0.2); }

.ift-modal-image {
  width: 100%;
  aspect-ratio: 16/9;
  background-size: cover;
  background-position: center;
  border-radius: 16px 16px 0 0;
}

.ift-modal-body {
  padding: 20px 20px 28px;
}

.ift-modal-meta {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.ift-modal-stage {
  background: var(--ift-border);
  color: var(--ift-text-muted);
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 20px;
}

.ift-modal-time {
  background: var(--ift-accent);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
}

.ift-modal-showcase-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 6px 10px; /* WCAG 2.5.5: vertikales Padding für ausreichende Trefferhöhe */
  border-radius: 20px;
  border: 1px solid rgba(233,69,96,0.4);
  background: rgba(233,69,96,0.16);
  color: #e94560;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  white-space: nowrap;
}
/* WCAG 2.5.5: unsichtbare Hitbox auf ≥44px Höhe erweitert */
.ift-modal-showcase-pill::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 44px;
  transform: translateY(-50%);
}
.ift-modal-showcase-pill:hover {
  background: rgba(233,69,96,0.28);
  transform: translateY(-1px);
}

.ift-modal-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ift-text);
  margin: 0 0 12px;
}

.ift-modal-desc {
  font-size: 0.9rem;
  color: var(--ift-text-muted);
  line-height: 1.6;
  margin: 0 0 16px;
}

.ift-modal-social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.ift-modal-social-pill {
  background: var(--ift-card-bg);
  border: 1px solid var(--ift-border);
  color: var(--ift-text);
  font-size: 0.78rem;
  padding: 4px 12px;
  border-radius: 20px;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}
.ift-modal-social-pill:hover {
  border-color: var(--ift-accent);
  color: var(--ift-accent);
}

.ift-modal-profile-link {
  display: inline-block;
  color: var(--ift-accent);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
}
.ift-modal-profile-link:hover { text-decoration: underline; }

.ift-modal-anmeldung-btn {
  display: block;
  margin-top: 16px;
  padding: 12px 20px;
  background: var(--ift-accent);
  color: #fff;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: .04em;
  border-radius: 8px;
  text-decoration: none;
  transition: background .15s, transform .1s;
}
.ift-modal-anmeldung-btn:hover {
  background: #d63355;
  transform: translateY(-1px);
  color: #fff;
  text-decoration: none;
}

/* ── Feature 5: Slot-Übernahme aus Freunde-Plan ─────────────── */
.ift-modal-friendplan {
  margin: 16px 0;
  padding: 14px 16px;
  background: rgba(124, 92, 191, 0.10);
  border: 1px solid rgba(124, 92, 191, 0.45);
  border-radius: 10px;
}
.ift-modal-friendplan__hint {
  margin: 0 0 10px;
  font-size: 0.9rem;
  color: var(--ift-text);
}
.ift-modal-addplan-btn {
  display: block;
  width: 100%;
  padding: 11px 18px;
  background: #7c5cbf;
  color: #fff;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: .04em;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.ift-modal-addplan-btn:hover {
  background: #6a4dab;
  transform: translateY(-1px);
}
.ift-modal-addplan-btn--added,
.ift-modal-addplan-btn--added:hover {
  background: #3aa861;
  transform: none;
  cursor: default;
}
.ift-modal-addplan-btn--disabled,
.ift-modal-addplan-btn--disabled:hover {
  background: rgba(255, 255, 255, 0.10);
  color: var(--ift-text-muted);
  transform: none;
  cursor: not-allowed;
}

.ift-light .ift-modal-friendplan {
  background: rgba(124, 92, 191, 0.08);
  border-color: rgba(124, 92, 191, 0.40);
}
.ift-light .ift-modal-addplan-btn--disabled,
.ift-light .ift-modal-addplan-btn--disabled:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #888;
}

/* ── QR-Toggle ──────────────────────────────────────────────── */
.ift-qr-toggle {
  margin-top: 8px;
}
.ift-qr-toggle__btn {
  display:       inline-flex;
  align-items:   center;
  min-height:    44px; /* WCAG 2.5.5 */
  background:    transparent;
  border:        1px solid rgba(255,255,255,0.2);
  border-radius: 20px;
  color:         rgba(255,255,255,0.55);
  font-size:     0.75rem;
  font-weight:   600;
  padding:       0.25rem 0.9rem;
  cursor:        pointer;
  transition:    border-color 0.15s, color 0.15s;
}
.ift-qr-toggle__btn:hover {
  border-color: var(--ift-accent);
  color:        var(--ift-accent);
}
.ift-qr-toggle__panel {
  margin-top:     10px;
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            8px;
}
.ift-qr-toggle__img {
  width:         180px;
  height:        180px;
  border-radius: 6px;
  display:       block;
}
.ift-qr-toggle__dl {
  font-size:       0.75rem;
  color:           var(--ift-accent);
  text-decoration: none;
  font-weight:     600;
}
.ift-qr-toggle__dl:hover { text-decoration: underline; }

/* ── b2b Modal ──────────────────────────────────────────────── */
.ift-modal-b2b {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ift-modal-b2b-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-top: 4px;
}
.ift-modal-b2b-artist {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0; /* erlaubt sauberes Umbrechen/Truncation in Grid-Spalten */
}
.ift-modal-b2b-sep {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ift-accent);
  padding: 8px 0 4px;
  text-transform: uppercase;
}
.ift-modal-b2b-photo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  align-self: flex-start;
}
.ift-modal-b2b-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ift-text);
}
.ift-modal-artist-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── Event-Card (vertikal) ──────────────────────────────────── */
.ift-event-card {
  position: absolute;
  pointer-events: auto;
  background: var(--ift-card-bg);
  border: 1px solid var(--ift-border);
  border-top: 3px solid var(--stage-color, var(--ift-accent));
  border-radius: var(--ift-radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--ift-text);
  transition: background 0.18s, border-color 0.18s, box-shadow 0.18s;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
.ift-event-card--clickable:hover {
  background: var(--ift-card-hover);
  box-shadow: 0 0 0 1px var(--stage-color, var(--ift-accent)), 0 4px 16px rgba(0,0,0,0.4);
  z-index: 4;
}

/* Artist-Foto als voller Karten-Hintergrund */
.ift-event-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  opacity: 0.2;
  filter: blur(3px) saturate(0.5);
  transform: scale(1.06);
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.2s;
}
.ift-event-card--clickable:hover .ift-event-image {
  opacity: 0.32;
}

/* Slot-Typ-Varianten — behalten ihre eigene Farbe */
.ift-event-card--workshop { border-top: 3px solid #4a9eff; }
.ift-event-card--gastro   { border-top: 3px solid #ff9800; }

/* Spanning Slot — erstreckt sich über mehrere Bühnen */
.ift-event-card--spanning {
  z-index: 1;
  border: 1px solid rgba(233,69,96,0.6);
  box-shadow: 0 0 0 1px rgba(233,69,96,0.3), 0 2px 8px rgba(0,0,0,0.5);
}

.ift-slot-type-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 3px;
  line-height: 1.5;
  z-index: 2;
  pointer-events: none;
}
.ift-slot-type-badge--workshop {
  background: rgba(74,158,255,0.85);
  color: #fff;
}
.ift-slot-type-badge--gastro {
  background: rgba(255,152,0,0.85);
  color: #fff;
}

/* Showcase-Label */
.ift-showcase-label {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 5px;
  background: rgba(233,69,96,0.18);
  color: rgba(233,69,96,0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 1;
  pointer-events: none;
}

/* Zielgruppe-Pills */
.ift-zielgruppe-row {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-top: 2px;
}
.ift-zielgruppe-pill {
  font-size: 0.5rem;
  font-weight: 600;
  padding: 0 4px;
  border-radius: 3px;
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.15);
  white-space: nowrap;
  line-height: 1.6;
}

.ift-event-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: 6px 8px;
  overflow: hidden;
  gap: 2px;
  flex: 1;
}
.ift-event-card--has-showcase .ift-event-content {
  padding-top: 18px;
}

.ift-event-time {
  font-size: 0.69rem; /* leicht erhöht für Lesbarkeit, Klassik-Dichte bleibt erhalten */
  color: var(--stage-color, var(--ift-accent));
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.ift-event-title {
  font-size: 0.84rem; /* leicht erhöht für Lesbarkeit, Klassik-Dichte bleibt erhalten */
  font-weight: 800;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  line-height: 1.25;
}

.ift-event-desc {
  font-size: 0.72rem; /* leicht erhöht für Lesbarkeit, Klassik-Dichte bleibt erhalten */
  color: var(--ift-text-muted);
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ── Tab Bar ────────────────────────────────────────────────── */
.ift-tabs {
  display: flex;
  background: var(--ift-surface);
  border-bottom: 1px solid var(--ift-border);
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}
.ift-tabs::-webkit-scrollbar { height: 3px; }
.ift-tabs::-webkit-scrollbar-thumb { background: var(--ift-border); }

.ift-tab-btn {
  flex: 1;
  padding: 11px 8px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--ift-text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  font-family: var(--ift-font);
  transition: color 0.15s, border-color 0.15s;
}
.ift-tab-btn:hover { color: var(--ift-text); }
.ift-tab-btn.is-active {
  color: var(--ift-accent);
  border-bottom-color: var(--ift-accent);
}
/* iOS-Doppeltipp-Zoom unterdrücken (Feature 3) */
.ift-tab-btn { touch-action: manipulation; }

/* ── Freunde-Tabs (Feature 2) ───────────────────────────────── */
/* Mein-Plan + Freunde-Tabs flexen nicht, damit der ×-Button Platz hat */
.ift-my-plan-tab,
.ift-friend-tab {
  flex: 0 0 auto;
  min-width: max-content;
  white-space: nowrap;
  touch-action: manipulation;
}
.ift-friend-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.ift-friend-tab__label {
  max-width: 12ch;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ift-friend-tab__warn {
  font-size: 0.8em;
  opacity: 0.85;
}
.ift-friend-tab__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  /* WCAG 2.5.5: Trefferfläche ≥44px via transparentes Padding, Icon optisch klein */
  padding: 14px;
  margin: -14px;
  box-sizing: content-box;
  background-clip: content-box;
  border-radius: 50%;
  font-size: 0.9rem;
  line-height: 1;
  color: var(--ift-text-muted);
  transition: background 0.15s, color 0.15s;
}
.ift-friend-tab__remove:hover {
  background: var(--ift-accent);
  color: #fff;
}
.ift-plan-tab--expired .ift-friend-tab__label {
  opacity: 0.7;
}

/* ── Inline-editierbares Tab-Label (Feature 3) ──────────────── */
.ift-editable-tab-label {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.ift-editable-tab-edit {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.ift-editable-tab-input {
  width: 11ch;
  min-width: 6ch;
  max-width: 18ch;
  padding: 1px 4px;
  background: var(--ift-bg);
  border: 1px solid var(--ift-accent);
  border-radius: 4px;
  color: var(--ift-text);
  font-family: var(--ift-font);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.3;
}
.ift-editable-tab-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(233, 69, 96, 0.3);
}
.ift-editable-tab-counter {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: normal;
  color: var(--ift-text-muted);
}

/* Light-Mode */
.ift-light .ift-editable-tab-input {
  background: #fff;
  color: #1a1a1a;
}

/* ── „Pläne"-Dropdown (gebündelte plan-bezogene Tabs) ───────── */
.ift-plan-dropdown {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
}
.ift-plan-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 11px 12px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--ift-text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  cursor: pointer;
  font-family: var(--ift-font);
  touch-action: manipulation;
  transition: color 0.15s, border-color 0.15s;
}
.ift-plan-dropdown-toggle:hover { color: var(--ift-text); }
.ift-plan-dropdown-toggle.is-active {
  color: var(--ift-accent);
  border-bottom-color: var(--ift-accent);
}
.ift-plan-dropdown-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--ift-accent);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
}

.ift-plan-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1200;
  min-width: 200px;
  max-width: 280px;
  max-height: 60vh;
  overflow-y: auto;
  margin-top: 2px;
  padding: 4px;
  background: var(--ift-surface);
  border: 1px solid var(--ift-border);
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

.ift-plan-dropdown-item {
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 6px;
}
.ift-plan-dropdown-item--active {
  background: color-mix(in srgb, var(--ift-accent) 18%, transparent);
}
.ift-plan-dropdown-item__label {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 10px;
  overflow: hidden;
  color: var(--ift-text);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  touch-action: manipulation;
}
.ift-plan-dropdown-item--active .ift-plan-dropdown-item__label { color: var(--ift-accent); }
.ift-plan-dropdown-item__label .ift-editable-tab-label {
  max-width: 16ch;
}
.ift-plan-dropdown-item__warn {
  font-size: 0.85em;
  opacity: 0.85;
}
.ift-plan-dropdown-item__remove {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: 6px;
  border-radius: 50%;
  font-size: 1rem;
  line-height: 1;
  color: var(--ift-text-muted);
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s, color 0.15s;
}
.ift-plan-dropdown-item__remove:hover {
  background: var(--ift-accent);
  color: #fff;
}
.ift-plan-dropdown-divider {
  height: 1px;
  margin: 4px 6px;
  background: var(--ift-border);
}
.ift-plan-dropdown-item--all .ift-plan-dropdown-item__label {
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

/* Light-Mode */
.ift-light .ift-plan-dropdown-menu {
  background: #fff;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}
.ift-light .ift-plan-dropdown-item__remove:hover { color: #fff; }

/* Rebrand-Skin (organischer Radius wie übrige Skin-Elemente) */
.ift-app.ift-skin-new .ift-plan-dropdown-toggle {
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.74rem;
  border-radius: var(--ift-skin-radius-sm) var(--ift-skin-radius-sm) 0 0;
}
.ift-app.ift-skin-new .ift-plan-dropdown-toggle.is-active {
  color: var(--ift-text);
  background: var(--ift-skin-accent-soft);
  border-bottom-color: var(--ift-accent);
}
.ift-app.ift-skin-new .ift-plan-dropdown-menu {
  border-radius: 14px 12px 16px 12px;
}
.ift-app.ift-skin-new .ift-plan-dropdown-item { border-radius: 10px 9px 11px 9px; }

/* ── Undo-Toast (Tab entfernt) ──────────────────────────────── */
.ift-undo-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--ift-surface);
  border: 1px solid var(--ift-border);
  color: var(--ift-text);
  padding: 10px 18px;
  border-radius: 24px;
  font-size: 0.85rem;
  z-index: 1300;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  white-space: nowrap;
}
.ift-undo-toast__btn {
  background: none;
  border: none;
  color: var(--ift-accent);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  font-family: var(--ift-font);
  padding: 0;
}
.ift-undo-toast__btn:hover { text-decoration: underline; }

/* ── Highlight im Freunde-Tab (Slot des Freundes) ───────────── */
.ift-event-card--highlighted {
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 2px 10px rgba(0,0,0,0.35);
}

/* Light-Mode-Overrides */
.ift-light .ift-undo-toast {
  background: #ffffff;
  color: #111111;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.ift-light .ift-friend-tab__remove:hover { color: #fff; }

/* ── Onboarding-Toast (periodischer Hinweis, Feature 6) ─────── */
/* Unten mittig, aber oberhalb der Plan-Bar (bottom 16px, ~46px hoch). */
.ift-onboarding-toast {
  position: fixed;
  bottom: 76px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--ift-surface);
  border: 1px solid var(--ift-border);
  color: var(--ift-text);
  padding: 10px 18px;
  border-radius: 24px;
  font-size: 0.85rem;
  z-index: 1250;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  white-space: nowrap;
  max-width: calc(100vw - 24px);
}
.ift-onboarding-toast__msg { flex: 1; }
.ift-onboarding-toast__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.ift-onboarding-toast__btn {
  background: none;
  border: none;
  color: var(--ift-accent);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  font-family: var(--ift-font);
  padding: 0;
}
.ift-onboarding-toast__btn:hover { text-decoration: underline; }
.ift-onboarding-toast__btn--muted { color: var(--ift-text-muted); }

/* Light-Mode-Overrides */
.ift-light .ift-onboarding-toast {
  background: #ffffff;
  color: #111111;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.ift-light .ift-onboarding-toast__btn--muted { color: #777777; }

/* ── Sheet (gemeinsamer Wrapper) ────────────────────────────── */
.ift-sheet {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--ift-border) transparent;
}
.ift-sheet::-webkit-scrollbar       { width: 4px; }
.ift-sheet::-webkit-scrollbar-thumb { background: var(--ift-border); border-radius: 2px; }

/* ── Bühnen-Liste ───────────────────────────────────────────── */
.ift-stage-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--ift-border);
}

.ift-stage-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--ift-surface);
  border: none;
  padding: 16px;
  cursor: pointer;
  color: var(--ift-text);
  font-family: var(--ift-font);
  text-align: left;
  transition: background 0.15s;
  width: 100%;
}
.ift-stage-card:hover { background: var(--ift-card-bg); }

.ift-stage-card-photo {
  width: 64px;
  height: 64px;
  border-radius: var(--ift-radius);
  background-size: cover;
  background-position: center;
  background-color: var(--ift-card-bg);
  flex-shrink: 0;
}
.ift-stage-card-photo--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
}

.ift-stage-card-body {
  flex: 1;
  min-width: 0;
}
.ift-stage-card-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ift-text);
  margin-bottom: 3px;
}
.ift-stage-card-addr {
  font-size: 0.76rem;
  color: var(--ift-text-muted);
  margin-bottom: 2px;
}
.ift-stage-card-desc {
  font-size: 0.76rem;
  color: var(--ift-text-muted);
  line-height: 1.4;
}
.ift-stage-card-arrow {
  color: var(--ift-text-muted);
  font-size: 1.3rem;
  flex-shrink: 0;
}

/* ── Stage Detail ───────────────────────────────────────────── */
.ift-stage-detail-hero {
  width: 100%;
  aspect-ratio: 16/9;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
.ift-stage-detail-body {
  padding: 20px;
}
.ift-stage-detail-back {
  background: none;
  border: none;
  color: var(--ift-accent);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  margin-bottom: 16px;
  font-family: var(--ift-font);
  display: block;
}
.ift-stage-detail-back:hover { text-decoration: underline; }

.ift-stage-detail-name {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ift-text);
  margin: 0 0 10px;
}
.ift-stage-detail-address {
  font-size: 0.86rem;
  color: var(--ift-text-muted);
  margin: 0 0 12px;
}
.ift-stage-detail-desc {
  font-size: 0.9rem;
  color: var(--ift-text-muted);
  line-height: 1.65;
  margin: 0 0 16px;
  white-space: pre-line;
}
.ift-stage-detail-social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ── Info Sheet ─────────────────────────────────────────────── */
.ift-info-body {
  padding: 24px 20px 32px;
}
.ift-info-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--ift-text);
  margin: 0 0 14px;
}
.ift-info-dates {
  font-size: 1rem;
  color: var(--ift-accent);
  font-weight: 600;
  margin-bottom: 16px;
}
.ift-info-location {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 20px;
  padding: 14px 16px;
  background: var(--ift-card-bg);
  border-radius: var(--ift-radius);
  border: 1px solid var(--ift-border);
}
.ift-info-location-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ift-text);
  display: block;
}
.ift-info-location-addr {
  font-size: 0.82rem;
  color: var(--ift-text-muted);
  display: block;
}
.ift-info-desc {
  font-size: 0.9rem;
  color: var(--ift-text-muted);
  line-height: 1.7;
  margin: 0;
  white-space: pre-line;
}

/* ── Content-Area: Timetable + Sheet als Layer ──────────────── */
.ift-content-area {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ift-timetable-layer {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}

.ift-timetable-layer--hidden {
  visibility: hidden;
  pointer-events: none;
}

.ift-sheet-layer {
  position: absolute;
  inset: 0;
  background: var(--ift-bg);
  z-index: 10;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: ift-slide-up 0.25s ease;
}

/* ── Genre-Filter ───────────────────────────────────────────── */
.ift-genre-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px;
  background: var(--ift-surface);
  border-bottom: 1px solid var(--ift-border);
}
.ift-genre-pill {
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* WCAG 2.5.5 */
  padding: 4px 14px;
  border-radius: 20px;
  border: 1px solid var(--ift-border);
  background: transparent;
  color: var(--ift-text-muted);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ift-genre-pill:hover { border-color: var(--ift-accent); color: var(--ift-text); }
.ift-genre-pill--active { background: var(--ift-accent); border-color: var(--ift-accent); color: #fff; }

/* ── Toolbar (Funktion C Suche + Funktion D Bühnen-Chips) ───── */
.ift-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 8px 12px;
  background: var(--ift-surface);
  border-bottom: 1px solid var(--ift-border);
  flex-shrink: 0;
}

/* Funktion C — Suchfeld */
.ift-search {
  display: inline-flex;
  align-items: center;
  position: relative;
  min-height: 44px;
  flex: 0 1 280px;
  max-width: 340px;
  background: var(--ift-bg);
  border: 1px solid var(--ift-border);
  border-radius: 22px;
  padding: 0 10px;
  transition: border-color 0.15s;
}
.ift-search:focus-within { border-color: var(--ift-accent); }
.ift-search-icon {
  font-size: 13px;
  opacity: 0.6;
  margin-right: 6px;
  pointer-events: none;
}
.ift-search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--ift-text);
  font-family: var(--ift-font);
  font-size: 14px;
  padding: 10px 0;
  outline: none;
}
.ift-search-input::placeholder { color: var(--ift-text-muted); }
.ift-search-clear {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--ift-text-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.15s, color 0.15s;
}
.ift-search-clear:hover { background: rgba(255,255,255,0.08); color: var(--ift-text); }

.ift-search-empty {
  font-size: 12px;
  color: var(--ift-text-muted);
  font-style: italic;
  align-self: center;
}

/* Funktion D — Bühnen-Chips */
.ift-stage-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  flex: 1 1 auto;
  min-width: 0;
  scrollbar-width: thin;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
}
.ift-stage-chip {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  min-height: 44px;
  padding: 4px 14px;
  border-radius: 20px;
  border: 1px solid var(--ift-border);
  background: transparent;
  color: var(--ift-text-muted);
  font-family: var(--ift-font);
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
  opacity: 0.55;
  transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
}
.ift-stage-chip:hover { border-color: var(--ift-accent); color: var(--ift-text); }
.ift-stage-chip--active {
  opacity: 1;
  color: var(--ift-text);
  border-color: var(--chip-color, var(--ift-accent));
  background: color-mix(in srgb, var(--chip-color, var(--ift-accent)) 18%, transparent);
  box-shadow: inset 3px 0 0 var(--chip-color, var(--ift-accent));
}

/* Funktion C — Treffer-Markierung (separat vom Freunde-Highlight) */
.ift-event-card--search-match {
  outline: 2px solid var(--ift-accent);
  outline-offset: 1px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ift-accent) 35%, transparent),
              0 0 14px color-mix(in srgb, var(--ift-accent) 45%, transparent);
  z-index: 12;
}

/* Light-Mode Overrides */
.ift-light .ift-search { background: rgba(0,0,0,0.03); }
.ift-light .ift-search-clear:hover { background: rgba(0,0,0,0.08); }
.ift-light .ift-stage-chip--active { color: var(--ift-text); }

/* Neuer Skin — organische asymmetrische Radien */
.ift-app.ift-skin-new .ift-toolbar { background: var(--ift-surface); }
.ift-app.ift-skin-new .ift-search { border-radius: var(--ift-skin-radius-pill); }
.ift-app.ift-skin-new .ift-stage-chip { border-radius: var(--ift-skin-radius-pill); }
.ift-app.ift-skin-new .ift-event-card--search-match { z-index: 12; }

/* ── Artist-Liste ───────────────────────────────────────────── */
.ift-artist-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--ift-border);
  padding-bottom: 80px;
}

.ift-artist-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--ift-surface);
  border: none;
  padding: 16px;
  cursor: pointer;
  color: var(--ift-text);
  font-family: var(--ift-font);
  text-align: left;
  transition: background 0.15s;
  width: 100%;
  text-decoration: none;
}
.ift-artist-card:hover { background: var(--ift-card-bg); }
.ift-artist-card--no-link { cursor: default; }
.ift-artist-card--no-link:hover { background: var(--ift-surface); }

.ift-artist-card-photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: var(--ift-card-bg);
  flex-shrink: 0;
}
.ift-artist-card-photo--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}

.ift-artist-card-body {
  flex: 1;
  min-width: 0;
}
.ift-artist-card-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ift-text);
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.ift-artist-b2b-badge {
  font-size: 10px;
  font-weight: 700;
  color: var(--ift-accent);
  border: 1px solid var(--ift-accent);
  border-radius: 3px;
  padding: 1px 5px;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.ift-artist-card-desc {
  font-size: 0.76rem;
  color: var(--ift-text-muted);
  line-height: 1.4;
  margin-bottom: 5px;
}
.ift-artist-card-social {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.ift-artist-card-pill {
  font-size: 0.68rem;
  background: var(--ift-card-bg);
  border: 1px solid var(--ift-border);
  color: var(--ift-text-muted);
  padding: 2px 7px;
  border-radius: 10px;
  white-space: nowrap;
}
.ift-artist-card-arrow {
  color: var(--ift-text-muted);
  font-size: 1.3rem;
  flex-shrink: 0;
}

/* ── Info-Links (Footer-Menü im Info-Sheet) ─────────────────── */
.ift-info-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--ift-border);
}
.ift-info-link {
  display: block;
  padding: 10px 0;
  color: var(--ift-text-muted);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  border-bottom: 1px solid var(--ift-border);
  transition: color 0.15s;
}
.ift-info-link:last-child { border-bottom: none; }
.ift-info-link:hover { color: var(--ift-accent); }

/* ── Impressum / Datenschutz Legal-Links ────────────────────── */
.ift-legal-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--ift-border);
}
.ift-legal-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 2px;
  color: var(--ift-text-muted);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 500;
  transition: color 0.15s;
}
.ift-legal-link:hover { color: var(--ift-accent); }
.ift-legal-sep {
  color: var(--ift-text-muted);
  font-size: 0.82rem;
  opacity: 0.6;
}
/* Im Hamburger-Menü: zentriert, ohne Doppel-Trennlinie zur eigenen Sektion */
.ift-hmenu-panel .ift-legal-links {
  justify-content: center;
  border-top: none;
  margin-top: 12px;
  padding-top: 12px;
}
.ift-light .ift-legal-link,
.ift-light .ift-legal-sep { color: var(--ift-text-muted); }
.ift-light .ift-legal-link:hover { color: var(--ift-accent); }

/* ── Onboarding-Popup ───────────────────────────────────────── */
.ift-onboarding-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: ift-fade-in 0.2s ease;
}

.ift-onboarding {
  background: var(--ift-surface);
  border-radius: 16px;
  padding: 28px 24px 24px;
  max-width: 380px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  animation: ift-slide-up 0.25s ease;
  text-align: center;
}

.ift-onboarding-icon {
  font-size: 2.4rem;
  margin-bottom: 12px;
}

.ift-onboarding-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ift-text);
  margin: 0 0 12px;
}

.ift-onboarding-text {
  font-size: 0.9rem;
  color: var(--ift-text-muted);
  margin: 0 0 14px;
}

.ift-onboarding-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ift-onboarding-list li {
  font-size: 0.88rem;
  color: var(--ift-text-muted);
  padding: 10px 14px;
  background: var(--ift-card-bg);
  border-radius: var(--ift-radius);
  border-left: 3px solid var(--ift-accent);
  line-height: 1.5;
}

.ift-onboarding-list strong {
  color: var(--ift-text);
  display: block;
  margin-bottom: 2px;
}

.ift-onboarding-btn {
  background: var(--ift-accent);
  color: #fff;
  border: none;
  border-radius: var(--ift-radius);
  padding: 13px 32px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  font-family: var(--ift-font);
  transition: opacity 0.15s;
}
.ift-onboarding-btn:hover { opacity: 0.88; }

/* ── Site-Logo ───────────────────────────────────────────────── */
.ift-site-logo {
  display: block;
  max-height: 36px;
  max-width: 160px;
  width: auto;
  object-fit: contain;
}

/* ── DayNav-Zeile (unter dem Tab-Bar) ───────────────────────── */
.ift-daynav-row {
  background: var(--ift-surface);
  border-bottom: 1px solid var(--ift-border);
  padding: 6px 12px 4px;
  overflow: hidden;
}

.ift-daynav-wrap {
  position: relative;
}

/* ── Tages-Motto Popup ───────────────────────────────────────── */
.ift-day-motto-popup {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--ift-card-bg);
  border: 1px solid var(--ift-accent);
  border-radius: var(--ift-radius);
  padding: 12px 40px 12px 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  animation: ift-fade-in 0.15s ease;
}

.ift-day-motto-date {
  font-size: 0.78rem;
  color: var(--ift-accent);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.ift-day-motto-text {
  font-size: 1rem;
  color: var(--ift-text);
  font-weight: 600;
  line-height: 1.4;
}

.ift-day-motto-close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(255,255,255,0.08);
  border: none;
  color: var(--ift-text-muted);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
/* WCAG 2.5.5: unsichtbare Hitbox ≥44px */
.ift-day-motto-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
.ift-day-motto-close:hover { background: rgba(255,255,255,0.18); color: var(--ift-text); }

/* ── Artist-Detail (in-app) ─────────────────────────────────── */
.ift-artist-detail {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.ift-artist-detail-hero {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 280px;
  background-size: cover;
  background-position: center top;
  flex-shrink: 0;
}

.ift-artist-detail-body {
  padding: 20px 20px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ift-artist-detail-name {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ift-text);
}

.ift-artist-slots {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  border-left: 3px solid var(--ift-accent);
}

.ift-artist-slot-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  flex-wrap: wrap;
}

.ift-artist-slot-date  { color: var(--ift-accent); font-weight: 600; white-space: nowrap; }
.ift-artist-slot-time  { color: var(--ift-text); white-space: nowrap; }
.ift-artist-slot-stage { color: var(--ift-text-muted); }
.ift-artist-slot-sep   { color: var(--ift-border); }
.ift-artist-slot-b2b   { font-size: 10px; font-weight: 700; color: var(--ift-accent); letter-spacing: 0.05em; padding: 1px 5px; border: 1px solid var(--ift-accent); border-radius: 3px; }
.ift-genre-pill--slot  { font-size: 10px; padding: 1px 6px; }

.ift-artist-detail-desc {
  margin: 0;
  color: var(--ift-text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.ift-artist-detail-social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ── Stage-Timetable in Bühnen-Detail ────────────────────────── */
.ift-stage-slots {
  margin-top: 24px;
  border-top: 1px solid var(--ift-border);
  padding-top: 20px;
}

.ift-stage-slots-title {
  margin: 0 0 12px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ift-text-muted);
}

.ift-stage-slots-day {
  margin-bottom: 16px;
}

.ift-stage-slots-date {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ift-accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.ift-stage-slot-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.ift-stage-slot-time {
  flex-shrink: 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ift-text-muted);
  min-width: 44px;
}

.ift-stage-slot-name {
  font-size: 0.9rem;
  color: var(--ift-text);
  text-decoration: none;
}

.ift-stage-slot-name--link {
  color: var(--ift-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ift-stage-slot-name--link:hover { opacity: 0.82; }

.ift-stage-slots-loading {
  display: flex;
  justify-content: center;
  padding: 16px 0;
}

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .ift-header {
    padding: 14px 16px 12px;
    gap: 8px;
  }
  .ift-title { font-size: 1.15rem; }
}

/* ── Theme Toggle Button ────────────────────────────────────── */
.ift-theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  padding: 4px 6px;
  border-radius: 6px;
  transition: background 0.15s;
  line-height: 1;
}
.ift-theme-toggle:hover { background: rgba(255,255,255,0.12); }
.ift-light .ift-theme-toggle:hover { background: rgba(0,0,0,0.08); }

/* Skin-Umschalter (Neu ⇄ Klassik) — dezent, neben Theme-Toggle */
.ift-skin-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--ift-border);
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  color: var(--ift-text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ift-skin-toggle:hover { background: rgba(255,255,255,0.12); color: var(--ift-text); }
.ift-skin-toggle.is-new {
  background: var(--ift-accent);
  border-color: var(--ift-accent);
  color: #fff;
}
.ift-light .ift-skin-toggle { background: rgba(0,0,0,0.05); }
.ift-light .ift-skin-toggle:hover { background: rgba(0,0,0,0.10); }
.ift-light .ift-skin-toggle.is-new { color: #fff; }

/* ── Filter-Toggle (Header) ─────────────────────────────────── */
.ift-filter-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px; /* WCAG 2.5.5 Trefferfläche */
  min-width: 44px;
  padding: 0 12px;
  border: 1px solid var(--ift-border);
  border-radius: var(--ift-radius);
  background: rgba(255,255,255,0.08);
  color: var(--ift-text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ift-filter-toggle:hover { background: rgba(255,255,255,0.16); color: var(--ift-text); }
.ift-filter-toggle__icon  { font-size: 1rem; line-height: 1; }
.ift-filter-toggle__label { line-height: 1; }
.ift-filter-toggle.is-active {
  background: var(--ift-accent);
  border-color: var(--ift-accent);
  color: #fff;
}
.ift-filter-toggle.is-active:hover { background: var(--ift-accent); color: #fff; }
/* Indikator-Punkt: aktiver Filter trotz eingeklappter Leiste */
.ift-filter-toggle.has-dot::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ift-accent);
  box-shadow: 0 0 0 2px var(--ift-bg);
}
.ift-light .ift-filter-toggle { background: rgba(0,0,0,0.05); }
.ift-light .ift-filter-toggle:hover { background: rgba(0,0,0,0.10); }
.ift-app.ift-skin-new .ift-filter-toggle { border-radius: var(--ift-skin-radius-sm); }

/* ── Hamburger-Menü: Umschalter-Sektion (Design + Ansicht) ──── */
.ift-hmenu-section--toggles {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 16px;
}
.ift-hmenu-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 10px 16px;
  border: 1px solid var(--ift-border);
  border-radius: var(--ift-radius);
  background: rgba(255,255,255,0.05);
  color: var(--ift-text);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, border-color 0.15s;
}
.ift-hmenu-toggle:hover { background: rgba(255,255,255,0.10); border-color: var(--ift-accent); }
.ift-hmenu-toggle__label {
  font-size: 1rem;
  font-weight: 600;
}
.ift-hmenu-toggle__state {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.ift-hmenu-toggle__current {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ift-text);
}
.ift-hmenu-toggle__action {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ift-accent);
}
.ift-light .ift-hmenu-toggle { background: rgba(0,0,0,0.04); }
.ift-light .ift-hmenu-toggle:hover { background: rgba(0,0,0,0.08); }
.ift-app.ift-skin-new .ift-hmenu-toggle { border-radius: var(--ift-skin-radius-sm); }

/* ── Light Mode ─────────────────────────────────────────────── */
.ift-light {
  --ift-bg:         #f4f4f8;
  --ift-surface:    #ffffff;
  --ift-card-bg:    #eeeef6;
  --ift-card-hover: #ddddf0;
  --ift-text:       #1a1a2e;
  --ift-text-muted: #50506e; /* WCAG-AA: ~4.9:1 auf #f4f4f8 (vorher #5a5a7a ~4.2:1) */
  --ift-border:     #d0d0e0;
}

/* Overlay-Farben im Light Mode */
.ift-light .ift-tab-btn {
  background: rgba(0,0,0,0.05);
  color: var(--ift-text-muted);
}
.ift-light .ift-tab-btn.is-active {
  background: rgba(0,0,0,0.10);
  color: var(--ift-text);
}
.ift-light .ift-hamburger span { background: var(--ift-text-muted); }
.ift-light .ift-hamburger:hover span { background: var(--ift-text); }
.ift-light .ift-hamburger { background: rgba(0,0,0,0.05); }
.ift-light .ift-hamburger:hover { background: rgba(0,0,0,0.10); }
.ift-light .ift-hmenu {
  background: #fff;
  box-shadow: 4px 0 20px rgba(0,0,0,0.15);
}
.ift-light .ift-hmenu-overlay { background: rgba(0,0,0,0.35); }
.ift-light .ift-daynav-btn {
  background: rgba(0,0,0,0.05);
  color: var(--ift-text-muted);
}
.ift-light .ift-daynav-btn.is-active {
  background: var(--ift-accent);
  color: #fff;
}
.ift-light .ift-time-col { background: var(--ift-surface); border-right-color: var(--ift-border); }
.ift-light .ift-time-label { color: var(--ift-text-muted); }
.ift-light .ift-stage-header { background: var(--ift-surface); color: var(--ift-text); border-color: var(--ift-border); }
.ift-light .ift-empty-stage { background: rgba(0,0,0,0.03); border-color: var(--ift-border); color: var(--ift-text-muted); }
.ift-light .ift-modal-overlay { background: rgba(0,0,0,0.45); }
.ift-light .ift-modal { background: #fff; box-shadow: 0 4px 30px rgba(0,0,0,0.2); }
.ift-light .ift-modal-close { background: rgba(0,0,0,0.06); color: var(--ift-text); }
.ift-light .ift-modal-close:hover { background: rgba(0,0,0,0.12); }
.ift-light .ift-social-pill { background: rgba(0,0,0,0.06); color: var(--ift-text); }
.ift-light .ift-social-pill:hover { background: rgba(0,0,0,0.12); }
.ift-light .ift-sheet { background: var(--ift-surface); box-shadow: 0 -4px 20px rgba(0,0,0,0.12); }
.ift-light .ift-sheet-close { background: rgba(0,0,0,0.06); color: var(--ift-text); }
.ift-light .ift-sheet-close:hover { background: rgba(0,0,0,0.12); }
.ift-light .ift-artist-popup { background: #fff; box-shadow: 0 4px 20px rgba(0,0,0,0.2); }
.ift-light .ift-artist-popup-close { background: rgba(0,0,0,0.06); color: var(--ift-text); }
.ift-light .ift-onboarding { background: #fff; box-shadow: 0 4px 30px rgba(0,0,0,0.2); }

/* ── Bookmark-Button auf Slot-Karten ────────────────────────────── */
.ift-bookmark-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(0,0,0,0.5);
  border: none;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s, transform 0.1s;
  z-index: 5;
}
/* WCAG 2.5.5: unsichtbare Hitbox ≥44px, Stern bleibt visuell 24px */
.ift-bookmark-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
.ift-bookmark-btn:hover { background: rgba(233,69,96,0.8); transform: scale(1.1); }
.ift-bookmark-btn--active { background: var(--ift-accent); color: #fff; }
.ift-event-card--bookmarked { box-shadow: 0 0 0 2px var(--ift-accent); }

/* ── Plan-Bar (floating unten) ──────────────────────────────────── */
.ift-plan-bar {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  background: var(--ift-surface);
  border: 1px solid var(--ift-accent);
  border-radius: 22px;
  padding: 10px 18px;
  z-index: 200;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  max-width: min(92vw, 520px);
}
.ift-plan-bar-info {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 0.85rem;
}
.ift-plan-bar-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.ift-plan-bar-count { color: var(--ift-accent); font-weight: 600; font-size: 0.9rem; white-space: nowrap; }
.ift-plan-bar-btn {
  background: var(--ift-accent);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 7px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
  white-space: nowrap;
}
.ift-plan-bar-btn:hover { opacity: 0.85; }

/* ── Feature B: „Als Nächstes für mich" + Konfliktwarnung ───────── */
.ift-next-fav {
  color: var(--ift-text);
  font-weight: 500;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}
.ift-next-fav-countdown { color: var(--ift-accent); font-weight: 600; }
.ift-fav-conflict {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 12px;
  background: rgba(233, 69, 96, 0.12);
  border: 1px solid var(--ift-accent);
  border-radius: 16px;
  color: var(--ift-accent);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.ift-fav-conflict:hover { background: rgba(233, 69, 96, 0.22); }
.ift-fav-conflict-detail {
  list-style: none;
  margin: 0;
  padding: 6px 0 0;
  border-top: 1px solid var(--ift-border, rgba(255,255,255,0.12));
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--ift-text-muted);
  max-height: 120px;
  overflow-y: auto;
}
.ift-fav-conflict-detail li { line-height: 1.3; }

/* ── Plan-Banner (fremder Plan) ─────────────────────────────────── */
.ift-plan-banner {
  background: var(--ift-surface);
  border-bottom: 2px solid var(--ift-accent);
  color: var(--ift-text);
  padding: 10px 20px;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.ift-plan-banner strong { color: var(--ift-accent); }
.ift-plan-banner-close {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--ift-text-muted);
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.ift-plan-banner-close:hover { color: var(--ift-text); }

/* ── Plan-Modal ─────────────────────────────────────────────────── */
.ift-plan-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.ift-plan-modal {
  background: var(--ift-surface);
  border-radius: 16px;
  padding: 32px 28px 28px;
  width: 100%;
  max-width: 360px;
  text-align: center;
  position: relative;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}
.ift-plan-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  color: var(--ift-text-muted);
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}
.ift-plan-modal-close:hover { color: var(--ift-text); }
.ift-plan-modal-icon { font-size: 36px; margin-bottom: 12px; }
.ift-plan-modal-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ift-text);
  margin: 0 0 6px;
}
.ift-plan-modal-subtitle {
  color: var(--ift-text-muted);
  font-size: 0.9rem;
  margin: 0 0 20px;
}
.ift-plan-modal-input {
  width: 100%;
  background: var(--ift-card-bg);
  border: 1px solid var(--ift-border);
  border-radius: 8px;
  color: var(--ift-text);
  font-size: 1rem;
  padding: 10px 14px;
  margin-bottom: 12px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s;
}
.ift-plan-modal-input:focus { border-color: var(--ift-accent); }
.ift-plan-modal-input::placeholder { color: var(--ift-text-muted); }
.ift-plan-modal-error {
  color: var(--ift-accent);
  font-size: 0.85rem;
  margin: 0 0 12px;
}
.ift-plan-modal-notice {
  color: var(--ift-text-muted);
  font-size: 0.85rem;
  line-height: 1.4;
  margin: 0 0 12px;
}
.ift-plan-modal-success {
  color: var(--ift-text);
  font-size: 0.95rem;
  margin: 0 0 20px;
  line-height: 1.5;
}
.ift-plan-modal-btn {
  display: block;
  width: 100%;
  background: var(--ift-accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 10px;
  transition: opacity 0.15s;
}
.ift-plan-modal-btn:hover:not(:disabled) { opacity: 0.85; }
.ift-plan-modal-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ift-plan-modal-btn--secondary {
  background: transparent;
  color: var(--ift-text-muted);
  border: 1px solid var(--ift-border);
}
.ift-plan-modal-btn--secondary:hover { color: var(--ift-text); border-color: var(--ift-text-muted); }
.ift-plan-modal-hint {
  margin: -2px 0 4px;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--ift-text-muted);
  text-align: center;
}
.ift-light .ift-onboarding-overlay { background: rgba(0,0,0,0.45); }

/* ── Theme-Transition Animationen ────────────────────────────── */

/* A: CRT-Scanline (→ Dunkel): roter Leuchtstreifen fährt von oben nach unten */
@keyframes ift-scan-down {
  from { top: -4px;   opacity: 1; }
  to   { top: 100vh;  opacity: 1; }
}

.ift-scan-line {
  position: fixed;
  left: 0; right: 0;
  height: 3px;
  top: -4px;
  z-index: 99999;
  pointer-events: none;
  background: #e94560;
  box-shadow:
    0 0  6px 2px #e94560,
    0 0 16px 6px rgba(233, 69, 96, 0.7),
    0 0 32px 10px rgba(233, 69, 96, 0.3),
    0 2px 40px 0 rgba(233, 69, 96, 0.15);
  animation: ift-scan-down 0.4s linear forwards;
}

/* B: Brightness-Blitz (→ Hell): kurze Überbelichtung, dann einpendeln */
@keyframes ift-flash-bright {
  0%   { filter: brightness(1)   saturate(1); }
  28%  { filter: brightness(6)   saturate(0); }
  55%  { filter: brightness(1.1) saturate(1); }
  100% { filter: brightness(1)   saturate(1); }
}

/* ── Light-Mode (via html.its-light, Theme-Switcher) ─────────── */
.ift-light {
  --ift-bg:           #f4f4f4;
  --ift-surface:      #ffffff;
  --ift-card-bg:      #ffffff;
  --ift-card-hover:   #fdf5f7;
  --ift-text:         #111111;
  --ift-text-muted:   #666666;
  --ift-border:       rgba(0,0,0,0.09);
  --ift-now-line:     #e94560;
}

.ift-light .ift-app {
  background: var(--ift-bg);
  color: var(--ift-text);
}

.ift-light .ift-stage-headers,
.ift-light .ift-header,
.ift-light .ift-tabs,
.ift-light .ift-daynav-row {
  background: #ffffff;
  border-color: rgba(0,0,0,0.1);
}

.ift-light .ift-time-corner,
.ift-light .ift-time-col {
  background: #f8f8f8;
}

.ift-light .ift-event-card {
  background: #ffffff;
  border-color: rgba(0,0,0,0.1);
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.ift-light .ift-event-card--clickable:hover {
  background: #fff8f9;
  box-shadow: 0 0 0 1px var(--stage-color, var(--ift-accent)), 0 4px 16px rgba(0,0,0,0.1);
}

.ift-light .ift-event-image {
  opacity: 0.12;
  filter: blur(3px) saturate(0.4);
}

.ift-light .ift-event-title {
  color: #111111;
}

.ift-light .ift-stage-col {
  background-image: repeating-linear-gradient(
    180deg,
    transparent,
    transparent calc(120px - 1px),
    rgba(0,0,0,0.06) calc(120px - 1px),
    rgba(0,0,0,0.06) 120px
  );
}

.ift-light .ift-hour-label {
  color: #999999;
}

.ift-light .ift-daynav__btn {
  color: #555555;
}
.ift-light .ift-daynav__btn:hover {
  background: #f0f0f0;
  color: #111111;
  border-color: rgba(0,0,0,0.15);
}
.ift-light .ift-daynav__btn.is-active {
  background: var(--ift-accent);
  color: #ffffff;
}

.ift-light .ift-tab-btn {
  color: #777777;
  background: #ffffff;
}
.ift-light .ift-tab-btn.is-active {
  color: var(--ift-accent);
  border-bottom-color: var(--ift-accent);
}

.ift-light .ift-title { color: #111111; }
.ift-light .ift-title:hover { color: var(--ift-accent); }

.ift-light .ift-back-btn {
  background: rgba(0,0,0,0.06);
  color: #555555;
}
.ift-light .ift-back-btn:hover {
  background: rgba(0,0,0,0.12);
  color: #111111;
}

.ift-light .ift-hamburger {
  background: rgba(0,0,0,0.06);
}
.ift-light .ift-hamburger span { background: #444444; }
.ift-light .ift-hamburger:hover { background: rgba(0,0,0,0.12); }
.ift-light .ift-hamburger:hover span { background: #111111; }

.ift-light .ift-hmenu-panel {
  background: #ffffff;
  box-shadow: -4px 0 24px rgba(0,0,0,0.15);
}

.ift-light .ift-modal {
  background: #ffffff;
}
.ift-light .ift-modal-stage {
  background: rgba(0,0,0,0.07);
  color: #555555;
}

.ift-light .ift-stage-card {
  background: #ffffff;
}
.ift-light .ift-stage-card:hover { background: #f8f8f8; }
.ift-light .ift-stage-card-name { color: #111111; }
.ift-light .ift-stage-card-addr,
.ift-light .ift-stage-card-desc { color: #777777; }

.ift-light .ift-artist-card { background: #ffffff; }
.ift-light .ift-artist-card:hover { background: #f8f8f8; }
.ift-light .ift-artist-name { color: #111111; }
.ift-light .ift-artist-subtitle { color: #777777; }

.ift-light .ift-plan-bar {
  background: rgba(255,255,255,0.95);
  border-color: rgba(0,0,0,0.12);
  color: #111111;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
}
.ift-light .ift-next-fav { color: #1a1a1a; }
.ift-light .ift-fav-conflict { background: rgba(233, 69, 96, 0.1); }
.ift-light .ift-fav-conflict:hover { background: rgba(233, 69, 96, 0.18); }
.ift-light .ift-fav-conflict-detail {
  color: #555555;
  border-top-color: rgba(0,0,0,0.12);
}

.ift-flash-bright {
  animation: ift-flash-bright 0.38s ease-out forwards;
}

/* ── Modal: Datum-Pill ───────────────────────────────────────────────────── */
.ift-modal-date {
  background: rgba(255,255,255,0.08);
  color: var(--ift-text-muted);
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 20px;
}

/* ── Slot: Datum-Badge ───────────────────────────────────────────────────── */
.ift-event-date-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 5px;
  padding: 0 4px;
  font-size: .65em;
  font-weight: 600;
  letter-spacing: .02em;
  border: 1px solid rgba(233,69,96,0.45);
  border-radius: 4px;
  color: var(--ift-accent);
  background: rgba(233,69,96,0.08);
  vertical-align: middle;
}

/* ── Slot: Anmeldungs-Link ───────────────────────────────────────────────── */
.ift-anmeldung-link {
    display: block;
    margin: 4px 6px 4px;
    padding: 2px 6px;
    background: rgba(233,69,96,.15);
    border: 1px solid rgba(233,69,96,.4);
    border-radius: 10px;
    color: #e94560;
    font-size: .7rem;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    transition: background .12s;
    position: relative;
    z-index: 5;
}
.ift-anmeldung-link:hover {
    background: rgba(233,69,96,.28);
    color: #e94560;
}

.ift-light .ift-event-date-badge {
  border-color: rgba(233,69,96,0.55);
  background: rgba(233,69,96,0.1);
  opacity: 1;
}

/* ── Light-Mode: Zoom-Indikator ─────────────────────────────── */
.ift-light .ift-zoom-indicator {
  background: rgba(255,255,255,0.88);
  color: #1a1a2e;
  border-color: rgba(0,0,0,0.15);
}
.ift-light .ift-zoom-reset {
  background: rgba(0,0,0,0.1);
  color: #1a1a2e;
}
.ift-light .ift-zoom-reset:hover { background: rgba(0,0,0,0.2); }

/* ── Consent-Banner (Datenschutz-Gate, Feature 1) ───────────────── */
.ift-consent-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  padding: 20px;
}
.ift-consent {
  background: var(--ift-surface);
  color: var(--ift-text);
  border: 1px solid var(--ift-border);
  border-radius: 16px;
  padding: 28px 26px 24px;
  width: 100%;
  max-width: 420px;
  max-height: 88vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}
.ift-consent-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  color: var(--ift-text-muted);
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}
.ift-consent-close:hover { color: var(--ift-text); }
.ift-consent-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ift-text);
  margin: 0 26px 14px 0;
}
.ift-consent-text {
  font-size: 0.9rem;
  color: var(--ift-text);
  margin: 0 0 14px;
}
.ift-consent-subhead {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ift-accent);
  margin: 12px 0 4px;
}
.ift-consent-list {
  margin: 0 0 8px;
  padding-left: 20px;
  font-size: 0.85rem;
  color: var(--ift-text-muted);
}
.ift-consent-list li { margin: 2px 0; }
.ift-consent-note {
  font-size: 0.8rem;
  color: var(--ift-text-muted);
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--ift-border);
}
.ift-consent-current {
  font-size: 0.82rem;
  color: var(--ift-text);
  margin: 12px 0 0;
  font-weight: 600;
}
.ift-consent-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.ift-consent-btn {
  flex: 1;
  border: 1px solid var(--ift-border);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s, background 0.15s, border-color 0.15s;
}
.ift-consent-btn--accept {
  background: var(--ift-accent);
  border-color: var(--ift-accent);
  color: #fff;
}
.ift-consent-btn--accept:hover { opacity: 0.88; }
.ift-consent-btn--decline {
  background: transparent;
  color: var(--ift-text-muted);
}
.ift-consent-btn--decline:hover { color: var(--ift-text); border-color: var(--ift-text-muted); }
.ift-consent-btn.is-current { outline: 2px solid var(--ift-accent); outline-offset: 2px; }

/* Toast nach Consent-Widerruf */
.ift-consent-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ift-surface);
  border: 1px solid var(--ift-accent);
  color: var(--ift-text);
  padding: 10px 18px;
  border-radius: 24px;
  font-size: 0.85rem;
  z-index: 1200;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  white-space: nowrap;
}

/* Deaktivierter ★-Button (Consent abgelehnt) */
.ift-bookmark-btn--disabled {
  opacity: 0.4;
  cursor: default;
}
.ift-bookmark-btn--disabled:hover {
  background: rgba(0,0,0,0.5);
  transform: none;
}

/* Hamburger: Datenschutz-Button (als Link gestylt) */
.ift-hmenu-link--btn {
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

/* Light-Mode-Overrides */
.ift-light .ift-consent { background: #ffffff; color: #1a1a2e; box-shadow: 0 8px 40px rgba(0,0,0,0.2); }
.ift-light .ift-consent-title { color: #111111; }
.ift-light .ift-consent-text { color: #1a1a2e; }
.ift-light .ift-consent-current { color: #111111; }
.ift-light .ift-consent-toast { background: #ffffff; color: #111111; box-shadow: 0 4px 20px rgba(0,0,0,0.15); }

/* ════════════════════════════════════════════════════════════════
   Feature 4: Freunde-Überlagerungs-Tab „👥 Alle"
   ════════════════════════════════════════════════════════════════ */

/* Tab-Button */
.ift-all-friends-tab { font-weight: 600; }

/* Freunde-Punkte auf Slot-Karte (oben links, kollidiert nicht mit ★ oben rechts) */
.ift-friend-dots {
  position: absolute;
  top: 4px;
  left: 4px;
  display: flex;
  gap: 3px;
  z-index: 6;
  pointer-events: none;
}
.ift-friend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35);
}
.ift-friend-dots-pill {
  display: inline-flex;
  align-items: center;
  height: 14px;
  padding: 0 5px;
  border-radius: 7px;
  background: rgba(120,120,120,0.85);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

/* Read-only ★ im Alle-Modus */
.ift-bookmark-btn--readonly {
  pointer-events: none;
  cursor: default;
}

/* Farb-Legende — floating unten links über der Zeitachse */
.ift-friend-legend {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 10;
  background: var(--ift-surface);
  color: var(--ift-text);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.35);
  max-width: 220px;
}
.ift-friend-legend__toggle {
  display: none; /* nur auf Mobile sichtbar */
  background: none;
  border: none;
  color: var(--ift-text);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0;
}
.ift-friend-legend__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ift-friend-legend__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
}
.ift-friend-legend__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35);
}
.ift-friend-legend__star {
  width: 10px;
  text-align: center;
  color: var(--ift-accent);
  flex-shrink: 0;
}
.ift-friend-legend__name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ift-friend-legend__item--me { color: var(--ift-text-muted); }

/* Mobile: Legende eingeklappt, per 👥-Tap aufklappbar */
@media (max-width: 640px) {
  .ift-friend-legend {
    padding: 6px;
    max-width: none;
  }
  .ift-friend-legend__toggle { display: block; }
  .ift-friend-legend__list { display: none; }
  .ift-friend-legend--open { padding: 10px 12px; }
  .ift-friend-legend--open .ift-friend-legend__list { display: flex; margin-top: 8px; }
}

/* Light-Mode */
.ift-light .ift-friend-legend {
  background: #ffffff;
  color: #1a1a2e;
  border-color: rgba(0,0,0,0.12);
  box-shadow: 0 4px 18px rgba(0,0,0,0.15);
}
.ift-light .ift-friend-legend__toggle { color: #1a1a2e; }
.ift-light .ift-friend-dots-pill { background: rgba(90,90,90,0.85); }

/* Modal „Auch bei:"-Liste (Listenvariante Feature 4) */
.ift-modal-alsoin {
  margin: 16px 0;
  padding: 14px 16px;
  background: rgba(124, 92, 191, 0.10);
  border: 1px solid rgba(124, 92, 191, 0.45);
  border-radius: 10px;
}
.ift-modal-alsoin__hint {
  margin: 0 0 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ift-text);
}
.ift-modal-alsoin__list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}
.ift-modal-alsoin__item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.88rem;
  color: var(--ift-text);
}
.ift-modal-alsoin__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35);
}
.ift-light .ift-modal-alsoin {
  background: rgba(124, 92, 191, 0.08);
  border-color: rgba(124, 92, 191, 0.40);
}

/* ════════════════════════════════════════════════════════════════
   === REBRAND SKIN ===  (additiv, nur unter .ift-app.ift-skin-new)
   Klassik-Look bleibt UNVERÄNDERT. Aktiviert via Skin-Toggle (ift_skin).
   Display-Font: Bricolage Grotesque · Body: Space Mono (lokal, @fontsource).
   Alle Akzent-/Flächenfarben über var(--ift-*) → spielt mit PHP-Branding-
   Config (Overrides auf #ift-root:not(.ift-light) / .ift-app:not(.ift-light)).
   ──────────────────────────────────────────────────────────────── */

.ift-app.ift-skin-new {
  /* Typo-Tokens — greifen NUR im neuen Skin */
  --ift-font-display: 'Bricolage Grotesque', 'Trebuchet MS', system-ui, sans-serif;
  --ift-font-body:    'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  /* Skin-eigene Abstufungen (keine globalen Hex-Hardcodes) */
  --ift-skin-radius:       14px;
  --ift-skin-radius-sm:    10px;
  --ift-skin-shadow:       0 8px 30px rgba(0,0,0,0.45);
  --ift-skin-shadow-soft:  0 2px 12px rgba(0,0,0,0.30);
  --ift-skin-accent-soft:  color-mix(in srgb, var(--ift-accent) 14%, transparent);
  --ift-skin-accent-line:  color-mix(in srgb, var(--ift-accent) 55%, transparent);

  font-family: var(--ift-font-body);
  letter-spacing: 0.01em;
}

/* Headlines / Titel im neuen Skin */
.ift-app.ift-skin-new .ift-title,
.ift-app.ift-skin-new .ift-event-title,
.ift-app.ift-skin-new .ift-stage-header,
.ift-app.ift-skin-new .ift-modal-name,
.ift-app.ift-skin-new .ift-modal-title,
.ift-app.ift-skin-new .ift-tab-btn,
.ift-app.ift-skin-new .ift-daynav__btn {
  font-family: var(--ift-font-display);
}

.ift-app.ift-skin-new .ift-title {
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 1.18rem;
}

/* ── Header ──────────────────────────────────────────────── */
.ift-app.ift-skin-new .ift-header {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ift-surface) 92%, var(--ift-accent)) 0%,
    var(--ift-surface) 100%
  );
  border-bottom: 1px solid var(--ift-skin-accent-line);
}

/* ── Tabs ────────────────────────────────────────────────── */
.ift-app.ift-skin-new .ift-tabs {
  background: var(--ift-surface);
  border-bottom: 1px solid var(--ift-border);
  gap: 2px;
  padding: 4px 4px 0;
}
.ift-app.ift-skin-new .ift-tab-btn {
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.74rem;
  border-radius: var(--ift-skin-radius-sm) var(--ift-skin-radius-sm) 0 0;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.ift-app.ift-skin-new .ift-tab-btn.is-active {
  color: var(--ift-text);
  background: var(--ift-skin-accent-soft);
  border-bottom-color: var(--ift-accent);
}

/* ── DayNav ──────────────────────────────────────────────── */
.ift-app.ift-skin-new .ift-daynav__btn {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid var(--ift-border);
}
.ift-app.ift-skin-new .ift-daynav__btn.is-active {
  background: var(--ift-accent);
  border-color: var(--ift-accent);
  color: #fff;
  box-shadow: 0 2px 10px var(--ift-skin-accent-soft);
}

/* ── Slot-Karten ─────────────────────────────────────────── */
.ift-app.ift-skin-new .ift-event-card {
  border: 1px solid var(--ift-border);
  border-top: none;
  border-left: 4px solid var(--stage-color, var(--ift-accent));
  border-radius: var(--ift-skin-radius-sm);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--stage-color, var(--ift-accent)) 8%, var(--ift-card-bg)) 0%,
      var(--ift-card-bg) 60%);
  box-shadow: var(--ift-skin-shadow-soft);
}
.ift-app.ift-skin-new .ift-event-card--clickable:hover {
  background: var(--ift-card-hover);
  box-shadow:
    0 0 0 1px var(--stage-color, var(--ift-accent)),
    var(--ift-skin-shadow);
  transform: translateY(-1px);
}
/* Typ-Akzente bleiben erhalten, jetzt als linker Rand statt oben */
.ift-app.ift-skin-new .ift-event-card--workshop { border-top: none; border-left-color: #4a9eff; }
.ift-app.ift-skin-new .ift-event-card--gastro   { border-top: none; border-left-color: #ff9800; }
.ift-app.ift-skin-new .ift-event-card--spanning {
  border-left-color: var(--ift-accent);
}

.ift-app.ift-skin-new .ift-event-time {
  font-family: var(--ift-font-body);
  letter-spacing: 0.04em;
  font-size: 0.78rem; /* A11y/Lesbarkeit: größer als Klassik (0.69rem) */
}
.ift-app.ift-skin-new .ift-event-title {
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.18;
  font-size: 0.9rem; /* A11y/Lesbarkeit: größer als Klassik (0.84rem) */
}
.ift-app.ift-skin-new .ift-event-desc {
  font-size: 0.78rem; /* A11y/Lesbarkeit: größer als Klassik (0.72rem) */
}

/* ── Stage-Header ────────────────────────────────────────── */
.ift-app.ift-skin-new .ift-stage-header {
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-bottom: 3px solid var(--stage-color, var(--ift-accent));
}

/* ── Modal ───────────────────────────────────────────────── */
.ift-app.ift-skin-new .ift-modal {
  border-radius: var(--ift-skin-radius) var(--ift-skin-radius) 0 0;
  border: 1px solid var(--ift-skin-accent-line);
  border-bottom: none;
  box-shadow: var(--ift-skin-shadow);
}

/* ── Plan-Bar ────────────────────────────────────────────── */
.ift-app.ift-skin-new .ift-plan-bar {
  /* Organischer Radius — die mehrzeilige Plan-Bar ist kein perfekter Pillen-Pill mehr */
  border-radius: 26px 22px 28px 20px;
  border: 1px solid var(--ift-skin-accent-line);
  box-shadow: var(--ift-skin-shadow);
  font-family: var(--ift-font-body);
}
.ift-app.ift-skin-new .ift-fav-conflict { border-radius: 16px 14px 18px 12px; }
.ift-app.ift-skin-new .ift-plan-bar-btn {
  border-radius: 999px;
  font-family: var(--ift-font-display);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ── Now-Linie etwas markanter ───────────────────────────── */
.ift-app.ift-skin-new .ift-now-line-h::before {
  font-family: var(--ift-font-display);
  font-weight: 700;
}

/* ════════════════════════════════════════════════════════════════
   NEUER SKIN — LIGHT-VARIANTE: „gedrucktes Programmheft"
   (.ift-app.ift-skin-new.ift-light) — heller, Schatten, Stage-Farbe
   als linker Rand, Papier-Optik.
   ──────────────────────────────────────────────────────────────── */
.ift-app.ift-skin-new.ift-light {
  --ift-skin-shadow:       0 6px 22px rgba(30,30,60,0.14);
  --ift-skin-shadow-soft:  0 1px 6px rgba(30,30,60,0.10);
  background:
    repeating-linear-gradient(0deg,
      var(--ift-bg), var(--ift-bg) 38px,
      color-mix(in srgb, var(--ift-bg) 96%, var(--ift-text)) 39px);
}
.ift-app.ift-skin-new.ift-light .ift-header {
  background: var(--ift-surface);
  border-bottom: 2px solid var(--ift-accent);
}
.ift-app.ift-skin-new.ift-light .ift-event-card {
  background: var(--ift-surface);
  border: 1px solid var(--ift-border);
  border-left: 4px solid var(--stage-color, var(--ift-accent));
  box-shadow: var(--ift-skin-shadow-soft);
}
.ift-app.ift-skin-new.ift-light .ift-event-card--clickable:hover {
  box-shadow: 0 0 0 1px var(--stage-color, var(--ift-accent)), var(--ift-skin-shadow);
}
.ift-app.ift-skin-new.ift-light .ift-stage-header {
  background: var(--ift-surface);
  color: var(--ift-text);
}
.ift-app.ift-skin-new.ift-light .ift-tab-btn.is-active {
  background: var(--ift-skin-accent-soft);
}
.ift-app.ift-skin-new.ift-light .ift-modal {
  background: var(--ift-surface);
  box-shadow: var(--ift-skin-shadow);
}

/* ════════════════════════════════════════════════════════════════
   === REBRAND SKIN · ORGANISCHE FORMEN ===
   (additiv, NUR unter .ift-app.ift-skin-new — Klassik bleibt unberührt)
   Form-Sprache: asymmetrische Radien + Blob-Masken + SVG-Wave-Divider
   + radiale Blob-Schattierungen + Gradient-Fade statt harter 1px-Linien.
   RASTER/Geometrie (Stundengitter, hour-line, time-col, now-line top,
   event-card top/height) wird NICHT angefasst — nur Ecken & Optik.
   ──────────────────────────────────────────────────────────────── */

.ift-app.ift-skin-new {
  /* Konsistente organische Form-Tokens */
  --ift-skin-radius-card:  16px 8px 16px 8px;   /* asymmetrische Slot-Karten */
  --ift-skin-radius-pill:  22px 18px 20px 24px;  /* organische Pills */
  --ift-skin-radius-badge: 9px 4px 8px 5px;      /* Badges */
  --ift-skin-radius-box:   18px 14px 18px 14px;  /* Modale / Boxen */
  /* rein dekorative Tönungen (kein Hardcode der Leitfarbe) */
  --ift-skin-blob-soft:    color-mix(in srgb, var(--ift-accent) 8%, transparent);
  --ift-skin-blob-faint:   color-mix(in srgb, var(--ift-accent) 5%, transparent);
  /* Wellen-/Divider-Füllfarbe → folgt der jeweiligen Flächenfarbe */
  --ift-skin-wave-fill:    var(--ift-surface);
}

/* ── 10 · Hintergrund-Blob (sehr dezent, hinter dem Inhalt) ──── */
.ift-app.ift-skin-new {
  position: relative;
}
.ift-app.ift-skin-new::before {
  content: "";
  position: absolute;
  top: -12%;
  right: -18%;
  width: 65%;
  height: 60%;
  background: radial-gradient(closest-side,
    var(--ift-skin-blob-faint) 0%,
    transparent 72%);
  border-radius: 45% 55% 50% 50% / 48% 45% 55% 52%;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
  animation: ift-skin-blob-drift 26s ease-in-out infinite alternate;
}
@keyframes ift-skin-blob-drift {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  50%  { transform: translate(-3%, 4%) rotate(8deg) scale(1.06); }
  100% { transform: translate(2%, -3%) rotate(-6deg) scale(0.97); }
}
/* App-Inhalt muss über dem Blob liegen + klickbar bleiben */
.ift-app.ift-skin-new > * {
  position: relative;
  z-index: 1;
}

/* ── 8/9 · Header: radialer Blob-Schein + Wave-Divider + Fade-Linie */
.ift-app.ift-skin-new .ift-header {
  position: relative;
  background:
    radial-gradient(120% 140% at 88% -30%,
      var(--ift-skin-blob-soft) 0%, transparent 55%),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--ift-surface) 92%, var(--ift-accent)) 0%,
      var(--ift-surface) 100%
    );
  /* harte 1px-Linie → Gradient-Fade (transparent an den Enden) */
  border-bottom: none;
}
/* weiche Welle als Übergang zur Tab-Leiste — einfärbbar via mask
   (background-color = Surface, mask = SVG-Pfad → korrekte Themefarbe) */
.ift-app.ift-skin-new .ift-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 10px;
  pointer-events: none;
  background-color: var(--ift-surface);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 1200 20%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M0 14 C 200 2 320 18 520 10 C 720 2 900 18 1200 8 L1200 20 L0 20 Z%27 fill=%27%23000%27/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 1200 20%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M0 14 C 200 2 320 18 520 10 C 720 2 900 18 1200 8 L1200 20 L0 20 Z%27 fill=%27%23000%27/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* ── 9 · Tabs: untere Trennlinie als Gradient-Fade ───────────── */
.ift-app.ift-skin-new .ift-tabs {
  position: relative;
  border-bottom: none;
}
.ift-app.ift-skin-new .ift-tabs::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--ift-border) 18%,
    var(--ift-border) 82%,
    transparent 100%);
  pointer-events: none;
}

/* ── 5 · Tabs: asymmetrische Oben-Ecken ──────────────────────── */
.ift-app.ift-skin-new .ift-tab-btn {
  border-radius: 14px 8px 0 0;
}

/* ── 1 · Slot-Karten: asymmetrischer Radius + Papier-Textur ───── */
.ift-app.ift-skin-new .ift-event-card {
  border-radius: var(--ift-skin-radius-card);
  background:
    radial-gradient(circle at 18% 12%,
      color-mix(in srgb, var(--ift-text) 4%, transparent) 0%, transparent 24%),
    radial-gradient(circle at 82% 78%,
      color-mix(in srgb, var(--ift-text) 3%, transparent) 0%, transparent 28%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--stage-color, var(--ift-accent)) 8%, var(--ift-card-bg)) 0%,
      var(--ift-card-bg) 60%);
}

/* ── 2 · Pills: organischer asymmetrischer Radius ────────────── */
.ift-app.ift-skin-new .ift-modal-stage,
.ift-app.ift-skin-new .ift-modal-time,
.ift-app.ift-skin-new .ift-modal-date,
.ift-app.ift-skin-new .ift-modal-showcase-pill,
.ift-app.ift-skin-new .ift-modal-social-pill,
.ift-app.ift-skin-new .ift-genre-pill,
.ift-app.ift-skin-new .ift-artist-card-pill,
.ift-app.ift-skin-new .ift-anmeldung-link {
  border-radius: var(--ift-skin-radius-pill);
}

/* ── 3 · Badges: weicher asymmetrischer Radius ───────────────── */
.ift-app.ift-skin-new .ift-slot-type-badge,
.ift-app.ift-skin-new .ift-zielgruppe-pill,
.ift-app.ift-skin-new .ift-artist-slot-b2b,
.ift-app.ift-skin-new .ift-event-date-badge {
  border-radius: var(--ift-skin-radius-badge);
}

/* ── 4 · Modale & Boxen: organische Oberkanten ───────────────── */
.ift-app.ift-skin-new .ift-modal,
.ift-app.ift-skin-new .ift-plan-modal,
.ift-app.ift-skin-new .ift-consent,
.ift-app.ift-skin-new .ift-onboarding,
.ift-app.ift-skin-new .ift-modal-friendplan,
.ift-app.ift-skin-new .ift-modal-alsoin,
.ift-app.ift-skin-new .ift-friend-legend {
  border-radius: var(--ift-skin-radius-box);
}
/* Modal sitzt am Bildschirmrand → nur Oberkanten organisch runden */
.ift-app.ift-skin-new .ift-modal {
  border-radius: 22px 18px 0 0;
}

/* ── 4 · SVG-Wave-Divider zwischen Modal-Bild und Body ───────── */
.ift-app.ift-skin-new .ift-modal-image {
  position: relative;
}
.ift-app.ift-skin-new .ift-modal-image::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 16px;
  background-color: var(--ift-skin-wave-fill);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 1200 32%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M0 20 C 180 4 360 28 600 16 C 840 4 1020 28 1200 14 L1200 32 L0 32 Z%27 fill=%27%23000%27/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 1200 32%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M0 20 C 180 4 360 28 600 16 C 840 4 1020 28 1200 14 L1200 32 L0 32 Z%27 fill=%27%23000%27/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  pointer-events: none;
}

/* ── 6 · Toasts & Plan-Bar: organische Pille + weicher Shadow ── */
.ift-app.ift-skin-new .ift-undo-toast,
.ift-app.ift-skin-new .ift-onboarding-toast,
.ift-app.ift-skin-new .ift-consent-toast {
  border-radius: var(--ift-skin-radius-pill);
  box-shadow: 0 10px 26px -6px rgba(0,0,0,0.42), 0 2px 8px rgba(0,0,0,0.28);
}
.ift-app.ift-skin-new .ift-plan-bar {
  box-shadow: 0 12px 30px -8px rgba(0,0,0,0.45), 0 3px 10px rgba(0,0,0,0.30);
}

/* ── 7 · Avatare: organische Blob-Maske statt perfektem Kreis ── */
.ift-app.ift-skin-new .ift-artist-card-photo,
.ift-app.ift-skin-new .ift-modal-b2b-photo {
  border-radius: 50%; /* Fallback für Browser ohne mask-Support */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27%3E%3Cpath fill=%27%23000%27 d=%27M50 3 C 70 3 88 14 94 34 C 100 53 96 74 80 87 C 64 100 38 100 22 88 C 5 75 0 53 6 33 C 13 13 30 3 50 3 Z%27/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27%3E%3Cpath fill=%27%23000%27 d=%27M50 3 C 70 3 88 14 94 34 C 100 53 96 74 80 87 C 64 100 38 100 22 88 C 5 75 0 53 6 33 C 13 13 30 3 50 3 Z%27/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* ════════════════════════════════════════════════════════════════
   ORGANISCHE FORMEN — LIGHT-VARIANTE
   Wave-/Blob-Füllfarben auf die hellen BG-Variablen zeigen lassen.
   ──────────────────────────────────────────────────────────────── */
.ift-app.ift-skin-new.ift-light .ift-header::after,
.ift-app.ift-skin-new.ift-light .ift-modal-image::after {
  background-color: var(--ift-surface);
}
.ift-app.ift-skin-new.ift-light {
  --ift-skin-wave-fill: var(--ift-surface);
}
.ift-app.ift-skin-new.ift-light .ift-undo-toast,
.ift-app.ift-skin-new.ift-light .ift-onboarding-toast,
.ift-app.ift-skin-new.ift-light .ift-consent-toast {
  box-shadow: 0 10px 26px -6px rgba(30,30,60,0.18), 0 2px 8px rgba(30,30,60,0.10);
}
.ift-app.ift-skin-new.ift-light .ift-plan-bar {
  box-shadow: 0 12px 30px -8px rgba(30,30,60,0.20), 0 3px 10px rgba(30,30,60,0.12);
}
/* Light: Slot-Karten-Papiertextur an helle Fläche anpassen */
.ift-app.ift-skin-new.ift-light .ift-event-card {
  border-radius: var(--ift-skin-radius-card);
  background:
    radial-gradient(circle at 18% 12%,
      color-mix(in srgb, var(--ift-text) 3%, transparent) 0%, transparent 24%),
    radial-gradient(circle at 82% 78%,
      color-mix(in srgb, var(--ift-text) 2%, transparent) 0%, transparent 28%),
    var(--ift-surface);
}

/* ── Bewegung respektieren: Blob-Drift ausschalten ───────────── */
@media (prefers-reduced-motion: reduce) {
  .ift-app.ift-skin-new::before {
    animation: none;
  }
}

/* ════════════════════════════════════════════════════════════════
   „Läuft jetzt"-Leiste (NowBar)
   Sitzt oberhalb von .ift-scroll-area, innerhalb .ift-timetable-wrapper.
   Horizontal scrollbar, ein Chip pro Bühne. Liest nur Daten — kein
   Einfluss auf Grid/Zeitausrichtung. Folge-Agenten (B/C/D): hier ist
   der erste Block im Wrapper, vor dem Grid.
   ════════════════════════════════════════════════════════════════ */
.ift-now-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding: 5px 10px;
  background: var(--ift-surface);
  border-bottom: 1px solid var(--ift-border);
}
/* Eingeklappt: nur die Label/Chevron-Zeile, kein Track */
.ift-now-bar--collapsed {
  padding-top: 6px;
  padding-bottom: 6px;
}
.ift-now-bar__label {
  flex-shrink: 0;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ift-accent);
  padding: 2px 4px 2px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.ift-now-bar__label:hover { color: var(--ift-text); }
.ift-now-bar__label:focus-visible { outline: 2px solid var(--ift-accent); outline-offset: 2px; border-radius: 4px; }
.ift-now-bar__chevron {
  font-size: 0.7rem;
  line-height: 1;
  opacity: 0.85;
}
.ift-now-bar__track {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: var(--ift-border) transparent;
  -webkit-overflow-scrolling: touch;
}
.ift-now-bar__track::-webkit-scrollbar { height: 5px; }
.ift-now-bar__track::-webkit-scrollbar-thumb { background: var(--ift-border); border-radius: 3px; }

.ift-now-bar__chip {
  flex-shrink: 0;
  min-width: 0;
  max-width: 340px;
  min-height: 36px; /* A11y: Label-Zeile schlank, Trefferfläche bleibt tap-bar */
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  text-align: left;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--ift-border);
  border-radius: 8px;
  color: var(--ift-text);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  font-family: inherit;
}
.ift-now-bar__chip:hover { background: rgba(255,255,255,0.07); border-color: var(--ift-accent); }
.ift-now-bar__chip:active { transform: translateY(1px); }
.ift-now-bar__chip:focus-visible { outline: 2px solid var(--ift-accent); outline-offset: 2px; }
.ift-now-bar__chip--live { border-color: var(--ift-accent); background: rgba(233,69,96,0.10); }
.ift-now-bar__chip--empty { cursor: default; opacity: 0.5; }
.ift-now-bar__chip--empty:hover { background: rgba(255,255,255,0.03); border-color: var(--ift-border); }

.ift-now-bar__stage {
  flex-shrink: 0;
  max-width: 90px;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ift-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ift-now-bar__stage:empty { display: none; }
.ift-now-bar__act {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.ift-now-bar__act--none { color: var(--ift-text-muted); }
.ift-now-bar__tag {
  flex-shrink: 0;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--ift-accent);
  color: #fff;
}
.ift-now-bar__name {
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ift-now-bar__next {
  flex-shrink: 1;
  font-size: 0.62rem;
  color: var(--ift-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ift-now-bar__next-link {
  color: var(--ift-accent);
  text-decoration: none;
  font-weight: 600;
}
.ift-now-bar__next-link:hover { text-decoration: underline; }
.ift-now-bar__next-link:focus-visible { outline: 2px solid var(--ift-accent); outline-offset: 2px; border-radius: 3px; }

/* ── Light-Mode ──────────────────────────────────────────────── */
.ift-light .ift-now-bar { background: var(--ift-surface); border-bottom-color: var(--ift-border); }
.ift-light .ift-now-bar__label:hover { color: var(--ift-text); }
.ift-light .ift-now-bar__chip { background: rgba(0,0,0,0.02); border-color: var(--ift-border); }
.ift-light .ift-now-bar__chip:hover { background: rgba(0,0,0,0.05); border-color: var(--ift-accent); }
.ift-light .ift-now-bar__chip--live { background: rgba(233,69,96,0.08); border-color: var(--ift-accent); }
.ift-light .ift-now-bar__chip--empty:hover { background: rgba(0,0,0,0.02); border-color: var(--ift-border); }

/* ── Neuer Skin: organische asymmetrische Pillen ─────────────── */
.ift-app.ift-skin-new .ift-now-bar__label { font-family: var(--ift-font-display); }
.ift-app.ift-skin-new .ift-now-bar__chip {
  border-radius: var(--ift-skin-radius-pill);
  box-shadow: var(--ift-skin-shadow-soft);
}
.ift-app.ift-skin-new .ift-now-bar__name { font-family: var(--ift-font-display); }
.ift-app.ift-skin-new .ift-now-bar__tag { border-radius: var(--ift-skin-radius-badge); }

/* ════════════════════════════════════════════════════════════════
   A11y: prefers-reduced-motion — globaler Stopp aller Animationen
   innerhalb der App (NowBar-Bounce, Fades, Slides, Scan, Flash,
   Blob-Drift etc.). JS-Smooth-Scroll bleibt davon unberührt.
   Die blob-spezifische Regel oben bleibt bestehen (harmlos redundant).
   ════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .ift-app *, .ift-app *::before, .ift-app *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}