/* Wrapper pro User/Gruppe */
.sceneTrackerGroup{
    position: relative;
    background: var(--st-bg);
    /* border: 1px solid var(--st-border); */
    border-radius: 14px;
    padding: 18px 18px 22px 18px;
    /* box-shadow: var(--st-shadow-soft); */
    overflow: hidden;
    margin-left: -5px;
}

/* Timeline (links) */
.sceneTrackerTimeline{
  position: absolute;
  left: 22px;
  top: 52px;              /* startet unter dem Header */
  bottom: 20px;
  width: 2px;
  background: linear-gradient(to bottom, rgba(0,0,0,.14), rgba(0,0,0,.06));
  border-radius: 999px;
}

/* Dot am Start */
.sceneTrackerDot{
  position: absolute;
  left: 16px;
  top: 66px;              /* Punkt unter dem Header */
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--st-dot);
  border: 2px solid rgba(0,0,0,.18);
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
}

/* Kopfzeile (User) */
.sceneTrackerHead{
background: var(--main);
    /* border: 1px solid rgba(0, 0, 0, .07); */
    /* border-radius: 10px; */
    padding: 10px 14px;
    margin: 0 0 14px 0;
    /* box-shadow: 0 10px 20px rgba(0, 0, 0, .08); */
    color: var(--light);
}

/* Username */
.sceneTrackerHead .sceneTrackerUser{
  font-weight: 800;
  letter-spacing: .3px;
  color: var(--st-text);
  font-size: 16px;
  text-transform: lowercase; /* wie im Screenshot */
}

/* Inhalt nach rechts "einrücken", damit Timeline Platz hat */
.sceneTrackerContent{
  margin-left: 34px; /* Platz für Linie + Dot */
}

/* große Szenen-Card */
.sceneTrackerCard{
    background: var(--eye);
    /* border: 1px solid rgba(0, 0, 0, .06); */
    /* border-radius: 14px; */
    padding: 18px 18px;
    min-height: 130px;
    /* box-shadow: var(--st-shadow); */
    /* transition: transform .18s ease, box-shadow .18s ease;
}



/* optional: damit dein {$SCENE_BIT} nicht “gequetscht” aussieht */
.sceneTrackerCard .sceneBitWrap{
  color: var(--st-text);
}

.sceneTrackerCard .sceneBitWrap .smalltext,
.sceneTrackerCard .sceneBitWrap small{
  color: var(--st-muted);
}

	
	
.sceneBit{
        background: var(--back);
        border: 1px solid rgba(0, 0, 0, .06);
        /* border-radius: 14px; */
        padding: 18px 22px;
        /* box-shadow: 0 8px 20px rgba(0, 0, 0, .08); */
        position: relative;
        display: flex;
        justify-content: space-between;
        gap: 20px;
}

/* ===== LINKE SEITE ===== */
.sceneLeft{
  flex: 1;
  min-width: 0;
}

/* Titel */
.sceneTitle{
         font-size: 20px;
        font-weight: 800;
        line-height: 1.1;
        color: #3b342f;
        margin-bottom: 6px;
        font-family: var(--headschrift);
        text-transform: lowercase;
        letter-spacing: -1px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 652px;

    /* ✨ Ellipsis */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Meta (Datum + Ort) */
.sceneMeta{
font-size: 13px;
        color: var(--schrift);
        margin-bottom: 10px;
}

.sceneMeta .dot{
  margin: 0 10px;
}

/* Partner */
.scenePartner{
        display: inline-block;
        padding: 6px 14px;
        background: var(--eye);
        /* border-radius: 999px; */
        font-weight: 600;
        font-size: 13px;
        color: var(--schrift);
}

/* ===== RECHTE SEITE ===== */
.sceneRight{
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
  min-width: 230px;
}

/* Badges rechts */
.sceneBadge{
background: var(--eye);
        /* border-radius: 999px; */
        padding: 8px 16px;
        font-size: 13px;
        font-weight: 600;
        color: var(--dark);
        /* white-space: nowrap; */
        /* box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08); */
        min-width: 231px;
        height: 22px;
        padding-top: 11px;
}

/* "du bist dran" badge */
.sceneNext{
        align-self: flex-end;
        /* background: #d5b180; */
        color: var(--dark);
        font-weight: 700;
        font-size: 16px;
        padding: 5px 12px;
        /* border-radius: 999px; */
        /* margin-top: 2px;
}